/* Compliance & AML Training Program
   Design: Indigo primary · Outfit/Inter/JetBrains Mono */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 15px; scroll-behavior: smooth; }

:root {
  --bg: #f6f8fa; --bg-card: #fff; --bg-hover: #f0f2f4; --bg-tag: #eaeef2;
  --border: #d0d7de; --border-dark: #b0b8c2;
  --text: #1f2328; --text-2: #424a53; --text-3: #636c76; --text-4: #9198a1;
  --indigo: #4c6ef5; --indigo-hover: #3b5bdb; --indigo-light: #edf2ff; --indigo-border: #c5d0fd;
  --amber: #d97706; --amber-bg: #fffbeb; --amber-border: #fde68a;
  --teal: #0d9488; --teal-bg: #f0fdfa; --teal-border: #99f6e4;
  --green: #1a7f37; --green-bg: #dafbe1; --green-border: #99e6b0;
  --red: #cf222e; --red-bg: #ffebe9; --red-border: #ffcecb;
  --orange: #c2410c; --orange-bg: #fff7ed; --orange-border: #fed7aa;
  --purple: #7c3aed; --purple-bg: #f5f3ff; --purple-border: #ddd6fe;
  --code-bg: #0f172a; --code-text: #e2e8f0;
  --nav-h: 64px; --wide-w: 1120px; --content-w: 820px;
  --radius: 8px; --radius-lg: 12px;
  --shadow: 0 1px 3px rgba(31,35,40,0.08), 0 4px 12px rgba(31,35,40,0.04);
  --shadow-lg: 0 4px 16px rgba(31,35,40,0.12);
  --font-display: 'Outfit', sans-serif; --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

body { font-family: var(--font-body); background: var(--bg); color: var(--text); line-height: 1.7; }
::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-thumb { background: var(--border-dark); border-radius: 10px; }

/* NAV */
.nav { position: sticky; top: 0; z-index: 100; height: var(--nav-h); background: rgba(246,248,250,0.95); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); display: flex; align-items: center; }
.nav-inner { max-width: var(--wide-w); margin: 0 auto; padding: 0 2rem; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.nav-brand { font-family: var(--font-display); font-size: 1rem; font-weight: 800; color: var(--text); text-decoration: none; }
.nav-brand span { color: var(--indigo); }
.nav-links { display: flex; gap: 0.25rem; }
.nav-link { color: var(--text-3); text-decoration: none; font-size: 0.875rem; font-weight: 500; padding: 6px 12px; border-radius: var(--radius); transition: all 0.15s; }
.nav-link:hover, .nav-link.active { background: var(--bg-hover); color: var(--text); }

/* BUTTONS */
.btn { display: inline-flex; align-items: center; gap: 6px; font-size: 0.875rem; font-weight: 600; padding: 9px 20px; border-radius: var(--radius); text-decoration: none; transition: all 0.15s; cursor: pointer; border: none; white-space: nowrap; }
.btn-indigo { background: var(--indigo); color: #fff; border: 1px solid var(--indigo); }
.btn-indigo:hover { background: var(--indigo-hover); }
.btn-outline { background: transparent; color: var(--text-2); border: 1px solid var(--border); }
.btn-outline:hover { background: var(--bg-hover); border-color: var(--border-dark); }
.btn-sm { padding: 6px 14px; font-size: 0.8rem; }

/* BADGES */
.badge { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500; padding: 3px 8px; border-radius: 20px; white-space: nowrap; }
.badge-indigo { background: var(--indigo-light); color: var(--indigo); border: 1px solid var(--indigo-border); }
.badge-amber { background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber-border); }
.badge-red { background: var(--red-bg); color: var(--red); border: 1px solid var(--red-border); }
.badge-green { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-border); }
.badge-teal { background: var(--teal-bg); color: var(--teal); border: 1px solid var(--teal-border); }
.badge-orange { background: var(--orange-bg); color: var(--orange); border: 1px solid var(--orange-border); }
.badge-gray { background: var(--bg-tag); color: var(--text-2); border: 1px solid var(--border); }
.badge-purple { background: var(--purple-bg); color: var(--purple); border: 1px solid var(--purple-border); }

/* LAYOUT */
.container { max-width: var(--wide-w); margin: 0 auto; padding: 0 2rem; }
.container-narrow { max-width: var(--content-w); margin: 0 auto; padding: 0 2rem; }
.section { padding: 3.5rem 0; }
.section-label { font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--indigo); margin-bottom: 0.5rem; }
.section-title { font-family: var(--font-display); font-size: clamp(1.4rem,3vw,1.9rem); font-weight: 800; color: var(--text); letter-spacing: -0.02em; margin-bottom: 0.75rem; }

/* HERO */
.training-hero { background: linear-gradient(160deg, #1e1b4b 0%, #312e81 50%, #3b0764 100%); color: #fff; padding: 4rem 0 3.5rem; }
.training-hero .section-label { color: #a5b4fc; }
.training-hero h1 { font-family: var(--font-display); font-size: clamp(1.9rem,4vw,2.75rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; margin-bottom: 1rem; }
.training-hero p { color: #c7d2fe; font-size: 1rem; line-height: 1.85; margin-bottom: 2rem; max-width: 580px; }

/* ROLE CARDS */
.role-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; margin-top: 2rem; }
.role-card { background: var(--bg-card); border: 2px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem; cursor: pointer; transition: all 0.2s; text-decoration: none; display: block; }
.role-card:hover { border-color: var(--indigo); box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.role-card.active { border-color: var(--indigo); background: var(--indigo-light); }
.role-icon { font-size: 1.75rem; margin-bottom: 0.75rem; }
.role-title { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 0.5rem; }
.role-desc { font-size: 0.82rem; color: var(--text-3); line-height: 1.7; margin-bottom: 1rem; }
.role-meta { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* MODULE CARDS */
.module-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.25rem; margin-top: 2rem; }
.module-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem; text-decoration: none; transition: all 0.2s; display: block; }
.module-card:hover { box-shadow: var(--shadow-lg); border-color: var(--indigo); }
.module-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.75rem; }
.module-number { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-4); }
.module-title-main { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 0.4rem; }
.module-desc { font-size: 0.84rem; color: var(--text-3); line-height: 1.7; margin-bottom: 1rem; }

/* LESSON CONTENT — COMPLIANCE ARTICLES */
.lesson-layout { max-width: var(--content-w); margin: 0 auto; padding: 3rem 2rem; }
.lesson-article h2 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 800; color: var(--text); margin: 2rem 0 0.75rem; letter-spacing: -0.015em; }
.lesson-article h3 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: var(--text); margin: 1.5rem 0 0.5rem; }
.lesson-article p { color: var(--text-2); font-size: 0.9rem; line-height: 1.85; margin-bottom: 1rem; }
.lesson-article ul, .lesson-article ol { color: var(--text-2); font-size: 0.88rem; padding-left: 1.5rem; margin-bottom: 1rem; }
.lesson-article li { line-height: 1.75; margin-bottom: 0.4rem; }
.lesson-article strong { color: var(--text); font-weight: 600; }
.lesson-article code { font-family: var(--font-mono); font-size: 0.82em; background: var(--bg-tag); padding: 1px 6px; border-radius: 4px; color: var(--indigo); border: 1px solid var(--border); }

/* CALLOUTS */
.callout { border-radius: var(--radius); padding: 1rem 1.25rem; margin: 1.25rem 0; border-left: 3px solid; }
.callout-title { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.35rem; }
.callout p { font-size: 0.875rem; line-height: 1.7; color: var(--text-2); margin: 0; }
.callout-rule { background: var(--amber-bg); border-color: var(--amber); } .callout-rule .callout-title { color: var(--amber); }
.callout-violation { background: var(--red-bg); border-color: var(--red); } .callout-violation .callout-title { color: var(--red); }
.callout-tip { background: var(--teal-bg); border-color: var(--teal); } .callout-tip .callout-title { color: var(--teal); }
.callout-note { background: var(--indigo-light); border-color: var(--indigo); } .callout-note .callout-title { color: var(--indigo); }

/* SCENARIO BOX */
.scenario-box { background: var(--bg-card); border: 1px solid var(--border); border-left: 4px solid var(--indigo); border-radius: var(--radius); padding: 1.25rem 1.5rem; margin: 1.5rem 0; }
.scenario-title { font-family: var(--font-display); font-size: 0.85rem; font-weight: 700; color: var(--indigo); margin-bottom: 0.5rem; text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.08em; font-family: var(--font-mono); }
.scenario-question { font-weight: 600; font-size: 0.9rem; color: var(--text); margin-bottom: 0.75rem; }
.scenario-analysis { font-size: 0.875rem; color: var(--text-2); line-height: 1.8; }

/* QUIZ */
.quiz-question { margin-bottom: 2rem; }
.quiz-q-text { font-weight: 600; font-size: 0.9rem; color: var(--text); margin-bottom: 0.75rem; }
.quiz-options { display: flex; flex-direction: column; gap: 0.5rem; }
.quiz-option { padding: 0.75rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; font-size: 0.875rem; color: var(--text-2); transition: all 0.15s; background: var(--bg-card); }
.quiz-option:hover { border-color: var(--indigo); background: var(--indigo-light); }
.quiz-option.correct { border-color: var(--teal); background: var(--teal-bg); color: var(--teal); }
.quiz-option.incorrect { border-color: var(--red); background: var(--red-bg); color: var(--red); }

/* LEARNING PATH STEPPER */
.path-steps { display: flex; flex-direction: column; gap: 0; }
.path-step { display: flex; gap: 1.25rem; padding: 1.25rem 0; border-bottom: 1px solid var(--border); }
.path-step:last-child { border-bottom: none; }
.path-step-num { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: 0.8rem; flex-shrink: 0; }
.path-step-num.required { background: var(--indigo); color: #fff; }
.path-step-num.optional { background: var(--bg-tag); color: var(--text-3); border: 2px solid var(--border); }
.path-step-content {}
.path-step-title { font-weight: 700; color: var(--text); font-size: 0.9rem; margin-bottom: 0.2rem; }
.path-step-desc { font-size: 0.8rem; color: var(--text-3); }

/* BREADCRUMB */
.breadcrumb { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: var(--text-3); padding-bottom: 1rem; flex-wrap: wrap; }
.breadcrumb a { color: var(--text-3); text-decoration: none; }
.breadcrumb a:hover { color: var(--indigo); }
.breadcrumb-sep { color: var(--text-4); }

/* STATS STRIP */
.stats-strip { background: var(--bg-card); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.stats-grid { max-width: var(--wide-w); margin: 0 auto; padding: 1.5rem 2rem; display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; }
.stat-item { text-align: center; }
.stat-number { font-family: var(--font-display); font-size: 1.75rem; font-weight: 800; color: var(--indigo); display: block; line-height: 1; }
.stat-label { font-size: 0.8rem; color: var(--text-3); margin-top: 0.25rem; }

/* FOOTER */
.footer { background: var(--bg-card); border-top: 1px solid var(--border); padding: 3rem 0 1.5rem; margin-top: 4rem; }
.footer-grid { max-width: var(--wide-w); margin: 0 auto; padding: 0 2rem; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 3rem; }
.footer-brand { font-family: var(--font-display); font-size: 1rem; font-weight: 800; color: var(--text); }
.footer-brand span { color: var(--indigo); }
.footer-col-title { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text); margin-bottom: 0.75rem; }
.footer-links { list-style: none; }
.footer-links li { margin-bottom: 0.4rem; }
.footer-links a { font-size: 0.82rem; color: var(--text-3); text-decoration: none; }
.footer-links a:hover { color: var(--indigo); }
.footer-bottom { max-width: var(--wide-w); margin: 2rem auto 0; padding: 1rem 2rem 0; border-top: 1px solid var(--border); }
.footer-copyright { font-size: 0.78rem; color: var(--text-4); }

@media (max-width: 1024px) { .role-grid { grid-template-columns: 1fr; } .module-grid { grid-template-columns: 1fr; } }
@media (max-width: 768px) { .nav-links { display: none; } .stats-grid { grid-template-columns: repeat(2,1fr); } .footer-grid { grid-template-columns: 1fr; gap: 2rem; } }

/* ═══════════════════════════════════════════════
   DARK THEME
   ═══════════════════════════════════════════════ */
[data-theme="dark"] {
  --bg:          #0f172a;
  --bg-card:     #1e293b;
  --bg-hover:    #334155;
  --bg-tag:      #1e293b;
  --border:      #334155;
  --border-dark: #475569;
  --text:        #f1f5f9;
  --text-2:      #cbd5e1;
  --text-3:      #94a3b8;
  --text-4:      #64748b;
  --code-bg:     #0f172a;
  --code-text:   #e2e8f0;
}
[data-theme="dark"] .nav { background: rgba(15,23,42,0.95); border-bottom-color: var(--border); }
[data-theme="dark"] body { background: var(--bg); color: var(--text); }

/* Theme toggle */
.theme-toggle {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-3);
  cursor: pointer;
  border-radius: 6px;
  padding: 0.3rem 0.65rem;
  font-size: 0.85rem;
  line-height: 1;
  margin-left: 0.5rem;
  transition: background 0.15s, color 0.15s;
}
.theme-toggle:hover { background: var(--bg-hover); color: var(--text); }