/* ==========================================================================
   1. GLOBAL FIX: STOPS MOBILE LEFT/RIGHT SCROLLING (THE FIXED BUG)
   ========================================================================== */
html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* ==========================================================================
   2. PARALLAX EFFECT & SECTIONS
   ========================================================================== */
.parallax-bg {
    background-attachment: fixed !important;
    background-position: center !important;
    background-size: cover !important;
}

/* Strips the background color from the master container */
.transparent-row,
.transparent-row .wp-block-columns,
.transparent-row .wp-block-column {
    background: transparent !important;
    background-color: transparent !important;
}

/* Creates the floating inner card with the gradient */
.floating-testimonial-card {
    background: linear-gradient(180deg, #102e4c 0%, #001224 100%) !important;
    border-radius: 40px !important;
    /* Sets the tight sizing to match the screenshot */
    max-width: 800px !important;
    width: 100% !important;
    /* Centers the card perfectly inside the main section */
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 40px !important;
    /* Adds the inner padding to cushion the text */
    padding: 40px 30px !important;
    /* Gives it a subtle shadow to separate it from the background */
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.5) !important;
}

/* ==========================================================================
   3. QUICK LEAD BAR / WPFORMS FULL WIDTH BAR
   ========================================================================== */
/* 1. Force the master form layout to span the absolute full width of the green section */
.quick-lead-bar form,
.quick-lead-bar .wpforms-form {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 35px !important; /* Massive spacing to stop the fields from looking cramped */
    width: 100% !important;
    max-width: 100% !important; /* Spreads the form out from edge to edge */
    padding: 25px 40px !important; /* Adds generous padding on the left and right sides */
    box-sizing: border-box !important;
    font-family: 'Montserrat', sans-serif !important;
}

/* 2. Overrides the WPForms inner container to use 100% width */
.quick-lead-bar .wpforms-field-container {
    display: flex !important;
    flex-direction: row !important;
    flex: 3.5 !important; /* Gives the text fields the vast majority of the bar's width */
    width: 100% !important;
    max-width: 100% !important;
    gap: 35px !important;
    margin: 0 !important;
    float: none !important;
}

/* 3. Forces all three individual text field containers to expand equally */
.quick-lead-bar .wpforms-field,
.quick-lead-bar div.wpforms-field,
.quick-lead-bar .wpforms-one-fourth,
.quick-lead-bar .wpforms-one-third {
    flex: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    clear: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 4. Expands the physical white text boxes to be longer and taller */
.quick-lead-bar input[type="text"],
.quick-lead-bar input[type="tel"],
.quick-lead-bar .wpforms-field input,
.quick-lead-bar div.wpforms-field input {
    display: block !important;
    width: 100% !important; /* Drives the box wide open */
    height: 60px !important;
    border-radius: 12px !important;
    border: 2px solid #ffffff !important;
    padding: 15px 25px !important; /* Adds deep padding so typed text isn't cramped */
    font-size: 18px !important;
    font-family: 'Montserrat', sans-serif !important;
    box-sizing: border-box !important;
}

/* 5. Applies Montserrat to the bold white labels */
.quick-lead-bar label,
.quick-lead-bar .wpforms-field-label {
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important; /* Sharp, heavy font weight */
    font-size: 18px !important; /* Slightly larger for clear reading */
    margin-bottom: 12px !important;
    display: block !important;
    letter-spacing: 0.5px !important;
}

/* 6. Makes the Deep Navy Submit Button wider and applies Montserrat */
.quick-lead-bar .wpforms-submit-container {
    flex: 1 !important; /* Gives the button a wide, substantial anchor on the right */
    min-width: 320px !important; /* Significantly lengthens the button */
    margin: 0 !important;
    padding: 0 !important;
}

.quick-lead-bar button[type="submit"],
.quick-lead-bar .wpforms-submit {
    display: block !important;
    width: 100% !important;
    height: 60px !important;
    background-color: #002147 !important;
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 20px !important; /* Clean, clear button text size */
    font-weight: 700 !important;
    border-radius: 12px !important;
    border: none !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    letter-spacing: 0.5px !important;
}

/* 7. Clean mobile view behavior so it stays perfect on smartphones */
@media (max-width: 1024px) {
    .quick-lead-bar form,
    .quick-lead-bar .wpforms-form,
    .quick-lead-bar .wpforms-field-container {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 20px !important;
        padding: 20px 15px !important;
    }
    .quick-lead-bar .wpforms-submit-container {
        max-width: 100% !important;
        min-width: 100% !important;
    }
}

/* ==========================================================================
   4. FOOTER LAYOUT FIX
   ========================================================================== */
/* Scale your footer logo back up to a normal, professional size */
footer .wp-block-site-logo img {
    width: 180px !important; /* Adjust this to make it larger or smaller */
    height: auto !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin-bottom: 15px !important; /* Pushes the company name text down slightly */
}

/* Ensure footer columns un-bunch and spread out evenly */
footer .wp-block-columns {
    gap: 40px !important; /* Adds clean breathing room between your link categories */
}

/* MOBILE FOOTER: Stack columns nicely on phones so they don't smash sideways */
@media (max-width: 781px) {
    footer .wp-block-columns {
        flex-direction: column !important;
        gap: 25px !important;
        text-align: center;
    }
    footer .wp-block-site-logo {
        display: flex;
        justify-content: center;
    }
}

/* ==========================================================================
   5. WPFORMS TIGHTENING & ROW ALIGNMENT FIX
   ========================================================================== */
/* 1. Eliminate massive gaps between the rows */
.wpforms-container .wpforms-field {
    padding-top: 0 !important;
    padding-bottom: 12px !important; /* Drops the vertical spacing down significantly */
    margin-bottom: 0 !important;
}

/* 2. Force input fields (especially City/State/Zip) to fill their entire column container */
.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="tel"],
.wpforms-container select {
    width: 100% !important; /* Prevents fields from shrinking into squares */
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* 3. Give the form fields a crisp, high-end look that matches the header buttons */
.wpforms-container .wpforms-field-label {
    font-weight: 600 !important;
    font-size: 14px !important;
    color: #1e293b !important; /* Clean slate dark color */
    margin-bottom: 6px !important;
}

/* ==========================================================================
   6. FIX NAVIGATION DROPDOWN WIDTH & TEXT WRAPPING
   ========================================================================== */
/* Forces the submenu dropdown container to be wide enough for single-line text */
.wp-block-navigation .wp-block-navigation__submenu-container {
    min-width: 240px !important; /* Prevents text from stepping on itself */
    width: max-content !important; /* Dynamically sizes to the longest link text */
    padding: 15px !important;
}

/* Ensures the individual links inside stay on one line and look clean */
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item a {
    white-space: nowrap !important; /* Absolutely forbids the text from breaking into 2 lines */
    text-decoration: none !important; /* Wipes out those ugly underlines */
    padding: 8px 10px !important;
    display: block !important;
}

/* ==========================================================================
   7. SUBMENU ITEM HOVER HIGHLIGHT
   ========================================================================== */
/* Adds a clean background tint and shifts text color when hovering over a link */
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item a:hover {
    background-color: #f1f5f9 !important; /* Soft, ultra-light slate gray background */
    color: #0f172a !important; /* Crisp, high-contrast dark slate text */
    border-radius: 4px !important; /* Softens the corners of the highlight box */
    transition: background-color 0.2s ease, color 0.2s ease !important; /* Makes the transition smooth */
}

/* ==========================================================================
   8. HEADER IMPROVEMENTS - CARD LOGO STYLE RESTORED
   ========================================================================== */
/* DESKTOP: Bigger logo on left inside a white card frame */
@media (min-width: 782px) {
    header .wp-block-site-logo {
        position: absolute !important;
        left: 30px !important;
        top: 15px !important;
        z-index: 9999 !important;
    }
    header .wp-block-site-logo img {
        width: 240px !important; /* Bigger logo */
        height: auto !important;
        background-color: #ffffff !important;
        border-radius: 12px !important;
        border: 2px solid #e2e8f0 !important;
        padding: 10px 18px !important;
        box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.12) !important;
    }
}

/* MOBILE: Bigger centered logo + fixed phone number */
@media (max-width: 781px) {
    /* Bigger centered logo */
    header .wp-block-site-logo {
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
        display: flex !important;
        justify-content: center !important;
        margin: 15px 0 10px 0 !important;
    }
    header .wp-block-site-logo img {
        width: 180px !important; /* Bigger on mobile */
        height: auto !important;
    }
    /* Fix phone number breaking */
    .header-top-utility-bar .phone-number,
    .header-top-utility-bar a[href^="tel"] {
        white-space: nowrap !important;
        font-size: 1.1rem !important;
    }
    /* Clean up top utility bar */
    header .header-top-utility-bar {
        flex-direction: row !important;
        justify-content: center !important;
        gap: 20px !important;
        text-align: center !important;
        flex-wrap: wrap !important;
    }
}

/* ==========================================================================
   9. ABOUT US SECTION ACCORDION WORKAROUND
   ========================================================================== */
/* Fix About Us Section White Space without bleeding into other structures */
.about-us-section,
.about-section,
.wp-block-group:has(.about-us),
.wp-block-column:has(h2:contains("About Us")),
section:has(#about-us) {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Target the dark blue content box specifically */
.about-us-section .wp-block-group__inner-container,
.about-section .wp-block-group__inner-container {
    max-width: 100% !important;
    width: 100% !important;
    padding: 60px 40px !important;
}
/* ==========================================================================
   ADVANCED FORCE-PARALLAX FOR MOBILE DEVICES
   ========================================================================== */
@media (max-width: 781px) {
    /* 1. Reset the standard background container so it doesn't conflict */
    .parallax-bg,
    .wp-block-cover.has-parallax {
        background-attachment: scroll !important;
        position: relative !important;
        background-image: none !important; /* Temporarily hides standard background */
        overflow: hidden !important;
        z-index: 1 !important;
    }

    /* 2. Inject a hardware-accelerated background layer fixed to the screen viewport */
    .parallax-bg::before,
    .wp-block-cover.has-parallax::before {
        content: "" !important;
        position: fixed !important; /* Physically locks the image to the phone screen */
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        
        /* Forces the theme to inherit your exact editor background image */
        background-image: inherit !important; 
        background-position: center center !important;
        background-size: cover !important;
        background-repeat: no-repeat !important;
        
        /* Pushes the image safely behind your text card links */
        z-index: -1 !important; 
        
        /* Crucial: Uses the phone's graphics chip instead of the processor to prevent lag */
        transform: translate3d(0,0,0);
        will-change: transform;
    }
}