/* Explore header — slim, logo-led nav used by the search-first exploration.
   Deliberately separate from .nn-header so the live shared header is untouched. */

:root { --ex-header-h: 62px; }

/* The component is mounted inside a wrapper element on DC pages; a sticky header would
   otherwise stick within that wrapper (its own height) rather than the page. */
ex-header { display: contents; }

/* Primary action — solid teal, warm brand gradient on hover (design system --grad-warm),
   matching the search-first home's .sf-search-submit. */
.ex-search-submit { transition: background-color var(--dur-fast, .14s) var(--ease, ease); }
.ex-search-submit:hover { background-image: linear-gradient(135deg,#B4458D 0%,#F8485E 55%,#E87722 100%); }

.ex-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--nn-page, #fff);
  border-bottom: none;
}
/* The shared component renders `ex-header nn-header`, so .nn-header's translucent
   background + blur(12px) would apply: an expensive per-frame repaint that reads as
   jump/jank while scrolling. Opaque and unblurred here, on every explore page. */
.ex-header.nn-header {
  background: var(--nn-page, #fff);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom: none;
}
/* Filtering changes page height; without a reserved gutter the scrollbar appears and
   disappears, shifting the header horizontally. */
html { scrollbar-gutter: stable; }
.ex-header.is-stuck { border-bottom: none; }

.ex-headbar {
  height: var(--ex-header-h);
  display: flex; align-items: center; justify-content: flex-start; gap: 40px;
}
/* Gap tightens before any item is forced out of the row at narrower widths. */
@media (max-width: 1100px) { .ex-headbar { gap: 20px; } }
@media (max-width: 900px) { .ex-headbar { gap: 14px; } }
/* 701-899px is the one band where the full desktop nav, the search form and the actions
   group (theme toggle + signed-in avatar) cannot all fit — the search field's 22vw floor
   wins the argument and the bar overflowed by up to ~47px. Search is the header's primary
   job, so the avatar stands down across that band rather than squeezing the field. It
   returns below 700px, where the nav moves into the tab bar and the row has room again. */
@media (min-width: 701px) and (max-width: 899px) { .ex-me { display: none; } }

.ex-logo { display: inline-flex; align-items: center; flex: 0 0 auto; min-width: 0; }
/* Flex was shrinking the img itself, squashing the wordmark's aspect ratio. */
.ex-logo img { height: 34px; width: auto; max-width: none; flex: none; display: block; }
.ex-logo .ex-logo-mark { display: none; }

.ex-nav { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; min-width: max-content; }
.ex-navlink {
  position: relative; white-space: nowrap;
  display: inline-flex; align-items: center; min-height: 44px;
  font: 300 16px var(--font-sans); color: var(--nb-teal);
  text-decoration: none; padding: 0 14px; border-radius: 99px;
  transition: color var(--dur-fast, .14s) var(--ease, ease), background var(--dur-fast, .14s) var(--ease, ease);
}
.ex-navlink:hover { color: var(--nn-ink); background: var(--bg-subtle); }
.ex-navlink.active { color: var(--nn-ink); font-weight: 400; }
/* Dark: --bg-subtle is a solid grey that reads as an outlined pill on the near-black
   header — swap for a faint wash and let cyan carry the hover. */
html[data-theme="dark"] .ex-navlink:hover { background: rgba(255,255,255,.07); color: var(--nn-cyan); }
html[data-theme="dark"] .ex-header input[name="q"] { background: rgba(255,255,255,.06); }

/* Theme toggle rendered by <ex-header> — same quiet pill as the home page's. */
.ex-theme-toggle { transition: color var(--dur-fast, .14s) var(--ease, ease), border-color var(--dur-fast, .14s) var(--ease, ease); }
.ex-theme-toggle:hover { color: var(--nn-cyan); border-color: var(--nn-cyan); }

/* Dark palette for the explore pages, so the toggle's data-theme is actually honoured.
   Page-level s- tokens alias these, so overriding here is enough. */
html[data-theme="dark"] {
  --nn-page: #0d0f11;
  --nn-card: #16191c;
  --nn-line: #282c31;
  --nn-line-2: #22262a;
  --nn-ink: #eceef0;
  --nn-body: #a8adb4;
  --nb-gray-300: #7d838b;
  --nb-gray-400: #a8adb4;
  --bg-subtle: #1b1f23;
  --nb-teal: #5cc8e0;
}
html[data-theme="dark"] body { background: var(--nn-page); color: var(--nn-ink); }

/* The row's intrinsic width (logo + three links) exceeds a phone content box,
   and the logo can't shrink without distorting — so the nav absorbs it: tighter
   metrics first, then a scrollable row rather than a clipped one. */
/* Phone: the top bar keeps logo + theme toggle on row one and a full-width pill
   search on row two; the nav moves to a fixed bottom tab bar (app convention).
   --ex-header-h is re-measured by the component, so sticky offsets follow. */
.ex-tabbar { display: none; }
.ex-burger { display: none; }
@media (max-width: 700px) {
  .ex-headbar { flex-wrap: nowrap; height: auto; padding: 9px 0; gap: 10px; align-items: center; }
  .ex-logo { order: 1; flex: none; }
  /* Phone: the box mark alone — the wordmark would eat the search bar's row. */
  .ex-logo img { display: none; }
  .ex-logo .ex-logo-mark { display: block; height: 30px; }
  .ex-nav { display: none !important; }
  /* The toggle and avatar travel inside .ex-actions, which had no order and so defaulted
     to 0 — landing the whole group left of the logo (order 1). The logo must always be
     the leftmost thing in the bar and the avatar the rightmost. */
  .ex-actions { order: 3; flex: none; margin-left: auto !important; }
  .ex-theme-toggle { order: 1; flex: none; margin-left: 0 !important; }
  .ex-me { order: 2; }
  /* Pages whose header has no search form (search results) would otherwise leave the
     toggle stranded beside the logo. */
  .ex-headbar:not(:has(form.ex-searchslot)) .ex-actions { margin-left: auto !important; }
  /* Order applies to any slot element, not just a form: the home page renders an empty
     .ex-searchslot (its search lives in the hero), which kept order 0, sat before the
     logo and pushed it in by the bar's 8px gap. Collapse it when it holds nothing. */
  .ex-searchslot { order: 2; }
  .ex-searchslot:empty { display: none !important; }
  form.ex-searchslot { flex: 1 1 auto !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; }
  form.ex-searchslot input { font-size: 16px !important; height: 38px !important; border-radius: 999px !important; padding: 0 14px !important; }
  form.ex-searchslot .ex-search-submit { display: none !important; }

  /* A floating island rather than an edge-to-edge bar: inset from all three edges,
     fully rounded, and lifted off the page with a shadow instead of a hairline. Capped
     and centred so it does not stretch the full width of a large phone. The card
     colour carries it rather than the page colour, so it reads as a surface sitting
     on the content instead of a continuation of it. */
  .ex-tabbar {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    position: fixed; left: 12px; right: 12px; z-index: 200; pointer-events: auto;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    width: auto; max-width: 430px; margin: 0 auto;
    background: color-mix(in srgb, var(--nn-card, #fff) 90%, transparent);
    backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6);
    border: 1px solid color-mix(in srgb, var(--nn-line) 65%, transparent);
    border-radius: 22px;
    box-shadow: 0 1px 2px rgba(0,39,51,.05), 0 18px 40px -18px rgba(0,39,51,.45);
    padding: 6px;
    transition: max-width .3s var(--ease, cubic-bezier(.2,.8,.25,1)),
      padding .3s var(--ease, cubic-bezier(.2,.8,.25,1)),
      border-radius .3s var(--ease, cubic-bezier(.2,.8,.25,1));
  }
  /* Scrolling down shrinks the island to its icons so it takes less of the screen;
     scrolling up, or tapping it, brings the labels back. Set by ex-header.js. */
  .ex-tabbar.is-compact { max-width: 250px; padding: 3px; border-radius: 19px; }
  .ex-tab span { max-height: 14px; opacity: 1; overflow: hidden;
    transition: max-height .3s var(--ease, cubic-bezier(.2,.8,.25,1)), opacity .2s ease; }
  .ex-tabbar.is-compact .ex-tab { min-height: 42px; gap: 0; }
  .ex-tabbar.is-compact .ex-tab span { max-height: 0; opacity: 0; }
  .ex-tabbar.is-compact .ex-tab svg { padding: 4px 10px; }
  @media (prefers-reduced-motion: reduce) {
    .ex-tabbar, .ex-tab span { transition: none; }
  }
  .ex-tab {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    min-height: 50px; padding: 4px 0 2px; text-decoration: none; color: var(--nb-gray-300);
    font: 500 10.5px var(--font-sans); letter-spacing: .01em; -webkit-tap-highlight-color: transparent;
    transition: color .18s var(--ease, ease); position: relative; z-index: 1; pointer-events: auto;
  }
  .ex-tab svg {
    padding: 4px 14px; border-radius: 999px; box-sizing: content-box; width: 20px; height: 20px;
    transition: background .22s var(--ease, ease), transform .22s cubic-bezier(.34,1.4,.64,1);
  }
  .ex-tab.active { color: var(--nn-cyan, #005567); font-weight: 600; }
  .ex-tab.active svg { background: color-mix(in srgb, var(--nn-cyan, #005567) 14%, transparent); stroke-width: 2.1; }
  .ex-tab:active svg { transform: scale(.9); }
  .ex-tab:hover { color: var(--nn-ink); }
  /* Nothing should sit under the bar. */
  body { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 600px) {
  :root { --ex-header-h: 56px; }
  .ex-headbar { gap: 8px; }
  .ex-navlink { padding: 0 9px; font-size: 13.5px; }
}
@media (max-width: 420px) {
  .ex-navlink { padding: 0 7px; font-size: 13px; }
  .ex-nav { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .ex-nav::-webkit-scrollbar { display: none; }
  .ex-navlink { flex: 0 0 auto; }
}

/* The island needs its own separation in dark, where a soft shadow reads as nothing. */
@media (max-width: 700px) {
  html[data-theme="dark"] .ex-tabbar {
    background: color-mix(in srgb, var(--nn-card) 92%, transparent);
    border-color: color-mix(in srgb, #fff 10%, transparent);
    box-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 18px 40px -16px rgba(0,0,0,.8);
  }
}