/* site-shell.css — the ONE shared header for every page.
   Tier 1: global masthead (all pages). Tier 2: section subnav (GH-600 pages).
   Loaded on the landing AND on curriculum/lessons/quizzes so the chrome never drifts.
   Uses tokens that exist in both the landing's inline :root and shared/styles.css. */

/* ---- Tier 1: global masthead ---- */
.site-masthead {
  position: sticky; top: 0; z-index: 50;
  background: rgba(248, 244, 234, 0.82);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-soft, rgba(43, 37, 25, 0.06));
}
.site-masthead .mast-in {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px; max-width: var(--page-max, 1760px); margin: 0 auto;
  padding-inline: var(--gutter);
}
.mast-brand {
  font-family: var(--font-display); font-weight: 700; font-size: 1.18rem;
  letter-spacing: -0.02em; text-decoration: none; white-space: nowrap;
  display: inline-block; line-height: 1;
}
.mast-brand .wm-a { color: var(--text); font-weight: 700; position: relative; }
.mast-brand .wm-b { color: var(--brand-blue); font-weight: 400; }
/* coral rule under the "agentic" portion */
.mast-brand .wm-a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px;
  height: 3px; border-radius: 2px; background: var(--coral);
}
.mast-links {
  display: flex; gap: 1.8rem; align-items: center;
  font-family: var(--font-display); font-size: 0.9375rem; font-weight: 500;
}
.mast-links a { color: var(--text-body); text-decoration: none; transition: color 0.18s ease; }
.mast-links a:hover { color: var(--accent); }
.mast-cta {
  padding: 8px 16px; border-radius: var(--r-md); background: var(--accent);
  color: white !important; text-decoration: none;
  transition: background 0.18s ease, transform 0.18s ease;
}
.mast-cta:hover { background: var(--accent-hover); transform: translateY(-1px); }
@media (max-width: 680px) { .mast-links a:not(.mast-cta) { display: none; } }

/* Dark theme: the lesson/hub pages support a light/dark/auto toggle. The masthead
   background is hardcoded cream by default (the landing is light-only); flip it dark
   when the page is in dark theme so the brand + links stay readable. Text colors
   already flip via the themed --text* tokens. */
[data-theme="dark"] .site-masthead { background: rgba(30, 30, 30, 0.86); }
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] .site-masthead { background: rgba(30, 30, 30, 0.86); }
}

/* ---- Theme toggle (built by shared/theme.js or app.js into .mast-links) ----
   Styled here so it looks identical on the landing and the GH-600 pages. */
.theme-toggle {
  display: inline-flex; align-items: center; gap: 2px; padding: 3px;
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2);
}
.theme-toggle button {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; min-height: 40px; padding: 0; border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--text-muted); cursor: pointer; font-size: 14px;
  line-height: 1; transition: background 0.18s ease, color 0.18s ease;
}
.theme-toggle button:hover { color: var(--text); }
.theme-toggle button[aria-pressed="true"] {
  background: var(--surface); color: var(--accent); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10);
}
.theme-toggle button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Brand wordmark on GH-600 pages reads "agenticlately · GH-600 Study Prep".
   One bar only; the GH-600 section links replace the landing's primary nav. */
.mast-brandwrap { display: inline-flex; align-items: baseline; white-space: nowrap; }
.mast-sep { margin: 0 0.5rem; color: var(--text-faint, var(--text-muted)); font-weight: 400; }
.mast-section {
  color: var(--text-muted); font-weight: 400; font-size: 0.95rem;
  text-decoration: none; transition: color 0.18s ease;
}
.mast-section:hover { color: var(--accent); }
.mast-links a.active { color: var(--accent); }
@media (max-width: 560px) { .mast-sep, .mast-section { display: none; } }