/* ===========================================================================
   site-header.css — the toolkit header, in the startup scene's visual language
   ---------------------------------------------------------------------------
   Near-black glass, a gold hairline, and the gold Oswald wordmark the startup
   title flies into (startup.js finds it by data-startup-target). The header
   stays dark in both colour modes: it is brand chrome, like the intro.

   Loaded last. The doubled class (.main-header.main-header) outranks the older
   header layers in ap-chem-gas.html (base, theme, v2, breakpoints) and
   student-ui.css without adding more !important.
   =========================================================================== */

.main-header.main-header {
  --hd-ink: #EDE6D8; --hd-muted: #A39A8B; --hd-hair: rgba(242,191,94,.32);
  --hd-gold-1: #FFE09A; --hd-gold-2: #F2BF5E; --hd-gold-3: #C7832C;
  --hd-ease: cubic-bezier(.25,1,.5,1);
  position: sticky; top: 0; z-index: 1000;   /* an older layer sets it relative, which un-pinned it */
  display: flex; align-items: center; gap: 6px;
  min-height: 68px; padding: 10px clamp(16px, 3vw, 40px);
  background: rgba(11,10,9,.84);
  -webkit-backdrop-filter: saturate(140%) blur(16px); backdrop-filter: saturate(140%) blur(16px);
  border-bottom: 0; box-shadow: none;
}
/* the gold hairline, brightest in the middle */
.main-header.main-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--hd-hair) 22%, var(--hd-hair) 78%, transparent);
}

/* ---- wordmark ---- */
.main-header.main-header .brand-home-btn {
  display: flex; align-items: center; gap: 12px;
  min-width: 0; margin-right: auto; padding: 4px 10px 4px 0;
  background: none; border: 0; border-radius: 10px; cursor: pointer; text-align: left;
}
.main-header.main-header .brand-mark { width: 30px; height: 30px; flex: none; transition: transform .6s var(--hd-ease); }
.main-header.main-header .brand-home-btn:hover .brand-mark { transform: rotate(60deg); }   /* one hexagon step */
.main-header.main-header .brand-words { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.main-header.main-header .school-name {
  font: 700 1.3rem/1.05 Oswald, "Arial Narrow", sans-serif; letter-spacing: .005em; text-transform: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  background: linear-gradient(180deg, var(--hd-gold-1) 0%, var(--hd-gold-2) 50%, var(--hd-gold-3) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.main-header.main-header .app-name {
  margin-top: 3px;
  font: 500 .6rem/1.4 Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: .22em; text-transform: uppercase;
  color: var(--hd-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}

/* ---- navigation: quiet text, a pill on hover, a gold hairline pill when active ---- */
.main-header.main-header .product-nav { gap: 2px; margin-left: 0; }
.main-header.main-header .product-nav-btn,
.main-header.main-header .header-icon-btn,
.main-header.main-header .header-tour-btn {
  min-height: 44px; padding: 8px 14px;
  border: 1px solid transparent; border-radius: 999px; background: transparent; box-shadow: none;
  color: var(--hd-muted); font: 500 .84rem/1 Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: .02em;
  transition: color .2s, background-color .2s, border-color .2s;
}
.main-header.main-header .product-nav-btn:hover,
.main-header.main-header .header-icon-btn:hover,
.main-header.main-header .header-tour-btn:hover { color: var(--hd-ink); background: rgba(255,255,255,.05); }
.main-header.main-header .product-nav-btn.active,
.main-header.main-header .product-nav-btn.primary { border-color: var(--hd-hair); background: rgba(242,191,94,.06); }
.main-header.main-header .header-tour-btn { border-color: rgba(255,255,255,.1); color: var(--hd-ink); }

/* ---- utility buttons (colour mode, equation sheet): hairline pills ---- */
.main-header.main-header .theme-toggle,
.main-header.main-header .ref-sheet-btn {
  min-height: 44px; padding: 8px 16px;
  border: 1px solid var(--hd-hair); border-radius: 999px; background: transparent; box-shadow: none;
  transition: background-color .2s, border-color .2s;
}
.main-header.main-header .theme-toggle:hover,
.main-header.main-header .ref-sheet-btn:hover { background: rgba(242,191,94,.08); border-color: rgba(242,191,94,.55); }
.main-header.main-header .theme-toggle:active,
.main-header.main-header .ref-sheet-btn:active { transform: none; box-shadow: none; }
.main-header.main-header .ref-sheet-btn .btn-label,
.main-header.main-header .theme-toggle .toggle-label {
  font: 500 .78rem/1 Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--hd-gold-1);
}

/* ---- phones ---- */
@media (max-width: 760px) {
  .main-header.main-header { display: flex; min-height: 60px; padding: 8px 14px; gap: 4px; }
  .main-header.main-header .brand-home-btn { gap: 10px; padding: 0; }
  .main-header.main-header .brand-mark { width: 26px; height: 26px; }
  .main-header.main-header .school-name { font-size: 1.12rem; }
  .main-header.main-header .ref-sheet-btn { min-width: 44px; width: 44px; padding: 0; display: grid; place-items: center; }
  .main-header.main-header .ref-sheet-btn .btn-label { font-size: 0; letter-spacing: 0; }   /* the word gives way to a Σ (::after, in the page) */
  .main-header.main-header .header-search-mobile { display: none !important; }   /* the phone bar carries Search */
}

@media (prefers-reduced-motion: reduce) {
  .main-header.main-header .brand-mark { transition: none; }
  .main-header.main-header .brand-home-btn:hover .brand-mark { transform: none; }
}

/* ---- sound on / mute (site-sound.js): an icon-only hairline pill ---- */
.main-header.main-header .header-sound-btn {
  flex-shrink: 0; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--hd-hair); border-radius: 999px; background: transparent; color: var(--hd-ink); cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s;
}
.main-header.main-header .header-sound-btn:hover { background: rgba(242,191,94,.08); border-color: rgba(242,191,94,.55); }
.main-header.main-header .header-sound-btn svg { width: 20px; height: 20px; }
.main-header.main-header .header-sound-btn .snd-off { display: none; }
.main-header.main-header .header-sound-btn[aria-pressed="true"] { color: var(--hd-muted); }
.main-header.main-header .header-sound-btn[aria-pressed="true"] .snd-on { display: none; }
.main-header.main-header .header-sound-btn[aria-pressed="true"] .snd-off { display: block; }