/* =========================================================
   VFW FAMILY HERITAGE THEME (Single-file CSS)
   Updates in THIS version:
   - Darkened the BLUE used by:
       • Header active/current-page button (.nav__link.is-active)
       • Welcome box primary button (.btn--primary)
     (keeps the same “blue” idea, just deeper like before)
   - Welcome box buttons remain BLUE + ORANGE:
       • .hero__panel .btn--primary = BLUE
       • .hero__panel .btn--accent  = ORANGE/HONEY
   - Started applying Pavlov-style button conditioning on the HOME page
     *without changing HTML* by using safe href-based rules:
       • Events/Programs/Donate links => PRIMARY (BLUE)
       • Contact/VetFest links        => INFO (ORANGE/HONEY)
       • Everything else              => NEUTRAL
   ========================================================= */

/* --- Design tokens --- */
:root{
  /* Backgrounds (harmonize w/ navy + honey, not too light) */
  --bg: #A2D2DF;   /*  */
  --bg-2:#F6EFBD;  /* background */

  /* Surfaces */
  --paper: #ffffff;
  --card: rgba(255,255,255,0.92);

  /* Text */
  --ink: #233042;
  --muted: rgba(35,48,66,0.66);

  /* Accents (family-friendly, not neon) */
  --honey: rgba(201,163,92,0.92);
  --honey-solid: #C9A35C;
  --bronze: #B9854D;
  --sage: #5E8A73;
  --teal: #5EA9A6;
  --clay: #C56A5A;
  --sand: #E8D3B8;

  /* PRIMARY BLUE (DARKER than last version — closer to “before”) */
  --blue-solid: #2C5DA0;  /* darker heritage blue */
  --blue-deep:  #1D3F70;  /* deeper blue */
  --blue-border: rgba(44,93,160,0.44);

  /* Borders / shadows */
  --border: rgba(35,48,66,0.14);
  --shadow: 0 18px 42px rgba(35,48,66,0.12);

  --radius: 18px;
  --radius-sm: 12px;

  --tap: 48px;
  --max: 1120px;

  --easing: cubic-bezier(.2,.8,.2,1);
  --focus: 2px solid rgba(44,93,160,0.32);

  /* ---------------------------------------------------------
     CONSISTENT CONTROL SYSTEM (Pavlov-style mapping)
     ---------------------------------------------------------
     Neutral controls: calm surface button
     Primary controls: BLUE (strongest action + active nav)
     Info controls: HONEY/ORANGE (learn more / informational)
     --------------------------------------------------------- */

  /* Neutral */
  --control-radius: 14px;
  --control-border: rgba(35,48,66,0.14);
  --control-hover-border: rgba(35,48,66,0.22);

  --control-bg:
    linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.70)), /* buttons */
    radial-gradient(circle at 14% 30%, rgba(232,211,184,0.18), transparent 62%),
    radial-gradient(circle at 86% 70%, rgba(94,138,115,0.12), transparent 66%);

  --control-shadow: 0 14px 28px rgba(35,48,66,0.12);
  --control-shadow-hover: 0 18px 38px rgba(35,48,66,0.15);

  /* Primary (BLUE) — strongest action + active nav */
  --primary-bg:
    linear-gradient(90deg, rgba(44,93,160,0.97), rgba(21, 44, 85, 0.699)),
    radial-gradient(circle at 86% 30%, rgba(201,163,92,0.14), transparent 55%);
  --primary-border: rgba(44,93,160,0.44);

  /* Info (HONEY/ORANGE) — informational / learn more */
  --info-bg:
    linear-gradient(90deg, rgba(201,163,92,0.92), rgba(141, 92, 39, 0.86)),
    radial-gradient(circle at 18% 30%, rgba(255,255,255,0.16), transparent 58%);
  --info-border: rgba(201,163,92,0.46);

  /* Pills (orange/honey) — pop slightly more */
  --pill-border: rgba(201,163,92,0.55);
  --pill-shadow: 0 14px 26px rgba(35,48,66,0.16);
  --pill-bg:
    linear-gradient(90deg, rgba(201,163,92,0.92), rgba(185,133,77,0.88)),
    radial-gradient(circle at 18% 30%, rgba(255,255,255,0.20), transparent 58%),
    radial-gradient(circle at 86% 76%, rgba(35,48,66,0.08), transparent 60%);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
  .toast, .flash__card{ transition:none !important; }
}

/* =========================================================
   Base
   ========================================================= */
*{ box-sizing:border-box; }

/* FIX (core): Put the full background stack on HTML so it spans the full document,
   and ensure it doesn't "tile/restart" weirdly on scroll. */
html{
  min-height:100%;
  background:
    /* soft wash (was body::before) */
    linear-gradient(180deg, rgba(35,48,66,0.05), rgba(201,163,92,0.05)),

    /* subtle vertical texture WITHOUT a repeating pattern (replaces repeating-linear-gradient) */
    linear-gradient(90deg,
      rgba(35,48,66,0.032) 0%,
      rgba(255,255,255,0) 16%,
      rgba(35,48,66,0.026) 34%,
      rgba(255,255,255,0) 52%,
      rgba(35,48,66,0.022) 70%,
      rgba(255,255,255,0) 86%,
      rgba(35,48,66,0.028) 100%
    ),

    /* speckle dots (was body::after) */
    radial-gradient(circle at 18% 22%, rgba(201,163,92,0.10) 0 3px, transparent 4px),
    radial-gradient(circle at 72% 34%, rgba(44,93,160,0.08) 0 3px, transparent 4px),
    radial-gradient(circle at 42% 72%, rgba(94,138,115,0.08) 0 3px, transparent 4px),
    radial-gradient(circle at 86% 78%, rgba(185,133,77,0.07) 0 3px, transparent 4px),

    /* existing large background fields */
    radial-gradient(circle at 14% 10%, rgba(201,163,92,0.22), transparent 62%),
    radial-gradient(circle at 86% 16%, rgba(44,93,160,0.13), transparent 62%),
    radial-gradient(circle at 16% 92%, rgba(94,138,115,0.14), transparent 64%),
    radial-gradient(circle at 86% 86%, rgba(232,211,184,0.18), transparent 64%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);

  /* One continuous paint for the whole page */
    background-repeat: repeat-y;
  background-size: auto;
}

/* Body stays transparent so the HTML background shows through */
body{
  margin:0;
  min-height:100%;
  font-family: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink);
  line-height:1.6;
  background: transparent;
}

/* =========================================================
   A11y / helpers
   ========================================================= */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:0;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:10px; top:10px;
  padding:10px 12px;
  background: rgba(255,255,255,0.94);
  border:1px solid var(--border);
  border-radius:999px;
  transform:translateY(-120%);
  transition:transform 220ms var(--easing);
  z-index:999;
  color: var(--ink);
}
.skip-link:focus{ transform:translateY(0); outline:var(--focus); }

/* =========================================================
   Layout helpers
   ========================================================= */
.wrap, .l-wrap{ width:min(var(--max), 100% - 32px); margin:0 auto; }
.site-main{ padding: 22px 0 42px; }

.section, .l-section{ padding: 18px 0; }
.hero, .l-section--hero{ padding: 18px 0 8px; }

.grid, .l-grid{ display:grid; gap:12px; }
@media (min-width: 900px){
  .grid--2, .l-grid--2{ grid-template-columns: 1.2fr 0.8fr; }
  .grid--3, .l-grid--3{ grid-template-columns: repeat(3,1fr); }
}

/* =========================================================
   Typography
   ========================================================= */
h1,h2,h3,h4,h5{
  font-family:"Libre Baskerville", serif;
  line-height:1.25;
  margin: 0 0 10px 0;
}
p{ margin: 0 0 12px 0; }

.muted, .u-muted{ color: var(--muted); }
.micro, .u-micro{ font-size: 0.92rem; }

.h1{ font-size: 1.75rem; }
.h2{ font-size: 1.35rem; }
.h3{ font-size: 1.15rem; }
.h5{ font-size: 1.02rem; }

@media (min-width: 900px){
  .h1{ font-size: 2.2rem; }
  .h2{ font-size: 1.6rem; }
  .h3{ font-size: 1.22rem; }
}

/* =========================================================
   Header
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:50;
  background:
    linear-gradient(360deg, rgba(174, 235, 224, 0.486), rgba(174,177,168,0.84)), /* header */
    linear-gradient(90deg,
      rgba(35,48,66,0.10),
      rgba(201,163,92,0.10),
      rgba(94,138,115,0.08),
      rgba(232,211,184,0.10)
    );
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(35,48,66,0.12);
}
.header__inner{
  display:flex; align-items:center; gap:14px;
  padding: 12px 0;
}

.brand{
  display:flex; gap:10px; align-items:center;
  text-decoration:none; color:inherit;
  min-height: var(--tap);
}
.brand__mark{
  border-radius: 12px;
  box-shadow: 0 14px 28px rgba(35,48,66,0.14);
  background:
    radial-gradient(circle at 28% 30%, rgba(201,163,92,0.32), rgba(255,255,255,0.92) 58%),
    radial-gradient(circle at 82% 76%, rgba(44,93,160,0.10), transparent 62%),
    radial-gradient(circle at 20% 86%, rgba(94,138,115,0.10), transparent 64%);
  border: 1px solid rgba(35,48,66,0.12);
}
.brand__name{ font-weight:700; letter-spacing:0.2px; display:block; }
.brand__tagline{ display:block; font-size:0.92rem; color:var(--muted); }

/* Mobile nav toggle */
.nav-toggle{
  margin-left:auto;
  height:var(--tap);
  width:var(--tap);
  border-radius: 999px;
  border: 1px solid var(--control-border);
  background: var(--control-bg);
  box-shadow: var(--control-shadow);
}
.nav-toggle:focus-visible{ outline: var(--focus); outline-offset:3px; }
.nav-toggle__lines{
  display:block; width:20px; height:14px; margin:0 auto;
  background:
    linear-gradient(var(--ink),var(--ink)) 0 0/100% 2px,
    linear-gradient(rgba(201,163,92,0.92),rgba(201,163,92,0.92)) 0 50%/100% 2px,
    linear-gradient(rgba(44,93,160,0.92),rgba(44,93,160,0.92)) 0 100%/100% 2px;
  background-repeat:no-repeat;
  opacity:0.92;
}

/* Mobile nav panel */
.nav{
  position:fixed;
  inset: 64px 12px auto 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(174,177,168,0.92)),
    radial-gradient(circle at 14% 18%, rgba(35,48,66,0.10), transparent 58%),
    radial-gradient(circle at 86% 70%, rgba(201,163,92,0.14), transparent 60%);
  border: 1px solid rgba(35,48,66,0.12);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 10px;
  display:none;
}
.nav.is-open{ display:block; }

/* Inactive header buttons (neutral) */
.nav__link{
  display:flex;
  align-items:center;
  min-height: var(--tap);
  padding: 10px 12px;
  border-radius: var(--control-radius);
  text-decoration:none;
  color: var(--ink);
  font-weight: 900;

  border: 1px solid rgba(201,163,92,0.34);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.86), rgba(255,255,255,0.64)),
    radial-gradient(circle at 16% 30%, rgba(201,163,92,0.22), transparent 62%),
    radial-gradient(circle at 86% 70%, rgba(232,211,184,0.18), transparent 66%);
  box-shadow: 0 10px 20px rgba(35,48,66,0.08);

  transition: transform 220ms var(--easing),
              border-color 220ms var(--easing),
              box-shadow 220ms var(--easing),
              background 220ms var(--easing);
}
.nav__link:hover{
  border-color: var(--info-border);
  box-shadow: var(--control-shadow);
}
.nav__link:focus-visible{ outline: var(--focus); outline-offset:3px; }
.nav__link:active{ transform: translateY(1px) scale(0.995); }

/* Active page indicator = PRIMARY (BLUE) */
.nav__link.is-active{
  background: var(--primary-bg);
  border: 1px solid var(--primary-border);
  color: #FFFFFF;
  box-shadow: 0 18px 36px rgba(35,48,66,0.18);
}

@media (min-width: 900px){
  .nav-toggle{ display:none; }
  .nav{
    position:static; inset:auto;
    display:flex !important;
    margin-left:auto;
    gap:6px;
    background: transparent;
    border:0;
    box-shadow:none;
    padding:0;
  }
  .nav__link{
    min-height: 44px;
    padding: 10px 12px;
  }
}

/* =========================================================
   Surfaces / Cards rgba(228, 232, 255, 0.651) rgba(232, 223, 202, 0.719)
   ========================================================= */
.card, .c-surface{
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.452), rgba(232, 223, 202, 0.719)), /* card backgrounds */
    radial-gradient(circle at 10% 18%, rgba(232, 211, 184, 0.411), transparent 58%),
    radial-gradient(circle at 92% 82%, rgba(35,48,66,0.08), transparent 62%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
}
.card--tight, .c-surface--tight{
  padding: 14px;
  border-radius: var(--radius-sm);
}

/* Hero panel */
.hero__panel, .c-hero-panel{
  display:grid;
  gap: 12px;
  padding: 18px;
  border-radius: calc(var(--radius) + 6px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.452), rgba(232, 223, 202, 0.719)),
    radial-gradient(circle at 14% 18%, rgba(201,163,92,0.16), transparent 58%),
    radial-gradient(circle at 86% 28%, rgba(44,93,160,0.10), transparent 62%),
    radial-gradient(circle at 18% 86%, rgba(94,138,115,0.12), transparent 64%),
    radial-gradient(circle at 78% 86%, rgba(232,211,184,0.14), transparent 66%);
  border: 1px solid rgba(35,48,66,0.12);
  box-shadow: var(--shadow);
}

/* =========================================================
   Buttons (Pavlov mapping)
   ========================================================= */

/* Neutral buttons (default) */
.btn, .c-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height: var(--tap);
  padding: 12px 14px;
  border-radius: var(--control-radius);
  border: 1px solid var(--control-border);

  background: var(--control-bg);
  color: var(--ink);
  font-weight: 900;
  text-decoration:none;

  transition: transform 220ms var(--easing), border-color 220ms var(--easing), box-shadow 220ms var(--easing);
  gap:10px;
  box-shadow: 0 10px 20px rgba(35,48,66,0.08);
}
.btn:hover, .c-button:hover{
  border-color: var(--control-hover-border);
  box-shadow: var(--control-shadow-hover);
}
.btn:focus-visible, .c-button:focus-visible{ outline: var(--focus); outline-offset:3px; }
.btn:active, .c-button:active{ transform: translateY(1px) scale(0.995); }

/* PRIMARY = BLUE (Welcome button stays BLUE) */
.btn--primary, .c-button--primary{
  background: var(--primary-bg);
  color: #FFFFFF;
  border-color: var(--primary-border);
  box-shadow: 0 18px 36px rgba(35,48,66,0.18);
}
.btn--primary:hover, .c-button--primary:hover{
  box-shadow: 0 22px 46px rgba(35,48,66,0.20);
}

/* INFO = ORANGE/HONEY */
.btn--info, .c-button--info{
  background: var(--info-bg);
  color: var(--ink);
  border-color: var(--info-border);
  box-shadow: 0 16px 34px rgba(35,48,66,0.14);
}
.btn--info:hover, .c-button--info:hover{
  box-shadow: 0 20px 42px rgba(35,48,66,0.16);
}

/* ACCENT = ORANGE/HONEY (keeps Welcome box orange button orange) */
.btn--accent, .c-button--accent{
  background: var(--info-bg);
  color: var(--ink);
  border-color: var(--info-border);
  box-shadow: 0 16px 34px rgba(35,48,66,0.14);
}
.btn--accent:hover, .c-button--accent:hover{
  box-shadow: 0 20px 42px rgba(35,48,66,0.16);
}

.btn__hint, .c-button__hint{ font-weight:800; opacity:0.9; }

/* =========================================================
   HOME PAGE: Start mapping “other section” buttons to Pavlov roles
   (no HTML changes — uses href patterns)
   ========================================================= */

/* Strong actions -> PRIMARY (events, programs, donate) */
.site-main a.btn[href*="/events"],
.site-main a.btn[href$="events.php"],
.site-main a.btn[href*="/programs"],
.site-main a.btn[href$="programs.php"],
.site-main a.btn[href*="/donate"],
.site-main a.btn[href$="donate.php"]{
  background: var(--primary-bg);
  color: #FFFFFF;
  border-color: var(--primary-border);
  box-shadow: 0 18px 36px rgba(35,48,66,0.18);
}
.site-main a.btn[href*="/events"]:hover,
.site-main a.btn[href$="events.php"]:hover,
.site-main a.btn[href*="/programs"]:hover,
.site-main a.btn[href$="programs.php"]:hover,
.site-main a.btn[href*="/donate"]:hover,
.site-main a.btn[href$="donate.php"]:hover{
  box-shadow: 0 22px 46px rgba(35,48,66,0.20);
}

/* Informational -> INFO (contact, vetfest) */
.site-main a.btn[href*="/contact"],
.site-main a.btn[href$="contact.php"],
.site-main a.btn[href*="/vetfest"],
.site-main a.btn[href$="vetfest.php"]{
  background: var(--info-bg);
  color: var(--ink);
  border-color: var(--info-border);
  box-shadow: 0 16px 34px rgba(35,48,66,0.14);
}
.site-main a.btn[href*="/contact"]:hover,
.site-main a.btn[href$="contact.php"]:hover,
.site-main a.btn[href*="/vetfest"]:hover,
.site-main a.btn[href$="vetfest.php"]:hover{
  box-shadow: 0 20px 42px rgba(35,48,66,0.16);
}

/* KEEP the Welcome box exactly BLUE + ORANGE (override the href rules above) */
.hero__panel a.btn.btn--primary{
  background: var(--primary-bg) !important;
  color:#FFFFFF !important;
  border-color: var(--primary-border) !important;
}
.hero__panel a.btn.btn--accent{
  background: var(--info-bg) !important;
  color: var(--ink) !important;
  border-color: var(--info-border) !important;
}

/* =========================================================
   Pills
   ========================================================= */
.tag,
.c-pill,
.hero__badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 6px 10px;
  border-radius:999px;

  background: var(--pill-bg);
  border: 1px solid var(--pill-border);
  box-shadow: var(--pill-shadow);

  font-weight: 900;
  font-size: 0.92rem;
  color: rgba(35,48,66,0.96) !important;
}

.hero__badge,
.c-pill--welcome{
  padding: 8px 12px;
}

.c-pill--orange{
  background: var(--pill-bg);
  border-color: var(--pill-border);
}

.badge-dot, .c-pill__dot{
  width:10px; height:10px; border-radius:999px;
  background: rgba(35,48,66,0.90);
  box-shadow: 0 0 0 3px rgba(201,163,92,0.22);
}

/* =========================================================
   Lists / links
   ========================================================= */
.list, .c-list{ list-style:none; padding:0; margin:0; display:grid; gap:8px; }

.link{
  color: rgba(35,48,66,0.92);
  font-weight: 900;
  text-decoration:none;
}
.link:hover{
  color: rgba(185,133,77,0.92);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.link:focus-visible{ outline: var(--focus); outline-offset:3px; }

/* =========================================================
   Forms
   ========================================================= */
.form{ display:grid; gap:12px; }
.field{ display:grid; gap:6px; }
label{ font-weight:900; }

input, textarea, select{
  width:100%;
  min-height: var(--tap);
  padding: 12px 12px;
  border-radius: var(--control-radius);

  border: 1px solid rgba(35,48,66,0.14);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,255,255,0.80)),
    radial-gradient(circle at 90% 30%, rgba(201,163,92,0.14), transparent 62%);

  font: inherit;
  color: var(--ink);
  transition: border-color 220ms var(--easing), transform 220ms var(--easing), box-shadow 220ms var(--easing);
}
textarea{ min-height:120px; resize:vertical; }
input:focus, textarea:focus, select:focus{
  outline:none;
  border-color: rgba(44,93,160,0.28);
  box-shadow: 0 0 0 4px rgba(44,93,160,0.12);
}
.help{ font-size:0.92rem; color: var(--muted); }

/* =========================================================
   Reveal animations
   ========================================================= */
.reveal{
  opacity:0;
  transform: translateY(10px);
  transition: opacity 340ms var(--easing), transform 340ms var(--easing);
  will-change: opacity, transform;
}
.reveal.is-visible{ opacity:1; transform:none; }

/* =========================================================
   Media blocks
   ========================================================= */
.media, .c-media{ display:flex; gap:12px; align-items:flex-start; }

.media__thumb, .c-media__thumb{
  width:54px; height:54px;
  border-radius: 14px;
  border: 1px solid rgba(35,48,66,0.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.78)),
    radial-gradient(circle at 70% 30%, rgba(201,163,92,0.16), transparent 60%),
    radial-gradient(circle at 18% 84%, rgba(44,93,160,0.10), transparent 64%);
  display:grid; place-items:center;
  flex: 0 0 auto;
}

/* =========================================================
   Divider
   ========================================================= */
.hr, .c-divider{
  border:0;
  border-top:1px solid rgba(35,48,66,0.12);
  margin: 12px 0;
}

/* =========================================================
   Flash message
   ========================================================= */
.flash{ padding: 12px 0 0; }
.flash__card{
  display:flex;
  gap:12px;
  align-items:flex-start;
  border-radius: var(--radius);
  padding: 12px 12px;

  border: 1px solid rgba(35,48,66,0.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.84)),
    radial-gradient(circle at 10% 30%, rgba(94,138,115,0.12), transparent 62%),
    radial-gradient(circle at 92% 82%, rgba(44,93,160,0.10), transparent 62%);
  box-shadow: var(--shadow);
  transition: transform 240ms var(--easing), opacity 240ms var(--easing);
}
.flash__card--error{
  border-color: rgba(197,106,90,0.28);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.84)),
    radial-gradient(circle at 12% 35%, rgba(197,106,90,0.14), transparent 64%),
    radial-gradient(circle at 86% 70%, rgba(201,163,92,0.14), transparent 62%);
}
.flash__icon{
  width:34px; height:34px;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(201,163,92,0.16), rgba(232,211,184,0.14));
  display:grid; place-items:center;
  font-weight:900;
  color: rgba(35,48,66,0.92);
  border: 1px solid rgba(35,48,66,0.10);
}
.flash__title{ font-weight:900; margin-bottom:2px; }
.flash__close{
  margin-left:auto;
  height:42px; width:42px;
  border-radius:999px;
  border: 1px solid rgba(35,48,66,0.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.78)),
    radial-gradient(circle at 80% 30%, rgba(201,163,92,0.14), transparent 58%);
}
.flash__close:focus-visible{ outline: var(--focus); outline-offset:3px; }

/* =========================================================
   Footer
   ========================================================= */
.site-footer{
  padding: 24px 0 20px;
  border-top: 1px solid rgba(35,48,66,0.12);
  background:
    linear-gradient(360deg, rgba(174, 215, 235, 0.486), rgba(174,177,168,0.84)),
    linear-gradient(90deg,
      rgba(35,48,66,0.08),
      rgba(201,163,92,0.10),
      rgba(94,138,115,0.08),
      rgba(232,211,184,0.12)
    );
}
.footer__grid{ display:grid; gap:12px; }
.footer__card{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.82)),
    radial-gradient(circle at 12% 25%, rgba(232,211,184,0.16), transparent 62%),
    radial-gradient(circle at 92% 78%, rgba(44,93,160,0.10), transparent 62%);
  border: 1px solid rgba(35,48,66,0.12);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
}
@media (min-width: 900px){
  .footer__grid{ grid-template-columns: 1.2fr 1fr 1fr; }
}
.footer__bottom{ padding-top: 12px; }
.footer__fine{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  color: var(--muted);
  font-size: 0.95rem;
}
.dot{ opacity:0.65; }

/* =========================================================
   Toasts
   ========================================================= */
.toast-stack{
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 14px;
  display:grid;
  gap: 10px;
  z-index: 200;
}
.toast{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.84)),
    radial-gradient(circle at 15% 25%, rgba(201,163,92,0.12), transparent 62%),
    radial-gradient(circle at 88% 78%, rgba(44,93,160,0.08), transparent 62%);
  border: 1px solid rgba(35,48,66,0.12);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 12px 12px;
  display:flex;
  gap: 12px;
  align-items:flex-start;
  transform: translateY(8px);
  opacity: 0;
  transition: opacity 280ms var(--easing), transform 280ms var(--easing);
}
.toast.is-in{ transform:none; opacity:1; }
.toast__badge{
  width: 34px; height: 34px;
  border-radius: 999px;
  background: var(--pill-bg);
  display:grid; place-items:center;
  color: rgba(35,48,66,0.92);
  font-weight: 900;
  border: 1px solid rgba(35,48,66,0.10);
}
.toast__title{ font-weight: 900; margin-bottom: 2px; }
.toast__msg{ color: var(--muted); }
.toast__close{
  margin-left:auto;
  height: 40px; width: 40px;
  border-radius: 999px;
  border: 1px solid rgba(35,48,66,0.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.78)),
    radial-gradient(circle at 80% 30%, rgba(201,163,92,0.14), transparent 62%);
}
.toast__close:focus-visible{ outline: var(--focus); outline-offset:3px; }

/* =========================================================
   Home-page blocks moved from inline <style> into CSS
   ========================================================= */
.sponsor-strip, .c-strip{
  border: 1px solid rgba(35,48,66,0.12);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.45);
  overflow: hidden;
}
.sponsor-strip__viewport, .c-strip__viewport{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.sponsor-strip__track, .c-strip__track{
  display:flex;
  gap: 12px;
  padding: 12px;
  width: max-content;
  align-items: stretch;
}
.sponsor-strip__item, .c-strip__item{
  flex: 0 0 280px;
  scroll-snap-align: start;
}
@media (min-width: 900px){
  .sponsor-strip__item, .c-strip__item{ flex-basis: 320px; }
}
.sponsor-mini, .c-sponsor-mini{
  height: 100%;
  display:flex;
  flex-direction: column;
  gap: 10px;
  text-decoration:none;
  color: var(--ink);
}
.sponsor-mini:focus-visible, .c-sponsor-mini:focus-visible{ outline: var(--focus); outline-offset: 3px; }

.sponsor-mini__logo, .c-sponsor-mini__logo{
  width:100%;
  height: 110px;
  object-fit: contain;
  border-radius: 14px;
  border:1px solid rgba(35,48,66,0.12);
  background: rgba(255,255,255,0.70);
  padding: 10px;
}
.sponsor-mini__meta, .c-sponsor-mini__meta{ display:grid; gap: 6px; }
.sponsor-mini__label, .c-sponsor-mini__label{ font-size: 0.92rem; color: var(--muted); font-weight: 700; }
.sponsor-mini__name, .c-sponsor-mini__name{
  font-family:"Libre Baskerville", serif;
  font-weight: 700;
  font-size: 1.08rem;
  line-height: 1.2;
  margin:0;
}
.sponsor-mini__desc, .c-sponsor-mini__desc{ color: var(--muted); margin:0; }

.spotlight-grid, .c-spotlight-grid{
  display:grid;
  gap: 12px;
  grid-template-columns: 1fr;
}
@media (min-width: 900px){
  .spotlight-grid.cols-1, .c-spotlight-grid.cols-1{ grid-template-columns: 1fr; }
  .spotlight-grid.cols-2, .c-spotlight-grid.cols-2{ grid-template-columns: repeat(2, 1fr); }
  .spotlight-grid.cols-3, .c-spotlight-grid.cols-3{ grid-template-columns: repeat(3,1fr); }
}
.spotlight-top, .c-spotlight-top{ display:flex; align-items:center; gap: 12px; }
.spotlight-logo, .c-spotlight-logo{
  width: 84px; height: 84px;
  border-radius: 18px;
  border: 1px solid rgba(35,48,66,0.12);
  background: rgba(255,255,255,0.78);
  object-fit: contain;
  padding: 10px;
  flex: 0 0 auto;
}