/* ====================================================================
   THE CIVIC MIND — SIR VOTER LIST LANDING PAGE
   style.css — mobile-first, minimalist, civic/ledger identity

   DESIGN TOKENS
   -----------------------------------------------------------------
   Color:
     --ink       #1B2A4A  deep indigo   — headings, header/footer bg
     --saffron   #E8871E  marigold      — CTAs, accents
     --paper     #F7F4EC  warm paper    — page background
     --slate     #4A5160  body text
     --line      #D9D3C2  hairline borders / rules
     --success   #2E7D5B  paid / confirmed states
     --error     #B23B3B  validation errors

   Type:
     Display (EN): "Fraunces"           — ledger/gazette gravitas
     Body (EN):    "Inter"              — clean form legibility
     Devanagari:   "Noto Serif Devanagari" (headings)
                   "Noto Sans Devanagari" (body/forms)

   Signature element: the hero "ledger → grid" visual — a scanned
   voter-roll card dissolving into a clean spreadsheet, the exact
   transformation this service performs.
==================================================================== */

:root{
  --ink:#1B2A4A;
  --ink-soft:#2B3D63;
  --saffron:#E8871E;
  --saffron-dark:#C96F12;
  --paper:#F7F4EC;
  --paper-raised:#FFFFFF;
  --slate:#4A5160;
  --slate-light:#767E8C;
  --line:#D9D3C2;
  --success:#2E7D5B;
  --success-bg:#E7F2EC;
  --error:#B23B3B;
  --error-bg:#FBEAEA;

  --font-display:"Fraunces", "Noto Serif Devanagari", serif;
  --font-body:"Inter", "Noto Sans Devanagari", sans-serif;

  --radius:10px;
  --wrap:1120px;
  --shadow-card:0 2px 14px rgba(27,42,74,0.08);
}

/* html[data-lang="hi"], html[data-lang="mr"] lean on Devanagari faces */
html[data-lang="hi"] :is(h1,h2,h3,.brand-name),
html[data-lang="mr"] :is(h1,h2,h3,.brand-name){
  font-family:"Noto Serif Devanagari", serif;
}
html[data-lang="hi"] body, html[data-lang="mr"] body{
  font-family:"Noto Sans Devanagari", sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--slate);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:var(--font-display);
  color:var(--ink);
  margin:0 0 .5em;
  line-height:1.15;
}
p{ margin:0 0 1em; }
a{ color:var(--saffron-dark); text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; }

.wrap{
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 20px;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* ===================== HEADER ===================== */
.site-header{
  background:var(--ink);
  color:#fff;
  position:sticky;
  top:0;
  z-index:50;
}
.header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 20px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand-logo{
  border-radius:50%;
  background:#fff;
  object-fit:cover;
  flex-shrink:0;
}
.brand-text{ display:flex; flex-direction:column; }
.brand-name{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.15rem;
  color:#fff;
  letter-spacing:.2px;
}
.brand-tagline{
  font-size:.75rem;
  color:#C9D2E4;
}
.lang-toggle{ display:flex; gap:6px; }
.lang-btn{
  background:transparent;
  border:1px solid rgba(255,255,255,.35);
  color:#E7ECF6;
  padding:5px 10px;
  border-radius:6px;
  font-size:.78rem;
  cursor:pointer;
  transition:background .15s, color .15s;
}
.lang-btn:hover{ background:rgba(255,255,255,.12); }
.lang-btn.is-active{
  background:var(--saffron);
  border-color:var(--saffron);
  color:var(--ink);
  font-weight:600;
}

/* ===================== HERO ===================== */
.hero{ padding:56px 0 40px; }
.hero-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:40px;
  align-items:center;
}
.eyebrow{
  text-transform:uppercase;
  letter-spacing:.09em;
  font-size:.72rem;
  font-weight:600;
  color:var(--saffron-dark);
  margin-bottom:10px;
}
.hero h1{ font-size:clamp(1.7rem, 4.4vw, 2.6rem); font-weight:600; }
.hero-sub{ font-size:1.02rem; color:var(--slate); max-width:520px; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin:20px 0 14px; }
.hero-fineprint{ font-size:.82rem; color:var(--slate-light); margin:0; }

.btn{
  display:inline-block;
  padding:13px 24px;
  border-radius:8px;
  font-weight:600;
  font-size:.95rem;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, background .15s;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{
  background:var(--saffron);
  color:var(--ink);
  box-shadow:0 4px 14px rgba(232,135,30,.35);
}
.btn-primary:hover{ background:var(--saffron-dark); }
.btn-ghost{
  background:transparent;
  border-color:var(--ink);
  color:var(--ink);
}
.btn-ghost:hover{ background:rgba(27,42,74,.06); }
.btn-wide{ width:100%; text-align:center; font-size:1.02rem; }

/* --- Signature visual: ledger dissolving into a grid --- */
.hero-visual{
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:center;
}
.ledger-card{
  background:#FBF8F0;
  border:1px solid var(--line);
  border-radius:6px 6px 3px 3px;
  box-shadow:var(--shadow-card);
  padding:16px 16px 20px;
  width:150px;
  position:relative;
  transform:rotate(-2deg);
}
.ledger-head{
  height:8px; width:60%;
  background:var(--ink);
  opacity:.15;
  border-radius:2px;
  margin-bottom:12px;
}
.ledger-line{
  height:6px;
  background:var(--slate-light);
  opacity:.35;
  border-radius:2px;
  margin-bottom:9px;
}
.ledger-stamp{
  position:absolute;
  bottom:8px; right:10px;
  border:2px solid var(--error);
  color:var(--error);
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.05em;
  padding:2px 6px;
  border-radius:4px;
  transform:rotate(-8deg);
  opacity:.75;
}
.convert-arrow{
  display:flex;
  flex-direction:column;
  gap:5px;
}
.convert-arrow span{
  width:9px; height:9px;
  background:var(--saffron);
  border-radius:2px;
  animation:pulse 1.6s ease-in-out infinite;
}
.convert-arrow span:nth-child(2){ animation-delay:.2s; }
.convert-arrow span:nth-child(3){ animation-delay:.4s; }
@keyframes pulse{
  0%,100%{ opacity:.35; transform:translateX(0); }
  50%{ opacity:1; transform:translateX(3px); }
}
.grid-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:6px;
  box-shadow:var(--shadow-card);
  overflow:hidden;
  width:220px;
  font-size:.68rem;
}
.grid-head, .grid-row{
  display:grid;
  grid-template-columns:.5fr 1.1fr 1fr .5fr;
  gap:4px;
}
.grid-head{
  background:var(--ink);
  color:#fff;
  font-weight:600;
  padding:6px 8px;
}
.grid-row{
  padding:6px 8px;
  border-top:1px solid var(--line);
  color:var(--slate);
}
.grid-row:nth-child(odd){ background:#FAF9F5; }

/* ===================== TRUST STRIP ===================== */
.trust-strip{
  background:var(--ink);
  padding:20px 0;
}
.trust-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-around;
  gap:16px;
  text-align:center;
}
.trust-item{ display:flex; flex-direction:column; color:#fff; min-width:130px; }
.trust-item strong{ font-family:var(--font-display); font-size:1.3rem; color:var(--saffron); }
.trust-item span{ font-size:.78rem; color:#C9D2E4; }

/* ===================== FORM ===================== */
.lead-section{ padding:52px 0; }
.form-wrap{ max-width:760px; }
.form-intro h2{ font-size:1.6rem; }
.form-intro p{ color:var(--slate-light); }

#civicForm{
  background:var(--paper-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:24px;
  box-shadow:var(--shadow-card);
}
.form-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}
@media (min-width:640px){
  .form-grid{ grid-template-columns:1fr 1fr; }
  .field-wide{ grid-column:1 / -1; }
}
.field label{
  display:block;
  font-size:.85rem;
  font-weight:600;
  color:var(--ink);
  margin-bottom:6px;
}
.req{ color:var(--error); }
.field input,
.field select,
.field textarea{
  width:100%;
  padding:11px 12px;
  border:1px solid var(--line);
  border-radius:7px;
  font-size:.95rem;
  font-family:inherit;
  background:#fff;
  color:var(--slate);
}
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:2px solid var(--saffron);
  outline-offset:1px;
  border-color:var(--saffron);
}
.field select:disabled{ background:#F2F0E9; color:var(--slate-light); }
.checkbox-row{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:.88rem;
  color:var(--slate);
  font-weight:400;
  cursor:pointer;
}
.checkbox-row input{ width:18px; height:18px; margin-top:2px; accent-color:var(--saffron-dark); }
.consent-block{ display:flex; flex-direction:column; gap:10px; }

.form-footer{ margin-top:22px; text-align:center; }
.form-note{ font-size:.8rem; color:var(--slate-light); margin-top:10px; }

.form-alert{
  margin-top:16px;
  padding:12px 14px;
  border-radius:8px;
  background:var(--error-bg);
  color:var(--error);
  font-size:.9rem;
  border:1px solid rgba(178,59,59,.25);
}
.success-panel{
  margin-top:20px;
  padding:20px;
  border-radius:var(--radius);
  background:var(--success-bg);
  border:1px solid rgba(46,125,91,.25);
  text-align:center;
}
.success-panel h3{ color:var(--success); }

/* ===================== FAQ ===================== */
.faq-section{ padding:48px 0 60px; }
.faq-section h2{ font-size:1.5rem; text-align:center; margin-bottom:22px; }
.faq-list{ max-width:720px; margin:0 auto; }
.faq-item{
  border-bottom:1px solid var(--line);
}
.faq-q{
  width:100%;
  background:transparent;
  border:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 4px;
  font-size:1rem;
  font-weight:600;
  color:var(--ink);
  cursor:pointer;
  text-align:left;
}
.faq-caret{
  color:var(--saffron-dark);
  font-size:1.2rem;
  transition:transform .2s ease;
}
.faq-q[aria-expanded="true"] .faq-caret{ transform:rotate(45deg); }
.faq-a{
  max-height:0;
  overflow:hidden;
  transition:max-height .25s ease;
  padding:0 4px;
}
.faq-a p{ color:var(--slate); padding-bottom:14px; margin:0; }

/* ===================== FOOTER ===================== */
.site-footer{ background:var(--ink); color:#C9D2E4; padding:40px 0 18px; }
.footer-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:26px;
  font-size:.88rem;
}
@media (min-width:720px){
  .footer-grid{ grid-template-columns:1.3fr 1fr 1.3fr; }
}
.footer-grid .brand-name{ color:#fff; display:block; margin-bottom:8px; }
.footer-label{ color:#fff; font-weight:600; margin-bottom:6px; }
.footer-grid p{ margin:0 0 4px; }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12);
  margin-top:26px;
  padding-top:16px;
  font-size:.78rem;
  color:#9AA6BE;
}

/* ===================== RESPONSIVE ===================== */
@media (min-width:900px){
  .hero-grid{ grid-template-columns:1.1fr .9fr; }
}
@media (max-width:480px){
  .hero-visual{ transform:scale(.88); }
  .grid-card{ width:190px; }
}

/* The background overlay to dim the page */
.modal {
  display: none; 
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  background-color: rgba(0,0,0,0.5); /* Semi-transparent black */
  z-index: 1000;
  justify-content: center;
  align-items: center;
}

/* The actual content box */
.modal-content {
  background: white;
  padding: 30px;
  width: 80%;
  max-width: 500px;
  border-radius: 8px;
  position: relative;
}

.modal.active {
  display: flex; /* Toggle this class with JS */
}

/* Visible keyboard focus everywhere */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--saffron);
  outline-offset:2px;
}