/* =============================================================================
   PeachPuffTL: Our Little Peach Garden (supporters page)
   Uses the theme's own tokens (--pp-*, --fg-*, --primary-*), so it follows
   dark mode, light mode and the PeachPuff Colors settings in Customize.
   ============================================================================= */

.pp-supporters {
  width: 100%;
  margin: 0 auto;
  color: var(--fg-300);
  font-family: var(--ff-base, inherit);
}

.pp-supporters * { box-sizing: border-box; }

/* The theme already prints the page title as an h1. Keep it for SEO and screen
   readers, but hide it visually because the hero shows the same words. */
.singular__article:has(.pp-supporters) .singular__header {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Hero ---- */

.pp-supporters__hero {
  position: relative;
  overflow: hidden;
  padding: clamp(34px, 7vw, 68px) clamp(20px, 6vw, 64px);
  border: 1px solid var(--pp-rule);
  border-radius: var(--layout-border-radius-large);
  background:
    radial-gradient(circle 150px at 90% 90%, color-mix(in srgb, var(--pp-coral) 14%, transparent), transparent),
    radial-gradient(circle 130px at 8% 88%, color-mix(in srgb, var(--pp-gold) 12%, transparent), transparent),
    radial-gradient(120% 220px at 50% 0%, var(--pp-glow), transparent 80%),
    radial-gradient(var(--pp-dot) 1.5px, transparent 2.5px),
    var(--pp-surface);
  background-size: auto, auto, auto, 30px 30px, auto;
  text-align: center;
  box-shadow: var(--box-shadow-m);
}

.pp-supporters__eyebrow {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid var(--pp-rule-strong);
  border-radius: 999px;
  background: var(--pp-chip);
  color: var(--primary-500);
  font-size: 0.74rem;
  font-weight: var(--font-weight-strong);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pp-supporters__peach {
  margin: 14px 0 0;
  font-size: clamp(42px, 7vw, 60px);
  line-height: 1.2;
  filter: drop-shadow(0 6px 8px color-mix(in srgb, var(--pp-coral) 35%, transparent));
}

.pp-supporters__hero h2 {
  margin: 6px 0 0;
  color: var(--fg-100);
  font-family: var(--ff-heading);
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: var(--font-weight-heading);
  line-height: 1.1;
}

.pp-supporters__subtitle {
  margin: 8px 0 14px;
  color: var(--primary-500);
  font-family: var(--ff-heading);
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  font-weight: var(--font-weight-semi-strong);
}

.pp-supporters__intro {
  max-width: 620px;
  margin: 0 auto;
  color: var(--fg-400);
  font-size: 1.04rem;
  line-height: 1.8;
}

.pp-supporters__flourish {
  display: block;
  margin-top: 22px;
  color: var(--pp-peach);
  letter-spacing: 0.25em;
  opacity: 0.85;
}

/* ---- Supporter wall ---- */

.pp-supporters__thanks {
  margin: clamp(22px, 4vw, 36px) 0;
  padding: clamp(24px, 5vw, 40px);
  border: 1px solid var(--pp-rule);
  border-radius: var(--layout-border-radius-large);
  background: var(--pp-surface);
}

.pp-supporters__section-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
}

.pp-supporters__section-heading h2,
.pp-supporters__cta h2 {
  margin: 0;
  color: var(--primary-500);
  font-family: var(--ff-heading);
  font-size: clamp(1.45rem, 3.5vw, 2rem);
  font-weight: var(--font-weight-heading);
}

.pp-supporters__section-copy {
  max-width: 580px;
  margin: 10px auto 26px;
  color: var(--fg-500);
  line-height: 1.7;
  text-align: center;
}

.pp-supporters__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 14px;
}

.pp-supporter-card {
  position: relative;
  min-height: 128px;
  padding: 22px 20px 20px;
  border: 1px solid var(--pp-rule);
  border-radius: var(--layout-border-radius-small);
  background: var(--pp-card);
  box-shadow: var(--box-shadow-s);
  text-align: center;
  transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.pp-supporter-card:hover {
  transform: translateY(-3px);
  border-color: var(--pp-rule-strong);
  background: var(--pp-card-2);
}

.pp-supporter-card__flower {
  display: block;
  margin-bottom: 6px;
  color: var(--pp-coral);
  font-size: 1.3rem;
}

.pp-supporter-card h3 {
  margin: 0 0 5px;
  color: var(--fg-100);
  font-family: var(--ff-heading);
  font-size: 1.15rem;
  font-weight: var(--font-weight-heading);
}

.pp-supporter-card p {
  margin: 0;
  color: var(--fg-500);
  font-size: 0.91rem;
  line-height: 1.55;
}

.pp-supporters__empty {
  padding: 28px 20px;
  border: 1px dashed var(--pp-rule-strong);
  border-radius: var(--layout-border-radius-small);
  background: var(--pp-card);
  text-align: center;
}

.pp-supporters__empty span { font-size: 2rem; }

.pp-supporters__empty p {
  margin: 8px 0 0;
  color: var(--fg-500);
}

.pp-supporters__privacy {
  margin: 20px 0 0;
  color: var(--fg-700);
  font-size: 0.78rem;
  text-align: center;
}

/* ---- Living garden: blooms, tiers, newest tag ---- */

.pp-supporters__garden {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 0 0 26px;
  text-align: center;
}

.pp-supporters__blooms {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 8px;
  font-size: 1.25rem;
  line-height: 1;
}

.pp-supporters__blooms span {
  display: inline-block;
  color: var(--pp-coral);
  transform-origin: 50% 100%;
  animation: pp-sway 3.6s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -0.45s);
}

.pp-supporters__blooms span:nth-child(3n + 2) { color: var(--pp-peach); }
.pp-supporters__blooms span:nth-child(3n) { color: var(--pp-gold); }

.pp-supporters__bloom-count {
  color: var(--fg-500);
  font-size: 0.88rem;
  font-weight: var(--font-weight-semi-strong);
}

.pp-supporters__tier {
  margin: 26px 0 4px;
  color: var(--fg-200);
  font-family: var(--ff-heading);
  font-size: 1.2rem;
  font-weight: var(--font-weight-heading);
  text-align: center;
}

.pp-supporters__tier span { color: var(--pp-coral); }

.pp-supporters__tier-copy {
  margin: 0 0 14px;
  color: var(--fg-600);
  font-size: 0.88rem;
  text-align: center;
}

.pp-supporters__grid + .pp-supporters__tier { margin-top: 30px; }

.pp-supporter-card {
  animation: pp-bloom 0.55s ease both;
  animation-delay: calc(var(--i, 0) * 70ms);
}

.pp-supporter-card--keeper {
  border-color: color-mix(in srgb, var(--pp-coral) 55%, transparent);
  background:
    radial-gradient(circle 90px at 100% 0%, color-mix(in srgb, var(--pp-gold) 16%, transparent), transparent),
    var(--pp-card-2);
}

.pp-supporter-card--keeper .pp-supporter-card__flower { color: var(--pp-gold); }

.pp-supporter-card__tag {
  position: absolute;
  top: 10px;
  right: 12px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--pp-coral);
  color: #fff;
  font-size: 0.66rem;
  font-weight: var(--font-weight-strong);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

:root:not([data-mode="light"]) .pp-supporter-card__tag { color: var(--fg-inverted); }

@keyframes pp-bloom {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

@keyframes pp-sway {
  0%, 100% { transform: rotate(-6deg); }
  50% { transform: rotate(6deg); }
}

/* ---- Call to action ---- */

.pp-supporters__cta {
  position: relative;
  overflow: hidden;
  padding: clamp(30px, 6vw, 52px) clamp(20px, 6vw, 60px);
  border: 1px solid color-mix(in srgb, var(--pp-coral) 40%, transparent);
  border-radius: var(--layout-border-radius-large);
  background:
    radial-gradient(circle 160px at 92% 100%, color-mix(in srgb, var(--pp-gold) 16%, transparent), transparent),
    linear-gradient(125deg, color-mix(in srgb, var(--pp-coral) 22%, transparent), color-mix(in srgb, var(--pp-peach) 14%, transparent)),
    var(--pp-surface);
  text-align: center;
  box-shadow: var(--box-shadow-m);
}

.pp-supporters__cta-icon {
  display: block;
  margin-bottom: 8px;
  font-size: 2.1rem;
}

.pp-supporters__cta p {
  max-width: 610px;
  margin: 12px auto 22px;
  color: var(--fg-400);
  line-height: 1.75;
}


.pp-supporters__coffee {
  display: inline-block;
  margin: 0 auto 14px !important;
  padding: 7px 16px;
  border: 1px solid var(--pp-rule-strong);
  border-radius: 999px;
  background: var(--pp-chip);
  color: var(--fg-200) !important;
  font-weight: var(--font-weight-semi-strong);
}

.pp-supporters__cta p.pp-supporters__join {
  margin: 0 auto 20px;
  color: var(--primary-500);
  font-family: var(--ff-heading);
  font-size: 1.1rem;
  font-weight: var(--font-weight-semi-strong);
}

.pp-supporters__join span { color: var(--pp-coral); }

/* Same pill button as the story page buttons */
.pp-supporters__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.6rem;
  padding: 0.4rem 1.5rem;
  border: 0;
  border-radius: 999px;
  background: var(--button-primary-background, var(--pp-coral));
  box-shadow: var(--button-box-shadow, 0 2px 0 rgb(0 0 0 / 20%));
  color: #fff !important;
  font-family: var(--ff-heading);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.1;
  text-decoration: none !important;
  transition: transform 0.1s, filter 0.15s;
}

:root:not([data-mode="light"]) .pp-supporters__button { color: var(--fg-100) !important; }

.pp-supporters__button:hover {
  background: var(--button-primary-background-hover, var(--pp-coral));
  filter: brightness(1.05);
}

.pp-supporters__button:active {
  box-shadow: none;
  transform: translateY(1px);
}

.pp-supporters__button:focus-visible {
  outline: 3px solid var(--pp-gold);
  outline-offset: 2px;
}

.pp-supporters__button--disabled {
  opacity: 0.7;
  cursor: default;
}

.pp-supporters__cta small {
  display: block;
  margin-top: 14px;
  color: var(--fg-600);
}

.pp-supporters__cta .pp-supporters__admin-hint { color: var(--fg-400); }

.pp-supporters__signoff {
  margin: 24px 0 0;
  color: var(--fg-500);
  font-family: var(--ff-heading);
  font-size: 1.05rem;
  text-align: center;
}

.pp-supporters__signoff span { color: var(--pp-coral); }

@media (prefers-reduced-motion: reduce) {
  .pp-supporter-card,
  .pp-supporters__button { transition: none; }

  .pp-supporter-card,
  .pp-supporters__blooms span { animation: none; }
}

@media (max-width: 520px) {
  .pp-supporters__thanks { padding: 22px 16px; }
  .pp-supporters__section-heading { gap: 7px; }
}