/* Scoped copy of the canonical global header (home.css .site-header block),
   isolated to /courses only. Local custom properties avoid colliding with
   styles.css's own :root variables (--ink/--muted/--accent already have
   different catalog-page values) and with the legacy .brand/.brand-mark/
   .nav/.nav-links selectors already defined for the old topbar markup.

   The header is deliberately static on /courses (owner decision, iteration
   2): the empty [data-site-header] slot reserves the header's final height
   up front so site-chrome.js's later outerHTML swap causes no layout shift,
   and the header itself gets an explicit `animation: none` so it never
   inherits home.css's .site-header enter-stage keyframe (never referenced
   in this file to begin with, but made explicit so it stays true even if a
   later edit copies more of home.css in). Only the existing catalog-enter
   animation (styles.css, unrelated to this file) still runs below it.

   Iteration 4: /courses never loads home.css, so it never received that
   file's `html { color-scheme: dark; }`, and Chromium rendered the native
   viewport scrollbar in its default (light) scheme here while every
   editorial page (which does load home.css) renders it dark. Reproducing
   just that one declaration here matches the native scrollbar to the rest
   of the public site without touching home.css or styles.css.

   Iteration 5: [data-course-grid] in index.html ships empty and is filled
   client-side by app.js's fetch("/api/public/courses").then(...) (app.js
   ~L444), after first paint. First paint can therefore be shorter than the
   viewport (no scrollbar needed yet); once cards render, document height
   grows, the scrollbar appears, and the layout viewport width - and every
   centered element/background on it - shifts. `scrollbar-gutter: stable`
   reserves the scrollbar's gutter from first paint regardless of whether
   the page currently overflows (this is the property's defined behavior,
   not an incidental side effect), so the layout viewport width never
   changes once the cards arrive. Scoped to this file only - html has no
   other scrollbar-gutter declaration anywhere in the codebase.

   Codex review fix 2: the header's own width now tracks home.css's --page
   value at the same breakpoints (min(1440px, calc(100% - 64px)) desktop;
   min(100% - 40px, 860px) at <=1120px; calc(100% - 28px) at <=620px) via a
   locally-scoped --ch-page, so the injected header's responsive geometry
   matches the canonical editorial header exactly. This does not touch
   .page/catalog content width (styles.css, untouched) or header height.

   Codex review fix 3: styles.css's legacy `.brand span { font-size: 12px;
   line-height: 1.1; }` (its own <=620px block) matches the canonical
   header's .brand-text span (site-chrome.js markup: <span
   class="brand-text">), clobbering the inherited canonical size/line-height
   from .brand's `font:` shorthand. Restoring `inherit` on both properties
   only inside .site-header, only at <=620px, copies exactly what home.css
   already does there (nothing - .brand-text has no font-size/line-height
   override on the canonical page, so it simply keeps inheriting from
   .brand). */

html {
  color-scheme: dark;
  scrollbar-gutter: stable;
}

.catalog-page [data-site-header] {
  display: block;
  height: 82px;
}

@media (max-width: 620px) {
  .catalog-page [data-site-header] { height: 70px; }
}

.catalog-page .site-header {
  --ch-border: oklch(100% 0 0 / 16%);
  --ch-fg: oklch(96% 0.012 235);
  --ch-muted: oklch(75% 0.032 237);
  --ch-font-display: "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --ch-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --ch-motion-ui: 160ms;
  --ch-ease: cubic-bezier(.2, 0, 0, 1);
  --ch-page: min(1440px, calc(100% - 64px));

  position: relative;
  z-index: 10;
  width: var(--ch-page);
  height: 82px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) auto;
  align-items: center;
  border-bottom: 1px solid var(--ch-border);
  animation: none;
  /* Iteration 3: body.catalog-page (styles.css) sets Arial/Helvetica; the
     canonical header's nav/phone text has no font-family of its own and
     relies on inheriting the canonical site's body font (home.css
     --font-body). Setting it once here, inherited by .site-nav a/.phone,
     matches that without touching styles.css or the catalog content below.
     .brand keeps its own --ch-font-display via its `font:` shorthand,
     which already wins over this inherited value. */
  font-family: var(--ch-font-body);
}

.catalog-page .site-header .brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  width: fit-content;
  font: 600 15px/1.05 var(--ch-font-display);
  letter-spacing: -0.01em;
  color: var(--ch-fg);
  text-decoration: none;
}

.catalog-page .site-header .brand-mark {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ch-fg);
  border-radius: 2px;
  color: var(--ch-fg);
  font-size: 11px;
  letter-spacing: 0.1em;
  background: none;
}

.catalog-page .site-header .brand-mark img {
  width: 28px;
  height: 28px;
  display: block;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.catalog-page .site-header .brand-text { display: grid; gap: 3px; }

.catalog-page .site-header .brand-text small {
  color: var(--ch-muted);
  font-size: 9px;
  font-weight: 550;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.catalog-page .site-header .site-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(22px, 3vw, 46px);
}

.catalog-page .site-header .site-nav a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--ch-muted);
  font-size: 16px;
  font-weight: 550;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: color var(--ch-motion-ui) var(--ch-ease);
}

.catalog-page .site-header .site-nav a:hover,
.catalog-page .site-header .site-nav a[aria-current="page"] { color: var(--ch-fg); }

.catalog-page .site-header .header-side {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  white-space: nowrap;
}

.catalog-page .site-header .phone {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
  color: var(--ch-fg);
  text-decoration: none;
}

.catalog-page .site-header .menu-button {
  width: 44px;
  height: 44px;
  display: none;
  place-items: center;
  border: 1px solid var(--ch-border);
  border-radius: 2px;
  background: transparent;
  color: var(--ch-fg);
  cursor: pointer;
}

@media (max-width: 1120px) {
  .catalog-page .site-header { --ch-page: min(100% - 40px, 860px); grid-template-columns: 1fr auto; }
  .catalog-page .site-header .site-nav,
  .catalog-page .site-header .phone { display: none; }
  .catalog-page .site-header .menu-button { display: grid; }

  .catalog-page .site-header .site-nav.open {
    position: absolute;
    top: 72px;
    left: 20px;
    right: 20px;
    z-index: 30;
    display: grid;
    padding: 10px 18px;
    border: 1px solid var(--ch-border);
    background: #011b35;
    box-shadow: 0 22px 60px oklch(10% 0.04 245 / 55%);
  }
  .catalog-page .site-header .site-nav.open a {
    min-height: 48px;
    border-bottom: 1px solid var(--ch-border);
    color: var(--ch-fg);
    font-size: 16px;
  }
  .catalog-page .site-header .site-nav.open a:last-child { border-bottom: 0; }
}

@media (max-width: 620px) {
  .catalog-page .site-header { --ch-page: calc(100% - 28px); height: 70px; }
  .catalog-page .site-header .brand-text small { display: none; }
  /* Codex review fix 3: neutralize styles.css's legacy .brand span rule
     (font-size: 12px; line-height: 1.1) leaking onto the canonical
     .brand-text span at this breakpoint - restore inheritance from .brand,
     exactly matching home.css's own (unoverridden) behavior here. */
  .catalog-page .site-header .brand-text { font-size: inherit; line-height: inherit; }
}