/* ============================================================================
   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) {

    /* Backdrop removed per user feedback — no dimming when menu is open.
       The panel itself has an opaque white background so the page content
       only shows where it's not covered. Tap-outside-to-close is handled
       by the small JS snippet injected into each page (see fixup-may30.js
       block at the bottom of every HTML file). */

    /* 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 — Fixed header sitewide (pinned at top at all times).

   Originally tried position: sticky, but my FIX 4 sets
   `html, body { overflow-x: hidden }` — a known iOS Safari quirk that
   silently breaks position: sticky on descendant elements (sticky needs
   a scrollable ancestor without overflow:hidden). position: fixed is
   immune to ancestor overflow rules, so it works everywhere.

   Inconsistency this fixes: some pages had `header { position: fixed }`,
   some had `nav { position: fixed }`, some (montbeau-eyremount,
   ambleside-palace) had neither. Now uniform.

   Body gets padding-top to compensate for the fixed header taking the
   top ~110px out of normal flow.
   ---------------------------------------------------------------------------- */
body > header,
body > nav,
header:first-of-type {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

body {
    padding-top: 110px;
}
@media (max-width: 980px) {
    body { padding-top: 95px; }
}
@media (max-width: 600px) {
    body { padding-top: 75px; }
}