/* MVV Klaar — shared base styles for "article"-style pages
   =========================================================
   Used by: mvv-exam-guide.html, faq.html, kns-practice.html,
   mvv-speaking-practice.html, mvv-reading-practice.html,
   basisexamen-inburgering-oefenen.html (migrated 2026-08-04).

   Extracted 2026-08-02 — see SHARED-CODE-ANALYSIS.md (TODO #37) for the
   full reasoning. This was 103 lines duplicated byte-for-byte across
   all 5 pages (~35KB total). Same externalization pattern already used
   by /fonts/fonts.css.

   Typography unified 2026-08-04 to match terms.html/privacy.html's
   lighter scale (see SEO-DECISIONS.md) — h1/h2 clamps and body text
   sized down, plus new .eyebrow/.hero-eyebrow orange-caps kicker
   classes added and applied to every hero + section heading on all 6
   pages above.

   Covers: :root color/type tokens, base element resets, nav, hero,
   article-body typography, FAQ accordion (.faq-item/.faq-q/.faq-a),
   buttons, meta pills, responsive breakpoints.

   Does NOT cover page-specific additions (.kex-card, .rd-passage,
   .play-btn, etc.) — those stay in each page's own <style> block,
   correctly, since they're genuinely page-specific. Also does NOT
   cover blog-hoe-werkt-basisexamen-inburgering-buitenland.html or
   privacy.html/terms.html — deliberately kept separate, see
   SHARED-CODE-ANALYSIS.md's 2026-08-04 entry for why.

   If you edit this file: it affects all 6 pages listed above
   simultaneously — that's the point, but double-check the change makes
   sense on all 6 before saving, not just the one you're looking at. */

:root{
  --navy:#1E3A5F;--ink:#0F1F3D;--blue:#21468B;--orange:#C8601A;
  --red:#AE1C28;--white:#FFFFFF;--off:#F7F9FC;--muted:#6B7280;
  --label:#9CA3AF;--sand:#E5E7EB;--dark:#0F1F3D;--cream:#FFFFFF;--green:#15803D;
  --tx:.65rem;--ts:.75rem;--tb:.875rem;--nav-h:64px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--cream);color:var(--dark);overflow-x:hidden;line-height:1.75}
#flag-stripe{content:'';position:fixed;top:var(--nav-h,64px);left:0;right:0;height:4px;background:linear-gradient(90deg,#AE1C28 33.3%,#fff 33.3% 66.6%,#21468B 66.6%);z-index:99}

nav{display:flex;align-items:center;justify-content:space-between;padding:0 48px;height:64px;background:var(--ink);position:sticky;top:0;z-index:100;box-shadow:0 2px 16px rgba(0,0,0,.15)}
.logo{font-family:'Cormorant Garamond',serif;font-size:1.7rem;font-weight:700;color:white;letter-spacing:-1px;display:flex;align-items:center;gap:10px;text-decoration:none}
.logo em{color:var(--orange);font-style:normal}
.flag{width:28px;height:20px;border-radius:3px;overflow:hidden;display:flex;flex-direction:column;flex-shrink:0}
.flag .r{background:#AE1C28;flex:1}.flag .w{background:#fff;flex:1}.flag .b{background:#21468B;flex:1}
nav ul{display:flex;align-items:center;gap:28px;list-style:none}
nav ul a{color:rgba(255,255,255,.75);text-decoration:none;font-size:var(--tb);transition:color .2s}
nav ul a:hover{color:white}
.btn-nav{background:var(--navy);color:white!important;padding:10px 22px;border-radius:8px;font-weight:600!important;transition:background .2s!important}
.btn-nav:hover{background:color-mix(in srgb,var(--navy) 85%,black)!important}
.nav-mob-cta{display:none}
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:36px;height:36px;background:none;border:none;cursor:pointer;padding:4px;border-radius:8px;-webkit-tap-highlight-color:transparent}
.nav-burger span{display:block;width:22px;height:2px;background:white;border-radius:2px;transition:transform .25s,opacity .2s}
.nav-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-mob-drawer{display:none;position:absolute;top:64px;left:0;right:0;background:var(--ink);border-bottom:1px solid rgba(255,255,255,.1);box-shadow:0 8px 24px rgba(0,0,0,.2);flex-direction:column;padding:8px 0 16px;z-index:99}
.nav-mob-drawer.open{display:flex}
.nav-mob-drawer a{padding:13px 24px;font-size:.9rem;color:rgba(255,255,255,.8);text-decoration:none;font-weight:500}
.nav-mob-drawer a:active{background:rgba(255,255,255,.08)}
.nav-mob-drawer .drawer-cta{margin:10px 20px 0;background:var(--orange);color:white!important;text-align:center;border-radius:10px;font-weight:700!important;padding:13px 24px}
@media(max-width:640px){nav{padding:0 20px}nav ul{display:none}.nav-mob-cta{display:none!important}.nav-burger{display:flex!important}}

/* ARTICLE LAYOUT */
.article-hero{background:var(--ink);padding:64px 48px 56px;position:relative}
.article-hero::before{content:'';position:fixed;top:var(--nav-h,64px);left:0;right:0;height:4px;background:linear-gradient(90deg,#AE1C28 33.3%,#fff 33.3% 66.6%,#21468B 66.6%);z-index:99}
.breadcrumb{font-size:var(--ts);color:rgba(255,255,255,.45);margin-bottom:16px}
.breadcrumb a{color:rgba(255,255,255,.45);text-decoration:none}
.breadcrumb a:hover{color:rgba(255,255,255,.7)}
.article-hero h1{font-family:'Cormorant Garamond',serif;font-size:clamp(1.8rem,3.2vw,2.4rem);font-weight:700;color:white;letter-spacing:-2px;line-height:1.15;max-width:780px;margin-bottom:16px}
.article-hero h1 em{font-style:italic;color:var(--orange)}
.article-hero p{font-size:.9rem;color:var(--muted);line-height:1.75;margin-bottom:16px}
.article-meta{display:flex;gap:24px;flex-wrap:wrap}
.meta-pill{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:5px 14px;font-size:var(--ts);color:rgba(255,255,255,.55)}

/* ARTICLE BODY */
.article-body{max-width:800px;margin:0 auto;padding:64px 48px;overflow-wrap:break-word;word-break:break-word}
.article-body h2{font-family:'Cormorant Garamond',serif;font-size:clamp(1.2rem,2vw,1.4rem);font-weight:700;color:var(--ink);letter-spacing:-1px;line-height:1.2;margin-bottom:14px}
.article-body h2 em{font-style:italic;color:var(--orange)}
.article-body h2:first-child{margin-top:0}
.article-body h3{font-size:.875rem;font-weight:600;color:var(--ink);margin:20px 0 8px;letter-spacing:.5px}
.article-body p{color:var(--muted);line-height:1.75;margin-bottom:16px;font-size:.9rem}
.article-body ul{color:var(--muted);line-height:1.75;margin-bottom:16px;padding-left:20px;font-size:.9rem}
.article-body ul li{margin-bottom:6px}
.article-body strong{color:var(--ink)}

/* EXAM CARDS */
.exam-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:28px 0}
.exam-card{background:var(--off);border:1px solid var(--sand);border-radius:14px;padding:24px}
.exam-card .section-name{font-size:var(--ts);font-weight:600;color:var(--orange);letter-spacing:2px;text-transform:uppercase;margin-bottom:8px}
.exam-card h3{font-size:.875rem;font-weight:600;color:var(--ink);margin:20px 0 8px;letter-spacing:.5px}
.exam-card .stat{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--sand);font-size:var(--ts)}
.exam-card .stat:last-child{border-bottom:none}
.exam-card .stat .key{color:var(--label)}
.exam-card .stat .val{font-weight:600;color:var(--ink)}

/* PASS MARK TABLE */
.pass-table{width:100%;border-collapse:collapse;margin:24px 0;border-radius:12px;overflow:hidden;border:1px solid var(--sand)}
.pass-table th{background:var(--ink);color:white;padding:12px 16px;text-align:left;font-size:var(--ts);font-weight:600}
.pass-table td{padding:12px 16px;border-bottom:1px solid var(--sand);font-size:var(--tb)}
.pass-table tr:last-child td{border-bottom:none}
.pass-table tr:nth-child(even) td{background:var(--off)}
.pass-mark{font-weight:700;color:var(--orange)}

/* CALLOUT */
.callout{background:var(--off);border-left:4px solid var(--orange);border-radius:0 12px 12px 0;padding:18px 20px;margin:24px 0}
.callout p{margin:0;color:var(--ink);font-size:var(--tb)}
.callout strong{color:var(--orange)}

/* INLINE CTA */
.inline-cta{background:var(--ink);border-radius:16px;padding:40px;text-align:center;margin:56px 0}
.inline-cta h3{font-family:'Cormorant Garamond',serif;font-size:1.8rem;font-weight:700;color:white;margin-bottom:12px}
.inline-cta p{color:rgba(255,255,255,.6);margin-bottom:24px;font-size:var(--tb)}
.btn-o{background:var(--orange);color:white;padding:14px 32px;border-radius:12px;font-weight:700;font-size:1rem;border:none;cursor:pointer;text-decoration:none;display:inline-block;transition:all .15s}
.btn-o:hover{transform:translateY(-1px);box-shadow:0 8px 28px rgba(200,96,26,.4)}

/* FAQ */
.sec-intro{font-size:.9rem;color:var(--muted);line-height:1.75;max-width:640px;margin-bottom:40px}
.faq-list{margin-top:24px}
.faq-item{border-bottom:1px solid var(--sand);padding:18px 0}
.faq-item:first-child{border-top:1px solid var(--sand)}
.faq-q{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;font-weight:500;font-size:.875rem;color:var(--ink);margin-bottom:6px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
.faq-q span{transition:all .15s ease;flex-shrink:0}
.faq-a{font-size:.9rem;color:var(--muted);line-height:1.65;word-break:break-word;overflow-wrap:break-word;margin-top:10px;display:none}
.faq-item.open .faq-a{display:block}
.faq-item.open .faq-q span{transform:rotate(45deg)}

footer{background:var(--ink);color:rgba(255,255,255,.6);padding:56px 48px 28px}
.ftop{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px}
.flogo{font-family:'Cormorant Garamond',serif;font-size:1.4rem;font-weight:700;color:white;margin-bottom:8px}
.flogo em{color:var(--orange);font-style:normal}
.fdesc{font-size:var(--ts);line-height:1.6;margin-bottom:4px}
.flinks h5{color:white;font-size:var(--tb);font-weight:600;margin-bottom:12px}
.flinks ul{list-style:none}
.flinks li{margin-bottom:8px}
.flinks a{color:rgba(255,255,255,.55);text-decoration:none;font-size:var(--ts);transition:color .2s}
.flinks a:hover{color:white}
.fbot{border-top:1px solid rgba(255,255,255,.1);padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:var(--tx);color:rgba(255,255,255,.3)}

@media(max-width:768px){
  .article-hero{padding:48px 20px 40px}
  .article-body{padding:48px 20px}
  .exam-cards{grid-template-columns:1fr}
  .ftop{grid-template-columns:1fr 1fr}
}

/* Cookie consent banner — added 2026-08-02 (TODO #38). Previously only
   on mvv-klaar.html/mvv-practice.html; extended to every page so a
   first-time visitor arriving directly on one of these has a way to
   actually grant consent, not just correctly-gated tracking with no
   consent mechanism to trigger it. */
#ckb{position:fixed;bottom:0;left:0;right:0;background:var(--dark);color:var(--sand);padding:14px 20px;
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;z-index:9999;font-size:var(--tb,.875rem);
  border-top:2px solid var(--orange);transform:translateY(100%);transition:transform .4s ease;}
#ckb.show{transform:translateY(0);}
.ckbtn{background:var(--orange);color:var(--dark);border:none;padding:11px 20px;border-radius:8px;
  font-weight:700;cursor:pointer;font-size:var(--tb,.875rem);white-space:nowrap;}
.ckbtn.sec{background:transparent;border:1px solid var(--orange);color:var(--orange);padding:11px 20px;}

/* Real audio play button — same asset system as the app (assets.mvvexamen.nl/audio),
   TTS fallback if the MP3 fails. Moved here 2026-08-03 when a second page
   (kns-practice.html) needed it too — was previously duplicated only on
   mvv-speaking-practice.html's own stylesheet. */
.abt{display:inline-flex;align-items:center;gap:3px;background:var(--navy);color:white;padding:3px 8px;border-radius:5px;font-size:.7rem;font-weight:600;cursor:pointer;border:none;flex-shrink:0;vertical-align:middle}
.abt:hover{background:var(--ink)}

/* Practice-page example cards (kex-*) — shared across kns-practice.html,
   mvv-speaking-practice.html, mvv-reading-practice.html. Moved here
   2026-08-03 (was duplicated on all 3), same day the click-to-check
   quiz interactivity was added — matches the pattern already proven
   on mvv-exam-guide.html's "Try a real practice question" widget,
   generalized here to work across many cards instead of one hardcoded
   example per exam section. */
.kex-card{border:1px solid var(--sand);border-radius:12px;padding:20px;background:var(--off)}
.kex-label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--orange);margin-bottom:10px}
.kex-q{font-size:.95rem;margin-bottom:6px;color:var(--dark)}
.kex-opts{display:flex;flex-direction:column;gap:10px;margin:12px 0}
.kex-opt{border:1px solid var(--sand);border-radius:8px;padding:8px 14px;font-size:.85rem;color:var(--muted)}

/* Interactive click-to-check options — used by kns-practice.html and
   mvv-reading-practice.html. Added 2026-08-03, replacing the earlier
   static "answer already shown" cards with real interactivity matching
   the exam-guide.html widget's actual behavior. */
.kex-opts-interactive{display:flex;flex-direction:column;gap:10px;margin:12px 0}
.kex-opt-btn{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 16px;border-radius:10px;border:2px solid var(--sand);background:white;color:var(--ink);text-align:left;cursor:pointer;font-size:.9rem;font-family:inherit;font-weight:500;width:100%;appearance:none;-webkit-appearance:none}
.kex-opt-btn:hover{border-color:var(--navy)}
.kex-opt-btn.picked-correct{border-color:#15803D;background:#F0FDF4}
.kex-opt-btn.picked-wrong{border-color:#DC2626;background:#FEF2F2}
.kex-opt-btn.reveal-correct{border-color:#15803D}
.kex-opt-btn[disabled]{cursor:default}
.opt-audio{cursor:pointer;font-size:.8rem;flex-shrink:0}
.kex-result{display:none;margin-top:12px;padding:12px 16px;border-radius:10px;font-size:.9rem;line-height:1.55}
.kex-result.correct{background:#F0FDF4;border:1px solid #BBF7D0;color:#15803D}
.kex-result.wrong{background:#FEF2F2;border:1px solid #FCA5A5;color:#DC2626}
.kex-result.show{display:block}
.kex-answer{margin-top:12px;padding-top:12px;border-top:1px solid var(--sand);font-size:.9rem;color:var(--dark)}

/* LANGUAGE PICKER — matches mvv-practice.html's #lp/.lbtn/#ldd/.ldi/.lnote
   exactly (same class/id names, same behavior), adapted to this file's
   design tokens instead of the app's --sa/--dk/--mu/--b/--lb. Lets a
   sponsor/partner pick their girlfriend's language to see example tips
   translated live, same feature as the app's Study card. Added 2026-08-04
   for Phase 3. */
#lp{position:relative;isolation:isolate}
.lbtn{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);color:white;padding:5px 12px;border-radius:8px;font-size:var(--ts);font-weight:600;display:flex;align-items:center;gap:4px;cursor:pointer;white-space:nowrap}
.lbtn-txt{display:inline}
#ldd{position:absolute;top:calc(100% + 5px);right:0;background:white;border:1px solid var(--sand);border-radius:12px;box-shadow:0 8px 28px rgba(0,0,0,.25);min-width:170px;z-index:10001;display:none;max-height:260px;overflow-y:auto;color:var(--dark)}
#ldd.open{display:block}
.ldi{padding:7px 10px;font-size:var(--ts);cursor:pointer;border-bottom:1px solid var(--sand);color:var(--dark);background:white}
.ldi:last-child{border-bottom:none}
.ldi:hover{background:var(--off)}
.ldi.on{background:var(--off);font-weight:700;color:var(--blue)}
.lnote{font-size:var(--tx);color:var(--muted);padding:5px 10px;border-top:1px solid var(--sand);line-height:1.3;font-style:italic}
.txbl{margin-top:6px;font-size:var(--tx);color:var(--muted);font-style:italic;min-height:15px}

/* No-label Dutch-primary/English-tip style — matches the pattern already
   proven on basisexamen-inburgering-oefenen.html / mvv-exam-guide.html's
   "Try a real practice question" widgets. No "NL:"/"EN:" labels — Dutch
   is the bold primary line, English is a smaller muted italic tip below
   (or inline after "·" for option buttons). Applied to the 3 dedicated
   practice pages 2026-08-03, replacing the earlier NL:/EN:-labeled
   version. */

/* Recording-dot blink — used by the voice recorder's live "Recording"
   indicator on the Speaking practice pages. Added 2026-08-05 with the
   Web Audio waveform recorder upgrade. */
@keyframes blink{0%,100%{opacity:1}50%{opacity:.15}}