/* ============================================================================
   Eurohouse — Post-deploy visual fix-ups (2026-05-30)
   ----------------------------------------------------------------------------
   Loaded as the LAST stylesheet on every page, so its rules override the inline
   styles in each HTML file's <style> block. Keeps the diff scope small (one
   file) and makes future tweaks a single edit instead of 87.
   ============================================================================ */


/* ----------------------------------------------------------------------------
   FIX 1 — Homepage "5-Star Rated" badge spacing under header.

   Header is now sticky-in-flow (FIX 6), so we no longer need a big margin
   to clear a fixed/overlapping header. Just enough gap for visual breathing.
   ---------------------------------------------------------------------------- */
.hero {
    margin-top: 1rem;
}
@media (max-width: 980px) {
    .hero {
        margin-top: 0.75rem;
    }
}
@media (max-width: 600px) {
    .hero {
        margin-top: 0.5rem;
    }
}


/* ----------------------------------------------------------------------------
   FIX 2 — Mobile menu polish.

   The slide-in panel works but:
     (a) no dark backdrop, so page content leaks through visually
     (b) items hug the top edge of the panel awkwardly behind the header
     (c) close button (X) shows on the wrong side because the hamburger
         doesn't reposition when the menu opens
   ---------------------------------------------------------------------------- */

@media (max-width: 980px) {

    /* Dark backdrop behind the menu panel (covers leak-through).
       pointer-events: none is CRITICAL — without it the backdrop pseudo-element
       intercepts touch events on iOS Safari even though it has lower z-index
       than the panel, making the menu items and X close button unclickable. */
    body.menu-open::before {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 1399;
        pointer-events: none;
        animation: euh-fade-in 0.25s ease;
    }
    @keyframes euh-fade-in {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    /* Menu panel: more breathing room at the top so items sit below the
       header area, and start from the top (not vertically centered). */
    .nav-links {
        padding-top: 5.5rem !important;
        justify-content: flex-start !important;
    }

    /* Each menu item: clean padding, full-width tap target, clear separator. */
    .nav-links > li > a {
        padding: 1rem 1.75rem !important;
        font-size: 1.05rem !important;
        text-align: left !important;
    }

    /* Center the orange CTA button at the bottom of the panel with margin. */
    .nav-links a.nav-cta {
        margin: 1.5rem 1.75rem 0 !important;
        text-align: center !important;
        padding: 0.85rem 1.5rem !important;
    }

    /* Dropdown sub-items inside the panel: lighter background, indented. */
    .nav-dropdown {
        background: #faf7f1 !important;
    }
    .nav-dropdown a {
        padding: 0.75rem 2.75rem !important;
        font-size: 0.95rem !important;
        color: #555 !important;
    }
    .nav-dropdown a:hover {
        background: #f0e9da !important;
        color: #d97643 !important;
    }

    /* Hamburger button: keep visible above the open panel on the right side
       so the user can tap to close. Move it to fixed positioning when the
       menu is open so it doesn't get covered. */
    body.menu-open .hamburger {
        position: fixed !important;
        top: 1rem !important;
        right: 1.25rem !important;
        z-index: 1600 !important;
    }
}


/* ----------------------------------------------------------------------------
   FIX 3 — Minor polish: utility nav doesn't bunch on narrow viewports.
   ---------------------------------------------------------------------------- */
@media (max-width: 480px) {
    .utility-nav-inner {
        flex-direction: column;
        gap: 0.25rem !important;
        padding: 0.4rem 0.75rem !important;
    }
    .utility-links,
    .utility-contact {
        gap: 0.9rem !important;
        font-size: 0.75rem !important;
    }
}


/* ----------------------------------------------------------------------------
   FIX 4 — Make sure the page doesn't scroll horizontally on any viewport.
   ---------------------------------------------------------------------------- */
html, body {
    overflow-x: hidden;
}


/* ----------------------------------------------------------------------------
   FIX 5 — Mobile menu drawer breaks on very narrow viewports (<769px).

   Cause: each page's inline <style> has TWO competing media queries for
   .nav-links:
     • @media (max-width: 768px) { .nav-links { display: none } }
     • @media (max-width: 980px) { .nav-links { position: fixed;
                                                transform: translateX(100%);
                                                ... drawer pattern ... } }
   At ≤768px both match. The display:none from the 768px block either
   kills the drawer entirely OR collapses it into the document flow
   without position:fixed, producing the "menu always visible / CTA
   clipped on the right" symptom on phones. The 769-980px tablet range
   works fine because only the drawer block matches there.

   Fix: force the drawer pattern at ALL narrow widths and re-assert the
   closed-by-default state so .nav-links.open is the only path to a
   visible menu.
   ---------------------------------------------------------------------------- */
@media (max-width: 980px) {
    .nav-links {
        display: flex !important;
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: auto !important;
        width: min(85vw, 320px) !important;
        max-width: 85vw !important;
        background: #ffffff !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        overflow-y: auto !important;
        transform: translateX(100%);
        transition: transform 0.3s ease !important;
        box-shadow: -8px 0 24px rgba(0,0,0,0.12) !important;
        z-index: 1400 !important;
    }
    .nav-links.open {
        transform: translateX(0) !important;
    }
}


/* ----------------------------------------------------------------------------
   FIX 6 — Sticky header sitewide.

   Inconsistency observed across the site: some pages had
   `header { position: fixed }` (index.html, water-damage, etc.), some had
   `nav { position: fixed }` (butterfly-residence, etc.), and some project
   pages (montbeau-eyremount, ambleside-palace) had NEITHER — so the nav
   would scroll away on those pages while staying pinned on others.

   Fix: force position: sticky on the top-level header OR top-level nav.
   sticky keeps the element in flow (so no body padding-top juggling needed
   on the 87 pages that already have their own top spacing), and sticks to
   the top once the user scrolls past it. Background is solid white so the
   page content doesn't bleed through when stuck.
   ---------------------------------------------------------------------------- */
body > header,
body > nav,
header:first-of-type {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}