/* =============================================================================
   PUBLIC MOBILE NAV — the one hamburger menu of the public web.

   Markup: Views/Shared/_PublicMobileNav.cshtml   Behaviour: js/public-nav.js

   Two hosts render that partial and both get exactly this menu, so a visitor
   who moves between the landing and any other public page finds the same
   button in the same place opening the same sheet:

     Views/Home/Index.cshtml       the landing — inside .sc-hud-left
     Views/Shared/_LandingLayout   every other public page — inside .header

   Everything the menu looks like lives HERE. The hosts only supply the margin
   that docks the button beside their logo, and — where their ground is not a
   fixed colour — the button's ink. Nothing else about the component is host
   specific; if a rule starts needing to know which page it is on, that is the
   signal the two menus are drifting apart again.

   Breakpoint 1160px is shared by all four files (this one, public-nav.js,
   home.css and public-skin.css). The landing measured it: below that its HUD
   row runs into the instrument cluster and then wraps under the wordmark. The
   template's own nav would survive to 992, but a burger that appears at a
   different width on different pages is exactly the inconsistency this
   component exists to remove — public-skin.css hides the template row at 1160
   to match. home.css carries the measurements behind the number.
   ========================================================================== */

.pnav-burger,
.pnav-sheet {
    --pnav-bg: #0b0e13;                  /* one ground everywhere: both public
                                            headers are dark, and a sheet that
                                            changed colour per page would defeat
                                            the point of sharing it */
    --pnav-ink: #fff;
    --pnav-line: rgba(255, 255, 255, .16);
}

/* ---- when the menu exists at all -------------------------------------------
   Hidden by default on both counts: above the breakpoint every host shows its
   own full nav row, and with JS off the sheet cannot open — so the button must
   not appear either, or it would be a dead control. `.pnav-js` is set by the
   partial's inline one-liner, before the nav row below it is even parsed, so
   there is no flash of the wrong menu. */

.pnav-burger { display: none; }
.pnav-sheet { display: none; }

@media (max-width: 1160px) {
    .pnav-js .pnav-burger { display: inline-flex; }
    .pnav-js .pnav-sheet { display: flex; }
}

/* ---- the button ---------------------------------------------------------- */

.pnav-burger {
    position: relative;
    z-index: 2;                          /* rides above its own sheet — it is
                                            the close button too */
    align-items: center;
    justify-content: center;
    width: 44px;                         /* the tap target, not the icon */
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--pnav-ink);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.pnav-bars {
    position: relative;
    display: block;
    width: 24px;
    height: 16px;
}

.pnav-bars span {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: top .22s ease, transform .22s ease, opacity .12s ease;
}

.pnav-bars span:nth-child(1) { top: 0; }
.pnav-bars span:nth-child(2) { top: 7px; }
.pnav-bars span:nth-child(3) { top: 14px; }

/* three lines → X. Open, the button always stands on the sheet's own dark
   ground, so it takes the sheet's ink no matter what the host set. */
.pnav-burger[aria-expanded="true"] { color: var(--pnav-ink); }
.pnav-burger[aria-expanded="true"] .pnav-bars span:nth-child(1) { top: 7px; transform: rotate(45deg); }
.pnav-burger[aria-expanded="true"] .pnav-bars span:nth-child(2) { opacity: 0; }
.pnav-burger[aria-expanded="true"] .pnav-bars span:nth-child(3) { top: 7px; transform: rotate(-45deg); }

.pnav-burger:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: 6px;
}

/* ---- the sheet ------------------------------------------------------------
   `visibility` rather than `display` so the fade can run and the links keep
   their natural place in the accessibility tree. Fixed + inset 0 inside the
   host header: the landing's HUD (z-index 10) and the template's .header
   (z-index 1030) both sit above their page, so the sheet covers everything
   below without either host needing to know about it. */

.pnav-sheet {
    position: fixed;
    inset: 0;
    z-index: 1;
    flex-direction: column;
    justify-content: center;
    padding: 84px 24px 32px;
    overflow-y: auto;
    background: var(--pnav-bg);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;                /* the landing HUD passes clicks
                                            through to the page — be explicit */
    transition: opacity .26s ease, visibility .26s;
}

.pnav-sheet.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;                /* now it blocks the page under it */
}

.pnav-list {
    display: flex;
    flex-direction: column;
}

/* A ruled list, never a stack of cards. Two classes deep on purpose: the
   landing's `.sc a { color: var(--act) }` carries the same weight as one class
   plus a type, so a single-class selector here would be decided by stylesheet
   order alone. */
.pnav-sheet .pnav-list a {
    display: block;
    padding: 2.8vh 0;
    border-top: 1px solid var(--pnav-line);
    color: var(--pnav-ink);
    font-family: 'Open Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: clamp(1.45rem, 6.5vw, 2rem);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -.01em;
    text-decoration: none;
}

.pnav-sheet .pnav-list a:last-child { border-bottom: 1px solid var(--pnav-line); }
.pnav-sheet .pnav-list a:hover { color: var(--pnav-ink); text-decoration: none; }

.pnav-sheet .pnav-list a:focus-visible {
    outline: 2px solid var(--pnav-ink);
    outline-offset: -2px;
}

/* the one CTA reads as a destination, not a pill — it is a row like the
   others, marked by the arrow */
.pnav-sheet .pnav-cta::after { content: "\00a0\2192"; }

/* the sheet is opaque and fixed; without this the page scrolls behind it (and
   on the landing the day keeps advancing). public-nav.js also stops Lenis. */
body.pnav-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
    .pnav-bars span,
    .pnav-sheet { transition: none; }
}