/* =========================================================================
   L'Atelier de MIA — Navigation (Oscar de la Renta style)

   Layout: left links · centered logo · right utility links
   Transparent on hero → ivory on hover → ivory on scroll.
   Tokens only — no raw hex. Master Playbook §8.
   ========================================================================= */

/* --------------------------- NAV SHELL ------------------------------------ */

.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);

    height: var(--nav-height);
    padding: 0 var(--space-5);
    box-sizing: border-box;

    background: transparent;
    color: var(--fg);
    border-bottom: 1px solid transparent;
    mix-blend-mode: normal;

    /* Background fades smoothly; color flips instantly — no two-step feel. */
    transition: background-color 150ms ease-out,
                border-color     150ms ease-out;
}

body.page--no-hero {
    padding-top: var(--nav-height);
}

/* Masked variant — white text on dark hero. */
.nav--masked {
    color: var(--white);
}

/* Hover, keyboard focus within, or the full-screen mega menu held open (js
   adds .nav--mega-open): ivory background when the nav is engaged over the
   hero. */
.nav--masked:not(.nav--resting):hover,
.nav--masked:not(.nav--resting):focus-within,
.nav--masked:not(.nav--resting).nav--mega-open {
    background-color: var(--canvas);
    color: var(--fg);
    border-bottom-color: var(--hairline);
}

/* Resting variant — ivory bar, triggered on first scroll pixel. */
.nav--resting,
.nav--resting.nav--masked {
    background-color:     var(--canvas);
    border-bottom-color:  var(--hairline);
    color:                var(--fg);
}

/* --------------------------- LOGO (centered) ------------------------------ */
/* Absolutely pinned to the true centre of the bar — the left menu is wider
   than the right, so flex centring would push the wordmark off-centre. */

.nav__logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 300;
    font-size: 20px;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: none;
    color: inherit;
    text-decoration: none;
    flex-shrink: 0;
    white-space: nowrap;
    text-align: center;
}

.nav__logo em {
    font-style: normal;
    font-weight: 400;
}

.nav__logo:focus { outline: none; }
.nav__logo:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}

/* --------------------------- MENUS (left + right) ------------------------- */

.nav__menu {
    list-style: none;
    margin: 0;
    padding: 0;

    display: flex;
    align-items: center;
    gap: var(--space-4);

    flex: 1 1 0;
}

.nav__menu--left {
    justify-content: flex-start;
}

.nav__menu--right {
    justify-content: flex-end;
}

.nav__menu > li { margin: 0; }

.nav__menu a {
    position: relative;
    display: inline-block;
    padding: var(--space-1) 0;

    font-family: var(--type-label-caps-font);
    font-size: var(--type-label-caps-size);
    font-weight: var(--type-label-caps-weight);
    letter-spacing: var(--type-label-caps-tracking);
    text-transform: var(--type-label-caps-case);

    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}

.nav__menu a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--dur-medium) var(--ease);
}

.nav__menu a:hover::after,
.nav__menu a:focus-visible::after,
.nav__menu a[aria-current="page"]::after {
    transform: scaleX(1);
}

.nav__menu a:focus { outline: none; }
.nav__menu a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}

/* --------------------------- BURGER (mobile) ------------------------------ */

.nav__burger {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: var(--space-2);
    background: transparent;
    border: 0;
    cursor: pointer;
    color: inherit;
}

.nav__burger span {
    display: block;
    width: 24px;
    height: 1px;
    background: currentColor;
    transition: transform var(--dur-fast) var(--ease),
                opacity   var(--dur-fast) var(--ease);
}

.nav__burger:focus { outline: none; }
.nav__burger:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}

.nav__burger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}
.nav__burger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}
.nav__burger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* Hide mobile-only utility links on desktop */
.nav__mobile-utility {
    display: none;
}

/* --------------------------- SHEET HEADER (mobile) ------------------------ */
/* Injected once by js/nav.js into the <nav>. A thin top bar inside the open
   burger sheet carrying Back (drills out of a sub-panel · top-left) and a
   Close × (top-right), Oscar de la Renta style. Hidden on desktop and while
   the sheet is closed; revealed by body.nav-locked in the mobile block. */

.nav__sheet-head {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;

    align-items: center;
    height: var(--nav-height);
    padding: 0 var(--space-4);
    box-sizing: border-box;
    pointer-events: none;
}

.nav__sheet-back,
.nav__sheet-close {
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--fg);
    pointer-events: auto;
    font-family: var(--type-label-caps-font);
}

/* Back — only inside the Ready-to-Wear sub-panel (nav.is-sub-open). */
.nav__sheet-back {
    display: none;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) 0;
    font-size: 11px;
    font-weight: var(--type-label-caps-weight);
    letter-spacing: var(--type-label-caps-tracking);
    text-transform: var(--type-label-caps-case);
}

.nav__sheet-back > span { font-size: 20px; line-height: 1; margin-top: -2px; }

/* Close × — always at the right edge of the bar. */
.nav__sheet-close {
    margin-left: auto;
    padding: var(--space-2);
    font-size: 26px;
    line-height: 1;
}

.nav__sheet-back:focus,
.nav__sheet-close:focus { outline: none; }
.nav__sheet-back:focus-visible,
.nav__sheet-close:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* --------------------------- MOBILE BREAKPOINT ---------------------------- */
/* 1239px, not a phone width: with the wordmark pinned to the true centre,
   the rails fit beside it only from ~1240px up (left rail 486px + 40px pad
   + 20px clearance each side of the 128px logo). Below that → burger. */

@media (max-width: 1239px) {
    .nav {
        padding: 0 var(--space-4);
    }

    .nav__burger {
        display: flex;
        /* Logo is out of flow and the right rail is hidden, so the burger is
           the only in-flow child — it rests at the left edge (Oscar de la
           Renta style). While the sheet is open it is replaced by the
           sheet's own Close ×, so hide it. */
    }

    body.nav-locked .nav__burger { display: none; }

    /* The sheet header (Back / Close) appears only while the sheet is open. */
    body.nav-locked .nav__sheet-head { display: flex; }
    .nav.is-sub-open .nav__sheet-back { display: inline-flex; }

    /* Hide right utility links from the nav bar on mobile */
    .nav__menu--right {
        display: none;
    }

    .nav__menu--left {
        position: fixed;
        inset: 0;
        z-index: 10;

        flex: none;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        gap: var(--space-2);

        /* Top padding clears the fixed sheet header (Back / Close). */
        padding: calc(var(--nav-height) + var(--space-3)) var(--space-5) var(--space-5);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;

        background: var(--canvas);
        color: var(--fg);

        /* Opacity-only (no transform): a transformed ancestor would trap the
           position:fixed sub-panel into its box. Reduced-motion zeroes the
           duration via the tokens. */
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity    var(--dur-medium) var(--ease),
                    visibility var(--dur-medium) var(--ease);
    }

    .nav__menu--left.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* Root list: left-aligned items stacked from the top. */
    .nav__menu--left > li {
        margin: 0;
        width: 100%;
    }

    .nav__menu--left > li > a {
        display: block;
        padding: var(--space-2) 0;
        font-size: 15px;
        letter-spacing: 0.16em;
    }

    /* Utility links cloned into the sheet by nav.js — pinned to the bottom in
       small type (Book Consultation · Customer Care · Sign In · Bag). */
    .nav__menu--left .nav__mobile-utility {
        list-style: none;
        margin: auto 0 0;            /* margin-top:auto pushes it to the bottom */
        padding: var(--space-4) 0 0;
        border-top: 1px solid var(--hairline);
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }

    .nav__menu--left .nav__mobile-utility a {
        font-family: var(--type-label-caps-font);
        font-size: 11px;
        font-weight: var(--type-label-caps-weight);
        letter-spacing: var(--type-label-caps-tracking);
        text-transform: var(--type-label-caps-case);
        color: var(--muted);
        text-decoration: none;
        transition: color var(--dur-fast) var(--ease);
    }

    .nav__menu--left .nav__mobile-utility a:hover { color: var(--fg); }
}

/* Prevent background scroll while the mobile sheet is open. */
body.nav-locked {
    overflow: hidden;
}

/* Search disabled for launch (Group 5, Phase 0): no search index exists yet,
   so the nav "Search" trigger is hidden rather than presented as a dead
   control. Covers the desktop nav and the mobile-sheet clone (both carry
   [data-nav-search]). Reversible: delete this rule and restore
   js/search-overlay.js to its previous overlay implementation. */
.nav li:has([data-nav-search]) {
    display: none;
}

/* --------------------------- READY-TO-WEAR SUBMENU ------------------------ */
/* Desktop: hover / focus-within reveals a small dropdown beneath "Ready to
   Wear". The panel carries its own solid ivory background + hairline so it
   stays legible over the transparent/masked hero nav. Mobile rules (below)
   flatten it into indented sub-items inside the burger sheet — no JS needed. */

.nav__item--has-sub {
    position: relative;
}

.nav__submenu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 110;

    list-style: none;
    margin: 0;
    /* top padding bridges the gap so the pointer can travel into the panel */
    padding: var(--space-3) var(--space-4) var(--space-4);

    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 180px;

    background: var(--canvas);
    border: 1px solid var(--hairline);

    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity    var(--dur-medium) var(--ease),
                transform  var(--dur-medium) var(--ease),
                visibility var(--dur-medium) var(--ease);
}

.nav__submenu > li { margin: 0; }

/* Keep submenu links dark on the ivory panel — never inherit masked-nav white. */
.nav__submenu a { color: var(--fg); }

/* Non-interactive category label at the top of the dropdown ("Shop per item"). */
/* Mega-menu variant — a full-bleed editorial band beneath the bar: four link
   columns spread edge-to-edge across the whole screen. */
.nav__submenu--mega {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    bottom: 0;

    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-7);
    min-width: 0;
    overflow-y: auto;

    /* Full-screen panel: spans from just below the nav bar to the bottom of
       the viewport. The four columns sit at the top and spread edge-to-edge,
       anchored to the same gutter as the nav bar; the lower area is open
       space. Opened on hover and HELD open by js/nav.js via `.is-open` until
       another tab, an outside click, or Esc — see §1b there. */
    padding: var(--space-6) var(--space-5);

    border: 0;
    border-top: 1px solid var(--hairline);
}

.nav__megacol { margin: 0; min-width: 150px; }

.nav__megacol > ul {
    list-style: none;
    margin: var(--space-3) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.nav__megacol > ul > li { margin: 0; }

/* Quieter resting links; ink on hover — with the existing underline grow. */
.nav__submenu--mega a {
    color: var(--muted);
    transition: color var(--dur-fast) var(--ease);
}

.nav__submenu--mega a:hover,
.nav__submenu--mega a:focus-visible {
    color: var(--fg);
}

/* Columns drift up as the band reveals, each a beat after the last. */
.nav__submenu--mega > li {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity   var(--dur-medium) var(--ease),
                transform var(--dur-medium) var(--ease);
}

.nav__submenu--mega > li:nth-child(2) { transition-delay: 40ms; }
.nav__submenu--mega > li:nth-child(3) { transition-delay: 80ms; }
.nav__submenu--mega > li:nth-child(4) { transition-delay: 120ms; }

.nav__item--has-sub.is-open .nav__submenu--mega > li,
.nav__item--has-sub:focus-within .nav__submenu--mega > li {
    opacity: 1;
    transform: translateY(0);
}

/* Hover bridge: the pointer must cross the lower half of the bar between
   the trigger and the band — keep the item "hovered" on the way down.
   Desktop only; the sheet layout positions items statically. */
@media (min-width: 1240px) {
    .nav__item--has-sub::after {
        content: '';
        position: absolute;
        top: 100%;
        left: calc(-1 * var(--space-4));
        right: calc(-1 * var(--space-4));
        height: var(--space-4);
    }
}

@media (max-width: 1239px) {
    /* Ready-to-Wear sub-panel: a second screen that slides in from the right
       over the root list (Oscar de la Renta drill-down). Held open by
       `.nav.is-sub-open` (js/nav.js §1b); Back / Close live in the sheet
       header. position:fixed is viewport-relative here because the sheet
       animates with opacity only — no transformed ancestor. */
    .nav__submenu--mega {
        position: fixed;
        inset: 0;
        z-index: 2;

        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: var(--space-5);

        padding: calc(var(--nav-height) + var(--space-3)) var(--space-5) var(--space-5);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;

        background: var(--canvas);
        border: 0;

        opacity: 1;
        visibility: hidden;
        transform: translateX(100%);
        transition: transform  var(--dur-medium) var(--ease),
                    visibility  var(--dur-medium) var(--ease);
    }

    .nav.is-sub-open .nav__submenu--mega {
        visibility: visible;
        transform: translateX(0);
    }

    .nav__megacol { min-width: 0; text-align: left; }
    .nav__megacol > ul { align-items: flex-start; margin-top: var(--space-3); }

    /* No reveal choreography inside the sheet. */
    .nav__submenu--mega > li {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .nav__submenu--mega a {
        color: var(--muted);
        font-size: 15px;
        letter-spacing: 0.12em;
    }
    .nav__submenu--mega a:hover { color: var(--fg); }
}

.nav__submenu-heading {
    font-family: var(--type-label-caps-font);
    font-size: 10px;
    font-weight: var(--type-label-caps-weight);
    letter-spacing: var(--type-label-caps-tracking);
    text-transform: var(--type-label-caps-case);
    color: var(--muted);
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-1);
    border-bottom: 1px solid var(--hairline);
}

/* Desktop only: hover/keyboard reveal of the dropdown. Scoped to ≥1240px so
   it never fights the mobile slide-in panel — on mobile, focusing the trigger
   (e.g. when the sheet opens) must NOT reveal the sub-panel. */
@media (min-width: 1240px) {
    .nav__item--has-sub.is-open .nav__submenu,
    .nav__item--has-sub:focus-within .nav__submenu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}

/* The Ready-to-Wear submenu's mobile presentation (a slide-in sub-panel) is
   defined with the mega rules above; the old always-open inline treatment has
   been retired in favour of the Oscar de la Renta drill-down. */