/* ==========================================================================
   mobile-nav.css — WP-01 Mobile nav core (qwe-web)

   Single nav-mode boundary: slide-in rail at <=1023px, inline nav at >=1024px
   (SC-01.5). No other stylesheet may switch .mobile-menu-toggle display or
   .main-nav positioning.

   Contracts honored (ADR-1/ADR-3/ADR-6 + mobile-ux-acceptance meta.g4Contracts):
   - Off-canvas rules are scoped under `html.js-nav` — no-JS users keep the
     legacy inline nav (PM-39 progressive enhancement).
   - `.glass-header` carries `backdrop-filter`, which makes it the containing
     block for ALL fixed descendants (PM-20). Panel/backdrop therefore use
     `inset` + `dvh` units that resolve against the header box — which is
     full-width and top-anchored, so `top:0` aligns with the viewport top and
     `height:100dvh` still covers the whole viewport.
   - Stacking contract (PM-23): backdrop < panel < cookie banner. The banner
     (z:9999, body level) always sits above the header subtree (z:100), so the
     contract holds automatically; inside the header context the order is
     .nav-backdrop(9990) < .main-nav(9995) < .mobile-menu-toggle(9996) so the
     toggle stays tappable above the full-bleed panel (SC-02.1).
   - NO backdrop-filter inside the panel (Anti-Pattern 1 — opaque surface).
   - Footer clearance: `--cookie-banner-h` (measured by mobile-nav.js) keeps
     .nav-cta + .lang-switcher elementFromPoint-reachable above the banner.
   ========================================================================== */

/* ==========================================================================
   >=1024px — desktop tier: JS-injected chrome hidden; coarse-pointer tap-open
   state classes drive the flyouts (index.css hover rules stay fine-pointer
   only, scoped under (hover:hover)).
   ========================================================================== */
@media (min-width: 1024px) {
    .nav-caret,
    .nav-backdrop,
    .nav-panel-head,
    .nav-cta {
        display: none;
    }

    /* Coarse-pointer tap-open state (matchMedia gate lives in mobile-nav.js).
       Mirrors the hover rules' end state exactly (NFR-1 visual parity). */
    .dropdown.tap-open > .dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .dropdown-submenu.tap-open > .dropdown-menu.sub-menu {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
    }
}

/* ==========================================================================
   <=1023px — phone + tablet tiers
   ========================================================================== */
@media (max-width: 1023px) {

    /* ---- Layout hardening helpers (FR-08; additive, conservative) ------- */
    img,
    video {
        max-width: 100%;
        height: auto;
    }

    /* ---- Glow-orb raster cost (LCP / PM-36, G10 FIX-3) --------------------
       filter:blur(120px) marks .glow-orb non-compositable → the 20s `float`
       transform animation rasters a ~50vw blur on the MAIN THREAD every
       frame under software rendering, starving the hero-text paint at this
       tier. Fix: swap the blur for a radial-gradient soft edge — the blob
       keeps its glow AND keeps drifting, but the transform now composites
       on the GPU (zero main-thread raster per frame). Desktop keeps the
       full 120px filter + identity. */
    .glow-orb {
        filter: none;
    }

    .orb-1 {
        background: radial-gradient(circle,
            rgba(59, 130, 246, 0.55) 0%,
            rgba(59, 130, 246, 0.25) 40%,
            rgba(59, 130, 246, 0) 70%);
    }

    .orb-2 {
        background: radial-gradient(circle,
            rgba(139, 92, 246, 0.55) 0%,
            rgba(139, 92, 246, 0.25) 40%,
            rgba(139, 92, 246, 0) 70%);
    }

    /* ---- Webfont LCP penalty (LCP / G10 FIX-3) -----------------------------
       font-display:swap paints hero text in the fallback face, then repaints
       when Inter's WOFF2 finishes — under slow-4G the font queues behind
       ~3MB of imagery, so that repaint lands at ~16s and the LCP element
       (.hero-subtitle) records it as render delay. At this tier the system
       stack replaces Inter page-wide: no webfont request is ever issued
       (Google Fonts css2 fetches WOFF2s only for faces used by rendered
       text), the fallback paint IS the final paint, and the visual gap is
       minimal — on Android the fallback resolves to Roboto, Inter's design
       sibling. Desktop keeps full Inter identity. */
    :root {
        /* must match index.css's :root specificity — `html` would lose */
        --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
            Roboto, Helvetica, Arial, sans-serif;
    }

    /* ---- Below-fold render containment (LCP / G10 FIX-3) ------------------
       content-visibility:auto lets the compositor skip style+layout+paint
       for sections outside the viewport, shrinking the main-thread work the
       LCP paint competes with on throttled CPUs. contain-intrinsic-size
       reserves an estimated box so the scrollbar/anchors stay stable.
       Hero stays fully rendered — it holds the LCP element. */
    main > section:not(.hero),
    main > .logo-marquee {
        content-visibility: auto;
        contain-intrinsic-size: auto 900px;
    }

    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* ---- Compact mobile header bar (FR-02) ------------------------------ */
    html.js-nav .glass-header {
        padding-top: env(safe-area-inset-top);
    }

    html.js-nav .header-container {
        height: 64px;
        padding-left: calc(1rem + env(safe-area-inset-left));
        padding-right: calc(1rem + env(safe-area-inset-right));
    }

    html.js-nav .logo a {
        min-height: 44px; /* >=44px brand touch target (SC-02.1) */
    }

    /* Hamburger — visible ONLY under js-nav at this tier; without JS the
       inline nav remains usable instead of a dead button (PM-39). Stacks
       above the full-bleed panel inside the header's containing block. */
    html.js-nav .mobile-menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 9996; /* > .main-nav 9995 within .glass-header's context */
        width: 44px;
        height: 44px;
        padding: 0;
        flex: 0 0 auto;
    }

    /* Hamburger -> X (driven by aria-expanded, not inline styles) */
    html.js-nav .mobile-menu-toggle[aria-expanded="true"] span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    html.js-nav .mobile-menu-toggle[aria-expanded="true"] span:nth-child(2) {
        opacity: 0;
    }

    html.js-nav .mobile-menu-toggle[aria-expanded="true"] span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    /* ---- Backdrop -------------------------------------------------------
       Fixed inside .glass-header's containing block: inset:0 + 100dvh covers
       the viewport because the header box is full-width and top-anchored. */
    html.js-nav .nav-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        height: 100vh;  /* fallback */
        height: 100dvh; /* PM-13: tracks iOS Safari chrome */
        z-index: 9990;
        background: rgba(0, 0, 0, 0.55);
        opacity: 0;
        visibility: hidden;
        touch-action: none; /* PM-12: no rubber-band scroll behind panel */
        transition: opacity var(--transition-smooth),
                    visibility 0s linear 0.4s;
    }

    html.js-nav .nav-backdrop.show {
        opacity: 1;
        visibility: visible;
        transition: opacity var(--transition-smooth),
                    visibility 0s linear 0s;
    }

    /* ---- Slide-in panel ---------------------------------------------------
       inset:0 0 0 auto anchors to the header box's top-right corner (= the
       viewport's top-right). height:100dvh overrides the over-constrained
       bottom edge. Slides from the right, width min(100vw, 420px). */
    html.js-nav .main-nav {
        position: fixed;
        inset: 0 0 0 auto;
        height: 100vh;  /* fallback */
        height: 100dvh; /* PM-13 */
        width: min(100vw, 420px);
        z-index: 9995;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        overflow: hidden;
        background: var(--bg-base); /* opaque — NO backdrop-filter (Anti-Pattern 1) */
        border-left: 1px solid var(--border-color);
        padding-top: env(safe-area-inset-top);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
        /* PM-23: footer clearance grows by measured banner height so
           .nav-cta / .lang-switcher stay elementFromPoint-reachable.
           Height-aware (F-1): mobile-nav.js zeroes the var when the full
           reservation cannot leave a usable .nav-links scroll viewport —
           partial clearance never makes the footer reachable anyway. */
        padding-bottom: calc(env(safe-area-inset-bottom) + var(--cookie-banner-h, 0px));
        transform: translateX(105%);
        visibility: hidden; /* PM-21: belt-and-braces with inert/aria-hidden */
        transition: transform var(--transition-smooth),
                    visibility 0s linear 0.4s;
    }

    html.js-nav .main-nav.open {
        transform: translateX(0);
        visibility: visible;
        transition: transform var(--transition-smooth),
                    visibility 0s linear 0s;
    }

    /* ---- Panel head (close + brand) ---------------------------------------
       SC-03.3: the close control must NOT occupy the top-right slot — the
       hamburger toggle (z-index 9996) owns that corner and wins the hit
       test over the panel (9995). Packing the head left moves .nav-close
       fully clear of the toggle's 44px box; the toggle's own X remains a
       second, always-tappable close affordance at top-right. */
    html.js-nav .main-nav .nav-panel-head {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 0.75rem;
        flex: 0 0 auto;
        order: 0;
        min-height: 64px;
        padding: 0.5rem 1rem;
        border-bottom: 1px solid var(--border-color);
    }

    html.js-nav .nav-panel-head .nav-brand {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        color: var(--text-main);
        font-weight: 700;
        font-size: 1rem;
        text-decoration: none;
        letter-spacing: -0.02em;
    }

    html.js-nav .nav-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: relative;
        order: -1; /* leads the panel head — left edge, clear of the toggle */
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        background: none;
        border: 1px solid var(--border-color);
        border-radius: 0.5rem;
        color: var(--text-muted);
        cursor: pointer;
    }

    html.js-nav .nav-close::before,
    html.js-nav .nav-close::after {
        content: '';
        position: absolute;
        width: 16px;
        height: 2px;
        background: currentColor;
    }

    html.js-nav .nav-close::before {
        transform: rotate(45deg);
    }

    html.js-nav .nav-close::after {
        transform: rotate(-45deg);
    }

    html.js-nav .nav-close:hover {
        color: var(--text-main);
        border-color: rgba(255, 255, 255, 0.2);
    }

    /* ---- Scroll region --------------------------------------------------
       .nav-links is the panel's internal scroll surface (PM-12). */
    html.js-nav .main-nav .nav-links {
        flex: 1 1 auto;
        order: 1;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0.5rem 0;
    }

    html.js-nav .nav-links > li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    html.js-nav .nav-links > li:last-child {
        border-bottom: none;
    }

    /* Group rows become flex rows: label-link flexes, caret is a fixed
       column — non-overlapping hit zones (PM-01/PM-02, SC-04.2). */
    html.js-nav .nav-links li.dropdown,
    html.js-nav .nav-links li.dropdown-submenu {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
    }

    html.js-nav .nav-links a {
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        min-height: 44px; /* >=44px row target (SC-07.1) */
        padding: 0.75rem 1rem;
        font-size: 1rem; /* >=16px panel type floor (SC-07.3) */
        font-weight: 500;
    }

    html.js-nav .nav-links a:hover {
        color: var(--text-main);
        background: rgba(255, 255, 255, 0.03);
    }

    html.js-nav .nav-links a.active {
        color: var(--text-main);
        font-weight: 600;
        background: rgba(59, 130, 246, 0.08);
    }

    /* Dead-href rows keep the <a> for parity but act as buttons at this
       tier (role/aria applied by mobile-nav.js) — identical visuals. */
    html.js-nav .nav-links a[data-nav-dead] {
        cursor: pointer;
    }

    /* ---- Caret column ---------------------------------------------------
       PM-01/02: bordered, contrasting chevron in a fixed min-width:44px
       column; align-self:stretch survives 2-3 line DE label wraps (PM-08). */
    html.js-nav .nav-caret {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        min-width: 44px;
        align-self: stretch;
        background: none;
        border: none;
        border-left: 1px solid var(--border-color);
        color: var(--text-muted);
        cursor: pointer;
        padding: 0;
    }

    html.js-nav .nav-caret::before {
        content: '';
        width: 10px;
        height: 10px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg);
        transition: transform var(--transition-fast);
    }

    html.js-nav .nav-links li.expanded > .nav-caret::before {
        transform: rotate(-135deg);
    }

    html.js-nav .nav-caret:hover {
        color: var(--text-main);
        background: rgba(255, 255, 255, 0.05);
    }

    /* ---- Accordion menus -------------------------------------------------
       Flat, in-flow, static surfaces — no blur, no flyout positioning. */
    html.js-nav .main-nav .dropdown-menu {
        position: static;
        display: none;
        flex: 0 0 100%;
        width: 100%;
        min-width: 0;
        opacity: 1;
        visibility: visible;
        transform: none;
        top: auto;
        left: auto;
        padding: 0;
        background: transparent;
        border: none;
        border-radius: 0;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        transition: none;
    }

    html.js-nav .main-nav li.expanded > .dropdown-menu {
        display: block;
    }

    /* Indentation by depth */
    html.js-nav .main-nav .dropdown-menu a {
        padding-left: 2rem;
    }

    html.js-nav .main-nav .dropdown-menu .dropdown-menu a {
        padding-left: 3rem;
    }

    /* ---- Panel footer: lang switcher + primary CTA ---------------------- */
    html.js-nav .main-nav .lang-switcher {
        order: 2;
        flex: 0 0 auto;
        align-self: center;
        margin: 0.5rem 1rem;
    }

    html.js-nav .main-nav .lang-btn {
        min-width: 44px;
        min-height: 44px;
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }

    html.js-nav .main-nav .nav-cta {
        order: 3;
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        margin: 0.5rem 1rem;
        padding: 0.75rem 1rem;
        border-radius: 0.75rem;
        background: var(--text-main);
        color: var(--bg-base);
        font-size: 1rem;
        font-weight: 600;
        text-decoration: none;
    }

    html.js-nav .main-nav .nav-cta:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 20px rgba(255, 255, 255, 0.2);
    }

    /* ---- i18n glyph de-duplication ---------------------------------------
       mobile-nav.js wraps the ▼/▶ trailing glyphs (they live INSIDE the
       translated strings, so CSS alone can never select them) in
       .nav-i18n-glyph spans. Hidden at this tier — the .nav-caret is the
       only expand affordance (SC-04.7). Visible again at >=1024 (NFR-1). */
    .nav-i18n-glyph {
        display: none;
    }

    /* ---- Focus visibility (PM-41 / SC-07.5) ------------------------------ */
    html.js-nav .mobile-menu-toggle:focus-visible,
    html.js-nav .nav-caret:focus-visible,
    html.js-nav .nav-close:focus-visible,
    html.js-nav .main-nav a:focus-visible,
    html.js-nav .main-nav button:focus-visible {
        outline: 2px solid var(--accent-primary);
        outline-offset: 2px;
    }

    /* ---- No-JS degrade (M1 / PM-39, SC-03.7) ------------------------------
       Without JS there is no .js-nav class, so index.css's flyout rules
       would leave every .dropdown-menu at opacity:0/visibility:hidden —
       12 nav destinations unreachable. Un-wrap them into static, visible,
       in-flow lists: ugly but usable, every link tappable. */
    html:not(.js-nav) .main-nav .dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        padding: 0;
        min-width: 0; /* base rule forces 280px — would overflow the inline layout */
    }

    /* ---- SC-07.1 footer touch targets (relocated from index.css — M2) ----
       WP-04 measured .footer-links a at ~62x17px and the .footer-social icon
       link at ~22x28px — below the 44px interactive-target floor. min-height +
       inline-flex centers the ~17px text line inside the 44px hit zone; the
       social link gets a 44x44 minimum via padding so its inline
       display:inline-block style needs no !important override. */
    .site-footer .footer-links a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    /* Icon links: padding grows the 22px glyph to a 44x44 hit area while
       staying inside the anchor's inline-block box. */
    .site-footer .footer-social a {
        min-width: 44px;
        min-height: 44px;
        padding: 11px;
    }

    /* ---- SC-07.3 body-copy floor (relocated from index.css — M2) ----------
       .pillar-body paragraphs compute at 0.85rem = 13.6px — below the 14px
       body-copy floor at this tier. Raise to 0.875rem (14px). Desktop keeps
       0.85rem. Sibling audit: .pillar-title is a 1.25rem heading (above the
       floor); .pillar-badge is a div uppercase overline label (not body
       copy — exempt); the second .pillar-body instance carries an inline
       0.9rem = 14.4px (already compliant). */
    .pillar-body {
        font-size: 0.875rem;
    }
}

/* ==========================================================================
   Fallback mandates
   ========================================================================== */

/* Reduced motion (SC-NFR4.2 / PM-36): panel/hamburger/caret transitions
   collapse to instant AND the continuous blur orbs pause (Lighthouse-85 +
   vestibular-motion hazard). State is class-synchronous — nothing here
   gates behavior on transitions. */
@media (prefers-reduced-motion: reduce) {
    .glow-orb {
        animation: none;
    }

    html.js-nav .main-nav,
    html.js-nav .nav-backdrop,
    html.js-nav .mobile-menu-toggle span,
    html.js-nav .nav-caret::before,
    html.js-nav .nav-cta {
        transition: none !important;
    }
}

/* Forced colors (PM-41 / SC-07.5): explicit outlines + system-color icon
   strokes so caret/close/toggle remain visible and the focus ring survives
   palette overriding. */
@media (forced-colors: active) {
    html.js-nav .mobile-menu-toggle,
    html.js-nav .nav-caret,
    html.js-nav .nav-close {
        outline: 2px solid ButtonText;
    }

    html.js-nav .mobile-menu-toggle span,
    html.js-nav .nav-close::before,
    html.js-nav .nav-close::after {
        background: ButtonText;
    }

    html.js-nav .nav-caret::before {
        border-color: ButtonText;
    }

    html.js-nav .nav-caret {
        border-left: 1px solid ButtonText;
    }

    html.js-nav .main-nav {
        border-left: 1px solid ButtonText;
    }

    html.js-nav .nav-backdrop {
        background: rgba(0, 0, 0, 0.6);
    }
}

/* Print (PM-43 / SC-09.7): nav chrome + cookie banner never print. */
@media print {
    .mobile-menu-toggle,
    .main-nav,
    .nav-backdrop,
    .cookie-banner,
    .skip-link {
        display: none !important;
    }
}