/* ================================================================
   HEADER.CSS — Nexora universal site header
   Depends on root-tokens.css + core.css. Styles the header markup
   shared across pages: header-section (wrapper only for now —
   nav/logo/actions markup will be added in a later pass).

   Sits on --color-surface, same "deeper than the page" treatment
   as the footer, so header + footer read as matching bookend bands
   around the lighter --color-background page content.
   ================================================================ */

.header-section {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: 44px;
    background: rgba(var(--color-surface-rgb), 0.7);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    transition: background var(--duration-base) var(--ease-standard);
}

/* When the search dropdown is open (body.search-open, toggled by
   search-dropdown.js), the header drops the frosted-glass blur and
   switches to the dropdown's own solid --color-surface, so header +
   dropdown read as one continuous solid panel instead of a blurred
   strip sitting on top of a solid one.

   background switches INSTANTLY here (0s), not eased — .search-dropdown
   itself 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 — the header just
   matches the panel's solid color from frame one, same as the panel
   itself does. */
body.search-open .header-section {
    background: var(--color-surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: none;
}

/* When the search dropdown closes, .header-section falls back to its
   base rule above, which already eases background back to frosted
   over --duration-base with the same backdrop-filter delay trick —
   no separate close rule needed. Closing carries no seam risk since
   the panel below is fading itself out while still fully opaque, so
   there's nothing wrong with easing the header back gradually. */

.header-context {
    max-width: var(--container-max);
    height: 100%;
    margin: 0 auto;
    padding: 0 var(--space-40);
}

/* ----------------------------------------------------------------
   HEADER INNER — single centered group holding logo + nav + icons,
   all three sit next to each other (not spread across the full
   width like a typical left/center/right header).
   ---------------------------------------------------------------- */
.header-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-24);
    height: 100%;
}

/* ----------------------------------------------------------------
   LOGO
   ---------------------------------------------------------------- */
.header-logo-link {
    display: flex;
    align-items: center;
}

.header-logo-img {
    height: 20px;
    width: auto;
}

/* ----------------------------------------------------------------
   NAV LINKS
   ---------------------------------------------------------------- */
.header-nav-list {
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--space-24);
}

.header-nav-link {
    font-family: var(--font-family-sans);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-500);
    color: var(--color-text-secondary);
    transition: color var(--duration-fast) var(--ease-standard);
}

.header-nav-link:hover {
    color: var(--color-text-third);
}

/* ----------------------------------------------------------------
   ICON ACTIONS — search / cart / hamburger. Each icon-btn is sized
   to exactly match its svg content (no extra hit-box padding), so
   the visible glyph edge sits flush against the --space-24 gap —
   same as the logo and nav text, which also have no invisible
   padding around them. This keeps every gap in the header equal
   both numerically and visually.
   ---------------------------------------------------------------- */
.icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    color: var(--color-text-secondary);
    transition: color var(--duration-fast) var(--ease-standard);
}

.icon-btn:hover {
    color: var(--color-text-third);
}

.icon-btn svg {
    width: 100%;
    height: 100%;
}

/* Hamburger: present in markup for later mobile-nav wiring, but
   not shown yet — kept out of layout flow entirely for now. */
.hamburger-btn {
    display: none;
}

/* ----------------------------------------------------------------
   SEARCH DROPDOWN — opens under the header on search-icon click.
   Two separate layers, matching stacking order:
     1. .search-scrim    — blurred overlay over the page content,
                            sits below the dropdown panel, covers
                            everything from the dropdown's bottom
                            edge down to the rest of the viewport.
     2. .search-dropdown  — the panel itself, solid --color-surface
                            (no blur), same background as the header
                            switches to once open (see body.search-open
                            rule above), so header + dropdown read as
                            one continuous solid panel.
   Both fixed at top: 44px (the header's own height) so they stay
   attached to the fixed header during scroll.
   Desktop only for now — hidden entirely at the mobile breakpoint.

   ANIMATION — mirrors header-flyout.css's own system (same open/close
   sequencing, same reasoning) rather than reinventing it:
     - .search-scrim fades opacity only (backdrop-filter itself can't
       meaningfully transition). will-change: opacity lives on the
       scrim's BASE rule, not the -open class — it needs lead time to
       promote the compositing layer before the fade starts, not at
       the same instant. translateZ(0) is a harder, unconditional
       version of the same hint, priming the layer from page load so
       the very first fade-in doesn't pay a one-time layer-creation
       cost mid-animation.
     - .search-dropdown grows its own height from 0 to the fixed 50vh
       (not JS-measured like the flyout, since this panel's height is
       a fixed design value, not content-driven) — same
       cubic-bezier(.4,0,.6,1) curve.
     - Quicklinks stagger in individually once the dropdown itself is
       visible, using the same "floor the delay until the parent has
       finished appearing" approach as header-flyout.css's per-item
       rules.
   search-dropdown.js toggles .search-scrim-open / .search-dropdown-open
   the same way header-flyout.js toggles its own -open classes: forced
   reflow before adding them, so there's always a real "closed" frame
   to transition from. ---------------------------------------------------------------- */
.search-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;
    transform: translateZ(0);
    transition: opacity 0.16s cubic-bezier(0.4, 0, 0.6, 1),
        visibility 0s linear 0.16s;
}

.search-scrim[hidden] {
    display: none;
}

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

.search-dropdown {
    position: fixed;
    top: 44px;
    left: 0;
    right: 0;
    height: 280px;
    max-height: 0;
    z-index: 999;
    background: var(--color-surface);
    overflow: hidden;
    transition: max-height 0.28s cubic-bezier(0.4, 0, 0.6, 1);
}

.search-dropdown[hidden] {
    display: none;
}

.search-dropdown.search-dropdown-open {
    max-height: 280px;
}

.search-dropdown-context {
    padding: var(--space-40) var(--space-40) var(--space-40) var(--space-40);
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
    opacity: 0;
    transition: opacity 0.18s cubic-bezier(0.4, 0, 0.6, 1);
    /* No max-width/auto-margin here: padding-left is set inline by
       search-dropdown.js to the header logo's actual viewport x-position,
       so this element must span the full dropdown width for that measurement
       to line up correctly (centering math would double-offset it). */
}

.search-dropdown.search-dropdown-open .search-dropdown-context {
    opacity: 1;
    transition-delay: 0.1s;
}

.search-dropdown-field {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    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);
}

.search-dropdown.search-dropdown-open .search-dropdown-field {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.22s;
}

.search-dropdown-field-icon {
    flex: none;
    width: 18px;
    height: 18px;
    color: var(--color-text-secondary);
    stroke: currentColor;
    stroke-width: 0.2px;
}

.search-dropdown-input {
    flex: 1;
    min-width: 0;
    font-family: var(--font-family-sans);
    font-size: var(--font-size-md);
    color: var(--color-text);
    background: transparent;
    border: none;
    outline: none;
}

.search-dropdown-input::placeholder {
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-500);
    opacity: 1;
}

/* .search-dropdown-quicklinks-container wraps the label + list that
   search-dropdown.js renders (see renderQuicklinks in search-dropdown.js)
   — needs its own flex/gap since the label and list are no longer
   direct children of .search-dropdown-context once wrapped. */
.search-dropdown-quicklinks-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.search-dropdown-label {
    font-family: var(--font-family-sans);
    /* Match the navigation flyout's group-title treatment. */
    font-size: 12px;
    line-height: 1.333;
    font-weight: var(--font-weight-400);
    letter-spacing: -0.01em;
    color: var(--color-text-secondary);
    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);
}

.search-dropdown.search-dropdown-open .search-dropdown-label {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.28s;
}

.search-dropdown-quicklinks {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
}

.search-dropdown-quicklink-item {
    margin-inline-start: -11px;
    margin-inline-end: -11px;
    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);
}

.search-dropdown.search-dropdown-open .search-dropdown-quicklink-item {
    opacity: 1;
    transform: translateY(0);
}

/* Per-item stagger, same 24ms step as header-flyout.css's own
   per-item rules, floored at .3s (just after the label's .28s so
   links visibly follow it) — covers up to 6 quicklinks, generous
   for the 5 currently in search-quicklinks. */
.search-dropdown.search-dropdown-open .search-dropdown-quicklink-item:nth-child(1) {
    transition-delay: 0.3s;
}

.search-dropdown.search-dropdown-open .search-dropdown-quicklink-item:nth-child(2) {
    transition-delay: 0.324s;
}

.search-dropdown.search-dropdown-open .search-dropdown-quicklink-item:nth-child(3) {
    transition-delay: 0.348s;
}

.search-dropdown.search-dropdown-open .search-dropdown-quicklink-item:nth-child(4) {
    transition-delay: 0.372s;
}

.search-dropdown.search-dropdown-open .search-dropdown-quicklink-item:nth-child(5) {
    transition-delay: 0.396s;
}

.search-dropdown.search-dropdown-open .search-dropdown-quicklink-item:nth-child(6) {
    transition-delay: 0.42s;
}

.search-dropdown-quicklink {
    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);
}

.search-dropdown-quicklink:hover {
    color: var(--color-primary-hover);
}

.search-dropdown-quicklink-item:last-child .search-dropdown-quicklink {
    margin-bottom: 0;
}

/* ----------------------------------------------------------------
   RESPONSIVE
   Mobile breakpoint set at 800px (site-wide mobile cutoff for the
   header — footer currently uses 900px/480px, header gets its own
   since its height/content behave differently at small widths).
   ---------------------------------------------------------------- */
@media (max-width: 750px) {
    .header-section {
        height: 48px;
    }

    .header-nav-link {
        display: none;
    }

    .search-dropdown,
    .search-scrim {
        display: none;
    }
}