/* tomwilkins.us: fall theme for /tom4jp-district2-fall/
   Loaded after site.css. Re-maps the brochure palette to autumn tones:
   bright oak reds and yellows, pumpkin orange, on a very light green page.
   Dark sections stay deep enough for cream text to keep AA contrast. */

body.theme-fall {
  --navy-900: #7a2e0b;
  --navy-800: #a8460f;
  --navy-700: #b04c14;
  --navy-600: #c45a16;
  --red: #d62828;
  --red-dark: #b5171e;
  --green: #9c6a06;
  --green-light: #ffd45c;
  --cream: #fff8e8;
  --cream-2: #dbeecb;
  --page-green: #eaf5df;
  --gold: #ffcc1a;
  --ink: #3a230f;
  --ink-soft: #6b4a2a;
  --shadow: 0 18px 40px -18px rgba(122, 46, 11, 0.5);
  background: var(--page-green);
}

/* Hard-coded cool tones in site.css, warmed up */
.theme-fall .site-header { background: rgba(122, 46, 11, 0.96); border-bottom-color: var(--gold); }
.theme-fall .nav a { color: #ffeccc; }
.theme-fall .kicker { color: var(--red-dark); }
.theme-fall .on-dark .kicker { color: var(--gold); }
.theme-fall .on-dark .lead,
.theme-fall .triad .tagline { color: #fff1d6; }
.theme-fall .stat span,
.theme-fall .on-dark .split-media figcaption,
.theme-fall .site-footer { color: #ffe2b0; }
.theme-fall .on-dark .card p,
.theme-fall .promises span,
.theme-fall .vote-date.primary p { color: #fff0d4; }
.theme-fall .promises li { background: rgba(0, 0, 0, .12); border-color: rgba(255, 220, 150, .25); }
.theme-fall .card,
.theme-fall .involve,
.theme-fall .vote-date,
.theme-fall .priority .proof { background: #ffffff; }
.theme-fall .on-dark .card { background: var(--navy-900); }
.theme-fall .vote-date.primary { background: var(--navy-800); border-color: var(--gold); }
.theme-fall .party-badge { background: #b91c1c; box-shadow: 0 6px 18px -6px rgba(185, 28, 28, .7); }
.theme-fall .priority { border-bottom-color: #cfe3bf; }
.theme-fall .stars {
  background-image:
    radial-gradient(rgba(255, 210, 90, .16) 1.2px, transparent 1.3px),
    radial-gradient(rgba(255, 240, 200, .08) 1px, transparent 1.1px);
}
.theme-fall .camp-hero {
  background:
    radial-gradient(ellipse at 12% 0%, rgba(255, 214, 90, .45), transparent 55%),
    radial-gradient(ellipse at 92% 100%, rgba(255, 176, 60, .22), transparent 50%),
    linear-gradient(180deg, #f1f8e6 0%, #dcefc9 100%);
}
.theme-fall .camp-hero h1 { color: #8a1c12; text-shadow: 0 2px 0 rgba(255, 255, 255, .5); }
.theme-fall .camp-hero .office,
.theme-fall .district-rule span { color: #5c1a0c; }
.theme-fall .star-rule span { color: var(--red); }
.theme-fall .district-rule::before,
.theme-fall .district-rule::after { background: #e0a000; }
.theme-fall .camp-hero .county { color: var(--ink-soft); }
.theme-fall .camp-hero .btn-ghost { color: #5c1a0c; border-color: rgba(92, 26, 12, .6); }
.theme-fall .camp-hero .btn-ghost:hover { background: rgba(92, 26, 12, .08); }
.theme-fall .triad { background: linear-gradient(180deg, var(--navy-900), #8f3a0c); }
.theme-fall .values {
  background: linear-gradient(90deg, #f2a516, #ffc533 50%, #f2a516);
  color: #4a1f06;
}
.theme-fall .values li::before { color: #b5410c; }
.theme-fall .stat { background: var(--navy-900); }
.theme-fall .stats { border-top-color: var(--gold); }
.theme-fall .site-footer { border-top-color: var(--gold); background: var(--navy-900); }
.theme-fall .banner-cta { border-top-color: var(--gold); border-bottom-color: var(--gold); }

/* ---------- Leaves ---------- */
.leaf-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.leaf-layer.front { z-index: 2; }
.leaf {
  position: absolute; display: block;
  width: var(--s, 56px); height: var(--s, 56px);
  left: var(--x); top: var(--y);
  color: var(--c, #c4561d);
  opacity: var(--o, .9);
  transform: rotate(var(--r, 0deg));
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .25));
  animation: leaf-sway var(--d, 7s) ease-in-out var(--delay, 0s) infinite alternate;
}
@keyframes leaf-sway {
  from { transform: rotate(var(--r, 0deg)) translateY(0); }
  to   { transform: rotate(calc(var(--r, 0deg) + 14deg)) translateY(6px); }
}
.camp-hero > .wrap,
.fall-quote > .wrap { position: relative; z-index: 1; }

/* Falling leaves in the hero */
.leaf.falling {
  top: -80px;
  animation: leaf-fall var(--d, 16s) linear var(--delay, 0s) infinite;
  opacity: 0;
}
@keyframes leaf-fall {
  0%   { transform: translate(0, 0) rotate(var(--r, 0deg)); opacity: 0; }
  8%   { opacity: var(--o, .85); }
  50%  { transform: translate(var(--drift, 60px), 55vh) rotate(calc(var(--r, 0deg) + 180deg)); }
  92%  { opacity: var(--o, .85); }
  100% { transform: translate(calc(var(--drift, 60px) * -0.4), 110vh) rotate(calc(var(--r, 0deg) + 360deg)); opacity: 0; }
}

@media (max-width: 700px) {
  .leaf.hide-sm { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .leaf, .leaf.falling { animation: none; }
  .leaf.falling { display: none; }
}

/* ---------- Seasonal quote: Wisconsin oak scene ---------- */
.fall-quote {
  position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse at 25% 10%, rgba(255, 236, 150, .55), transparent 55%),
    linear-gradient(180deg, #fbfbe4 0%, #eef7e2 50%, #dcefcb 100%);
  color: var(--ink);
  padding: clamp(3.5rem, 7vw, 5rem) 0 clamp(6rem, 10vw, 7.5rem);
  border-top: 4px solid var(--gold);
}
.fall-quote-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.fall-tree { margin: 0; }
.fall-tree img { width: 100%; height: auto; }
.fall-tree figcaption { text-align: center; font-size: .92rem; font-style: italic; color: var(--ink-soft); margin-top: .4rem; }
.fall-quote .kicker { color: var(--red-dark); }
.fall-quote blockquote { margin: 0; }
.fall-quote blockquote p {
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: clamp(1.3rem, 2.5vw, 1.85rem); line-height: 1.5; margin: 0; color: #5c1a0c;
}
.fall-quote .qmark {
  font-family: var(--font-display); font-size: 5rem; line-height: .6;
  color: var(--red); display: block; margin-bottom: .6rem;
}
.fall-quote cite {
  display: block; margin-top: 1.4rem; font-style: normal;
  font-family: var(--font-caps); letter-spacing: .18em; font-size: .9rem; color: var(--red-dark);
}
@media (max-width: 860px) {
  .fall-quote-grid { grid-template-columns: 1fr; }
  .fall-tree { max-width: 460px; margin-inline: auto; }
  .fall-quote blockquote, .fall-quote .kicker { text-align: center; }
}

/* ---------- Leaf piles along section bottoms ---------- */
.leaf-pile {
  position: absolute; left: 0; right: 0; bottom: -6px; height: clamp(56px, 8vw, 96px);
  background: url("/assets/img/fall-leaf-pile.svg") center bottom / auto 100% repeat-x;
  pointer-events: none; z-index: 1;
}
.theme-fall .camp-hero { padding-bottom: clamp(5rem, 9vw, 7rem); }

/* .theme-fall .stars would otherwise replace the banner's gradient */
.theme-fall .banner-cta {
  background:
    radial-gradient(rgba(255, 210, 90, .16) 1.2px, transparent 1.3px) 0 0 / 34px 34px,
    radial-gradient(ellipse at 50% 0%, rgba(255, 197, 51, .35), transparent 60%),
    linear-gradient(135deg, var(--navy-900), #c4561a);
}
.fall-tree img {
  -webkit-mask-image: linear-gradient(180deg, #000 86%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 86%, transparent 100%);
}