/* ============================================================
   NASA Space Apps 2026 — official brand layer
   Palette, typefaces and type roles taken from
   Space_Apps_Brand_Guide_2026.pdf (updated 25 June 2026).
   IBM Plex Sans Arabic is the established Arabic companion for
   the Latin families, which carry no Arabic glyphs.
   ============================================================ */
/* Overpass ships U+00B7 as a zero-width glyph, so every "·" separator
   collapsed against the word beside it. The glyph exists, so the browser
   never falls back on its own — this carve-out routes that one codepoint
   to a system face and leaves the rest of the stack untouched. */
@font-face {
  font-family: "Sep";
  src: local("Arial"), local("Helvetica Neue"), local("Segoe UI"), local("DejaVu Sans");
  unicode-range: U+00B7;
}

:root {
  /* Colors — brand guide, page 7 */
  --deep-blue: #07173F;
  --electric-blue: #0042A6;
  --neon-blue: #0960E1;
  --blue-yonder: #2E96F5;
  --neon-yellow: #eafe07;
  --rocket-red: #E43700;
  --martian-red: #8E1100;

  /* Roles used across the site */
  --paper: #FFFFFF;
  --card: #FFFFFF;
  --card-tint: #FFFFFF;
  --line: #d5dae3;
  --ink: var(--deep-blue);
  --ink-dim: #344366;
  /* The dark ground. Deep Blue is the brand's ink and is carried by body
     copy across every light page, so it cannot also be the colour the
     night sections are painted in — this is its own role. Near black with
     the blue still in it, so the planet's limb and its atmosphere read as
     lit against sky rather than against a navy panel. */
  --space: #050a18;
  --space-lift: #0a1330;
  --body-c: #344366;
  --gold: var(--neon-yellow);
  --gold-deep: var(--electric-blue);
  --red: var(--rocket-red);
  --blue: var(--electric-blue);
  --sky-blue: var(--blue-yonder);
  --r-card: 8px;
  --r-el: 4px;

  /* Typefaces — brand guide, page 11 */
  --font: "Sep", "Overpass", "IBM Plex Sans Arabic", sans-serif;
  --font-display: "Sep", "Fira Sans", "IBM Plex Sans Arabic", sans-serif;
  --font-mono: "Sep", "Fira Code", "IBM Plex Sans Arabic", monospace;
}
html[lang="en"] { --font: "Sep", "Overpass", "IBM Plex Sans Arabic", sans-serif; }

/* Titles and headings are Fira Sans; body copy is Overpass;
   code and data are Fira Code. */
h1, h2, h3, h4 { font-family: var(--font-display); }
code, pre, .mono, .countdown-inline { font-family: var(--font-mono); }

/* H1: Fira Sans Black, all caps, 5% letter spacing (guide, page 13).
   Arabic is not cased and takes no tracking. */
html[lang="en"] h1, html[lang="en"] .display {
  font-weight: 900; text-transform: uppercase; letter-spacing: .05em;
}
html[lang="ar"] h1, html[lang="ar"] .display {
  font-family: "IBM Plex Sans Arabic", sans-serif; font-weight: 700; letter-spacing: 0; text-transform: none;
}

/* H3 / eyebrow: Overpass SemiBold, all caps. */
.eyebrow, .step-tag, .chapter-mark, .output-top, .event-detail small {
  font-family: var(--font);
}
html[lang="ar"] .eyebrow, html[lang="ar"] .chapter-mark,
html[lang="ar"] .output-top, html[lang="ar"] .event-detail small {
  text-transform: none; letter-spacing: 0;
}

/* Buttons: Overpass Bold, Neon Yellow field, Deep Blue text (guide, pages 14-16). */
.btn, .lang-toggle, .nav-toggle { border-radius: 4px; font-family: var(--font); }
:focus-visible { outline: 3px solid var(--neon-blue); outline-offset: 5px; }
.reveal { opacity: 1; transform: none; }

/* Other pages in the site keep the same brand surface. */
.guide-hero { background: linear-gradient(135deg, var(--electric-blue), var(--deep-blue)); box-shadow: none; }
.guide-hero .eyebrow { color: #FFFFFF; }
.check-item svg { color: var(--electric-blue); }
.guide-card, .guide-toc { box-shadow: none; }
.guide-card h2 { scroll-margin-top: 100px; }
.slide-dark .slide-title em, .cover-title em { color: #FFFFFF; }
.slide-title em { color: var(--electric-blue); }
.deck-controls { background: var(--deep-blue); backdrop-filter: none; }
.thumb-card.active { box-shadow: none; }
.participant-guide .brand { flex-shrink: 0; }
@media (max-width: 560px) {
  .participant-guide .header-inner { gap: 8px; }
  .participant-guide .header-actions { gap: 5px; }
  .participant-guide .brand img { height: 36px; }
  .participant-guide .lang-toggle { padding-inline: 10px; }
  .participant-guide button[onclick="window.print()"] { width: 44px; padding: 0; }
  .participant-guide button[onclick="window.print()"] span { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media screen {
  .participant-guide .site-header {
    background: #ffffffe0; border-bottom-color: #07173f1f;
    backdrop-filter: blur(22px) saturate(1.4);
    -webkit-backdrop-filter: blur(22px) saturate(1.4);
  }
}