/* site.css — Merv Riepe for Nebraska Legislature District 12 */

:root{
  --primary--color:#B92F2F;      /* red — accent bands, emphasis */
  --secondary--color:#384B7E;    /* blue — dominant surface: hero, footer */
  --light--color:#FFFFFF;

  --primary--color-80:#B92F2Fcc;--primary--color-60:#B92F2F99;
  --primary--color-40:#B92F2F66;--primary--color-20:#B92F2F33;
  --secondary--color-80:#384B7Ecc;--secondary--color-60:#384B7E99;
  --secondary--color-40:#384B7E66;--secondary--color-20:#384B7E33;

  --utility--white:#fff;--utility--white-80:#fffc;--utility--white-60:#fff9;
  --utility--white-40:#fff6;--utility--white-20:#fff3;
  --utility--black:#000;--utility--black-80:#000c;--utility--black-60:#0009;
  --utility--grey:#2a2e38;--utility--surface:#f2f3f6;--utility--line:#e2e4ea;
  --utility--transparent:transparent;

  --size--null:0px;--size--xs:.5rem;--size--small:1rem;--size--medium:2rem;--size--size:4rem;

  --display-font:"bebas-neue-pro","Bebas Neue",Impact,sans-serif;
}

h1,h2,h3,h4,.display{
  font-family:var(--display-font);
  text-transform:uppercase;
  letter-spacing:.5px;
  margin:0;
}

.text-color-primary{color:var(--primary--color)}
.text-color-secondary{color:var(--secondary--color)}
.text-color-white{color:var(--utility--white)}
.text-color-black{color:var(--utility--black)}

@keyframes riseIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ---------- Hero ---------- */
.section-hero{
  position:relative;
  background-color:var(--secondary--color);
  background-image:url("../images/hero-bg.webp");
  background-size:cover;
  background-position:center 35%;
  background-repeat:no-repeat;
}
.section-hero__scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(56,75,126,.92) 0%,rgba(56,75,126,.78) 45%,rgba(30,41,72,.92) 100%);
}
.section-hero__inner{position:relative}
.hero-grid{
  padding-top:3.5rem;padding-bottom:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));
  gap:1rem 2rem;align-items:end;
}
.hero-copy{
  display:flex;flex-direction:column;align-items:flex-start;gap:1.25rem;
  padding-bottom:3.5rem;animation:riseIn .7s ease-out both;
}
.hero-pre-lede{
  margin:0;display:inline-flex;align-items:center;gap:.6rem;
  font-size:.95rem;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--utility--white);
}
.hero-pre-lede__rule{display:inline-block;width:34px;height:3px;background:var(--primary--color)}
.hero-h1{
  font-family:var(--display-font);font-weight:700;
  font-size:clamp(4rem,11vw,9.5rem);line-height:.88;
  color:var(--utility--white);text-wrap:balance;
}
.hero-h1-emphasis{color:var(--utility--white);opacity:.55}
.hero-lede{
  margin:0;max-width:34rem;font-size:clamp(1.15rem,2.2vw,1.5rem);line-height:1.45;
  color:var(--utility--white);text-wrap:pretty;
}
.hero-lede__strong{display:block;margin-top:.35rem;font-weight:700}
.hero-portrait{
  width:100%;max-width:420px;justify-self:center;
  filter:drop-shadow(0 24px 48px rgba(0,0,0,.35));
}
@media (max-width:767px){
  .hero-grid{padding-top:2.5rem}
  .hero-copy{padding-bottom:2rem}
  .hero-portrait{max-width:300px}
}

/* ---------- Flair strip ---------- */
.section-flair{
  background:var(--primary--color);
  display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;
  overflow:hidden;padding:.7rem 0;gap:40px;
}
.flair-svg{width:30px;flex:none;filter:brightness(0) invert(1);opacity:.85}

/* ---------- About ---------- */
.section-about{background:var(--utility--white)}
.eyebrow{
  margin:0 0 1.25rem;font-size:.9rem;font-weight:700;letter-spacing:2.5px;
  text-transform:uppercase;color:var(--primary--color);
}
.section-h2{
  margin-bottom:2rem;font-size:clamp(2.5rem,5vw,4rem);line-height:.95;
  color:var(--secondary--color);
}
.body-p{
  margin:0;font-size:clamp(1.15rem,1.8vw,1.4rem);line-height:1.6;
  color:var(--utility--grey);text-wrap:pretty;
}

/* ---------- Issue grid ---------- */
.section-priorities{background:var(--utility--surface);border-top:1px solid var(--utility--line)}
.section-priorities__h2{
  margin-bottom:3rem;text-align:center;
  font-size:clamp(2.25rem,4.5vw,3.5rem);line-height:1;color:var(--secondary--color);
}
.issue-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2rem}
.grid-card{
  background:var(--utility--white);border-top:4px solid var(--primary--color);
  padding:2.5rem 2rem;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:1.1rem;
}
.grid-card__img{width:56px;height:56px}
.grid-card__h3{font-size:1.85rem;line-height:1.05;color:var(--utility--black)}

/* ---------- CTA band ---------- */
.section-cta{background:var(--primary--color);text-align:center}
.section-cta__inner{display:flex;flex-direction:column;align-items:center;gap:1.5rem}
.cta__h2{font-size:clamp(2.25rem,5vw,4rem);line-height:.98;color:var(--utility--white);text-wrap:balance}
.cta__date{
  margin:0;font-size:clamp(1.15rem,2vw,1.5rem);font-weight:700;letter-spacing:1px;
  text-transform:uppercase;color:var(--utility--white);
}

/* ---------- Footer ---------- */
.footer{background:var(--secondary--color);color:var(--utility--white)}
.footer__inner{
  padding-top:2.5rem;padding-bottom:2.5rem;
  display:flex;flex-direction:column;align-items:center;gap:1.25rem;
}
.paid-for{
  margin:0;max-width:46rem;border:1px solid var(--utility--white-60);
  padding:1rem 1.25rem;text-align:center;font-size:.9rem;line-height:1.55;
  color:var(--utility--white);text-wrap:pretty;
}
.footer-link{color:var(--utility--white);font-size:.9rem;text-decoration:underline}
.footer-link:hover{opacity:.75}

/* ---------- Error pages ---------- */
.section-error{
  background:var(--secondary--color);color:var(--utility--white);
  min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;
}
.error__code{font-size:clamp(5rem,18vw,12rem);line-height:.85;color:var(--utility--white)}
.error__msg{margin:1rem 0 2rem;font-size:1.25rem;color:var(--utility--white)}
.button{
  display:inline-flex;align-items:center;justify-content:center;
  padding:1rem 2.25rem;background:var(--primary--color);color:var(--utility--white);
  font-family:var(--display-font);font-size:1.5rem;letter-spacing:1.5px;
  text-transform:uppercase;text-decoration:none;border-radius:2px;
}
.button:hover{background:#9c2626;color:var(--utility--white)}