/* ============ Citizenship study guide — shared styles ============ */
:root{
  --navy:#012e6a; --navy-deep:#001a3d; --crimson:#8e0e12; --crimson-bright:#b3141a;
  --gold:#e0bd79; --gold-soft:#f0d9a8; --cream:#faf6ea; --paper:#ffffff;
  --ink:#1f2430; --muted:#5b6270; --line:#e6dfce;
  --radius:14px; --shadow:0 2px 10px rgba(1,26,61,.08); --shadow-lg:0 8px 30px rgba(1,26,61,.14);
  --wrap:960px; --tap:48px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font:400 17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 20px}
h1,h2,h3{line-height:1.2; margin:0 0 .4em; color:var(--navy)}
a{color:var(--crimson)}
/* visible keyboard focus */
a:focus-visible, button:focus-visible, select:focus-visible, audio:focus-visible, [tabindex]:focus-visible{
  outline:3px solid var(--gold); outline-offset:2px; border-radius:6px;
}
.site-header a:focus-visible, .lang-toggle button:focus-visible{ outline-color:#fff; }
img{max-width:100%}

/* ---------- language toggle visibility ---------- */
html.lang-en .es{display:none}
html.lang-es .en{display:none}

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:50; background:var(--navy); color:#fff;
  border-bottom:3px solid var(--gold);
}
.site-header .bar{
  max-width:var(--wrap); margin:0 auto; padding:6px 16px;
  display:flex; align-items:center; gap:4px 12px; flex-wrap:wrap;
}
/* mobile: row 1 = brand + toggle, row 2 = nav (keeps sticky header short) */
.lang-toggle{order:1}
.site-nav{order:2; flex-basis:100%}
.brand{
  display:flex; align-items:center; gap:9px; color:#fff; text-decoration:none; font-weight:800;
  font-size:16px; letter-spacing:.01em; margin-right:auto; min-height:44px; padding:4px 0;
}
.brand .flag{font-size:18px}
.site-nav{display:flex; gap:4px; flex-wrap:wrap}
.site-nav a{
  color:#dfe7f4; text-decoration:none; font-weight:600; font-size:15px;
  padding:8px 12px; border-radius:8px; min-height:44px; display:inline-flex; align-items:center;
}
.site-nav a:hover{background:rgba(255,255,255,.1); color:#fff}
.site-nav a.active{color:#fff; background:rgba(224,189,121,.22)}
.lang-toggle{display:inline-flex; border:1px solid rgba(255,255,255,.35); border-radius:999px; overflow:hidden}
.lang-toggle button{
  background:transparent; color:#cdd8ec; border:0; cursor:pointer; font-weight:800; font-size:14px;
  padding:10px 15px; min-height:44px; letter-spacing:.03em;
}
.lang-toggle button[aria-pressed="true"]{background:var(--gold); color:var(--navy-deep)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:var(--tap); padding:13px 24px; border-radius:999px;
  font-weight:800; font-size:16px; text-decoration:none; cursor:pointer; border:0;
  transition:transform .06s ease, background .2s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--crimson); color:#fff; box-shadow:0 4px 14px rgba(142,14,18,.4)}
.btn-primary:hover{background:var(--crimson-bright)}
.btn-gold{background:var(--gold); color:var(--navy-deep)}
.btn-gold:hover{background:var(--gold-soft)}
.btn-ghost{background:transparent; color:#fff; border:2px solid rgba(255,255,255,.5)}
.btn-outline{background:transparent; color:var(--navy); border:2px solid var(--line)}

/* ---------- hero ---------- */
.hero{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-deep) 100%); color:#fff; padding:34px 0 40px}
.hero .row{display:flex; flex-direction:column; align-items:center; gap:22px; text-align:center}
.hero img.cover{width:180px; border-radius:8px; box-shadow:var(--shadow-lg); border:1px solid rgba(255,255,255,.25)}
.hero .eyebrow{color:var(--gold); font-weight:800; letter-spacing:.12em; text-transform:uppercase; font-size:13px; margin:0 0 8px}
.hero h1{color:#fff; font-size:29px; max-width:18ch; margin:0 auto .5em}
.hero p.sub{color:#dfe7f4; font-size:17px; margin:0 auto; max-width:42ch}
.hero .cta{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:22px}

/* compact hero + scroll-down cue (bonus page) */
.hero-bono{padding:18px 0 16px}
.hero-bono img.cover{width:118px}
.hero-bono h1{font-size:23px}
.hero-bono .sub{font-size:15.5px}
.hero-bono .cta{margin-top:14px}
.scrolldown{display:flex; flex-direction:column; align-items:center; gap:5px; margin:16px auto 0; width:max-content; text-decoration:none; color:#eaf0fb}
.scrolldown .lbl{font-size:13.5px; font-weight:700; letter-spacing:.01em}
.scrolldown .chev{width:42px; height:42px; border-radius:50%; border:2px solid var(--gold); display:flex; align-items:center; justify-content:center; color:var(--gold); animation:bob 1.5s ease-in-out infinite}
.scrolldown .chev svg{width:20px; height:20px}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
@media(prefers-reduced-motion:reduce){.scrolldown .chev{animation:none}}

/* ---------- sections ---------- */
section{padding:40px 0}
section + section{border-top:1px solid var(--line)}
.eyebrow{color:var(--crimson); font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:13px; margin:0 0 6px}
h2,.page-h{font-size:26px}
.lead{color:var(--muted); max-width:62ch; margin:.2em 0 0}
.center{text-align:center}
.center .lead{margin-left:auto; margin-right:auto}

/* ---------- checklist ---------- */
.checklist{list-style:none; margin:20px auto 0; padding:0; max-width:60ch}
.checklist li{position:relative; padding:11px 0 11px 34px; border-top:1px solid var(--line); font-size:16px}
.checklist li:first-child{border-top:0}
.checklist li:before{content:"✓"; position:absolute; left:4px; top:11px; color:#1f7a44; font-weight:800}

/* ---------- feature grid ---------- */
.features{display:grid; gap:14px; margin-top:24px; grid-template-columns:1fr}
.feature{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:18px 18px; box-shadow:var(--shadow)}
.feature .ic{font-size:24px; line-height:1}
.feature h3{font-size:18px; margin:10px 0 4px}
.feature p{margin:0; color:var(--muted); font-size:15px}

/* ---------- resource cards (free / paid) ---------- */
.res-group{margin-top:20px}
.res-head{display:flex; align-items:center; gap:10px; margin:26px 0 4px}
.res-head h2{margin:0; font-size:22px}
.badge{display:inline-block; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; padding:4px 11px; border-radius:999px}
.badge.free{background:#e3f2e8; color:#1f7a44}
.badge.paid{background:#fdeceo; background:#f7ecd3; color:#7a5a12}
.cards{display:grid; gap:14px; margin-top:14px; grid-template-columns:1fr}
.card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:6px;
}
.card.soon{background:#f5f1e6; border-style:dashed}
.card .tag{align-self:flex-start; font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; padding:3px 9px; border-radius:6px}
.tag.g{background:#e3f2e8; color:#1f7a44}
.tag.p{background:#f7ecd3; color:#7a5a12}
.tag.n{background:#eef; background:#e7eefb; color:var(--navy)}
.card h3{font-size:18px; margin:4px 0 0}
.card p{margin:0; color:var(--muted); font-size:15px}
.card .price{font-weight:800; color:var(--navy); font-size:15px}
.card .go{margin-top:8px; align-self:flex-start}

/* ---------- audio tracks ---------- */
.track{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; margin:14px 0; box-shadow:var(--shadow)}
.track h3{font-size:18px; margin:0 0 10px}
.track h3 .qr{font-weight:600; color:var(--muted); font-size:14px}
.track audio{display:block; width:100%; height:44px; margin:2px 0 8px}
.track .dl{display:inline-flex; align-items:center; gap:7px; min-height:44px; font-weight:700; font-size:15px; text-decoration:none; color:var(--navy)}

/* ---------- audio coming-soon panel ---------- */
.soon-panel{background:var(--paper); border:1px solid var(--line); border-top:4px solid var(--gold); border-radius:var(--radius); padding:20px 20px 8px; margin-top:18px; box-shadow:var(--shadow)}
.soon-title{margin:0; font-weight:800; color:var(--navy); font-size:18px}
.soon-sub{margin:6px 0 10px; color:var(--muted); font-size:14.5px}
.soon-list{list-style:none; margin:0; padding:0}
.soon-list li{padding:12px 0; border-top:1px dashed var(--line); display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:6px}
.soon-list li b{color:var(--ink)}
.soon-list li span{color:var(--muted); font-size:14px}

/* ---------- dynamic answers ---------- */
.stamp{display:inline-flex; align-items:center; gap:8px; background:#eef3fb; color:var(--navy); border:1px solid #d5e0f2; padding:6px 13px; border-radius:999px; font-weight:700; font-size:14px; margin-top:12px}
.stamp .dot{width:9px; height:9px; border-radius:50%; background:#2e9e5b; box-shadow:0 0 0 3px rgba(46,158,91,.2)}
.qcards{margin-top:20px; display:grid; gap:12px}
.qcard{background:var(--paper); border:1px solid var(--line); border-left:4px solid var(--navy); border-radius:12px; padding:14px 16px; box-shadow:var(--shadow)}
.qcard.state{border-left-color:var(--gold)}
.qcard .qnum{font-weight:800; color:var(--crimson); font-size:13px; letter-spacing:.04em}
.qcard .ques{font-weight:700; margin:2px 0 1px}
.qcard .ans{margin:9px 0 0; padding-top:9px; border-top:1px dashed var(--line); font-size:15.5px}
.qcard .ans b{color:var(--navy)}
.qcard .qtag{display:inline-block; font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; padding:2px 8px; border-radius:6px; margin-left:6px; vertical-align:middle}
.qtag.nat{background:#e7eefb; color:var(--navy)}
.qtag.st{background:#f7ecd3; color:#7a5a12}
/* ---------- state pickers (Q61 governor, Q62 capital) ---------- */
.picker{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:10px}
.picker select{
  flex:1 1 220px; min-height:var(--tap); padding:10px 12px; font-size:16px;
  border:1px solid var(--line); border-radius:10px; background:var(--paper); color:var(--ink);
}
.picker .btn{padding:11px 18px; font-size:15px}
.picker-result{
  margin:12px 0 0; padding:12px 14px; background:#eef3fb; border:1px solid #d5e0f2;
  border-radius:10px; font-weight:700; color:var(--navy); font-size:16px;
}
.picker-note{margin:12px 0 0; padding:12px 14px; background:#fff9ec; border:1px solid var(--gold); border-radius:10px; font-size:15px}

.callout{background:#fff9ec; border:1px solid var(--gold); border-radius:12px; padding:14px 16px; margin-top:20px; font-size:15px}
.callout b{color:var(--crimson)}

/* ---------- practice quiz ---------- */
.q-progress{color:var(--muted); font-weight:700; font-size:14px; margin:0 0 8px}
.q-card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow)}
.q-num{color:var(--crimson); font-weight:800; font-size:13px; margin:0 0 6px}
.q-text{font-size:20px; font-weight:700; color:var(--navy); margin:0 0 8px; line-height:1.3}
.q-hint{color:var(--muted); font-size:14px; margin:0 0 14px}
#q-answer{border-top:1px dashed var(--line); padding-top:12px; margin-bottom:12px}
.q-answer{margin:0 0 4px; font-size:16px}
.q-answer b{color:var(--navy)}
.q-answer-es{color:var(--muted); font-size:14.5px; margin:0}
.q-rate{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px}
.q-result .q-score{font-size:24px; font-weight:800; color:var(--navy); margin:0 0 6px}
.q-verdict{font-weight:700; margin:0 0 10px}
.q-verdict.good{color:#1f7a44}
.q-verdict.warn{color:#7a5a12}
.q-review-h{font-weight:700; margin:12px 0 6px}
.q-review{margin:0; padding-left:20px}
.q-review li{padding:5px 0; font-size:15px}
.q-intro p{font-size:16px; margin:0 0 16px}

/* ---------- footer ---------- */
footer{background:var(--navy-deep); color:#b8c4dc; padding:30px 0; font-size:13.5px}
footer .wrap{display:grid; gap:12px}
footer strong{color:#fff}
footer a{color:var(--gold)}
.disc{border:1px solid rgba(255,255,255,.14); border-radius:10px; padding:14px 16px; line-height:1.55}

/* ---------- responsive ---------- */
@media(min-width:680px){
  .site-header .bar{padding:10px 20px}
  .lang-toggle{order:0}
  .site-nav{order:0; flex-basis:auto}
  .hero{padding:52px 0}
  .hero .row{flex-direction:row; text-align:left; gap:34px; justify-content:center}
  .hero img.cover{width:220px}
  .hero .htext{max-width:34ch}
  .hero h1{font-size:38px; margin-left:0}
  .hero .cta{justify-content:flex-start}
  h2,.page-h{font-size:29px}
  .features{grid-template-columns:repeat(3,1fr)}
  .cards{grid-template-columns:repeat(2,1fr)}
}