/* ============================================================
   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.
   ============================================================ */
: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;
  --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: "Overpass", "IBM Plex Sans Arabic", sans-serif;
  --font-display: "Fira Sans", "IBM Plex Sans Arabic", sans-serif;
  --font-mono: "Fira Code", "IBM Plex Sans Arabic", monospace;
}
html[lang="en"] { --font: "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);
  }
}