/* ================================================================
   HEADER-FLYOUT.CSS — Nexora nav flyout panel
   Depends on root-tokens.css + core.css + header.css (reuses the
   header's own height/z-index vocabulary). Styles the full-width
   two-column dropdown that opens under the header when a nav link
   in .header-nav-list is hovered — a Nexora-built take on the
   "hover a top nav item, get a base column + an elevated column"
   pattern, populated at runtime by header-flyout.js from the
   header-flyout data file.

   Not a copy of globalheader.css's markup/class names — but its
   typography scale, spacing, and entrance animation are pulled
   directly from Apple's real .globalnav-submenu-* rules (checked
   against globalheader.css) and its color mapping matches what
   header-apple.css already does for the Apple header itself:
     - base links:      12px / weight 600  — small, dense list
     - elevated links:  24px / weight 700  — large, headline-style
                         (Apple uses SF Pro Display here; we use
                         our own --font-family-display for the
                         same "bigger, editorial" effect)
     - both columns share ONE link color (--color-text-secondary,
       --color-primary-hover on hover) — same as header-apple.css's
       --r-globalnav-color-secondary being reused unchanged for
       both base and elevated tiers. The columns differ in scale,
       not in color.
     - group titles: 12px / weight 400 / muted gray, no uppercase

   ANIMATION SYSTEM — everything below keys off ONE class,
   .header-flyout-panel-open, added/removed on #header-flyout-panel
   by header-flyout.js. The scrim, the panel's own height, the
   content fade, and the group stagger all read that single class
   so they turn on/off as one coordinated motion instead of three
   independently-timed pieces (which is what made it feel buggy
   before — the scrim used to snap on/off with [hidden] instead of
   transitioning, completely out of sync with everything else).

   Sequence on open:  scrim fades in  →  panel height grows  →
                       content fades in (slightly delayed, trailing
                       the growing box)  →  groups stagger in
   Sequence on close: scrim, panel height, and content all start
                       transitioning back at the same instant — but
                       content (.18s) finishes fading out well before
                       the panel (.28s) finishes collapsing, so the
                       box never visibly disappears while content is
                       still showing inside it.
   ================================================================ */

/* Matches .search-scrim's treatment: dims/blurs the page content
   behind the panel so the open flyout reads as the focused layer.
   Opacity-driven (not [hidden]-driven) so it fades in/out in step
   with everything else instead of popping instantly. visibility is
   toggled alongside opacity so it's unreachable by mouse/keyboard
   while fully transparent, without needing display:none mid-transition.

   backdrop-filter is one of the most expensive properties to animate —
   it's a full-viewport-width/height fixed element, and every frame of
   the opacity fade forces the browser to recompute the blur against
   whatever's changing underneath it. will-change: opacity lives on
   THIS base rule (not on .header-flyout-scrim-open) on purpose: it
   needs to be present before the fade starts so the browser can
   promote this element to its own compositing layer ahead of time.
   Putting it on the -open class instead — which gets added the same
   frame the transition kicks off — gave the browser zero lead time,
   so it was setting up that layer AND compositing the first animated
   frame at once, which is exactly what showed up as an initial-frame
   stutter. This element is only 5 lines of CSS and toggles [hidden]
   itself when fully closed, so keeping the layer reserved at all
   times here costs very little. */
#header-flyout-scrim {
    position: fixed;
    top: 44px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 998;
    background: rgba(var(--color-text-rgb), 0.15);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    opacity: 0;
    visibility: hidden;
    will-change: opacity;
    /* translateZ(0) is a harder, unconditional layer-promotion hint than
       will-change alone — it forces this element onto its own compositing
       layer immediately on page load (not just "hinted ahead of the fade"),
       so the very first time it's ever faded in, Chrome isn't creating that
       layer AND sampling the backdrop blur in the same frame. That first-
       time layer creation is what shows up as a one-time flicker where the
       blur briefly doesn't apply and content underneath reads clearly
       before snapping to the correct blurred state. */
    transform: translateZ(0);
    transition: opacity 0.16s cubic-bezier(0.4, 0, 0.6, 1),
        visibility 0s linear 0.16s;
}

#header-flyout-scrim[hidden] {
    display: none;
}

#header-flyout-scrim.header-flyout-scrim-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.16s cubic-bezier(0.4, 0, 0.6, 1);
}

/* While a flyout is open, drop the header's frosted blur in favor
   of a solid surface so header + panel read as one continuous
   block — same trick .search-open already does for the header
   (body.search-open .header-section in header.css).

   background switches INSTANTLY here (0s), not eased — same reasoning
   as header.css's .search-open rule: #header-flyout-panel renders
   fully solid --color-surface from the first visible frame (it only
   animates max-height, never its own background), so fading
   .header-section's background in over --duration-base left a ~200ms
   window where a translucent, blurred strip sat directly above an
   already-opaque strip of the same color — a visible seam right at
   the 44px boundary. Snapping both background AND backdrop-filter
   together on open removes that mismatch entirely.

   On close, .header-section simply falls back to its base rule (see
   header.css), which eases background back to frosted over
   --duration-base with its own backdrop-filter delay — no separate
   close rule needed here, same as .search-open. */
body.header-flyout-open .header-section {
    background: var(--color-surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: none;
}

#header-flyout-panel {
    position: fixed;
    top: 44px;
    left: 0;
    right: 0;
    z-index: 999;
    display: flex;
    background: var(--color-surface);
    overflow: hidden;
    max-height: 0;
    /* Matches Apple's real flyout motion: the panel itself grows open
       (height, not opacity) — .globalnav-submenu transitions height
       with cubic-bezier(.4,0,.6,1). header-flyout.js measures each
       flyout's real content height via scrollHeight and sets it as
       max-height (Apple does the same in JS, via _setFlyoutHeight)
       rather than us guessing a fixed cap — content height varies a
       lot per nav item. No delay here (unlike the content fade below):
       the box should start growing immediately so it never clips its
       own fading-in content underneath a lagging boundary. */
    transition: max-height 0.28s cubic-bezier(0.4, 0, 0.6, 1);
}

#header-flyout-panel[hidden] {
    display: none;
}

/* Content fade is class-driven, not tied to [hidden]. On open it's
   delayed slightly so it visibly trails the panel's own growth rather
   than fighting it (fixes content appearing to "pop" while still being
   clipped by a panel that hasn't finished growing). On close it has NO
   delay, so it finishes fading out (.18s) well before the panel's own
   height transition (.28s) finishes collapsing — content is gone before
   the box visibly disappears, without needing JS to stage two separate
   timeouts; both transitions just start together and finish at
   different times because their durations differ. */
.header-flyout-inner {
    opacity: 0;
    transition: opacity 0.18s cubic-bezier(0.4, 0, 0.6, 1);
}

#header-flyout-panel.header-flyout-panel-open .header-flyout-inner {
    opacity: 1;
    transition-delay: 0.1s;
}

/* Content wrapper: spans the full panel width (no max-width/auto-margin —
   see the note below). Top/bottom padding matches Apple's own
   .globalnav-submenu-content (40px / 84px). Left padding is set inline
   by header-flyout.js to the header logo's actual viewport x-position,
   the same trick header.css already documents for .search-dropdown-context
   — so the flyout's first column lines up with the logo exactly, even
   though .header-inner centers its content as a group instead of pinning
   the logo to a fixed offset. Right padding falls back to the header's
   own edge padding so the panel still breathes symmetrically.

   All groups — elevated and base alike — sit as direct flex siblings
   in this single row (no wrapping .header-flyout-col-* split down the
   middle): .header-flyout-group's own max-width is what controls each
   group's share of this row, matching Apple's real .globalnav-submenu-content
   structure where .globalnav-submenu-group's 25%/50% max-widths are
   percentages of the whole row, not of a pre-halved column. */
.header-flyout-inner {
    display: flex;
    width: 100%;
    padding: 40px var(--space-40) 275px;
    box-sizing: border-box;
}

.header-flyout-col-base,
.header-flyout-col-elevated {
    display: contents;
}

.header-flyout-group {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex: none;
    max-width: 25%;
    padding-inline-end: 44px;
}

.header-flyout-group-elevated {
    max-width: 50%;
    padding-inline-end: 88px;
}

/* ----------------------------------------------------------------
   PER-ITEM ENTRANCE
   Matches Apple's real .globalnav-submenu-list-item rule (checked
   against globalheader.css): each LINK animates on its own — not
   the group as one solid block — with translateY(-4px) (a smaller
   offset than the group-level -8px we used before) and a delay that
   stacks a small per-item step (20ms in Apple's original; we use a
   slightly larger 24ms so it reads clearly at our own group sizes)
   on top of each group's base delay below. The group title gets its
   own even-smaller entrance too (matches Apple staggering
   .globalnav-submenu-header alongside its items), landing just
   before the first link in its group. This is what turns the
   "whole group pops in at once" feeling into the actual link-by-
   link reveal Apple's flyout has. ---------------------------------------------------------------- */
.header-flyout-group-title,
.header-flyout-list-item,
.header-flyout-list-item-elevated {
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.32s cubic-bezier(0.4, 0, 0.6, 1),
        transform 0.32s cubic-bezier(0.4, 0, 0.6, 1);
}

#header-flyout-panel.header-flyout-panel-open .header-flyout-group-title,
#header-flyout-panel.header-flyout-panel-open .header-flyout-list-item,
#header-flyout-panel.header-flyout-panel-open .header-flyout-list-item-elevated {
    opacity: 1;
    transform: translateY(0);
}

/* Per-group base delay — floored at .28s, the moment
   .header-flyout-inner itself finishes becoming visible (.1s fade-in
   delay + .18s fade duration), so nothing in a group starts
   animating until its parent is actually opaque. Keyed by column
   class + group position (not raw DOM order), so it holds regardless
   of which column renders first. */
#header-flyout-panel.header-flyout-panel-open .header-flyout-col-elevated .header-flyout-group:nth-child(1) .header-flyout-group-title,
#header-flyout-panel.header-flyout-panel-open .header-flyout-col-elevated .header-flyout-group:nth-child(1) .header-flyout-list-item-elevated:nth-child(1) {
    transition-delay: 0.28s;
}

#header-flyout-panel.header-flyout-panel-open .header-flyout-col-elevated .header-flyout-group:nth-child(1) .header-flyout-list-item-elevated:nth-child(2) {
    transition-delay: 0.304s;
}

#header-flyout-panel.header-flyout-panel-open .header-flyout-col-elevated .header-flyout-group:nth-child(1) .header-flyout-list-item-elevated:nth-child(3) {
    transition-delay: 0.328s;
}

#header-flyout-panel.header-flyout-panel-open .header-flyout-col-elevated .header-flyout-group:nth-child(1) .header-flyout-list-item-elevated:nth-child(4) {
    transition-delay: 0.352s;
}

#header-flyout-panel.header-flyout-panel-open .header-flyout-col-elevated .header-flyout-group:nth-child(2) .header-flyout-group-title,
#header-flyout-panel.header-flyout-panel-open .header-flyout-col-elevated .header-flyout-group:nth-child(2) .header-flyout-list-item-elevated:nth-child(1) {
    transition-delay: 0.32s;
}

#header-flyout-panel.header-flyout-panel-open .header-flyout-col-elevated .header-flyout-group:nth-child(2) .header-flyout-list-item-elevated:nth-child(2) {
    transition-delay: 0.344s;
}

#header-flyout-panel.header-flyout-panel-open .header-flyout-col-elevated .header-flyout-group:nth-child(2) .header-flyout-list-item-elevated:nth-child(3) {
    transition-delay: 0.368s;
}

#header-flyout-panel.header-flyout-panel-open .header-flyout-col-elevated .header-flyout-group:nth-child(2) .header-flyout-list-item-elevated:nth-child(4) {
    transition-delay: 0.392s;
}

#header-flyout-panel.header-flyout-panel-open .header-flyout-col-base .header-flyout-group:nth-child(1) .header-flyout-group-title,
#header-flyout-panel.header-flyout-panel-open .header-flyout-col-base .header-flyout-group:nth-child(1) .header-flyout-list-item:nth-child(1) {
    transition-delay: 0.3s;
}

#header-flyout-panel.header-flyout-panel-open .header-flyout-col-base .header-flyout-group:nth-child(1) .header-flyout-list-item:nth-child(2) {
    transition-delay: 0.324s;
}

#header-flyout-panel.header-flyout-panel-open .header-flyout-col-base .header-flyout-group:nth-child(1) .header-flyout-list-item:nth-child(3) {
    transition-delay: 0.348s;
}

#header-flyout-panel.header-flyout-panel-open .header-flyout-col-base .header-flyout-group:nth-child(1) .header-flyout-list-item:nth-child(4) {
    transition-delay: 0.372s;
}

#header-flyout-panel.header-flyout-panel-open .header-flyout-col-base .header-flyout-group:nth-child(1) .header-flyout-list-item:nth-child(5) {
    transition-delay: 0.396s;
}

#header-flyout-panel.header-flyout-panel-open .header-flyout-col-base .header-flyout-group:nth-child(1) .header-flyout-list-item:nth-child(6) {
    transition-delay: 0.42s;
}

#header-flyout-panel.header-flyout-panel-open .header-flyout-col-base .header-flyout-group:nth-child(1) .header-flyout-list-item:nth-child(7) {
    transition-delay: 0.444s;
}

#header-flyout-panel.header-flyout-panel-open .header-flyout-col-base .header-flyout-group:nth-child(1) .header-flyout-list-item:nth-child(8) {
    transition-delay: 0.468s;
}

#header-flyout-panel.header-flyout-panel-open .header-flyout-col-base .header-flyout-group:nth-child(2) .header-flyout-group-title,
#header-flyout-panel.header-flyout-panel-open .header-flyout-col-base .header-flyout-group:nth-child(2) .header-flyout-list-item:nth-child(1) {
    transition-delay: 0.34s;
}

#header-flyout-panel.header-flyout-panel-open .header-flyout-col-base .header-flyout-group:nth-child(2) .header-flyout-list-item:nth-child(2) {
    transition-delay: 0.364s;
}

#header-flyout-panel.header-flyout-panel-open .header-flyout-col-base .header-flyout-group:nth-child(2) .header-flyout-list-item:nth-child(3) {
    transition-delay: 0.388s;
}

#header-flyout-panel.header-flyout-panel-open .header-flyout-col-base .header-flyout-group:nth-child(2) .header-flyout-list-item:nth-child(4) {
    transition-delay: 0.412s;
}

#header-flyout-panel.header-flyout-panel-open .header-flyout-col-base .header-flyout-group:nth-child(2) .header-flyout-list-item:nth-child(5) {
    transition-delay: 0.436s;
}

#header-flyout-panel.header-flyout-panel-open .header-flyout-col-base .header-flyout-group:nth-child(2) .header-flyout-list-item:nth-child(6) {
    transition-delay: 0.46s;
}

#header-flyout-panel.header-flyout-panel-open .header-flyout-col-base .header-flyout-group:nth-child(2) .header-flyout-list-item:nth-child(7) {
    transition-delay: 0.484s;
}

#header-flyout-panel.header-flyout-panel-open .header-flyout-col-base .header-flyout-group:nth-child(2) .header-flyout-list-item:nth-child(8) {
    transition-delay: 0.508s;
}

#header-flyout-panel.header-flyout-panel-open .header-flyout-col-base .header-flyout-group:nth-child(3) .header-flyout-group-title,
#header-flyout-panel.header-flyout-panel-open .header-flyout-col-base .header-flyout-group:nth-child(3) .header-flyout-list-item:nth-child(1) {
    transition-delay: 0.38s;
}

#header-flyout-panel.header-flyout-panel-open .header-flyout-col-base .header-flyout-group:nth-child(3) .header-flyout-list-item:nth-child(2) {
    transition-delay: 0.404s;
}

#header-flyout-panel.header-flyout-panel-open .header-flyout-col-base .header-flyout-group:nth-child(3) .header-flyout-list-item:nth-child(3) {
    transition-delay: 0.428s;
}

#header-flyout-panel.header-flyout-panel-open .header-flyout-col-base .header-flyout-group:nth-child(3) .header-flyout-list-item:nth-child(4) {
    transition-delay: 0.452s;
}

#header-flyout-panel.header-flyout-panel-open .header-flyout-col-base .header-flyout-group:nth-child(3) .header-flyout-list-item:nth-child(5) {
    transition-delay: 0.476s;
}

#header-flyout-panel.header-flyout-panel-open .header-flyout-col-base .header-flyout-group:nth-child(3) .header-flyout-list-item:nth-child(6) {
    transition-delay: 0.5s;
}

#header-flyout-panel.header-flyout-panel-open .header-flyout-col-base .header-flyout-group:nth-child(3) .header-flyout-list-item:nth-child(7) {
    transition-delay: 0.524s;
}

#header-flyout-panel.header-flyout-panel-open .header-flyout-col-base .header-flyout-group:nth-child(3) .header-flyout-list-item:nth-child(8) {
    transition-delay: 0.548s;
}

/* SWITCHING BETWEEN TWO ALREADY-OPEN FLYOUTS (e.g. Marketplace -> Apps):
   header-flyout.js adds .header-flyout-panel-switching alongside
   .header-flyout-panel-open for these transitions. The base delays
   above (.28s+) exist so content doesn't start revealing before its
   parent panel/scrim have finished their own entrance — necessary on
   a cold open, but the panel/scrim are already fully open on a
   switch, so that floor was just dead time before the new items
   started appearing. These rules override the delay down to near-
   zero (keeping the same per-item stagger step) while everything
   above still applies as the fallback for a fresh open. */
#header-flyout-panel.header-flyout-panel-switching .header-flyout-col-elevated .header-flyout-group:nth-child(1) .header-flyout-group-title,
#header-flyout-panel.header-flyout-panel-switching .header-flyout-col-elevated .header-flyout-group:nth-child(1) .header-flyout-list-item-elevated:nth-child(1) {
    transition-delay: 0s;
}

#header-flyout-panel.header-flyout-panel-switching .header-flyout-col-elevated .header-flyout-group:nth-child(1) .header-flyout-list-item-elevated:nth-child(2) {
    transition-delay: 0.024s;
}

#header-flyout-panel.header-flyout-panel-switching .header-flyout-col-elevated .header-flyout-group:nth-child(1) .header-flyout-list-item-elevated:nth-child(3) {
    transition-delay: 0.048s;
}

#header-flyout-panel.header-flyout-panel-switching .header-flyout-col-elevated .header-flyout-group:nth-child(1) .header-flyout-list-item-elevated:nth-child(4) {
    transition-delay: 0.072s;
}

#header-flyout-panel.header-flyout-panel-switching .header-flyout-col-elevated .header-flyout-group:nth-child(2) .header-flyout-group-title,
#header-flyout-panel.header-flyout-panel-switching .header-flyout-col-elevated .header-flyout-group:nth-child(2) .header-flyout-list-item-elevated:nth-child(1) {
    transition-delay: 0.04s;
}

#header-flyout-panel.header-flyout-panel-switching .header-flyout-col-elevated .header-flyout-group:nth-child(2) .header-flyout-list-item-elevated:nth-child(2) {
    transition-delay: 0.064s;
}

#header-flyout-panel.header-flyout-panel-switching .header-flyout-col-elevated .header-flyout-group:nth-child(2) .header-flyout-list-item-elevated:nth-child(3) {
    transition-delay: 0.088s;
}

#header-flyout-panel.header-flyout-panel-switching .header-flyout-col-elevated .header-flyout-group:nth-child(2) .header-flyout-list-item-elevated:nth-child(4) {
    transition-delay: 0.112s;
}

#header-flyout-panel.header-flyout-panel-switching .header-flyout-col-base .header-flyout-group:nth-child(1) .header-flyout-group-title,
#header-flyout-panel.header-flyout-panel-switching .header-flyout-col-base .header-flyout-group:nth-child(1) .header-flyout-list-item:nth-child(1) {
    transition-delay: 0.02s;
}

#header-flyout-panel.header-flyout-panel-switching .header-flyout-col-base .header-flyout-group:nth-child(1) .header-flyout-list-item:nth-child(2) {
    transition-delay: 0.044s;
}

#header-flyout-panel.header-flyout-panel-switching .header-flyout-col-base .header-flyout-group:nth-child(1) .header-flyout-list-item:nth-child(3) {
    transition-delay: 0.068s;
}

#header-flyout-panel.header-flyout-panel-switching .header-flyout-col-base .header-flyout-group:nth-child(1) .header-flyout-list-item:nth-child(4) {
    transition-delay: 0.092s;
}

#header-flyout-panel.header-flyout-panel-switching .header-flyout-col-base .header-flyout-group:nth-child(1) .header-flyout-list-item:nth-child(5) {
    transition-delay: 0.116s;
}

#header-flyout-panel.header-flyout-panel-switching .header-flyout-col-base .header-flyout-group:nth-child(1) .header-flyout-list-item:nth-child(6) {
    transition-delay: 0.14s;
}

#header-flyout-panel.header-flyout-panel-switching .header-flyout-col-base .header-flyout-group:nth-child(1) .header-flyout-list-item:nth-child(7) {
    transition-delay: 0.164s;
}

#header-flyout-panel.header-flyout-panel-switching .header-flyout-col-base .header-flyout-group:nth-child(1) .header-flyout-list-item:nth-child(8) {
    transition-delay: 0.188s;
}

#header-flyout-panel.header-flyout-panel-switching .header-flyout-col-base .header-flyout-group:nth-child(2) .header-flyout-group-title,
#header-flyout-panel.header-flyout-panel-switching .header-flyout-col-base .header-flyout-group:nth-child(2) .header-flyout-list-item:nth-child(1) {
    transition-delay: 0.06s;
}

#header-flyout-panel.header-flyout-panel-switching .header-flyout-col-base .header-flyout-group:nth-child(2) .header-flyout-list-item:nth-child(2) {
    transition-delay: 0.084s;
}

#header-flyout-panel.header-flyout-panel-switching .header-flyout-col-base .header-flyout-group:nth-child(2) .header-flyout-list-item:nth-child(3) {
    transition-delay: 0.108s;
}

#header-flyout-panel.header-flyout-panel-switching .header-flyout-col-base .header-flyout-group:nth-child(2) .header-flyout-list-item:nth-child(4) {
    transition-delay: 0.132s;
}

#header-flyout-panel.header-flyout-panel-switching .header-flyout-col-base .header-flyout-group:nth-child(2) .header-flyout-list-item:nth-child(5) {
    transition-delay: 0.156s;
}

#header-flyout-panel.header-flyout-panel-switching .header-flyout-col-base .header-flyout-group:nth-child(2) .header-flyout-list-item:nth-child(6) {
    transition-delay: 0.18s;
}

#header-flyout-panel.header-flyout-panel-switching .header-flyout-col-base .header-flyout-group:nth-child(2) .header-flyout-list-item:nth-child(7) {
    transition-delay: 0.204s;
}

#header-flyout-panel.header-flyout-panel-switching .header-flyout-col-base .header-flyout-group:nth-child(2) .header-flyout-list-item:nth-child(8) {
    transition-delay: 0.228s;
}

#header-flyout-panel.header-flyout-panel-switching .header-flyout-col-base .header-flyout-group:nth-child(3) .header-flyout-group-title,
#header-flyout-panel.header-flyout-panel-switching .header-flyout-col-base .header-flyout-group:nth-child(3) .header-flyout-list-item:nth-child(1) {
    transition-delay: 0.08s;
}

#header-flyout-panel.header-flyout-panel-switching .header-flyout-col-base .header-flyout-group:nth-child(3) .header-flyout-list-item:nth-child(2) {
    transition-delay: 0.104s;
}

#header-flyout-panel.header-flyout-panel-switching .header-flyout-col-base .header-flyout-group:nth-child(3) .header-flyout-list-item:nth-child(3) {
    transition-delay: 0.128s;
}

#header-flyout-panel.header-flyout-panel-switching .header-flyout-col-base .header-flyout-group:nth-child(3) .header-flyout-list-item:nth-child(4) {
    transition-delay: 0.152s;
}

#header-flyout-panel.header-flyout-panel-switching .header-flyout-col-base .header-flyout-group:nth-child(3) .header-flyout-list-item:nth-child(5) {
    transition-delay: 0.176s;
}

#header-flyout-panel.header-flyout-panel-switching .header-flyout-col-base .header-flyout-group:nth-child(3) .header-flyout-list-item:nth-child(6) {
    transition-delay: 0.2s;
}

#header-flyout-panel.header-flyout-panel-switching .header-flyout-col-base .header-flyout-group:nth-child(3) .header-flyout-list-item:nth-child(7) {
    transition-delay: 0.224s;
}

#header-flyout-panel.header-flyout-panel-switching .header-flyout-col-base .header-flyout-group:nth-child(3) .header-flyout-list-item:nth-child(8) {
    transition-delay: 0.248s;
}

/* Group titles: 12px / weight 400 / muted gray, no uppercase or
   underline — matches .globalnav-submenu-header exactly. */
.header-flyout-group-title {
    font-family: var(--font-family-sans);
    font-size: 12px;
    line-height: 1.333;
    font-weight: var(--font-weight-400);
    letter-spacing: -0.01em;
    color: var(--color-text-secondary);
    margin-bottom: 6px;
}

.header-flyout-list {
    list-style: none;
    margin: 0;
}

.header-flyout-list-item {
    margin-inline-start: -11px;
    margin-inline-end: -11px;
}

.header-flyout-list-item:first-child {
    margin-top: 10px;
}

/* Base links: 12px / weight 600 — small, dense, matches
   .globalnav-submenu-list-item exactly. */
.header-flyout-link {
    display: inline-block;
    padding: 7px 11px;
    margin-bottom: -6px;
    font-family: var(--font-family-sans);
    font-size: 12px;
    line-height: 1.333;
    font-weight: var(--font-weight-600);
    letter-spacing: -0.01em;
    color: var(--color-text-secondary);
    transition: color 0.32s cubic-bezier(0.4, 0, 0.6, 1);
}

.header-flyout-link:hover {
    color: var(--color-primary-hover);
}

/* Elevated links: 24px / weight 700, our display font — the
   "featured, headline-style" column. Same color as base links
   (--color-text-secondary / --color-primary-hover on hover),
   matching header-apple.css reusing one color var for both tiers;
   only the type scale sets the elevated column apart. */
.header-flyout-list-item-elevated {
    margin-inline-start: -11px;
    margin-inline-end: -11px;
}

.header-flyout-list-item-elevated:first-child {
    margin-top: 6px;
}

.header-flyout-list-item-elevated+.header-flyout-list-item {
    margin-top: 14px;
}

.header-flyout-link-elevated {
    display: inline-block;
    padding: 7px 11px;
    margin-bottom: -6px;
    font-family: var(--font-family-display);
    font-size: 24px;
    line-height: 1.167;
    font-weight: var(--font-weight-700);
    letter-spacing: 0.009em;
    color: var(--color-text-secondary);
    transition: color 0.32s cubic-bezier(0.4, 0, 0.6, 1);
}

.header-flyout-link-elevated:hover {
    color: var(--color-primary-hover);
}

/* Both links above set margin-bottom: -6px as a hit-area trick —
   larger click target, tight visual list — but on the very last item
   in a group that was quietly eating into the panel's bottom padding.
   Cancel it out specifically on the last item so the full padding
   value is what actually shows up as breathing room at the end. */
.header-flyout-list-item:last-child .header-flyout-link,
.header-flyout-list-item-elevated:last-child .header-flyout-link-elevated {
    margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {

    #header-flyout-scrim,
    #header-flyout-panel,
    .header-flyout-inner,
    .header-flyout-group {
        transition: none;
    }

    .header-flyout-group {
        opacity: 1;
        transform: none;
    }
}

/* ----------------------------------------------------------------
   RESPONSIVE
   Flyouts are desktop-only for now — same breakpoint header.css
   already uses to drop nav links and the search dropdown.
   ---------------------------------------------------------------- */
@media (max-width: 750px) {

    #header-flyout-panel,
    #header-flyout-scrim {
        display: none;
    }
}