/* =============================================
   THEME — shared dark chrome for the whole site.
   Provides design tokens, base body, navbar, footer,
   and core button/typography utilities.
   Page-specific styles go in inline <style> blocks
   on the page itself.
============================================= */

:root {
  /* Backgrounds */
  --bg-void:       #0a0a0f;
  --bg-deep:       #0d0d14;
  --bg-base:       #12121a;
  --bg-surface:    #1a1a2e;
  --bg-card:       #16162a;
  --bg-card-hover: #1e1e38;
  --bg-glass:      rgba(22, 22, 42, 0.6);

  /* Threat color language */
  --red:           #ef4444;
  --red-bright:    #ff3b30;
  --red-glow:      rgba(239, 68, 68, 0.25);
  --green:         #22c55e;
  --green-bright:  #34d399;
  --green-glow:    rgba(34, 197, 94, 0.25);
  --amber:         #f59e0b;
  --amber-bright:  #fbbf24;
  --amber-glow:    rgba(245, 158, 11, 0.25);
  --cyan:          #06b6d4;
  --cyan-bright:   #22d3ee;
  --cyan-glow:     rgba(6, 182, 212, 0.25);
  --purple:        #a855f7;
  --purple-glow:   rgba(168, 85, 247, 0.25);
  --orange:        #f97316;
  --orange-glow:   rgba(249, 115, 22, 0.25);
  --blue:          #3b82f6;
  --blue-glow:     rgba(59, 130, 246, 0.25);

  /* Text */
  /* Contrast against --bg-void (#0a0a0f). --text-muted was #4a4a6a, which is
     2.33:1 — it failed WCAG AA everywhere it was used, and it was used for the
     9-11px labels where it hurt most. Keep the three-step hierarchy, but start
     it above the 4.5:1 floor. */
  --text-primary:   #f0f0f8;  /* 17.4:1 */
  --text-secondary: #9c9cc0;  /*  7.5:1 */
  --text-muted:     #7a7a9c;  /*  4.8:1 */
  --text-code:      #22d3ee;

  /* Borders */
  --border-subtle:  rgba(255,255,255,0.06);
  --border-mid:     rgba(255,255,255,0.1);

  /* Fonts */
  --font-display: 'Instrument Serif', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* Transitions */
  --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-void);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23noise)' opacity='0.035'/%3E%3C/svg%3E");
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
}

/* =============================================
   NAVIGATION
============================================= */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(10, 10, 15, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-subtle);
  transition: background var(--transition), border-color var(--transition);
}

.navbar.scrolled {
  background: rgba(10, 10, 15, 0.92);
  border-bottom-color: var(--border-mid);
}

.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  text-decoration: none;
}

.nav-logo img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.nav-logo-text {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  flex: 1;
}

.nav-links a {
  display: block;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  border-radius: 6px;
  transition: color var(--transition), background var(--transition);
}

.nav-links a:hover {
  color: var(--text-primary);
  background: rgba(255,255,255,0.05);
}

.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  margin-left: auto;
}

.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text-secondary);
  border-radius: 2px;
  transition: all var(--transition);
}

/* Opaque on purpose: the navbar itself is translucent, and without a ground of
   its own the open menu lets page content read straight through the links. */
.nav-mobile {
  display: none;
  flex-direction: column;
  padding: 12px 24px 20px;
  background: var(--bg-void);
  border-top: 1px solid var(--border-subtle);
  gap: 4px;
}

.nav-mobile.open {
  display: flex;
}

.nav-mobile a {
  padding: 10px 12px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-secondary);
  border-radius: 8px;
  transition: all var(--transition);
}

.nav-mobile a:hover {
  color: var(--text-primary);
  background: rgba(255,255,255,0.05);
}

/* Spacer below fixed navbar so page content isn't hidden under it */
.nav-spacer {
  height: 64px;
}

/* =============================================
   BUTTONS
============================================= */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: var(--red);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
}

.btn-primary:hover {
  background: #dc2626;
  box-shadow: 0 4px 24px rgba(239,68,68,0.4);
  transform: translateY(-1px);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  background: transparent;
  border: 1px solid var(--border-mid);
  border-radius: 8px;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
}

.btn-secondary:hover {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.2);
  transform: translateY(-1px);
}

/* =============================================
   SECTION SHARED STYLES
============================================= */
.section-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--cyan-bright);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 16px;
}

.section-heading {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 54px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: 16px;
}

.section-sub {
  font-size: 17px;
  color: var(--text-secondary);
  line-height: 1.65;
}

/* =============================================
   PAGE HEADER (used on secondary pages)
============================================= */
.page-header {
  padding: 80px 24px 40px;
  text-align: center;
  background: var(--bg-deep);
  border-bottom: 1px solid var(--border-subtle);
}

.page-header h1 {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.page-header p {
  font-size: 17px;
  color: var(--text-secondary);
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.65;
}

/* =============================================
   FOOTER
============================================= */
footer {
  background: var(--bg-deep);
  border-top: 1px solid var(--border-subtle);
  padding: 72px 24px 40px;
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 56px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.footer-brand img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.footer-brand-text {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

.footer-about-text {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.65;
  margin-bottom: 20px;
}

.footer-github-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  transition: color var(--transition);
}

.footer-github-link:hover {
  color: var(--text-primary);
}

.footer-col h4 {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 20px;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-links a {
  font-size: 14px;
  color: var(--text-secondary);
  transition: color var(--transition);
}

.footer-links a:hover {
  color: var(--text-primary);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 32px;
  border-top: 1px solid var(--border-subtle);
  flex-wrap: wrap;
  gap: 16px;
}

.footer-copy {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
}

.footer-bottom-links {
  display: flex;
  gap: 20px;
}

.footer-bottom-links a {
  font-size: 13px;
  color: var(--text-muted);
  transition: color var(--transition);
}

.footer-bottom-links a:hover {
  color: var(--text-secondary);
}

/* =============================================
   RESPONSIVE
============================================= */
@media (max-width: 1024px) {
  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}

@media (max-width: 768px) {
  .nav-links {
    display: none;
  }

  .nav-hamburger {
    display: flex;
  }

  .footer-top {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-bottom: 40px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .page-header {
    padding: 56px 20px 32px;
  }
}

/* =============================================
   ACCESSIBILITY
============================================= */

/* Visible focus for keyboard navigation */
:focus-visible {
  outline: 2px solid #06b6d4;
  outline-offset: 3px;
  border-radius: 4px;
}

/* Remove focus ring for mouse users */
:focus:not(:focus-visible) {
  outline: none;
}

/* ─── Icon sizing ─────────────────────────────────────────────────────────
   Applies to the SVGs assets/icons.js swaps in for [data-lucide] placeholders.
   Sized in em so icons track the type they sit beside. */
.icon {
  display: inline-block;
  vertical-align: -0.125em;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}
.icon--sm { width: 0.875em; height: 0.875em; }
.icon--lg { width: 1.25em;  height: 1.25em; }
.icon--xl { width: 1.5em;   height: 1.5em; }

/* Honour reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─── Skip link ───────────────────────────────────────────────────────────
   The first thing in the tab order, so a keyboard user is not forced through
   the whole nav on every page load. */
.skip-link {
  position: absolute;
  left: 12px;
  top: -64px;
  z-index: 2000;
  padding: 10px 18px;
  background: var(--red);
  color: #fff;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  border-radius: 0 0 8px 8px;
  transition: top var(--transition);
}

.skip-link:focus {
  top: 0;
}

/* ─── Target size ─────────────────────────────────────────────────────────
   Footer links rendered 18px tall, under the 24px minimum. */
.footer-links a,
.footer-bottom-links a,
.footer-github-link {
  display: inline-block;
  padding: 4px 0;
}

/* =============================================
   TRAINING PROGRESS
   Rendered by progress.js from the localStorage the modules already write.
============================================= */
.progress-summary {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 18px 22px;
  margin-bottom: 32px;
  background: rgba(34, 197, 94, 0.05);
  border: 1px solid rgba(34, 197, 94, 0.18);
  border-radius: 12px;
}

.progress-summary[hidden] { display: none; }

.progress-summary-count {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.progress-summary-detail {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 62ch;
}

.progress-reset {
  margin-top: 6px;
  padding: 7px 14px;
  min-height: 24px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border-mid);
  border-radius: 6px;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
}

.progress-reset:hover {
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.24);
}

/* Per-card completion badge. The state is in the text as well as the colour. */
.progress-badge {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  padding: 6px 10px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.45;
}

.progress-badge-mark { font-size: 12px; }

.progress-badge.is-strong {
  color: var(--green-bright);
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.25);
}

.progress-badge.is-partial {
  color: var(--amber-bright);
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.25);
}

.progress-badge.is-weak {
  color: var(--red-bright);
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.25);
}

/* Current page in the nav — stated for assistive tech and shown visually. */
.nav-links a[aria-current="page"],
.nav-mobile a[aria-current="page"] {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.06);
}

/* Visible to assistive technology only. Used by the shared live region in
   a11y.js, which must be in the accessibility tree but not on screen. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Panels we move focus to programmatically should not show a focus ring —
   the user did not tab there, and the ring reads as an error. */
[tabindex="-1"]:focus {
  outline: none;
}

/* =============================================
   ANALYTICS CONSENT
   Rendered by consent.js. Sits above page content but must never trap the
   viewport, so it is anchored to the bottom and scrolls with its own content
   if the text wraps on a small screen.
============================================= */
.consent-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 1500;
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  background: var(--bg-card);
  border: 1px solid var(--border-mid);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
}

.consent-text {
  flex: 1 1 280px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.consent-text a {
  color: var(--cyan-bright);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.consent-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.consent-btn {
  padding: 9px 16px;
  min-height: 24px;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.consent-btn--primary {
  color: #fff;
  background: var(--red);
  border: 1px solid var(--red);
}

.consent-btn--primary:hover {
  background: #dc2626;
}

.consent-btn--ghost {
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border-mid);
}

.consent-btn--ghost:hover {
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.24);
}

.consent-status {
  font-size: 15px;
  color: var(--text-primary);
  margin-bottom: 12px;
}

@media (max-width: 560px) {
  .consent-actions { width: 100%; }
  .consent-btn { flex: 1; }
}