/* ==========================================================================
   KWT MOCKTAILS — Zero alcohol. Full flavour. Punchy party energy.
   Lime + magenta + black. Loud, playful, high-contrast.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Nunito:wght@400;600;700&display=swap');

:root {
  --color-primary: #d1104a;         /* magenta */
  --color-primary-dark: #a50d3a;
  --color-accent: #c8e61f;          /* lime */
  --color-surface: #f6fbdd;         /* pale lime band */
  --color-surface-2: #eef7c9;
  --color-text: #17171a;
  --color-muted: #565a3f;
  --color-border: #e4ecc0;
  --font-head: 'Fredoka', system-ui, sans-serif;
  --font-body: 'Nunito', system-ui, sans-serif;
  --radius: 20px;
}

body { background: #fffdf3; }

/* Header — lime tint */
.site-header { background: rgba(246,251,221,0.94); border-bottom: 3px solid #c8e61f; }
.site-nav a:hover { color: var(--color-primary); }

/* Lime band for muted sections */
.section--muted { background: #f2fac7; }

/* Loud titles with lime highlight */
.section__title {
  color: var(--color-primary);
  font-weight: 700;
  font-size: clamp(2rem, 4.5vw, 3rem);
}

/* Hero — lime with big magenta type + confetti dots */
.hero {
  background: radial-gradient(circle at 20% 20%, #d6ee3a, #c8e61f 60%);
  color: #17171a;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(16px 16px at 18% 30%, rgba(209,16,74,0.9), transparent 60%),
    radial-gradient(12px 12px at 82% 24%, rgba(23,23,26,0.85), transparent 60%),
    radial-gradient(20px 20px at 70% 74%, rgba(209,16,74,0.8), transparent 60%),
    radial-gradient(10px 10px at 30% 78%, rgba(23,23,26,0.8), transparent 60%);
  pointer-events: none;
}
.hero__title { color: var(--color-primary); font-weight: 700; letter-spacing: 0.5px; }
.hero__subtitle { color: #2b2b12; opacity: 1; }
.hero__logo { filter: drop-shadow(0 8px 18px rgba(0,0,0,0.2)); }

/* Bouncy colourful cards */
.card {
  border: 3px solid #17171a;
  border-radius: var(--radius);
  box-shadow: 6px 6px 0 rgba(23,23,26,0.9);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover { transform: translate(-3px, -3px); box-shadow: 10px 10px 0 var(--color-primary); }
.card__title { color: var(--color-primary); font-weight: 700; }

/* Punchy pill buttons */
.btn { border-radius: 999px; font-weight: 700; }
.btn--primary { background: var(--color-primary); box-shadow: 0 8px 18px rgba(209,16,74,0.35); }
.btn--primary:hover { background: var(--color-primary-dark); transform: translateY(-2px); }
.btn--ghost { border-color: #17171a; color: #17171a; }
.btn--ghost:hover { background: #17171a; color: var(--color-accent); }

/* Chips */
.chip { background: #fff; border: 2px solid #17171a; color: #17171a; font-weight: 700; }
.chip--accent { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

.brand-back { color: var(--color-primary); font-weight: 700; }

/* Footer — bold black with lime accents */
.site-footer { background: #17171a; color: #dfe6b8; }
.site-footer h4 { color: var(--color-accent); }
.site-footer a { color: #fff; }