/* ==========================================================================
   voter-guide.css — the 2026 Texas Voter Guide page (voter-guide/index.html).

   Geometry is reproduced from the reference mockup's stylesheet
   (reference/voter-guide-reference.html). Every color lives in :root below:
   EDIT THAT BLOCK TO RETHEME. Navy-tinted shadows and translucent whites are
   derived with color-mix(), so they follow --vg-navy automatically. Pale
   tints that do not derive exactly from a base are their own tokens, grouped
   under the base they tint.

   Independent of theme.css (the registration page): this page uses the
   mailer palette and the system font stack, as the mockup does.
   ========================================================================== */

:root {
  /* --- brand bases (from the printed mailer) --------------------------- */
  --vg-navy:        #223064;  /* headings, header text, footer, step numerals */
  --vg-ink:         #231f20;  /* body text */
  --vg-slate:       #5a6484;  /* secondary text */
  --vg-accent:      #2f7fae;  /* focus ring */
  --vg-accent-dark: #1d5b80;  /* links, primary buttons */
  --vg-dem:         #1c6d96;  /* "Democrat" tag text */
  --vg-rep:         #bf2335;  /* "Republican" tag text, "No" votes */
  --vg-warm:        #b4530a;  /* county alert + warnings (functional, not brand) */
  --vg-paper:       #ffffff;

  /* --- pale blue family ------------------------------------------------ */
  --vg-line:        #d5e3f3;  /* every hairline border */
  --vg-sand:        color-mix(in srgb, var(--vg-line) 21%, #fff);  /* #f6f9fc cool ground */
  --vg-accent-soft: #e3f1fa;  /* eyebrow pill bg */
  --vg-accent-edge: #bfdcf0;  /* eyebrow pill border */
  --vg-hover:       #eaf4fb;  /* district picker hover */
  --vg-row-head:    #fcfcfe;  /* comparison table row headings */
  --vg-muted:       #7d87a3;  /* "not addressed" text */

  /* --- party tags ------------------------------------------------------ */
  --vg-dem-bg:      #e9f4fc;
  --vg-dem-edge:    #c7dff4;
  --vg-rep-bg:      #fdeef2;
  --vg-rep-edge:    #f6c6cf;

  /* --- warm alert ------------------------------------------------------ */
  --vg-warm-bg:     #fff7ed;
  --vg-warm-edge:   #fed7aa;

  /* --- vote outcomes --------------------------------------------------- */
  --vg-yes:         #0b6b3a;
  --vg-tabled:      #8a5a00;

  /* --- footer ---------------------------------------------------------- */
  --vg-footer-text: #c3d3ea;

  /* --- photo placeholder stripes (shown when a contender has no photo) - */
  --vg-ph-a:        #eaf2fa;
  --vg-ph-b:        #dfeaf7;
  --vg-ph-edge:     #c3d4e6;

  /* --- elevation (navy-tinted) ----------------------------------------- */
  --vg-shadow:
    0 1px 2px color-mix(in srgb, var(--vg-navy) 7%, transparent),
    0 8px 24px color-mix(in srgb, var(--vg-navy) 7%, transparent);
  --vg-radius: 16px;
  --vg-maxw:   1080px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--vg-ink);
  background:var(--vg-paper);
  line-height:1.55;
  font-size:17px;
}
img{max-width:100%;display:block}
a{color:var(--vg-accent-dark)}
.wrap{max-width:var(--vg-maxw);margin:0 auto;padding:0 20px}
section{position:relative}

/* ---------- header ---------- */
/* margin-bottom + font-size reproduce the mockup, where a stray `.site` rule
   also matched the header and opened a 14px gap above the hero. */
header.site{
  position:sticky;top:0;z-index:40;background:color-mix(in srgb, #fff 94%, transparent);
  backdrop-filter:saturate(160%) blur(8px);border-bottom:1px solid var(--vg-line);
  margin:0 0 14px;font-size:14.5px
}
/* link back to the ballot tab (ballot/index.html), above the brand row */
.backbar{border-bottom:1px solid var(--vg-line);font-size:13.5px;line-height:20px;font-weight:650}
.backbar .wrap{padding:8px 20px}
.backbar a{color:var(--vg-accent-dark);text-decoration:none}
.backbar a:hover{text-decoration:underline}
.backbar a:focus-visible{outline:3px solid var(--vg-accent);outline-offset:2px;border-radius:4px}
.bar{display:flex;align-items:center;gap:14px;justify-content:space-between;padding:12px 20px;flex-wrap:wrap;row-gap:8px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--vg-navy);text-decoration:none;letter-spacing:-.01em;white-space:nowrap;flex:0 0 auto}
/* TDD shield crest (assets/img/tdd-logo-crest.png, portrait); replace the file to change it */
.mark{height:44px;width:auto;flex:0 0 auto}
.brand small{display:block;font-weight:500;color:var(--vg-slate);font-size:12px;letter-spacing:.02em}
.picker{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--vg-slate)}
.picklabel{font-size:16.5px;font-weight:800;color:var(--vg-navy);letter-spacing:-.01em;white-space:nowrap}
select#district{
  font:inherit;font-size:18.5px;font-weight:800;color:var(--vg-navy);letter-spacing:-.01em;
  padding:13px 16px;border:2px solid var(--vg-navy);border-radius:12px;background:#fff;min-height:56px;
  cursor:pointer;box-shadow:0 2px 10px color-mix(in srgb, var(--vg-navy) 12%, transparent)
}
select#district:hover{background:var(--vg-hover)}
select#district:focus-visible{outline:3px solid var(--vg-accent);outline-offset:2px}
@media (max-width:900px){
  .picker{width:100%;justify-content:space-between}
  .picker label{display:none}
  .brand small{display:none}
  select#district{flex:1;min-width:0;font-size:17px;min-height:52px;padding:12px 14px}
}

/* ---------- hero ---------- */
.hero{background:linear-gradient(180deg,var(--vg-sand) 0%,#fff 100%);padding:34px 0 26px;border-bottom:1px solid var(--vg-line)}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--vg-accent-dark);
  background:var(--vg-accent-soft);border:1px solid var(--vg-accent-edge);padding:6px 11px;border-radius:999px
}
h1{font-size:clamp(1.65rem,4.6vw,2.5rem);line-height:1.16;letter-spacing:-.02em;margin:16px 0 12px;color:var(--vg-navy)}
.lede{font-size:clamp(1rem,2.4vw,1.15rem);color:var(--vg-slate);max-width:62ch;margin:0 0 20px}
.cta-row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--vg-accent-dark);color:#fff;text-decoration:none;font-weight:650;
  padding:14px 20px;border-radius:12px;border:1px solid var(--vg-accent-dark);min-height:50px;font-size:16px
}
.btn.secondary{background:#fff;color:var(--vg-navy);border-color:var(--vg-line)}
.trust{display:flex;flex-wrap:wrap;gap:8px;font-size:13.5px;color:var(--vg-slate)}
.chip{background:#fff;border:1px solid var(--vg-line);border-radius:999px;padding:6px 11px}

/* ---------- generic blocks ---------- */
.block{padding:34px 0;border-bottom:1px solid var(--vg-line)}
.block h2{font-size:clamp(1.25rem,3.2vw,1.6rem);letter-spacing:-.015em;margin:0 0 6px;color:var(--vg-navy)}
.block .sub{color:var(--vg-slate);margin:0 0 20px;font-size:15.5px;max-width:70ch}
.grid{display:grid;gap:16px}
.card{background:#fff;border:1px solid var(--vg-line);border-radius:var(--vg-radius);box-shadow:var(--vg-shadow);padding:20px}

/* ---------- key dates ---------- */
.dates{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.date{background:var(--vg-sand);border:1px solid var(--vg-line);border-radius:12px;padding:14px}
.date b{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--vg-slate)}
.date span{display:block;font-weight:700;color:var(--vg-navy);font-size:16px;margin-top:3px}
.alert{
  margin-top:14px;background:var(--vg-warm-bg);border:1px solid var(--vg-warm-edge);border-left:4px solid var(--vg-warm);
  border-radius:12px;padding:14px 16px;font-size:15px
}
.ribbon{
  display:inline-flex;flex-wrap:wrap;gap:8px;align-items:center;background:var(--vg-navy);color:#fff;
  border-radius:999px;padding:8px 16px;font-size:14px;font-weight:600;margin-bottom:14px
}

/* ---------- candidates ---------- */
.cands{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.cand{background:#fff;border:1px solid var(--vg-line);border-radius:var(--vg-radius);box-shadow:var(--vg-shadow);overflow:hidden;display:flex;flex-direction:column}
.cand .top{display:flex;gap:14px;padding:18px;border-bottom:1px solid var(--vg-line);align-items:flex-start}
.photo{
  width:84px;height:84px;flex:0 0 auto;display:block;object-fit:contain;background:transparent
}
.photo.ph{
  width:84px;height:84px;border-radius:10px;
  background:repeating-linear-gradient(45deg,var(--vg-ph-a),var(--vg-ph-a) 8px,var(--vg-ph-b) 8px,var(--vg-ph-b) 16px);
  border:1px dashed var(--vg-ph-edge);display:grid;place-items:center;color:var(--vg-muted);font-size:10.5px;text-align:center;line-height:1.2;
  font-weight:600;letter-spacing:.04em
}
.cand h3{margin:0 0 4px;font-size:19px;color:var(--vg-navy);letter-spacing:-.01em}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.tag{font-size:12px;font-weight:700;padding:3px 8px;border-radius:999px;border:1px solid var(--vg-line);color:var(--vg-slate);background:#fff}
.tag.pD{color:var(--vg-dem);border-color:var(--vg-dem-edge);background:var(--vg-dem-bg)}
.tag.pR{color:var(--vg-rep);border-color:var(--vg-rep-edge);background:var(--vg-rep-bg)}
.one{font-size:14.5px;color:var(--vg-slate);margin:0}
.cand .body{padding:16px 18px 18px}
.cand h4{margin:0 0 7px;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--vg-slate)}
.cand ul{margin:0 0 15px;padding-left:19px}
.cand li{margin-bottom:6px;font-size:15.3px}
.cand p.bio{font-size:15.3px;margin:0 0 15px}
.cand-site{margin:0 0 14px;font-size:14.5px}
.cand-site.na{color:var(--vg-muted);font-style:italic}
.money{display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;background:var(--vg-sand);border:1px solid var(--vg-line);border-radius:12px;padding:11px 13px;margin-bottom:14px}
.money strong{font-size:17px;color:var(--vg-navy)}
.money span{font-size:13px;color:var(--vg-slate)}
.warn{font-size:13px;color:var(--vg-warm);background:var(--vg-warm-bg);border:1px dashed var(--vg-warm-edge);border-radius:8px;padding:7px 9px;margin-bottom:12px}

/* ---------- comparison table ---------- */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--vg-line);border-radius:var(--vg-radius);background:#fff}
table{border-collapse:collapse;width:100%;min-width:720px}
th,td{text-align:left;vertical-align:top;padding:14px 16px;border-bottom:1px solid var(--vg-line);font-size:15px}
thead th{background:var(--vg-sand);font-size:13px;text-transform:uppercase;letter-spacing:.07em;color:var(--vg-slate);position:sticky;top:0}
tbody th{width:22%;font-weight:650;color:var(--vg-navy);background:var(--vg-row-head)}
td.na{color:var(--vg-muted);font-style:italic}
.scrollhint{font-size:13px;color:var(--vg-slate);margin:8px 0 0}

/* ---------- votes ---------- */
.vote{display:grid;grid-template-columns:1fr;gap:12px}
.voterow{background:#fff;border:1px solid var(--vg-line);border-radius:12px;padding:14px}
.voterow h5{margin:0 0 8px;font-size:15.5px;color:var(--vg-navy)}
.vb{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px dashed var(--vg-line);font-size:14.6px}
.vb:first-of-type{border-top:0}
.yes{color:var(--vg-yes);font-weight:700}
.no{color:var(--vg-rep);font-weight:700}
.tabled{color:var(--vg-tabled);font-weight:700}
.norec{color:var(--vg-slate);font-size:13.5px;font-style:italic}

/* ---------- plan / forms ---------- */
.steps{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));counter-reset:s}
.step{background:#fff;border:1px solid var(--vg-line);border-radius:12px;padding:16px;position:relative}
.step h4{margin:0 0 6px;font-size:16px;color:var(--vg-navy)}
.step p{margin:0 0 10px;font-size:14.6px;color:var(--vg-slate)}
.num{
  width:26px;height:26px;border-radius:8px;background:var(--vg-navy);color:#fff;display:grid;place-items:center;
  font-size:13px;font-weight:700;margin-bottom:9px
}
.fineprint{font-size:13px;color:var(--vg-slate);margin-top:8px}

/* ---------- sources ---------- */
.srcs{columns:2;column-gap:26px;font-size:14.4px}
@media (max-width:720px){.srcs{columns:1}}
.srcs li{margin-bottom:8px;break-inside:avoid}
.method{background:var(--vg-sand);border:1px solid var(--vg-line);border-radius:12px;padding:16px;font-size:14.6px;margin-top:16px}

/* ---------- footer ---------- */
/* margin-bottom: see header.site */
footer.site{background:var(--vg-navy);color:var(--vg-footer-text);padding:28px 0;font-size:13.6px;margin:0 0 14px}
footer.site a{color:#fff}
footer.site .disc{border-top:1px solid color-mix(in srgb, #fff 16%, transparent);margin-top:16px;padding-top:14px;max-width:76ch}

/* ---------- sticky mobile CTA ---------- */
.sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:50;display:none;
  background:color-mix(in srgb, #fff 97%, transparent);border-top:1px solid var(--vg-line);padding:10px 14px;
  box-shadow:0 -6px 18px color-mix(in srgb, var(--vg-navy) 8%, transparent)
}
.sticky .btn{width:100%}
@media (max-width:640px){.sticky{display:block} body{padding-bottom:82px}}

/* ---------- inline styles lifted from the mockup markup ---------- */
.card-title{margin:0 0 6px;color:var(--vg-navy)}
.card-text{margin:0;font-size:15px;color:var(--vg-slate)}
.issues{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.money-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.steps-gap{margin-top:18px}
.lock{margin-top:18px}
.lock p{margin:0 0 14px;font-size:14.6px;color:var(--vg-slate)}
.lock .cta-row{margin:0}
.block-tight{padding:22px 0}
.ballot{display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.ballot > div{flex:1 1 340px;min-width:260px}
.ballot h3{margin:0 0 8px;color:var(--vg-navy);font-size:18.5px}
.verify{margin-top:16px}
.verify h4{margin:0 0 6px;color:var(--vg-navy);font-size:17px}
.verify p{margin:0 0 12px;font-size:14.8px;color:var(--vg-slate)}
.verify ul{margin:0;padding-left:19px;font-size:14.8px}
.money-card .money{margin-bottom:12px}
.money-card h4{margin:0 0 6px}
.money-card ul{margin:0;padding-left:19px}
.org{color:#fff}

@media print{
  header.site,.sticky,.cta-row{display:none!important}
  body{font-size:12pt}
  .block{page-break-inside:avoid}
}