/* site.css — project tokens + components (see spec §4, §7). Site CSS always wins. */

:root {
  /* Brand — patriotic navy + red, gold accent */
  --primary--color:   #0e2c54;   /* navy: hero, footer, headings */
  --secondary--color: #c62d3e;   /* red: emphasis, links, CTA band */
  --accent--color:    #fbc817;   /* gold: kicker, flourishes */

  --primary--color-80:#0e2c54cc; --primary--color-60:#0e2c5499;
  --primary--color-40:#0e2c5466; --primary--color-20:#0e2c5433;
  --secondary--color-80:#c62d3ecc; --secondary--color-60:#c62d3e99;
  --secondary--color-40:#c62d3e66; --secondary--color-20:#c62d3e33;

  --utility--white:#fff; --utility--white-80:#fffc; --utility--white-60:#fff9;
  --utility--white-40:#fff6; --utility--white-20:#fff3;
  --utility--black:#101828; --utility--black-80:#000c; --utility--black-60:#0009;
  --utility--transparent:transparent;

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ============ Buttons ============ */
.button {
  display: inline-block; padding: .9rem 1.9rem; border-radius: 6px;
  font-weight: 700; text-decoration: none; letter-spacing: .3px;
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.button.is-primary { background: var(--secondary--color); color: var(--utility--white); box-shadow: 0 6px 20px var(--secondary--color-40); }
.button.is-primary:hover { transform: translateY(-2px); background: #b02736; }
.button.is-ghost { background: transparent; color: var(--utility--white); border: 2px solid var(--utility--white-60); }
.button.is-ghost:hover { border-color: var(--utility--white); background: var(--utility--white-20); }

/* ============ Hero (§7.1, image variant) ============ */
.section-hero { position: relative; background-color: var(--primary--color); overflow: hidden; }
.section-hero.is-image {
  background: url("../images/hero-1600.webp") center/cover no-repeat;
}
@media (min-width: 1280px){ .section-hero.is-image { background-image: url("../images/hero-2400.webp"); } }
.section-hero.is-image::before {
  content:""; position:absolute; inset:0;
  background: linear-gradient(105deg, var(--primary--color) 8%, var(--primary--color-80) 45%, var(--primary--color-40) 100%);
}
.section-hero > * { position: relative; z-index: 1; }
.hero-pre-lede {
  color: var(--accent--color); text-transform: uppercase; letter-spacing: 3px;
  font-weight: 700; font-size: 1rem; margin-bottom: 1rem;
}
.hero-h1 { color: var(--utility--white); font-weight: 800; font-size: clamp(2.75rem, 8vw, 5.5rem); line-height: 1.02; letter-spacing: -1px; }
.hero-h1-emphasis { color: var(--secondary--color); }
.hero-lede { color: var(--utility--white-80); font-size: clamp(1.15rem, 2.5vw, 1.5rem); max-width: 34rem; margin-top: 1.5rem; line-height: 1.5; }
.hero-actions { margin-top: 2.25rem; display: flex; gap: 1rem; flex-wrap: wrap; }

/* ============ Flair strip (§7.5) ============ */
.section-flair { background: var(--primary--color); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; overflow: hidden; padding: .55rem 0; gap: 0; }
.flair-svg { width: 26px; height: 26px; margin: 0 18px; color: var(--accent--color); flex: none; }

/* ============ Issue / icon grid (§7.2) ============ */
.section-issues { background: var(--utility--white); }
.section-heading { text-align: center; color: var(--primary--color); font-weight: 800; font-size: clamp(1.9rem, 4vw, 2.6rem); }
.section-kicker { text-align: center; color: var(--secondary--color); text-transform: uppercase; letter-spacing: 3px; font-weight: 700; font-size: .95rem; margin-bottom: .75rem; }
.issue-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 3.5rem; }
.grid-card {
  text-align: center; padding: 2.5rem 1.5rem; border-radius: 12px;
  background: #f7f9fc; border: 1px solid #e6ebf3;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.grid-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(14,44,84,.12); border-color: #d4deec; }
.grid-card__num { display: block; font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 1rem; color: var(--secondary--color); letter-spacing: 2px; }
.grid-card__icon { width: 60px; height: 60px; margin: 1rem auto 1.25rem; color: var(--primary--color); }
.grid-card__h3 { color: var(--primary--color); font-weight: 700; font-size: 1.35rem; }

/* ============ Meet Tad (bio) ============ */
.section-about { background: #f7f9fc; }
.about-grid { display: grid; grid-template-columns: 320px 1fr; gap: 3.5rem; align-items: center; }
.about-photo { border-radius: 14px; overflow: hidden; box-shadow: 0 20px 50px rgba(14,44,84,.18); position: relative; }
.about-photo img { width: 100%; height: auto; display: block; }
.about-photo::after { content:""; position:absolute; left:0; right:0; bottom:0; height:6px; background: var(--secondary--color); }
.about-body .section-kicker, .about-body .section-heading { text-align: left; }
.about-body .body-p { margin-top: 1.25rem; }

/* ============ CTA band (§7.3) ============ */
.section-cta { background-color: var(--secondary--color); color: var(--utility--white); text-align: center; }
.cta__p { color: var(--utility--white); font-weight: 800; font-size: clamp(1.6rem, 4vw, 2.6rem); line-height: 1.2; }
.cta__sub { color: var(--utility--white-80); margin-top: 1rem; font-size: 1.15rem; }
.section-cta .button.is-primary { background: var(--utility--white); color: var(--secondary--color); box-shadow: 0 6px 20px rgba(0,0,0,.2); margin-top: 1.75rem; }
.section-cta .button.is-primary:hover { background: #f4f4f4; }

/* ============ Footer + disclaimer (§7.7) ============ */
.footer { background-color: var(--primary--color); color: var(--utility--white); padding-top: 3rem; padding-bottom: 3rem; }
.footer-brand { font-family:"Montserrat",sans-serif; font-weight:800; font-size:1.25rem; letter-spacing:.5px; }
.footer-brand span { color: var(--accent--color); }
.paid-for { border: 1px solid var(--utility--white-40); border-radius: 8px; padding: 1rem 1.25rem; margin-top: 1.5rem; color: var(--utility--white-80); font-size: .95rem; line-height: 1.6; max-width: 52rem; }
.footer-link { color: var(--utility--white); text-decoration: underline; text-underline-offset: 3px; display: inline-block; margin-top: 1.25rem; }

/* ============ Scroll-reveal IX (§8) ============ */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ============ Responsive (§5.3) ============ */
@media (max-width: 991px){
  .padding-section-large { padding-top: 4.5rem; padding-bottom: 4.5rem; }
  .padding-section-medium { padding-top: 3.25rem; padding-bottom: 3.25rem; }
}
@media (max-width: 767px){
  .padding-section-large { padding-top: 3.25rem; padding-bottom: 3.25rem; }
  .padding-section-medium { padding-top: 2.5rem; padding-bottom: 2.5rem; }
  .issue-grid { grid-template-columns: 1fr; gap: 1.25rem; margin-top: 2.5rem; }
  .about-grid { grid-template-columns: 1fr; gap: 2rem; }
  .about-photo { max-width: 260px; margin: 0 auto; }
  .about-body .section-kicker, .about-body .section-heading { text-align: center; }
  .hero-actions { justify-content: flex-start; }
}