/*
 * VoteReady Midterms — site-wide design fixes (2026-10-16).
 * Loaded after the main Next.js stylesheet on every page. The built CSS is
 * cached for a year, so fixes live here instead of in the hashed chunk.
 * Each block can be removed on its own to undo that change.
 * .htaccess caches CSS for a year too: after editing this file, bump the
 * ?v= number in the <link> tag on every page so visitors get the new copy.
 */

/* 1. Contrast — muted labels were #64748b (3.3–3.7:1 on cards). */
:root {
  --text-muted: #8796ad;
}

/* 2. One theme everywhere — remap the light pages (States, Guides, About,
      Sources, legal pages, 404) onto the dark navy + gold palette. */
main > .min-h-screen.bg-slate-50 {
  background: var(--bg-0);
  color: var(--text-primary);
}
.min-h-screen.bg-slate-50 .bg-white { background: var(--bg-2); }
.min-h-screen.bg-slate-50 .bg-slate-50,
.min-h-screen.bg-slate-50 .bg-slate-100 { background: var(--bg-3); }
.min-h-screen.bg-slate-50 .border-slate-200,
.min-h-screen.bg-slate-50 .border-slate-300 { border-color: var(--bg-4); }
.min-h-screen.bg-slate-50 .text-slate-950,
.min-h-screen.bg-slate-50 .text-slate-900,
.min-h-screen.bg-slate-50 .text-slate-800,
.min-h-screen.bg-slate-50 .text-blue-900,
.min-h-screen.bg-slate-50 .text-blue-950,
.min-h-screen.bg-slate-50 .text-amber-950 { color: var(--text-primary); }
.min-h-screen.bg-slate-50 .text-slate-700,
.min-h-screen.bg-slate-50 .text-slate-600 { color: var(--text-secondary); }
.min-h-screen.bg-slate-50 .text-slate-500 { color: var(--text-muted); }
.min-h-screen.bg-slate-50 .text-blue-600,
.min-h-screen.bg-slate-50 .text-blue-700 { color: var(--gold); }
.min-h-screen.bg-slate-50 .bg-blue-600,
.min-h-screen.bg-slate-50 .bg-blue-700 { background: var(--gold); color: var(--bg-0); }
.min-h-screen.bg-slate-50 .bg-blue-50,
.min-h-screen.bg-slate-50 .bg-amber-50,
.min-h-screen.bg-slate-50 .bg-gradient-to-br.from-blue-50 {
  background: rgba(212, 175, 55, 0.07);
  background-image: none;
}
.min-h-screen.bg-slate-50 .border-blue-200,
.min-h-screen.bg-slate-50 .border-amber-200 { border-color: rgba(212, 175, 55, 0.3); }
.min-h-screen.bg-slate-50 .ring-blue-200,
.min-h-screen.bg-slate-50 .ring-amber-200 { --tw-ring-color: rgba(212, 175, 55, 0.3); }
.min-h-screen.bg-slate-50 .decoration-blue-300 { text-decoration-color: rgba(212, 175, 55, 0.5); }
.min-h-screen.bg-slate-50 .hover\:border-blue-300:hover,
.min-h-screen.bg-slate-50 .hover\:border-blue-400:hover { border-color: rgba(212, 175, 55, 0.55); }
.min-h-screen.bg-slate-50 .hover\:bg-blue-50:hover,
.min-h-screen.bg-slate-50 .hover\:bg-blue-100:hover { background: rgba(212, 175, 55, 0.12); }
.min-h-screen.bg-slate-50 .hover\:bg-blue-700:hover,
.min-h-screen.bg-slate-50 .hover\:bg-blue-800:hover { background: var(--gold-dim); }
.min-h-screen.bg-slate-50 .shadow-sm,
.min-h-screen.bg-slate-50 .shadow-lg,
.min-h-screen.bg-slate-50 .shadow-xl { --tw-shadow-color: rgba(0, 0, 0, 0.35); }

/* 3. Empty ad slots — AdSense marks slots it can't fill; don't leave a
      280px hole in the page. (site-fixes.js handles blocked ad scripts.) */
ins.adsbygoogle[data-ad-status="unfilled"],
ins.adsbygoogle.vr-ad-empty:not([data-ad-status="filled"]) {
  display: none !important;
}

/* 4. Red is for warnings — ordinary facts were bold pink-red. */
[style*="color:#FDA4A4"]:not([style*="background"]) {
  color: var(--text-primary) !important;
}
/* "Verify at official source" tags: amber note, not a red error. */
[style*="background:rgba(178,58,58,0.12)"] {
  background: rgba(212, 175, 55, 0.1) !important;
  color: #e8cf7a !important;
  border-color: rgba(212, 175, 55, 0.32) !important;
}
/* "Not an official government website" box: neutral info panel. */
[style*="background:rgba(178,58,58,0.08)"] {
  background: var(--bg-2) !important;
  border-color: var(--bg-4) !important;
}
[style*="background:rgba(178,58,58,0.08)"] p { color: var(--text-secondary) !important; }
[style*="background:rgba(178,58,58,0.08)"] svg { color: var(--gold); }
/* Small section labels use gold everywhere (one was red). */
p.uppercase[style*="color:var(--civic-red)"] { color: var(--gold) !important; }

/* 5. One reading font — the serif only appeared in three places. */
.prose-newsreader {
  font-family: var(--font-space), system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.75;
}

/* 6. State pages — past primary dates shouldn't compete with Election Day,
      and the dates table repeated both cards. */
.mb-6.grid.md\:grid-cols-2 > div[style*="background:var(--bg-3)"] > p:last-child {
  font-size: 1.125rem;
  line-height: 1.5;
  font-weight: 700;
  color: var(--text-secondary) !important;
}
.mb-6.grid.md\:grid-cols-2 + dl > div:nth-child(-n + 2) { display: none; }

/* 7. Shopping blocks — smaller, calmer product tiles. */
.grid:has(> a[href^="https://amzn.to"].flex-col) {
  grid-template-columns: repeat(auto-fill, minmax(8.25rem, 1fr));
  gap: 0.75rem;
}
a[href^="https://amzn.to"].flex-col {
  padding: 0.75rem;
  border-radius: 1rem;
}
a[href^="https://amzn.to"].flex-col > .aspect-square {
  aspect-ratio: 4 / 3;
  margin-bottom: 0.75rem;
  background: #f5f6f8 !important;
  border-radius: 0.75rem;
}
a[href^="https://amzn.to"].flex-col > .aspect-square img {
  object-fit: contain;
  padding: 0.5rem;
}
a[href^="https://amzn.to"].flex-col h3 {
  font-size: 0.9375rem;
  line-height: 1.3;
  overflow-wrap: break-word;
}
a[href^="https://amzn.to"].flex-col h3 + div {
  margin-top: 0.5rem;
  flex-wrap: wrap;
  gap: 0.125rem 0.5rem;
}
a[href^="https://amzn.to"].flex-col h3 + div > span:last-child {
  font-size: 0.625rem;
}
/* One price color instead of rotating blue/red/yellow. */
a[href^="https://amzn.to"].flex-col h3 + div > span:first-child {
  color: var(--text-primary) !important;
  font-size: 0.875rem;
}
/* Mail ballots go back in the official return envelope — don't sell
   envelopes or address labels as ballot supplies. */
a[href="https://amzn.to/4anwEFN"],
a[href="https://amzn.to/4uHnLhT"] { display: none !important; }

/* 8. Homepage hero chips are now real links. */
.vr-chip {
  display: block;
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.vr-chip:hover { transform: translateY(-2px); background: var(--bg-4) !important; }
.vr-chip:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* 9. Homepage state finder — the count badge duplicated "57 found". */
#find-state span.w-fit.rounded-full[style*="background:var(--gold)"] { display: none; }

/* 10. Phones. */
@media (max-width: 639px) {
  /* Header: keep the full name visible and trim height. */
  header .truncate.text-lg { font-size: 0.9375rem; letter-spacing: -0.01em; }
  header a[href="/"] > div:first-child { height: 2rem; width: 2rem; font-size: 1.05rem; }
  header a[href="/"].gap-2\.5 { gap: 0.4rem; }
  header a.btn-gold,
  header button[aria-label^="Switch"] { padding: 0.3rem 0.55rem; font-size: 0.8125rem; margin-left: 0; }
  header .flex.items-center.gap-2 { gap: 0.375rem; }
  header .flex.min-w-0.items-center.justify-between { padding-block: 0.5rem; gap: 0.5rem; }
  header nav[aria-label="Mobile navigation"] {
    padding-bottom: 0.5rem;
    -webkit-mask-image: linear-gradient(to right, #000 82%, transparent);
            mask-image: linear-gradient(to right, #000 82%, transparent);
  }
  header nav[aria-label="Mobile navigation"] a:last-child { margin-right: 2rem; }

  /* State list: two compact columns instead of 57 full-width cards. */
  #find-state .grid:has(> a[href^="/state/"]) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }
  #find-state a[href^="/state/"] { padding: 0.75rem; gap: 0.5rem; }
  #find-state a[href^="/state/"] > div:first-child { display: none; }

  /* Bigger tap targets for small text links. */
  footer ul a { display: inline-block; padding-block: 0.5rem; }
  footer ul.space-y-2 > li + li { margin-top: 0; }
  a.inline-flex.items-center.gap-1.rounded-md.hover\:underline { padding-block: 0.625rem; }
}
@media (max-width: 374px) {
  header .truncate.text-lg { font-size: 0.875rem; }
}
@media (max-width: 339px) {
  header .truncate.text-lg > span { display: none; }
}