/*
 * ── `nava`: the media store's storefront, as a template ───────────────────
 *
 * the retired store app is the one app on this installation that kept its own
 * design system — its own palette, its own radii, its own ambient chrome —
 * and this is that look, declared as a template a site can wear (root
 * specs/themes). A site picks it in the panel and wears it; nothing about the
 * media store itself changes.
 *
 * It dresses the platform's blocks — the frame's and the pages' — by their
 * classes; it ships no components. Its own file, fetched only by a site that
 * wears it, so the other templates' sites pay nothing for it.
 *
 * The values below are the retired store app's `globals.css`'s, with
 * three deliberate differences:
 *
 * - the section hues (`--bs-section-*`, one per content type) are gone. Four
 *   fixed hues are a fact about that catalogue — audiobook blue, ebook green
 *   — and a site's sections are whatever its own taxonomy says. The `nava`
 *   components tint a category door from a rotating palette instead.
 * - `--chrome-ink` and `--brand-accent` are resolved rather than dropped: they
 *   are the shared stylesheet's names for surfaces the media store paints with
 *   literals.
 * - the radii are restated under `--radius-step-*`. `@theme inline` has
 *   already inlined `--radius` into every `rounded-*` rule, so a scope that
 *   set `--radius` would set four variables that do nothing.
 *
 * A site's own branding still wins over all of it: `RootLayout` writes
 * `--primary`/`--secondary` onto `<html>` as an inline style, and no class rule
 * outranks that. The `#4060e8` below is what a site that has chosen no colour
 * gets.
 */
.theme-nava {
  --background: #f8fafc;
  --foreground: #0f172b;
  --card: #ffffff;
  --card-foreground: #0f172b;
  --popover: #ffffff;
  --popover-foreground: #0f172b;
  --primary: #4060e8;
  --primary-foreground: #ffffff;
  --secondary: #f1f5f9;
  --secondary-foreground: #0f172b;
  --muted: #f1f5f9;
  --muted-foreground: #62748e;
  --accent: #eef1fe;
  --accent-foreground: #2d49d0;
  --destructive: #e7000b;
  --destructive-foreground: #ffffff;
  --border: #e2e8f0;
  --input: #e2e8f0;
  --ring: #5b7cf1;

  --primary-50: #eef1fe;
  --primary-100: #d5dcfb;
  --primary-200: #adb9f7;
  --primary-300: #8496f3;
  --primary-400: #6e82f2;
  --primary-500: #5b7cf1;
  --primary-600: #4060e8;
  --primary-700: #2d49d0;
  --primary-800: #1c308f;
  --primary-900: #0e1c5a;
  --primary-950: #070e30;

  /* The green half of the headline gradient, which is where the media store
     puts its second colour. The footer band takes the deep navy that app's
     dark surface is, rather than the near-black default. */
  --brand-accent: #00dc82;
  --brand-accent-foreground: #052e16;
  --chrome-ink: var(--brand-secondary, #0a1026);
  --chrome-ink-foreground: var(--brand-secondary-foreground, #cad5e2);

  --surface-page: #f8fafc;
  --surface-alt: #eff2f9;
  --surface-input: #f1f5f9;
  --surface-panel: #f2f4f9;
  --ink-secondary: #314158;

  /* `--radius: 0.75rem` and the ±4px/±2px steps shadcn derives from it, in
     the storefront's variable names. */
  --radius-step-sm: 8px;
  --radius-step-md: 10px;
  --radius-step-lg: 12px;
  --radius-step-xl: 16px;

  /* The template's own primitives — the header's translucent surface, the
     card tint behind a cover, and the three shadows the hero is built from.
     Prefixed `--nava-` rather than the media store's `--bs-`: that prefix is
     that app's design system, and half of what it names has no counterpart
     here. */
  --nava-header: rgba(255, 255, 255, 0.85);
  --nava-cover-tint: #eff2f9;
  --nava-shadow-header: 0 0 48px rgba(153, 153, 153, 0.3);
  --nava-shadow-cover: 0 24px 48px rgba(15, 23, 43, 0.18);
  --nava-shadow-chip: 0 18px 40px rgba(15, 23, 43, 0.16);
}

/* Dark, in the same two halves the default palette above is split into — the
   OS for a visitor with no JavaScript, the class for a visitor who chose. The
   scope sits on `<html>` (the account panel is outside the storefront group
   and must wear the site's template too), which is the same element
   next-themes writes `.dark` onto, so `:root.dark.theme-nava` is one element
   rather than a descendant selector. */
@media (prefers-color-scheme: dark) {
  :root:not(.light).theme-nava,
  :root:not(.light) .theme-nava {
    --background: #0a1026;
    --foreground: #ffffff;
    --card: #111827;
    --card-foreground: #ffffff;
    --popover: #111827;
    --popover-foreground: #ffffff;
    --primary: #5b7cf1;
    --primary-foreground: #ffffff;
    --secondary: #1d293d;
    --secondary-foreground: #ffffff;
    --muted: #1d293d;
    --muted-foreground: #90a1b9;
    --accent: #1c308f;
    --accent-foreground: #d5dcfb;
    --destructive: #ff6467;
    --destructive-foreground: #0a1026;
    --border: rgba(255, 255, 255, 0.08);
    --input: rgba(255, 255, 255, 0.12);
    --ring: #5b7cf1;

    --surface-page: #0a1026;
    --surface-alt: #1d293d;
    --surface-input: #314158;
    --surface-panel: #111827;
    --ink-secondary: #cad5e2;

    --nava-header: rgba(10, 16, 38, 0.85);
    --nava-cover-tint: #1d293d;
    --nava-shadow-header: 0 0 48px rgba(0, 0, 0, 0.5);
  }
}

/* Same palette as the media query above — change both. */
:root.dark.theme-nava,
.dark .theme-nava {
  --background: #0a1026;
  --foreground: #ffffff;
  --card: #111827;
  --card-foreground: #ffffff;
  --popover: #111827;
  --popover-foreground: #ffffff;
  --primary: #5b7cf1;
  --primary-foreground: #ffffff;
  --secondary: #1d293d;
  --secondary-foreground: #ffffff;
  --muted: #1d293d;
  --muted-foreground: #90a1b9;
  --accent: #1c308f;
  --accent-foreground: #d5dcfb;
  --destructive: #ff6467;
  --destructive-foreground: #0a1026;
  --border: rgba(255, 255, 255, 0.08);
  --input: rgba(255, 255, 255, 0.12);
  --ring: #5b7cf1;

  --surface-page: #0a1026;
  --surface-alt: #1d293d;
  --surface-input: #314158;
  --surface-panel: #111827;
  --ink-secondary: #cad5e2;

  --nava-header: rgba(10, 16, 38, 0.85);
  --nava-cover-tint: #1d293d;
  --nava-shadow-header: 0 0 48px rgba(0, 0, 0, 0.5);
}

/*
 * The template's helper classes.
 *
 * Not scoped under `.theme-nava` even though only its components write them:
 * every one of them resolves a token the scope declares, so a stray use
 * outside it renders in the default palette rather than breaking, and the
 * `nava-` prefix is what keeps them from colliding. Scoping the selectors as
 * well would double the specificity of rules that are already only reachable
 * from one folder.
 */
.nava-container {
  width: 100%;
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: 1rem;
}
@media (min-width: 640px) {
  .nava-container {
    padding-inline: 1.5rem;
  }
}

/* One row inside a category door: a hairline hover that tints from the door's
   own hue rather than the page's accent. */
.nava-door-row:hover {
  background: color-mix(in oklab, var(--door, var(--primary)) 9%, transparent);
}

/* ── The page-builder blocks this template used to own ──────────────────────
 *
 * `nava`'s front door was a gradient hero, four category doors and a pair of
 * rails, and all four were THIS package's components on a page only this
 * template could draw. They are app blocks now (ADR-0026 step 2): one markup,
 * placeable on any page, drawn by any template.
 *
 * What is left here is the only part that was ever this template's — the look.
 * The structure below is `src/content`'s `sb-showcase-*`, restyled inside this
 * scope into the gradient and the glow. A site on `default` places the same
 * block and gets the platform's green; a site on `nava` gets what it had.
 *
 * That is the whole argument of the ADR in ten selectors: a template that owns
 * a page costs a page per template, and a template that owns a palette costs a
 * palette.
 */

.theme-nava .sb-showcase-hero {
  background: linear-gradient(135deg, color-mix(in oklab, var(--primary) 22%, transparent), transparent 65%),
    var(--card);
  border-color: color-mix(in oklab, var(--primary) 28%, var(--border));
  box-shadow: 0 24px 60px -32px color-mix(in oklab, var(--primary) 55%, transparent);
}

.theme-nava .sb-showcase-hero-title {
  letter-spacing: -0.01em;
}

.theme-nava .sb-showcase-search {
  border-color: color-mix(in oklab, var(--primary) 25%, var(--border));
  box-shadow: 0 12px 32px -20px color-mix(in oklab, var(--primary) 60%, transparent);
}

.theme-nava .sb-showcase-stats dt {
  font-size: 2rem;
}

/* The glow behind each door, which is what made these cards `nava`'s. Position
   rather than a per-door variable: the template's own `nava-hues` assigned a
   hue by index, and `:nth-child` is the same idea without a data field the
   block would have to carry for one template's benefit. */
.theme-nava .sb-showcase-door {
  border-color: color-mix(in oklab, var(--primary) 18%, var(--border));
  position: relative;
  overflow: hidden;
}

.theme-nava .sb-showcase-door::before {
  background: radial-gradient(60% 60% at 80% 0%, color-mix(in oklab, var(--door, var(--primary)) 30%, transparent), transparent 70%);
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.theme-nava .sb-showcase-door:nth-child(4n + 1) { --door: var(--primary); }
.theme-nava .sb-showcase-door:nth-child(4n + 2) { --door: #7c5cff; }
.theme-nava .sb-showcase-door:nth-child(4n + 3) { --door: #14b8a6; }
.theme-nava .sb-showcase-door:nth-child(4n + 4) { --door: #f59e0b; }

.theme-nava .sb-showcase-door > * {
  position: relative;
}

.theme-nava .sb-showcase-door-enter {
  font-weight: 600;
}

/* The band heading, given the rule this template marks a section with.
 *
 * It arrived because a page BUILT out of these blocks was the one place on a
 * `nava` site where a section opened with a bare bold line, while the pages the
 * template drew itself carried the mark. Those pages are the app's again
 * (ADR-0047) and this rule is what is left of the shape — which makes it the
 * right kind of thing for a template to own: a selector over somebody else's
 * markup, not a copy of it.
 *
 * `h2` only, and an inline `::before` rather than a flex row. A section's own
 * heading is what carries the mark; an `h3` inside one is a sub-heading and
 * would end up with two. And the marker has to sit in the text flow, because
 * `.sb-heading` honours the editor's `text-align` — a flex row would silently
 * ignore a centred heading and pin the mark to the start edge. */
.theme-nava h2.sb-heading::before {
  background: linear-gradient(to bottom, var(--primary), color-mix(in oklab, var(--primary) 30%, transparent));
  border-radius: 9999px;
  content: '';
  display: inline-block;
  block-size: 1.25rem;
  inline-size: 0.25rem;
  margin-inline-end: 0.625rem;
  vertical-align: -0.15em;
}

/* ── The frame's blocks, in nava's dress ─────────────────────────────────────
 *
 * The frame is the site's own documents now (specs/site-frame): one set of
 * chrome blocks, laid out by whichever variant the owner picked. What made a
 * header nava's was never its layout but its look — the translucent sticky
 * bar, the bordered gradient squares at its end, the lettered logo, the red
 * count on the basket, the centred footer between hairlines — and that is
 * what this section restates, as selectors over the blocks' markup.
 *
 * The values are the header and footer components this template drew before
 * its frame became documents.
 */

.theme-nava .sb-chrome-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--border);
  background: var(--nava-header);
  box-shadow: var(--nava-shadow-header);
  backdrop-filter: blur(24px);
}

.theme-nava .sb-chrome-header .sb-section-inner {
  align-items: center;
}

/* One row, as nava's header always was: its columns lay their blocks side by
   side and do not wrap under each other. */
.theme-nava .sb-chrome-header .sb-column {
  flex-wrap: nowrap;
  align-self: center;
  gap: 0.5rem;
}

/* The controls at the end: one square each, the account a wider pill. A
   field-style search is a form, not a control, and keeps its own shape. */
.theme-nava .sb-chrome-header :is(a.sb-chrome-search, button.sb-chrome-search, .sb-chrome-cart, .sb-chrome-account, .sb-chrome-theme, button.sb-chrome-locale, .sb-chrome-menu > button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-step-lg);
  background: linear-gradient(to bottom, var(--card), var(--surface-alt));
  color: color-mix(in oklab, var(--foreground) 75%, transparent);
  transition: color 150ms;
}

.theme-nava .sb-chrome-header :is(a.sb-chrome-search, button.sb-chrome-search, .sb-chrome-cart, .sb-chrome-account, .sb-chrome-theme, button.sb-chrome-locale, .sb-chrome-menu > button):hover {
  color: var(--foreground);
}

/* The language switcher sets its own box inline (`LanguageSwitcher`'s
   `size`, 40px), which a class cannot outweigh: `min-width` above widens it,
   and only this brings it up to its neighbours' height. */
.theme-nava .sb-chrome-header button.sb-chrome-locale {
  height: 2.75rem !important;
}

/* The menu's trigger is a phone's control only; the square above must not
   bring it back on a wide page. The page's width, not the window's, so the
   builder's phone preview answers too. */
@container sb-page (width >= 768px) {
  .theme-nava .sb-chrome-header .sb-chrome-menu > button {
    display: none;
  }
}

.theme-nava .sb-chrome-header .sb-chrome-account:has(span) {
  padding-inline: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.theme-nava .sb-chrome-header .sb-chrome-account svg {
  width: 1rem;
  height: 1rem;
}

.theme-nava .sb-chrome-cart .sb-chrome-cart-count {
  top: -0.375rem;
  inset-inline-end: auto;
  inset-inline-start: -0.25rem;
  min-width: 1.25rem;
  height: 1.25rem;
  background-color: var(--destructive);
  color: var(--destructive-foreground);
  font-size: 10px;
  font-weight: 700;
}

/* The lettered square where a site has no logo picture. */
.theme-nava .sb-chrome-logo > span {
  font-weight: 700;
}

.theme-nava .sb-chrome-logo:not(:has(img))::before {
  content: attr(data-initial);
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-step-sm);
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: 0.8rem;
  font-weight: 700;
}

/* The menu's rows: muted, semibold, a soft pill on hover, and a chevron on a
   row that opens something. */
.theme-nava .sb-chrome-header .sb-chrome-menu > ul {
  flex-wrap: nowrap;
  gap: 0.25rem;
}

.theme-nava .sb-chrome-header .sb-chrome-menu-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.625rem 1rem;
  border-radius: var(--radius-step-lg);
  color: var(--muted-foreground);
  white-space: nowrap;
  font-size: 0.875rem;
  font-weight: 600;
  transition: background-color 150ms, color 150ms;
}

.theme-nava .sb-chrome-header .sb-chrome-menu-link:hover,
.theme-nava .sb-chrome-header li:focus-within > .sb-chrome-menu-link {
  background: color-mix(in oklab, var(--primary) 7%, transparent);
  color: var(--primary);
}

.theme-nava .sb-chrome-header li:has(> .sb-chrome-mega, > .sb-chrome-dropdown) > .sb-chrome-menu-link::after {
  content: '';
  width: 0.4rem;
  height: 0.4rem;
  /* Physical sides on purpose: a chevron points down in either direction. */
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  opacity: 0.6;
  transform: translateY(-0.1rem) rotate(45deg);
}

.theme-nava .sb-chrome-mega-panel {
  border-radius: var(--radius-step-xl);
  background-color: var(--popover);
}

/* The footer: centred where it is one column (nava's own), between hairlines.
   A footer laid out in several columns keeps its columns. */
.theme-nava .sb-chrome-footer {
  border-top: 1px solid var(--border);
}

.theme-nava .sb-chrome-footer .sb-section + .sb-section {
  border-top: 1px solid var(--border);
}

.theme-nava .sb-chrome-footer .sb-section-inner:not(:has(> .sb-column + .sb-column)) > .sb-column {
  align-items: center;
  text-align: center;
}

.theme-nava .sb-chrome-footer :is(.sb-chrome-menu, .sb-chrome-module-links, .sb-chrome-contact, .sb-chrome-social) {
  color: var(--muted-foreground);
  font-size: 0.75rem;
  font-weight: 600;
}

.theme-nava .sb-chrome-footer .sb-chrome-menu > ul,
.theme-nava .sb-chrome-footer :is(.sb-chrome-module-links, .sb-chrome-contact, .sb-chrome-social) {
  justify-content: center;
}

.theme-nava .sb-chrome-footer a:hover {
  color: var(--foreground);
}

.theme-nava .sb-chrome-copyright {
  color: var(--muted-foreground);
  opacity: 1;
}