/* ==========================================================================
   Keep Spicewood Strong — Design System
   Single source of visual truth for BOTH keep-spicewood-strong.org
   and the Auctria checkout surface (loaded via Site Settings → External CSS Links).

   Palette sampled directly from the 2026 campaign flyer.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Bangers&family=Nunito:ital,wght@0,400;0,700;0,900;1,700&display=swap');

:root {
  /* --- Brand palette (sampled from spicewood-fundraiser-flyer.PNG) --- */
  --ks-yellow:      #F5EB0B;   /* sign yellow — 26.7% of flyer */
  --ks-yellow-soft: #FDEF4E;
  --ks-red:         #E02126;   /* hero red — 11.2% */
  --ks-red-deep:    #E60F16;
  --ks-blue:        #25A3E0;   /* panther blue — 8.3% */
  --ks-blue-deep:   #0388C1;
  --ks-ink:         #000000;   /* 20.4% — outlines are load-bearing here */
  --ks-paper:       #FFFFFF;   /* 28.0% */

  /* --- Semantic --- */
  --ks-bg:          var(--ks-paper);
  --ks-fg:          var(--ks-ink);
  --ks-accent:      var(--ks-red);
  --ks-muted:       #5A5A5A;
  --ks-rule:        var(--ks-ink);
  --ks-success:     #159B4B;

  /* --- Type --- */
  --ks-font-display: 'Bangers', 'Impact', system-ui, sans-serif;   /* bursts, trophies */
  --ks-font-head:    'Anton', 'Haettenschweiler', Impact, sans-serif; /* headlines */
  --ks-font-body:    'Nunito', ui-rounded, 'Segoe UI', system-ui, sans-serif;

  --ks-step--1: clamp(.82rem, .78rem + .2vw, .92rem);
  --ks-step-0:  clamp(1rem, .95rem + .25vw, 1.13rem);
  --ks-step-1:  clamp(1.3rem, 1.15rem + .7vw, 1.7rem);
  --ks-step-2:  clamp(1.8rem, 1.4rem + 1.8vw, 2.9rem);
  --ks-step-3:  clamp(2.6rem, 1.8rem + 3.6vw, 5rem);

  /* --- Geometry --- */
  --ks-outline: 3px;          /* comic ink weight */
  --ks-radius: 14px;
  --ks-gap: clamp(1rem, .6rem + 1.6vw, 2rem);
  --ks-shadow-pop: 6px 6px 0 var(--ks-ink);
  --ks-shadow-pop-sm: 4px 4px 0 var(--ks-ink);
}

/* Comic art is a committed light-mode look. Pin it so no host theme bleeds in. */
:root { color-scheme: light; }

/* ==========================================================================
   1. Primitives — used by our site. Namespaced `ks-` so they can never
      collide with Auctria's own classes.
   ========================================================================== */

.ks-body {
  margin: 0;
  background: var(--ks-bg);
  color: var(--ks-fg);
  font-family: var(--ks-font-body);
  font-size: var(--ks-step-0);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.ks-wrap { width: min(1140px, 100% - 2rem); margin-inline: auto; }
.ks-stack > * + * { margin-top: var(--ks-gap); }

/* --- Headlines: heavy, condensed, slightly raked, hard black outline --- */
.ks-h1, .ks-h2, .ks-h3 {
  font-family: var(--ks-font-head);
  font-weight: 400;
  line-height: .95;
  letter-spacing: .01em;
  text-transform: uppercase;
  margin: 0;
}
.ks-h1 { font-size: var(--ks-step-3); transform: skewX(-6deg); }
.ks-h2 { font-size: var(--ks-step-2); transform: skewX(-4deg); }
.ks-h3 { font-size: var(--ks-step-1); }

/* The wordmark: yellow→red vertical gradient, the flyer's signature move. */
.ks-wordmark {
  font-family: var(--ks-font-head);
  font-size: var(--ks-step-3);
  text-transform: uppercase;
  line-height: .88;
  transform: skewX(-8deg);
  background: linear-gradient(180deg, var(--ks-yellow) 0%, var(--ks-yellow) 38%, var(--ks-red) 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 2px var(--ks-ink);
  paint-order: stroke fill;
  filter: drop-shadow(4px 5px 0 var(--ks-ink));
}
/* Fallback where background-clip:text is unsupported — never render invisible text. */
@supports not (-webkit-background-clip: text) {
  .ks-wordmark { color: var(--ks-yellow); -webkit-text-stroke: 2px var(--ks-ink); }
}

/* ==========================================================================
   2. Comic furniture — halftone, bursts, panels
   ========================================================================== */

/* Halftone dot field. Pure CSS; scales without assets. */
.ks-halftone {
  background-image: radial-gradient(var(--ks-dot, rgba(0,0,0,.22)) 22%, transparent 23%);
  background-size: 12px 12px;
  background-position: 0 0;
}
.ks-halftone--blue   { --ks-dot: color-mix(in srgb, var(--ks-blue) 70%, transparent); }
.ks-halftone--red    { --ks-dot: color-mix(in srgb, var(--ks-red) 60%, transparent); }
.ks-halftone--yellow { --ks-dot: color-mix(in srgb, var(--ks-yellow) 85%, transparent); }

/* Radiating "action" background, as on the flyer. */
.ks-rays {
  background: repeating-conic-gradient(
    from 0deg at 50% 42%,
    var(--ks-ray, var(--ks-yellow)) 0deg 7deg,
    transparent 7deg 14deg
  );
}

/* Panel: the workhorse card. Thick ink border + hard offset shadow. */
.ks-panel {
  background: var(--ks-paper);
  border: var(--ks-outline) solid var(--ks-ink);
  border-radius: var(--ks-radius);
  box-shadow: var(--ks-shadow-pop);
  padding: clamp(1rem, .7rem + 1.2vw, 1.75rem);
}
.ks-panel--blue   { background: var(--ks-blue); color: var(--ks-paper); }
.ks-panel--yellow { background: var(--ks-yellow); }

/* Starburst callout — "TODAY'S BONUS", trophy flashes. */
.ks-burst {
  display: inline-block;
  background: var(--ks-yellow);
  border: var(--ks-outline) solid var(--ks-ink);
  font-family: var(--ks-font-display);
  font-size: var(--ks-step-1);
  letter-spacing: .04em;
  padding: .55em 1.1em;
  transform: rotate(-3deg);
  clip-path: polygon(
    50% 0%, 61% 9%, 75% 4%, 79% 18%, 93% 20%, 90% 34%, 100% 45%,
    90% 56%, 95% 70%, 81% 75%, 79% 89%, 65% 87%, 54% 97%, 43% 88%,
    29% 92%, 25% 78%, 11% 76%, 14% 62%, 4% 51%, 14% 40%, 8% 26%,
    22% 21%, 24% 7%, 38% 10%
  );
  padding: 1.4em 1.8em;
}

/* ==========================================================================
   3. Actions — the single most important component on a fundraiser
   ========================================================================== */

.ks-btn {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: var(--ks-font-head);
  font-size: var(--ks-step-1);
  text-transform: uppercase;
  letter-spacing: .02em;
  text-decoration: none;
  color: var(--ks-ink);
  background: var(--ks-yellow);
  border: var(--ks-outline) solid var(--ks-ink);
  border-radius: var(--ks-radius);
  box-shadow: var(--ks-shadow-pop-sm);
  padding: .6em 1.15em;
  cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease;
}
.ks-btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ks-ink); }
.ks-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ks-ink); }
.ks-btn--give { background: var(--ks-red); color: var(--ks-paper); }
.ks-btn--quiet { background: var(--ks-paper); }

/* Visible focus everywhere. Non-negotiable. */
.ks-btn:focus-visible,
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--ks-blue-deep);
  outline-offset: 3px;
}

/* ==========================================================================
   4. Progress — the thermometer families will stare at
   ========================================================================== */

.ks-meter {
  --ks-pct: 0%;
  position: relative;
  height: 34px;
  background: var(--ks-paper);
  border: var(--ks-outline) solid var(--ks-ink);
  border-radius: 999px;
  overflow: hidden;
}
.ks-meter__fill {
  height: 100%;
  width: var(--ks-pct);
  background: linear-gradient(90deg, var(--ks-yellow), var(--ks-red));
  border-right: var(--ks-outline) solid var(--ks-ink);
  transition: width .6s cubic-bezier(.22,1,.36,1);
}
.ks-meter__label {
  font-family: var(--ks-font-head);
  font-size: var(--ks-step--1);
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  margin-bottom: .35rem;
}
@media (prefers-reduced-motion: reduce) {
  .ks-meter__fill, .ks-btn { transition: none; }
}

/* Status pills for standings honesty ("Pending" is a first-class state). */
.ks-pill {
  display: inline-block;
  font-family: var(--ks-font-body);
  font-weight: 900;
  font-size: var(--ks-step--1);
  text-transform: uppercase;
  border: 2px solid var(--ks-ink);
  border-radius: 999px;
  padding: .15em .7em;
  background: var(--ks-paper);
}
.ks-pill--pending { background: #EDEDED; color: var(--ks-muted); }
.ks-pill--live { background: var(--ks-success); color: var(--ks-paper); }

/* ==========================================================================
   5. Auctria checkout surface
   --------------------------------------------------------------------------
   Loaded into Auctria via Site Settings → External CSS Links.

   ⚠️  RULES FOR THIS SECTION — read before adding anything:
   1. NEVER style form controls, cart, or payment fields. Breaking checkout
      costs real donations. Typography and color only.
   2. NEVER use `*`, broad resets, `!important` sprees, or layout properties
      (display/position/float) on Auctria's own nodes.
   3. Selectors below are intentionally generic. Auctria's real class names
      must be read off the live DOM in Chrome before this section is expanded.
      Do not guess them.
   4. After ANY change here, complete a test-mode donation end to end.
   ========================================================================== */

/* `html body` outranks Auctria's own `body` rule, which loads after this file
   at equal specificity and would otherwise win. Still font-only: no layout,
   no backgrounds, nothing structural. */
html body {
  font-family: var(--ks-font-body);
}

h1, h2, h3 {
  font-family: var(--ks-font-head);
  text-transform: uppercase;
  letter-spacing: .01em;
}

/* Brand-tint headings without touching anything interactive. */
h1 { color: var(--ks-ink); }

/* Keep focus visible on Auctria's pages too — accessibility must survive theming. */
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--ks-blue-deep);
  outline-offset: 2px;
}