/* ==========================================================================
   PLEAZERS — Bold, fruity, party energy.
   Forest green + coral pop + sunshine yellow. Rounded, playful, alive.
   Layered on top of main.css (loads after, overrides freely).
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Nunito:wght@400;600;700&display=swap');

:root {
  --color-primary: #178a4e;
  --color-primary-dark: #0e5c33;
  --color-accent: #ff6b45;          /* coral pop */
  --color-surface: #eaf6ee;         /* soft mint band */
  --color-surface-2: #d6efdd;
  --color-text: #14321f;
  --color-muted: #4c6b57;
  --color-border: #cfe8d5;
  --pz-yellow: #ffcf3f;
  --font-head: 'Baloo 2', system-ui, sans-serif;
  --font-body: 'Nunito', system-ui, sans-serif;
  --radius: 22px;
}

body { background: #f3fbf5; }

/* Header — fresh minty tint */
.site-header {
  background: rgba(234, 246, 238, 0.92);
  border-bottom: 2px solid #cfe8d5;
}
.site-nav a:hover { color: var(--color-accent); }

/* Alternating colour bands */
.section--muted {
  background: linear-gradient(180deg, #eaf6ee, #dff2e5);
}

/* Big, bouncy section titles with a coral underline flourish */
.section__title {
  color: var(--color-primary-dark);
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 2.75rem);
  position: relative;
  display: inline-block;
}
.section__title::after {
  content: "";
  display: block;
  width: 64px; height: 6px;
  margin-top: 0.5rem;
  border-radius: 999px;
  background: var(--color-accent);
}

/* Hero — juicy green gradient with floating fruit-blobs */
.hero--photo::before {
  background: linear-gradient(130deg, rgba(14,92,51,0.9), rgba(23,138,78,0.55));
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(140px 140px at 12% 22%, rgba(255,207,63,0.35), transparent 70%),
    radial-gradient(180px 180px at 88% 78%, rgba(255,107,69,0.32), transparent 70%);
  pointer-events: none;
}
.hero__title { font-weight: 800; text-shadow: 0 4px 20px rgba(0,0,0,0.25); }

/* Playful cards that lift on hover */
.card {
  border: none;
  border-radius: var(--radius);
  box-shadow: 0 12px 28px rgba(14,92,51,0.14);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(14,92,51,0.22); }
.card__title { color: var(--color-primary-dark); font-weight: 700; }

/* Pill buttons with pop */
.btn { border-radius: 999px; }
.btn--primary {
  background: var(--color-accent);
  box-shadow: 0 8px 18px rgba(255,107,69,0.4);
}
.btn--primary:hover { background: #e85630; transform: translateY(-2px); }
.btn--ghost { border-color: #fff; color: #fff; }
.btn--ghost:hover { background: #fff; color: var(--color-primary-dark); }

/* Chips as candy pills */
.chip {
  background: #fff;
  border: 2px solid var(--color-primary);
  color: var(--color-primary-dark);
  font-weight: 700;
}
.chip--accent { background: var(--pz-yellow); border-color: var(--pz-yellow); color: #3d2a00; }

.brand-back { color: var(--color-accent); font-weight: 700; }

/* Footer — deep green */
.site-footer { background: #0e5c33; color: #d7f0df; }
.site-footer h4 { color: #fff; }
.site-footer a { color: #fff; }
