/* ===============================
   Adam Neil Arafat for Congress
   Global Stylesheet (style.css)
   =============================== */

/* ---------- Root + Reset ---------- */
:root{
  --primary:#0d3b66;
  --primary-600:#0b3359;
  --accent:#0b6e4f;
  --accent-600:#08573e;
  --danger:#c1121f;       /* donate */
  --danger-600:#9e0e19;
  --text:#1a1a1a;
  --muted:#6c757d;
  --bg:#ffffff;
  --bg-alt:#f6f8fa;
  --border:#e6e6e6;

  --radius:12px;
  --shadow:0 8px 24px rgba(0,0,0,.08);
  --shadow-soft:0 4px 14px rgba(0,0,0,.06);

  --font-sans:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial;
  --lead:1.15;
}

/* spacing tighten */
.stack > * + * { margin-top: clamp(12px, 2.2vh, 18px); }
@media (max-width: 640px){
  .lead { line-height: 1.35; }
  section { padding-block: 28px; }
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  font-family:var(--font-sans);
  color:var(--text);
  background:var(--bg);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Better default focus */
:focus-visible{
  outline:3px solid rgba(13,59,102,.35);
  outline-offset:2px;
  border-radius:6px;
}

/* Links */
a{ color:var(--primary); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* Utilities */
.lead{ font-size:1.125rem; line-height:1.6; }
.text-muted{ color:var(--muted)!important; }
.bg-alt{ background:var(--bg-alt); }
.shadow{ box-shadow:var(--shadow); }
.round{ border-radius:var(--radius); }

/* ---------- Header / Nav ---------- */
.site-header{
  background:#ffffffdd;
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(0,0,0,.05);
  position:sticky;
  top:0;
  z-index:1000;
  box-shadow:0 6px 18px rgba(10,61,158,.08);
}
.site-nav{
  max-width:1200px;
  margin:0 auto;
  padding:.75rem 1.5rem;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:1.5rem;
  position:relative;
}
.nav-left{
  display:flex;
  align-items:center;
  gap:1rem;
}
.nav-brand{
  font-weight:800;
  font-size:1.2rem;
  color:#0a3d9e;
  letter-spacing:.01em;
  text-decoration:none;
}
.nav-brand:hover{ color:#062b6c; text-decoration:none; }
.nav-toggle{
  display:none;
  background:#0a3d9e;
  color:#fff;
  border:none;
  border-radius:.25rem;
  padding:.5rem .75rem;
  font-size:1rem;
}
.nav-links{
  display:flex;
  align-items:center;
  gap:1rem;
}
.nav-links a{
  color:var(--text);
  font-weight:600;
  text-decoration:none;
  padding:.25rem 0;
}
.nav-links a:hover,
.nav-links a:focus-visible{
  color:#0a3d9e;
}
.nav-links a[aria-current="page"]{
  color:#0a3d9e;
}
.nav-right{
  display:flex;
  align-items:flex-start;
  gap:1.25rem;
}
.nav-share{
  display:flex;
  align-items:center;
  gap:.5rem;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.share-button--icon{
  width:40px;
  height:40px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  box-shadow:0 8px 18px rgba(10,61,158,.15);
  transition:transform .15s ease,box-shadow .2s ease,filter .2s ease;
  padding:0;
  min-width:40px;
  min-height:40px;
}
.share-button--icon:hover{
  text-decoration:none;
  transform:translateY(-2px);
  filter:brightness(1.08);
  box-shadow:0 12px 28px rgba(10,61,158,.22);
}
.nav-cta{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:.5rem;
  max-width:220px;
  text-align:right;
}
.nav-donate{
  background:#c1121f;
  color:#fff!important;
  padding:.6rem 1.4rem;
  border-radius:.3rem;
  font-weight:700;
  box-shadow:0 10px 24px rgba(193,18,31,.35);
}
.nav-donate:hover{
  filter:brightness(.92);
  text-decoration:none;
}
.nav-volunteer{
  background:#0a3d9e;
  color:#fff!important;
  padding:.5rem 1.2rem;
  border-radius:.3rem;
  font-weight:600;
  box-shadow:0 8px 20px rgba(10,61,158,.25);
}
.nav-volunteer:hover{
  filter:brightness(.92);
  text-decoration:none;
}
.nav-cta-note{
  font-size:.7rem;
  line-height:1.4;
  color:#1f2937;
  margin:0;
}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  border:0;
}
@media (max-width:900px){
  .site-nav{
    grid-template-columns:1fr;
    align-items:start;
  }
  .nav-left{
    width:100%;
    justify-content:space-between;
  }
  .nav-toggle{ display:inline-flex; align-items:center; gap:.35rem; cursor:pointer; }
  .nav-links{
    position:absolute;
    inset:calc(100% + 1px) 1.5rem auto 1.5rem;
    background:#fff;
    flex-direction:column;
    align-items:flex-start;
    padding:1rem 1.25rem 1.5rem;
    box-shadow:0 12px 30px rgba(0,0,0,.12);
    transform:scaleY(0);
    transform-origin:top;
    transition:transform .2s ease;
    opacity:0;
    pointer-events:none;
    border-radius:.5rem;
  }
  .nav-links.is-open{
    transform:scaleY(1);
    opacity:1;
    pointer-events:auto;
  }
  .nav-right{
    width:100%;
    flex-direction:column;
    align-items:flex-end;
    gap:1rem;
  }
  .nav-share{
    justify-content:flex-start;
  }
  .nav-cta{
    align-items:flex-start;
    text-align:left;
  }
}

/* ---------- Buttons ---------- */
.btn-donate,
.btn-volunteer{
  display:inline-block;
  background:#0a3d9e;
  color:#fff!important;
  padding:.75rem 1.5rem;
  text-decoration:none;
  border-radius:.25rem;
  font-size:1rem;
  font-weight:600;
  box-shadow:0 6px 18px rgba(10,61,158,.2);
}
.btn-donate:hover,
.btn-volunteer:hover{
  filter:brightness(.92);
  text-decoration:none;
}
.btn-primary{ background:var(--primary); border:none; }
.btn-primary:hover{ background:var(--primary-600); }

.cta-block{
  text-align:center;
  margin:2rem 0;
}
.cta-message{
  font-size:.875rem;
  color:#333;
  margin-top:.5rem;
}

.flash-banner{
  width:100%;
  background:linear-gradient(90deg,#c1121f,#f7b500,#0a3d9e);
  background-size:220% 100%;
  color:#fff;
  text-align:center;
  padding:.85rem 1.5rem;
  font-weight:700;
  letter-spacing:.01em;
  animation:flash-wave 6s linear infinite, flash-pulse 1.25s ease-in-out infinite;
  box-shadow:0 12px 24px rgba(0,0,0,.12);
}
@keyframes flash-wave{
  0%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}
@keyframes flash-pulse{
  0%,100%{ filter:brightness(1); }
  50%{ filter:brightness(1.25); }
}

/* ---------- Header share brand colors ---------- */
.share-button--facebook{ background:#1877f2; }
.share-button--x{ background:#0f1419; }
.share-button--linkedin{ background:#0a66c2; }
.share-button--whatsapp{ background:#25d366; }
.share-button--bsky{ background:#0a7aff; }
.share-button--sms{ background:#2563eb; }
.share-button--email{ background:#0a3d9e; }

/* ---------- Hero message bar ---------- */
.message-bar{
  background:var(--primary);
  color:#fff;
  padding:.5rem 0;
}

/* ---------- Headshot ---------- */
.headshot{
  width:112px; height:112px;
  border-radius:50%;
  object-fit:cover;
  border:3px solid #fff;
  box-shadow:0 0 0 3px var(--primary);
}

/* About-page rectangle headshot option */
.headshot-rect{
  width:220px; height:220px;
  object-fit:cover;
  border-radius:12px;
  border:4px solid #fff;
  box-shadow:0 0 0 4px var(--primary);
}

/* ---------- Section titles ---------- */
.section-title{
  color:var(--primary);
  margin-bottom:.5rem;
  font-weight:700;
}

/* ---------- Carousel ---------- */
#campaignCarousel img{
  width:100%;
  height:60vh;
  min-height:420px;
  object-fit:cover;
  aspect-ratio:16/9;
}
.carousel-caption{
  background:rgba(0,0,0,.45);
  padding:1rem 1.25rem;
  border-radius:.35rem;
}
.carousel-control-prev-icon,
.carousel-control-next-icon{
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.35));
}

/* ---------- “By the numbers” bars ---------- */
.bar{
  height:14px;
  background:#e9ecef;
  border-radius:8px;
  overflow:hidden;
}
.bar>span{
  display:block; height:100%;
  background:var(--accent);
}
.bar.red>span{ background:#b11e2d; }

/* ---------- Cards / Panels ---------- */
.card-lite{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
  padding:1.25rem;
}

/* ---------- Issue images ---------- */
.issue-img{
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:.35rem;
  box-shadow:var(--shadow-soft);
}

/* ---------- Hero (contact) ---------- */
.hero{
  position:relative;
  color:#fff;
}
.hero .wrap{
  background:rgba(13,59,102,.6);
  color:#fff;
  border-radius:.5rem;
  box-shadow:var(--shadow-soft);
}

/* ---------- Shared hero imagery ---------- */
.hero__image{
  position:relative;
  border-radius:var(--radius,18px);
  overflow:hidden;
  border:3px solid #fff;
  box-shadow:var(--shadow,0 6px 25px rgba(0,0,0,.12));
  width:100%;
}
.hero__image::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  box-shadow:inset 0 0 50px rgba(36,70,245,0.15);
  pointer-events:none;
}
.hero__image img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* ---------- Tables (sources) ---------- */
.table-slim{
  width:100%;
  border-collapse:collapse;
  font-size:.95rem;
}
.table-slim th,
.table-slim td{
  border-bottom:1px solid var(--border);
  padding:.5rem .25rem;
}
.table-slim th{ color:var(--muted); font-weight:600; }

/* ---------- Footer ---------- */
footer{
  background:#fff;
  border-top:1px solid var(--border);
}
footer a{ color:var(--primary); }
footer .btn-donate{ margin-left:.5rem; }

/* ---------- Forms ---------- */
input[type="text"],
input[type="email"],
textarea{
  width:100%;
  padding:.6rem .7rem;
  border:1px solid var(--border);
  border-radius:8px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
input:focus, textarea:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(13,59,102,.12);
  outline:0;
}
label{ font-weight:600; margin-bottom:.25rem; }

.form-row{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
}
.form-group{
  flex:1 1 300px;
  min-width:250px;
  margin-bottom:1rem;
}
.form-group label{
  display:block;
  margin-bottom:.25rem;
  font-weight:600;
}
.form-group input,
.form-group select,
.form-group textarea{
  width:100%;
  padding:.75rem 1rem;
  border:1px solid #ccc;
  border-radius:.25rem;
  font-size:1rem;
}
@media (max-width:600px){
  .form-row{ flex-direction:column; }
}

/* ---------- Layout helpers ---------- */
.pad-y-4{ padding-top:1.5rem; padding-bottom:1.5rem; }
.pad-y-5{ padding-top:3rem; padding-bottom:3rem; }
.mt-1{ margin-top:.25rem; }
.mt-2{ margin-top:.5rem; }
.mt-3{ margin-top:1rem; }
.mb-0{ margin-bottom:0!important; }
.text-center{ text-align:center; }

/* ---------- Media queries ---------- */
@media (max-width: 991.98px){
  header .brand h1{ font-size:1.35rem; }
  #campaignCarousel img{ height:48vh; min-height:340px; }
}
@media (max-width: 575.98px){
  .headshot{ display:none; } /* breathe on phones */
  nav ul{ gap:.75rem; }
  .carousel-caption{ padding:.75rem .9rem; }
}

/* ---------- Motion + Print ---------- */
@media (prefers-reduced-motion: reduce){
  *{ animation:none!important; transition:none!important; }
}
@media print{
  nav, .carousel-control-prev, .carousel-control-next, .btn-donate{ display:none!important; }
  .carousel-caption{ background:transparent; color:#000; }
}

/* ---------- Optional dark mode ---------- */
@media (prefers-color-scheme: dark){
  :root{
    --text:#e9e9e9;
    --bg:#0e1116;
    --bg-alt:#0f1420;
    --border:#1f2733;
  }
  body{ background:var(--bg); color:var(--text); }
  header, footer{ background:var(--bg); }
  .card-lite, .carousel-caption{ background:rgba(255,255,255,.08); }
  .issue-img{ box-shadow:none; }
  a{ color:#9ec5ff; }
  .btn-primary{ background:#2b5da6; }
}