/*
Theme Name: Verdure Interiors
Theme URI: https://prodhgyogiki.com
Author: Prodhgyogiki
Description: Custom modern one-page interior design theme styled with light green and soft orange accents.
Version: 1.1
Text Domain: verdure-interiors
*/

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root {
    --primary-green: #2C4A3E;
    --light-green: #D4E2D4;
    --soft-orange: #E8A87C;
    --light-bg: #F9FBF9;
    --text-dark: #333333;
}

html {
    scroll-behavior: smooth !important;
}

body, html, button, input, textarea, select {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    margin: 0;
    padding: 0;
    color: var(--text-dark);
    background-color: var(--light-bg);
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

/* =================================================
   1. HEADER & NAVIGATION STYLING (Responsive)
   ================================================= */
/* =================================================
   FIXED HEADER & CONTENT OVERLAP RESOLUTION
   ================================================= */

header.site-header, 
.site-header {
    /*display: flex !important;*/
    /*flex-wrap: wrap !important;*/
    /*justify-content: space-between !important;*/
    /*align-items: center !important;*/
    /*padding: 15px 30px !important;*/
    /*background-color: #fff !important;*/
    /*box-shadow: 0 2px 4px rgba(0,0,0,0.05);*/
    /*width: 100% !important;*/
    position: relative !important; /* Changed from sticky to relative to stop overlapping */
    /*z-index: 1000;*/
    /*box-sizing: border-box !important;*/
    
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    background-color: #ffffff !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05) !important;
}

/* Logo Sizing */
.site-logo {
    flex-shrink: 0;
}

.site-logo img {
    max-height: 45px !important;
    width: auto !important;
    display: block;
}

.site-logo a {
    text-decoration: none !important;
    display: block;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--primary-green);
}

/* Navigation Menu Layout & Wrapping */
.site-header nav,
.site-navigation,
.main-navigation {
    display: flex !important;
    align-items: center !important;
}

.site-header nav ul, 
.site-header div ul, 
header nav ul, 
header ul,
.site-navigation ul {
    list-style: none !important;
    list-style-type: none !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important; /* Ensures items drop to the next line instead of overflowing */
    gap: 20px 25px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
}

.site-header nav li, 
.site-header div li, 
header nav li, 
header li,
.site-navigation li {
    list-style: none !important;
    list-style-type: none !important;
    background: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important;
}

.site-header nav li::before, 
header nav li::before,
.site-navigation li::before {
    content: none !important;
    display: none !important;
}

/* Navigation Links */
.site-header nav a, 
.site-navigation a,
.main-navigation a,
.site-header a.menu-link {
    text-decoration: none !important;
    color: var(--primary-green) !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    transition: color 0.3s ease;
    background: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

.site-header nav a:hover,
.site-navigation a:hover {
    color: var(--soft-orange) !important;
}

/* Responsive breakpoint for smaller screens */
@media screen and (max-width: 768px) {
    header.site-header, 
    .site-header {
        flex-direction: column !important;
        gap: 15px !important;
        padding: 15px 10px !important;
        text-align: center !important;
    }

    .site-header nav ul, 
    .site-header div ul, 
    header nav ul, 
    header ul,
    .site-navigation ul {
        justify-content: center !important;
        gap: 10px 15px !important;
    }
}

/* =================================================
   2. GENERAL SECTIONS & LAYOUT (Responsive Grids)
   ================================================= */
section {
    padding: 80px 20px;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
}

/* Hero Section */
.hero-section {
    background: linear-gradient(rgba(44, 74, 62, 0.4), rgba(44, 74, 62, 0.4)), url('hero-bg.jpg') center/cover no-repeat;
    color: #ffffff;
    text-align: center;
    padding: 120px 20px;
}

.hero-section h1 {
    font-size: 3rem;
    margin-bottom: 20px;
}

.btn {
    background-color: var(--soft-orange);
    color: #fff;
    padding: 12px 30px;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
    display: inline-block;
    transition: opacity 0.3s ease;
}

.btn:hover {
    opacity: 0.9;
}

/* About Section */
.about-section {
    background-color: var(--light-green);
}

/* Workflow Section */
.workflow-grid {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    text-align: center;
    margin-top: 40px;
}

.workflow-step {
    flex: 1;
    background: #fff;
    padding: 25px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

/* Projects Grid */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 30px;
}

.project-item img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 6px;
}

/* Contact Section */
.contact-section {
    background-color: #ffffff;
}

/* =================================================
   3. CONTACT FORM FIELDS STYLING (Contact Form 7)
   ================================================= */
.contact-form-wrapper input[type="text"],
.contact-form-wrapper input[type="email"],
.contact-form-wrapper input[type="tel"],
.contact-form-wrapper textarea,
.wpcf7-form-control input:not([type="submit"]),
.wpcf7-form-control textarea {
    width: 100% !important;
    padding: 12px 16px !important;
    border: 1px solid #ddd !important;
    border-radius: 6px !important;
    background-color: #fff !important;
    font-size: 1rem !important;
    color: #333 !important;
    margin-bottom: 20px !important;
    box-sizing: border-box !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.contact-form-wrapper input:focus,
.contact-form-wrapper textarea:focus {
    border-color: var(--primary-green) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(44, 74, 62, 0.1) !important;
}

.contact-form-wrapper input[type="submit"],
.wpcf7-submit {
    background-color: var(--primary-green) !important;
    color: #fff !important;
    padding: 14px 28px !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background-color 0.3s ease;
    display: inline-block;
}

.contact-form-wrapper input[type="submit"]:hover,
.wpcf7-submit:hover {
    background-color: #1a2c25 !important;
}

/* =================================================
   4. FOOTER & SOCIAL ICONS STYLING
   ================================================= */
.site-footer {
    background-color: var(--primary-green);
    color: #fff;
    padding: 40px 20px;
    text-align: center;
}

.footer-social-icons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 15px;
}

.footer-social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-radius: 50%;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.footer-social-icons a:hover {
    background-color: #fff;
    color: var(--primary-green);
}

/* =================================================
   RESPONSIVE MEDIA QUERIES (Mobile & Tablets)
   ================================================= */

/* Tablets & Medium Screens (Max Width: 992px) */
@media screen and (max-width: 992px) {
    header.site-header, 
    .site-header {
        padding: 15px 20px !important;
        flex-direction: column !important;
        gap: 12px !important;
        text-align: center !important;
    }

    .site-header nav ul, 
    .site-header div ul, 
    header nav ul, 
    header ul,
    .site-navigation ul {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 12px 20px !important;
    }

    .site-header nav a, 
    .site-navigation a,
    .main-navigation a {
        font-size: 0.9rem !important;
    }

    .projects-grid {
        grid-template-columns: repeat(2, 1fr)[cite: 1];
    }

    .workflow-grid {
        flex-direction: column[cite: 1];
    }
}

/* Mobile Phones (Max Width: 768px) */
/* =================================================
   GLOBAL MOBILE OVERRIDE (Fixes horizontal scroll & squeezing)
   ================================================= */
@media screen and (max-width: 768px) {
    /* Prevent any element from forcing horizontal overflow */
    html, body {
        width: 100% !important;
        overflow-x: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Force all containers to be fluid on mobile */
    .container, 
    .nav-container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        box-sizing: border-box !important;
    }

    /* Force header to stack vertically and cleanly fit screen */
    header.site-header, 
    .site-header {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 15px 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .site-logo {
        text-align: center !important;
        margin-bottom: 5px !important;
    }

    /* Wrap navigation items nicely in the center */
    .site-header nav ul, 
    .site-header div ul, 
    header nav ul, 
    header ul,
    .site-navigation ul {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px 12px !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    .site-header nav li, 
    .site-header div li, 
    header nav li, 
    header li,
    .site-navigation li {
        display: inline-block !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .site-header nav a, 
    .site-navigation a,
    .main-navigation a {
        font-size: 0.85rem !important;
    }

    /* Fix grids so they never squeeze or overflow */
    .projects-grid,
    .workflow-grid {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 15px !important;
    }

    section {
        padding: 40px 15px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* =================================================
   FINAL MOBILE HAMBURGER TOGGLE FIX
   ================================================= */
.menu-toggle {
    display: none !important;
}

@media screen and (max-width: 768px) {
    /* Header layout: Logo Left, Toggle Bar Right */
    header.site-header, 
    .site-header {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 15px 20px !important;
        position: relative !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Show hamburger button */
    .menu-toggle {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        width: 28px !important;
        height: 20px !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
        padding: 0 !important;
        z-index: 1001 !important;
    }

    .menu-toggle span {
        display: block !important;
        width: 100% !important;
        height: 3px !important;
        background-color: var(--primary-green, #2C4A3E) !important;
        border-radius: 2px !important;
        transition: all 0.3s ease !important;
    }

    /* Force hide navigation by default */
    body .site-navigation,
    header .site-navigation,
    .site-header .site-navigation {
        display: none !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        width: 100% !important;
        background-color: #fff !important;
        box-shadow: 0 4px 10px rgba(0,0,0,0.15) !important;
        padding: 20px 0 !important;
        z-index: 1000 !important;
    }

    /* Show navigation only when 'active' class is toggled */
    body .site-navigation.active,
    header .site-navigation.active,
    .site-header .site-navigation.active {
        display: block !important;
    }

    /* Stack list items vertically */
    .site-navigation ul {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 15px !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    .site-navigation li {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        list-style: none !important;
    }

    .site-navigation a {
        font-size: 1rem !important;
        display: block !important;
        padding: 5px 0 !important;
    }

    /* Hamburger to 'X' transformation */
    .menu-toggle.active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg) !important;
    }
    .menu-toggle.active span:nth-child(2) {
        opacity: 0 !important;
    }
    .menu-toggle.active span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg) !important;
    }
}


/* =================================================
   2. TESTIMONIALS RESPONSIVE FIX
   ================================================= */
/* Target whatever container holds your testimonial cards */
.testimonials-grid,
.testimonial-container,
.testimonials-section .grid,
section.testimonials {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Ensure individual testimonial cards stack and scale nicely on mobile */
.testimonial-card,
.testimonials-grid > div,
.testimonial-container > div {
    flex: 1 1 300px !important;
    max-width: 400px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

@media screen and (max-width: 768px) {
    .testimonials-grid,
    .testimonial-container,
    .testimonials-section .grid,
    section.testimonials {
        flex-direction: column !important;
        align-items: center !important;
        padding: 0 15px !important;
    }

    .testimonial-card,
    .testimonials-grid > div,
    .testimonial-container > div {
        max-width: 100% !important;
    }
}