/* =============================================================================
   Casa Graziella — Fullscreen Mobile Navigation Overlay
   Mobile only (<=768px). Desktop nav is untouched.

   The overlay is rendered as a sibling of <header> in header.php: .site-header
   has backdrop-filter, which makes it a containing block for position:fixed
   descendants. Nesting this inside the header collapses it to the header box.
   ============================================================================= */

/* Hidden entirely on desktop — the markup exists but never renders. */
.cg-mnav {
    display: none;
}

@media (max-width: 768px) {

    .cg-mnav {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;   /* fallback for browsers without dvh */
        height: 100dvh;
        z-index: 1200;   /* above .site-header (1000) and .cg-qbar (1150) */
        background: var(--cg-black);
        opacity: 0;
        transition: opacity 0.28s ease;
        /* Notch / rounded-corner insets (landscape especially) */
        padding-left: env(safe-area-inset-left, 0px);
        padding-right: env(safe-area-inset-right, 0px);
    }

    /* Beats the display:flex above — [hidden] must always win. */
    .cg-mnav[hidden] {
        display: none;
    }

    .cg-mnav.is-open {
        opacity: 1;
    }

    /* --- Top bar: logo left, close right ---------------------------------- */
    .cg-mnav__bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        flex: 0 0 auto;
        height: 60px;                                    /* matches .header-inner */
        padding: 0 1rem;
        padding-top: env(safe-area-inset-top, 0px);
        box-sizing: content-box;
        border-bottom: 1px solid var(--cg-border);
    }

    .cg-mnav__logo {
        display: flex;
        align-items: center;
        gap: 0.65rem;
        text-decoration: none;
        min-height: 44px;
    }

    .cg-mnav__logo img {
        height: 46px;
        width: auto;
    }

    .cg-mnav__logo-text {
        font-family: var(--cg-font-heading);
        font-style: italic;
        font-size: 1.1rem;
        line-height: 1.2;
        color: var(--cg-cream);
        letter-spacing: 0.02em;
    }

    .cg-mnav__close {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 44px;
        height: 44px;
        margin-right: -0.5rem;   /* optical alignment with the grid edge */
        padding: 0;
        background: none;
        border: none;
        color: var(--cg-cream);
        cursor: pointer;
        transition: color var(--cg-transition);
    }

    .cg-mnav__close:hover,
    .cg-mnav__close:focus-visible {
        color: var(--cg-gold);
    }

    /* --- Scrollable, vertically centred body ------------------------------ */
    .cg-mnav__body {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    /* margin:auto centres without clipping the top when content overflows,
       which justify-content:center would do. */
    .cg-mnav__inner {
        width: 100%;
        margin: auto;
        padding: 1.5rem 1.5rem calc(2rem + env(safe-area-inset-bottom, 0px));
        transform: translateY(8px);
        transition: transform 0.28s ease;
    }

    .cg-mnav.is-open .cg-mnav__inner {
        transform: none;
    }

    /* --- Top-level list --------------------------------------------------- */
    .cg-mnav__list {
        list-style: none;
        margin: 0;
        padding: 0;
        text-align: center;
    }

    .cg-mnav__item + .cg-mnav__item {
        border-top: 1px solid rgba(201, 169, 110, 0.12);
    }

    .cg-mnav__link,
    .cg-mnav__toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        width: 100%;
        min-height: 52px;
        padding: 0.55rem 0.5rem;
        margin: 0;
        background: none;
        border: none;
        font-family: var(--cg-font-heading);
        font-style: italic;
        font-weight: 700;
        font-size: clamp(1.5rem, 6.5vw, 2rem);
        line-height: 1.2;
        letter-spacing: 0.01em;
        color: var(--cg-cream);
        text-decoration: none;
        text-align: center;
        cursor: pointer;
        transition: color var(--cg-transition);
    }

    .cg-mnav__link:hover,
    .cg-mnav__toggle:hover,
    .cg-mnav__link:focus-visible,
    .cg-mnav__toggle:focus-visible {
        color: var(--cg-gold);
    }

    .cg-mnav__link[aria-current="page"] {
        color: var(--cg-gold);
    }

    /* --- Accordion -------------------------------------------------------- */
    .cg-mnav__chevron {
        flex-shrink: 0;
        transition: transform 0.25s ease;
    }

    .cg-mnav__toggle[aria-expanded="true"] {
        color: var(--cg-gold);
    }

    .cg-mnav__toggle[aria-expanded="true"] .cg-mnav__chevron {
        transform: rotate(180deg);
    }

    .cg-mnav__sub {
        list-style: none;
        margin: 0 0 0.75rem;
        padding: 0.25rem 0 0.5rem;
    }

    .cg-mnav__sub[hidden] {
        display: none;
    }

    .cg-mnav__sublink {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        padding: 0.4rem 1.5rem;
        font-family: var(--cg-font-heading);
        font-size: 1.05rem;
        line-height: 1.3;
        color: var(--cg-muted);
        text-decoration: none;
        transition: color var(--cg-transition);
    }

    .cg-mnav__sublink:hover,
    .cg-mnav__sublink:focus-visible,
    .cg-mnav__sublink[aria-current="page"] {
        color: var(--cg-gold-lt);
    }

    .cg-mnav__sublink--all {
        font-style: italic;
        color: var(--cg-cream);
    }

    /* --- Gold CTA --------------------------------------------------------- */
    .cg-mnav__cta-wrap {
        margin-top: 1.75rem;
        text-align: center;
    }

    .cg-mnav__cta {
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* --- Language switcher ------------------------------------------------ */
    .cg-mnav__lang {
        display: flex;
        justify-content: center;
        margin-top: 1.5rem;
    }

    .cg-mnav__lang .lang-switcher {
        gap: 0.5rem;
    }

    .cg-mnav__lang .lang-btn {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 0.8rem;
    }

    /* --- Focus visibility ------------------------------------------------- */
    .cg-mnav a:focus-visible,
    .cg-mnav button:focus-visible {
        outline: 2px solid var(--cg-gold);
        outline-offset: 3px;
    }

    /* --- Landscape phones: tighten so the list still fits ----------------- */
    @media (max-height: 480px) {
        .cg-mnav__link,
        .cg-mnav__toggle {
            min-height: 44px;
            font-size: clamp(1.15rem, 5vw, 1.5rem);
            padding: 0.3rem 0.5rem;
        }

        .cg-mnav__sublink {
            min-height: 40px;
            font-size: 0.95rem;
        }

        .cg-mnav__inner {
            padding-top: 0.75rem;
        }

        .cg-mnav__cta-wrap {
            margin-top: 1rem;
        }

        .cg-mnav__lang {
            margin-top: 0.75rem;
        }
    }
}

/* --- Reduced motion: fade only, no slide, no chevron spin ----------------- */
@media (prefers-reduced-motion: reduce) {
    .cg-mnav__inner {
        transform: none !important;
        transition: none !important;
    }

    .cg-mnav__chevron {
        transition: none !important;
    }
}

/* Scroll lock support — see js/mobile-nav.js. The body is pinned with
   position:fixed (the only technique iOS Safari honours); this class exists so
   the state is inspectable and styleable from CSS. */
body.cg-nav-locked {
    overflow: hidden;
}

/* Suppress smooth scrolling while the lock is being released, otherwise
   restoring scrollY animates visibly (html { scroll-behavior: smooth }). */
html.cg-no-smooth {
    scroll-behavior: auto !important;
}