/* ==========================================================================
   Kiddoo Play School - Global Design System
   Colors are derived from the Kiddoo logo (assets/logo/logo.svg).
   Replace the values below if the official logo introduces a different
   palette - every component references these variables, never raw colors.
   ========================================================================== */

:root {
  /* Brand colors (sampled from the logo) */
  --primary: #E4002B;       /* red - "K" */
  --primary-dark: #B4001F;
  --secondary: #7B2D8B;     /* purple/magenta - "dd" */
  --accent: #FFD400;        /* yellow - cloud badge background */
  --accent-dark: #E6BF00;
  --success-green: #1B7A3D; /* green - dot / ring accents */
  --info-blue: #1C75BC;     /* blue - second eye ring */

  /* Neutrals */
  --background: #FFFDF5;
  --surface: #ffffff;
  --text: #2B2B2B;
  --text-muted: #6B6B6B;
  --border: #EDE6C8;
  --white: #ffffff;

  /* Dark ramp - the footer was previously an untokenized colour island with
     five hardcoded hex values. */
  --dark-surface: #2B2B2B;
  --dark-text: #E8E8E8;
  --dark-text-muted: #C9C9C9;
  --dark-text-subtle: #9A9A9A;
  --dark-border: #3F3F3F;

  /* Feedback banner colours (previously hardcoded in components.css) */
  --success-bg: #E9F6ED;
  --success-text: #14522B;
  --error-bg: #FBE9E9;
  --error-text: #7A1420;

  /* Hero gradient top stop - a light tint of --accent */
  --hero-tint: #FFF7CC;

  /* Soft brand tints. Used as icon-badge and accent-strip backgrounds so the
     six "Why Kiddoo" / six "Activities" cards read as a set of related colours
     rather than six identical yellow circles. */
  --tint-primary: #FFE7EB;
  --tint-secondary: #F4E9F7;
  --tint-accent: #FFF3C4;
  --tint-blue: #E2EFFA;
  --tint-green: #E2F3E9;

  /* Overlay scrim for modals/lightbox */
  --overlay: rgba(20, 15, 5, 0.85);

  /* Wave geometry for the soft section transitions. This is a MASK, not a
     background image - it carries shape only, so the actual colour still comes
     from a token (--background) and no raw hex enters the stylesheet. */
  --wave-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 34' preserveAspectRatio='none'%3E%3Cpath d='M0,0 H1440 V10 C1200,30 960,30 720,18 C480,6 240,6 0,22 Z' fill='%23000'/%3E%3C/svg%3E");

  /* Caption scrim for photos - transparent -> dark, so white text stays
     readable over an unpredictable image. */
  --photo-scrim: linear-gradient(to top, rgba(20, 15, 5, 0.82) 0%, rgba(20, 15, 5, 0.35) 45%, rgba(20, 15, 5, 0) 100%);

  /* Typography */
  --font-heading: "Baloo 2", "Comic Sans MS", "Segoe UI", sans-serif;
  --font-body: "Quicksand", "Segoe UI", Arial, sans-serif;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;

  /* Layout */
  --max-width: 1180px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-xl: 40px;
  /* Shadows are tinted warm-brown rather than neutral grey. On a cream
     (--background) page a grey shadow reads as dirty; a warm one reads as
     depth. Same opacities as before, so nothing gets visually heavier. */
  --shadow-sm: 0 2px 10px rgba(120, 72, 12, 0.08);
  --shadow-md: 0 10px 28px rgba(120, 72, 12, 0.13);
  --shadow-lg: 0 24px 56px rgba(120, 72, 12, 0.16);
  --header-height: 76px;
}

/* Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  color: var(--text);
  background-color: var(--background);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--secondary);
  text-decoration: none;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--text);
  line-height: 1.25;
  margin: 0 0 var(--space-sm);
}

h1 { font-size: clamp(2rem, 4vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
/* h4 previously had no size at all, so the footer column headings rendered at
   body size with no visual hierarchy over the links beneath them. */
h4 { font-size: 1.05rem; letter-spacing: 0.01em; }

p {
  margin: 0 0 var(--space-sm);
  color: var(--text-muted);
}

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.section {
  padding: var(--space-xl) 0;
}

.section--alt {
  background-color: var(--surface);
  position: relative;
}

/* Soft wave transitions where the white .section--alt band meets the cream
   page, replacing two hard horizontal edges. Drawn as pseudo-elements so no
   page's markup has to change. Not clipped by overflow:hidden on the section,
   which would also clip the cards' hover lift and their shadows. */
.section--alt::before,
.section--alt::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 34px;
  background-color: var(--background);
  -webkit-mask: var(--wave-mask) center / 100% 100% no-repeat;
  mask: var(--wave-mask) center / 100% 100% no-repeat;
  pointer-events: none;
}

.section--alt::before {
  top: 0;
}

.section--alt::after {
  bottom: 0;
  transform: rotate(180deg);
}

/* The waves eat into the band, so give it back the height they cover -
   otherwise the first heading sits visibly closer to the top edge than the
   last paragraph does to the bottom. */
.section--alt {
  padding-top: calc(var(--space-xl) + 12px);
  padding-bottom: calc(var(--space-xl) + 12px);
}

.section-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-lg);
}

/* Rendered as a tinted pill rather than bare red caps - it reads as a
   deliberate label above the heading instead of a stray line of small text. */
.section-header .eyebrow {
  display: inline-block;
  color: var(--primary);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.85rem;
  margin-bottom: var(--space-xs);
  background-color: var(--tint-primary);
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
}

.text-center {
  text-align: center;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Lets keyboard users jump past the fixed header + 5 nav items, which are
   otherwise re-tabbed on every single page load. Visible only when focused. */
.skip-link {
  position: absolute;
  left: var(--space-sm);
  top: -100px;
  z-index: 2000;
  padding: 0.75rem 1.25rem;
  background-color: var(--primary);
  color: var(--white);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-family: var(--font-heading);
  font-weight: 600;
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 0;
}

main {
  padding-top: var(--header-height);
}

:focus-visible {
  outline: 3px solid var(--info-blue);
  outline-offset: 2px;
}

/* Respect the OS "reduce motion" preference across every transition and
   animation on the site (hover lifts, card lifts, image zooms, the hero
   crossfade). JS also checks this - see Kiddoo.prefersReducedMotion. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}