/* header-shared.css — the single, canonical CheckMyARM header visual
   system. @import'd by shell.css; linked directly by index.html/
   quick-check.html (they don't load shell.css at all). See CLAUDE.md,
   "Header Normalization" — this file is what makes "one CheckMyARM
   header, different rooms visible through it" literally true, not just
   a shared-variable aspiration: every header surface on the site
   (.shell-nav, .experience-header) and every interactive control inside
   one (contextual action buttons, the Menu trigger, the Menu panel and
   its items) either applies a class defined here directly, or is built
   entirely from var(--hdr-*) tokens defined here — never a second,
   independently-tuned literal value.

   A first correction pass (see CLAUDE.md's original "Normalize the
   CheckMyARM shared header architecture" milestone) shared TOKENS but
   left each page's own selectors free to apply them inconsistently or
   not at all — .experience-header kept its own, much more opaque
   gradient background; the Menu trigger on index.html kept the pill-
   shaped .header-shortcut look instead of the rectangular .shell-menu-
   trigger one. This pass corrects that: the classes below are applied
   directly in BOTH header implementations' own markup (index.html,
   quick-check.html, nav.js), so the two can no longer visually drift
   apart even though they remain two separate DOM/JS implementations.

   NOTE: a literal asterisk immediately followed by a forward slash
   inside a CSS comment closes that comment early — this has silently
   broken landing.css several times before, and very nearly broke this
   very file's own warning about it while it was being written. Never
   type that two-character sequence together in prose here, including
   when describing the danger itself — say it in words instead. */

:root {
  /* ───────── Smoked-glass header surface ─────────
     Deliberately room-agnostic: a dark, genuinely translucent fill plus
     blur that lets whatever CMA "room" sits behind the header show
     through it (Reading Room's photographed environment, index.html's
     cinematic desk/props, the settled clean-desk workspace background,
     the noise-field/voice-fragment layer during the landing intro, or a
     plain flat body color elsewhere) — never a per-room recolor, and
     never a near-opaque exception for one specific room. These are the
     EXACT values this project's own Reading Room work already validated
     against a real, busy photographed background — reused here as the
     one canonical answer, not re-derived per page.

     Alpha bumped 0.42 -> 0.55 (a same-family, modest increase, not a
     recipe change) after real use over the pale landing/workspace desk
     photo found the logo/gauge/gold center advisory losing too much
     contrast at 0.42 -- the goal is comfortably readable text over any
     room, not an opaque navy bar; environmental imagery must still
     visibly show through. Checked against BOTH real backgrounds this
     recipe has to work over (Reading Room's own dark photographed room,
     and the much brighter landing/workspace desk) before settling on
     this one value -- still one canonical answer, no page-specific
     variant. */
  --hdr-glass-bg: rgba(15, 23, 42, 0.55);
  --hdr-blur: blur(14px);
  --hdr-border-color: rgba(255, 255, 255, 0.08);

  /* ───────── Canonical header box model ───────── */
  --hdr-py: 1rem;
  --hdr-px: 1.5rem;
  --hdr-font-family: system-ui, -apple-system, sans-serif;

  /* ───────── Canonical button geometry ─────────
     One shared height (rather than relying on padding+content to
     organically produce a matching number across two separately-authored
     stylesheets) so a "Run New Scan" button on assessment.html and a
     "Start assessment" button on the landing page are provably the same
     size, not just close. Applies to every contextual action button AND
     the Menu trigger alike — both are the same physical kind of object. */
  --hdr-btn-h: 2.15rem;
  --hdr-btn-px: 0.9rem;
  --hdr-btn-radius: 8px;
  --hdr-btn-font-size: 0.82rem;
  --hdr-btn-font-weight: 700;
  --hdr-btn-gap: 0.45rem;

  --hdr-btn-secondary-bg: rgba(148, 163, 184, 0.08);
  --hdr-btn-secondary-border: 1px solid rgba(148, 163, 184, 0.22);
  --hdr-btn-secondary-color: #cbd5e1;
  --hdr-btn-secondary-hover-bg: rgba(59, 130, 246, 0.16);
  --hdr-btn-secondary-hover-border: rgba(147, 197, 253, 0.5);
  --hdr-btn-secondary-hover-color: #f1f5f9;

  --hdr-btn-primary-bg: #3b82f6;
  --hdr-btn-primary-color: #ffffff;
  --hdr-btn-primary-hover-bg: #2563eb;

  /* ───────── Canonical Menu panel ───────── */
  --hdr-panel-bg: #1e293b;
  --hdr-panel-border: 1px solid #334155;
  --hdr-panel-radius: 10px;
  /* Reuses .landing-entry-card's own settled-state shadow verbatim
     (landing.css) -- that value is already the established, verified
     "read as sitting noticeably higher above the page than the
     surrounding education cards" treatment in this exact room (its own
     comment there: bigger than .clarity-card's 0 3px 6px/0 14px 28px
     resting shadow). Same fix needed here for the same reason: the
     Atrium's open Menu panel sits directly over those same education
     cards and needs to visually outrank them the same way. Same color
     (pure black, no tint), same magnitude family -- not a new shadow
     language, just this one already-proven value applied to a second
     floating surface. See CLAUDE.md, "Menu panel depth pass." */
  --hdr-panel-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), 0 4px 14px rgba(0, 0, 0, 0.35);
  --hdr-panel-item-color: #e2e8f0;
  --hdr-panel-item-hover-bg: #263548;
  --hdr-panel-item-hover-color: #f1f5f9;
}

/* ═══════════════ Canonical action-button / Menu-trigger look ═══════════
   Applied directly, as real classes, in BOTH header implementations'
   markup (nav.js's shellMenuTriggerHtml()/headerActionsHtml(), and
   index.html's/quick-check.html's own Skip/Start/Continue/Menu buttons)
   — never merely available for a page's own differently-shaped selector
   to optionally consume. This is what makes button/trigger SHAPE (not
   just color) identical everywhere, correcting the prior pass's gap
   where index.html's Menu trigger kept a pill shape while shell.css's
   used a rectangle. */
.hdr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hdr-btn-gap);
  height: var(--hdr-btn-h);
  padding: 0 var(--hdr-btn-px);
  border-radius: var(--hdr-btn-radius);
  font-family: var(--hdr-font-family);
  font-size: var(--hdr-btn-font-size);
  font-weight: var(--hdr-btn-font-weight);
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
  box-sizing: border-box;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.hdr-btn-secondary {
  background: var(--hdr-btn-secondary-bg);
  border: var(--hdr-btn-secondary-border);
  color: var(--hdr-btn-secondary-color);
}

.hdr-btn-secondary:hover,
.hdr-btn-secondary:focus-visible {
  background: var(--hdr-btn-secondary-hover-bg);
  border-color: var(--hdr-btn-secondary-hover-border);
  color: var(--hdr-btn-secondary-hover-color);
}

.hdr-btn-primary {
  background: var(--hdr-btn-primary-bg);
  color: var(--hdr-btn-primary-color);
  border: 1px solid transparent;
}

.hdr-btn-primary:hover,
.hdr-btn-primary:focus-visible {
  background: var(--hdr-btn-primary-hover-bg);
}

/* Beta Feedback System — TEMPORARY, for the public beta period only (see nav.js's
   feedbackHeaderLinkHtml(), same removal note). Same .hdr-btn SHAPE as every other
   header control, a third, warm-amber color pairing so it reads as noticeable without
   competing with Menu's own visual weight or looking like an alert/error. The exact
   amber this codebase already established for "notice, not danger" elsewhere (see
   CLAUDE.md, Footer Normalization section's coffee-link color). */
.hdr-btn-feedback {
  background: rgba(232, 188, 106, 0.14);
  border: 1px solid rgba(232, 188, 106, 0.4);
  color: #e8bc6a;
}

.hdr-btn-feedback:hover,
.hdr-btn-feedback:focus-visible {
  background: rgba(232, 188, 106, 0.22);
  border-color: rgba(232, 188, 106, 0.55);
  color: #f0cd85;
}

/* Mobile-panel row variant -- same .hdr-menu-panel-item shape, just the
   amber color instead of the ordinary panel-item color. */
.hdr-btn-feedback-mobile {
  color: #e8bc6a !important;
  background: rgba(232, 188, 106, 0.1);
}

.hdr-btn-feedback-mobile:hover,
.hdr-btn-feedback-mobile:focus-visible {
  color: #f0cd85 !important;
  background: rgba(232, 188, 106, 0.18);
}

.hdr-btn:focus-visible {
  outline: 2px solid #93c5fd;
  outline-offset: 2px;
}

/* The hamburger glyph + text label pairing every Menu trigger uses. */
.hdr-menu-icon {
  position: relative;
  display: block;
  width: 16px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

.hdr-menu-icon::before,
.hdr-menu-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 16px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

.hdr-menu-icon::before {
  top: -5px;
}

.hdr-menu-icon::after {
  top: 5px;
}

/* Hidden below the shared collapse breakpoint, leaving only the icon —
   "the header may reduce essentially to LOGO + GAUGE + a menu icon" at
   narrow widths. */
@media (max-width: 640px) {
  .hdr-menu-label {
    display: none;
  }
}

/* ═══════════════ Canonical CENTER zone ═══════════════
   grid-column: 2 of the header's own 3-column grid (see .shell-desktop-
   row/.landing-header's grid-template-columns: 1fr auto 1fr) — used by
   BOTH implementations, moved here (from landing.css alone) once nav.js
   started rendering this same cell for index.html too (see CLAUDE.md,
   "Header Normalization — one real shared implementation"). justify-
   self: center positions this CELL at the row's true midpoint, which is
   what actually centers content on the viewport regardless of how much
   is in the LEFT/RIGHT tracks; display:flex+justify-content:center only
   additionally centers this cell's OWN content within itself, which
   only matters if the cell is ever wider than its content. Empty by
   default on every shell page (no content = zero width, harmless) --
   see nav.js's own window.NavShellConfig.centerHtml for the one page
   (index.html) that populates it. */
.experience-header-center {
  grid-column: 2;
  justify-self: center;
  display: flex;
  justify-content: center;
  min-width: 0;
}

/* 900px -- the value index.html's own advisory content was empirically
   tuned against (its own CENTER_HIDE_BREAKPOINT constant; see the "New-PC
   settling advisory" comment in index.html's inline script for the full
   measurement methodology), not shell.css's own, unrelated 860px
   hamburger-fold point. This USED to be two separately-declared values
   (860px here, 900px in landing.css's own now-removed duplicate of this
   selector) that happened to produce the same net effect only because
   landing.css's wider threshold always "won" on any page loading both
   files -- consolidated to the one real, content-driven number so there
   is only ever one canonical answer to "when does this cell disappear,"
   consulted identically by every page (even ones like Reading Room, whose
   center zone is empty today and so never visibly cared which value
   applied). */
@media (max-width: 900px) {
  .experience-header-center {
    display: none;
  }
}

/* ═══════════════ Canonical Menu panel ═══════════════
   Applied directly to both the shared shell's dropdown panel
   (.shell-menu-panel) and index.html's/quick-check.html's own
   (#header-learn-menu / #qc-menu-panel) — same background, border,
   radius, shadow, and item styling regardless of which page opened it.
   Panel CONTENT (flat list vs. labeled sections) may still differ; the
   chrome and the item recipe never do. */
.hdr-menu-panel {
  background: var(--hdr-panel-bg);
  border: var(--hdr-panel-border);
  border-radius: var(--hdr-panel-radius);
  box-shadow: var(--hdr-panel-shadow);
  padding: 0.4rem;
  font-family: var(--hdr-font-family);
}

.hdr-menu-panel-item {
  display: block;
  padding: 0.55rem 0.7rem;
  border-radius: 6px;
  font-size: 0.85rem;
  color: var(--hdr-panel-item-color);
  text-decoration: none;
  white-space: nowrap;
}

.hdr-menu-panel-item:hover,
.hdr-menu-panel-item:focus-visible {
  background: var(--hdr-panel-item-hover-bg);
  color: var(--hdr-panel-item-hover-color);
}

/* A real <button> variant of .hdr-menu-panel-item, for menu-panel entries
   that perform an action rather than navigate (e.g. window.NavShellConfig.
   extraActions' own mobile-panel copy, nav.js). font: inherit (the
   conventional <button> UA-style reset) would also reset font-size --
   restated explicitly, in THIS rule, so it never depends on cascade order
   against .hdr-menu-panel-item's own 0.85rem (a real conflict caught once
   already, not re-risked here). */
.hdr-menu-panel-button {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  background: none;
  border: none;
  font: inherit;
  font-size: 0.85rem;
  text-align: left;
  cursor: pointer;
}

.hdr-menu-panel-button[hidden] {
  display: none;
}

/* ═══════════════ Canonical footer ═══════════════
   The footer counterpart to the smoked-glass header above — same three
   tokens (--hdr-glass-bg/--hdr-blur/--hdr-border-color), reused verbatim
   rather than a second, independently-tuned recipe, so the two genuinely
   read as one piece of shared building architecture rather than two
   coincidentally-similar surfaces. border-top (not border-bottom, unlike
   the header) is the mirror of the header's own border-bottom — "shared
   architecture," top and bottom of the same room. Rendered by nav.js's
   footerMarkup()/renderFooter() into a <div id="app-footer"></div>
   placeholder on every room; see CLAUDE.md, "Footer normalization," for
   which four page-specific <footer> implementations this replaced. */
.shell-footer {
  border-top: 1px solid var(--hdr-border-color);
  background: var(--hdr-glass-bg);
  backdrop-filter: var(--hdr-blur);
  -webkit-backdrop-filter: var(--hdr-blur);
  padding: 1.4rem 1.5rem 1.6rem;
  text-align: center;
  font-family: var(--hdr-font-family);
}

.shell-footer-tagline {
  font-size: 0.85rem;
  color: #94a3b8;
  margin-bottom: 0.6rem;
}

.shell-footer-links {
  font-size: 0.82rem;
  margin-bottom: 0.6rem;
}

.shell-footer-links a {
  color: #64748b;
  text-decoration: none;
}

.shell-footer-links a:hover,
.shell-footer-links a:focus-visible {
  color: #cbd5e1;
}

.shell-footer-links span {
  margin: 0 0.5rem;
  color: #334155;
}

/* "A modest warm/gold accent... not a donation CTA/button" — reuses the
   exact amber this codebase already established for its own "notice, not
   danger" accent language (.clarity-card-accent-amber / the header's own
   center advisory, landing.css) rather than inventing a new color. Still
   a plain text link, same size/weight-adjacent treatment as its
   neighbors, just warmer -- not a pill, not a button, not bolded into a
   CTA shape. .shell-footer-links .shell-footer-coffee (two classes) is
   deliberate: a bare .shell-footer-coffee rule alone would lose to
   .shell-footer-links a's own higher specificity (one class + one
   element beats one class alone) -- the exact recurring specificity trap
   already documented elsewhere in this codebase. */
.shell-footer-links .shell-footer-coffee {
  color: #e8bc6a;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(217, 164, 65, 0.5);
  text-underline-offset: 2px;
}

.shell-footer-links .shell-footer-coffee:hover,
.shell-footer-links .shell-footer-coffee:focus-visible {
  color: #f0cd85;
  text-decoration-color: rgba(240, 205, 133, 0.85);
}

.shell-footer-copyright {
  font-size: 0.78rem;
  color: #475569;
}