/* ==========================================================================
   CiaraApp landing page
   --------------------------------------------------------------------------
   The design system here is lifted from the app itself, not invented. The app
   hardcodes its colours inline per screen, so these values are the ones that
   actually ship (constants/theme.ts has drifted and is unused).

   The five rules that make it read as the same product:
     1. Section backgrounds are flat saturated hues. Never a gradient.
     2. Fredoka Bold for every heading and button. Schoolbell for all body copy.
     3. Surfaces are a lighter tint of the section hue, radius 28-32px, with a
        1px translucent border and NO box-shadow.
     4. Buttons are full pills, 80px tall. The one gradient allowed is a 135deg
        two-stop of the section hue, darker (that is the app's "Ready" button).
     5. The single hard shadow in the app is the home screen's category card:
        a 5px offset with no blur. Reproduced on .cat-card.
   ========================================================================== */

/* ---------------------------------------------------------------- fonts ---
   Self-hosted from the app's own TTFs. No Google Fonts request: exact visual
   parity with the app, and no third-party connection on a children's site. */
@font-face {
  font-family: 'Fredoka';
  src: url('fonts/Fredoka-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Schoolbell';
  src: url('fonts/Schoolbell-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------- tokens --- */
:root {
  /* brand */
  --brand-purple: #3d35e6; /* app/index.tsx splash background */
  --brand-lime: #c5eb85; /* logo.svg fill */
  --brand-orange: #f29559; /* app/home.tsx background */
  --brand-teal: #41a4ab; /* app/animals.tsx */
  --brand-sand: #e9e0a2; /* app/colors.tsx */
  --brand-indigo: #6757a5; /* app/onboarding2.tsx */
  --brand-lime-bg: #d4e137; /* french */
  --card-purple: #7000ff; /* home card titles */
  --card-shadow: rgba(184, 92, 40, 0.65); /* home hard offset shadow */

  /* text */
  --ink: #000;
  --ink-soft: #2e2718;
  --on-dark: #fff;
  --on-dark-soft: #edebff;
  --btn-label: #4b2838; /* the app's most consistent token, 9 screens */

  /* shape */
  --r-pill: 9999px;
  --r-lg: 32px;
  --r-md: 28px;
  --hairline: 1px solid rgba(0, 0, 0, 0.14);
  --hairline-light: 1px solid rgba(255, 255, 255, 0.34);

  /* type scale, fluid */
  --fs-h1: clamp(2.1rem, 1.35rem + 3.4vw, 3.9rem);
  --fs-h2: clamp(1.65rem, 1.25rem + 1.7vw, 2.5rem);
  --fs-h3: clamp(1.2rem, 1.08rem + 0.5vw, 1.45rem);
  --fs-body: clamp(1.05rem, 1rem + 0.25vw, 1.2rem);
  --fs-small: 0.95rem;

  --pad-x: clamp(1.25rem, 0.6rem + 3vw, 3rem);
  --section-y: clamp(3.5rem, 2rem + 6vw, 6.5rem);

  /* The app has no dark mode; this page commits to one deliberate look, so stop
     browsers from auto-inverting it. */
  color-scheme: only light;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  font-family: 'Schoolbell', 'Comic Sans MS', cursive, sans-serif;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--ink);
  background: var(--brand-purple);
  /* Nothing may cause a horizontal page scrollbar. */
  overflow-x: hidden;
}

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

h1,
h2,
h3 {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.15;
  margin: 0;
}

p {
  margin: 0;
}

a {
  color: inherit;
}

/* ------------------------------------------------------------- skip link --- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--brand-lime);
  color: var(--ink);
  font-family: 'Fredoka', sans-serif;
  border-radius: 0 0 var(--r-md) 0;
}
.skip-link:focus {
  left: 0;
}

/* --------------------------------------------------------------- layout --- */
.section {
  padding: var(--section-y) var(--pad-x);
}

.wrap {
  max-width: 1120px;
  margin: 0 auto;
}

.eyebrow {
  font-family: 'Fredoka', sans-serif;
  font-size: var(--fs-small);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.72;
  margin-bottom: 0.75rem;
}

.section-head {
  max-width: 46ch;
  margin-bottom: clamp(2rem, 1rem + 3vw, 3.25rem);
}

.section-head h2 {
  font-size: var(--fs-h2);
  margin-bottom: 0.85rem;
}

/* -------------------------------------------------------------- buttons ---
   The app's pill: 80px tall, radius 40 (i.e. fully round), 1.2px translucent
   border, label in Fredoka at 26px / #4B2838. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 80px;
  padding: 0 2.25rem;
  border-radius: var(--r-pill);
  border: 1.2px solid rgba(0, 0, 0, 0.3);
  background: transparent;
  color: var(--btn-label);
  font-family: 'Fredoka', sans-serif;
  font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.5rem);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s ease, filter 0.12s ease;
}

.btn:hover {
  transform: translateY(-2px);
}
.btn:active {
  transform: translateY(0);
}

.btn:focus-visible {
  outline: 3px solid var(--brand-lime);
  outline-offset: 3px;
}

/* Primary = the app's gradient "Ready" button: 135deg, same hue two stops darker. */
.btn-primary {
  background-image: linear-gradient(135deg, #8f83c5, #45387d);
  border-color: rgba(0, 0, 0, 0.2);
  color: #fff;
}

/* Secondary = the frosted-glass fill used on saturated backgrounds. */
.btn-ghost {
  background: rgba(255, 255, 255, 0.4);
  border-color: rgba(255, 255, 255, 0.45);
  color: var(--btn-label);
}

.btn-on-dark {
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}

.btn[aria-disabled='true'] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ----------------------------------------------------------------- hero ---
   Reproduces the app's splash screen: the lime wordmark on brand purple. */
.hero {
  background: var(--brand-purple);
  color: var(--on-dark);
  padding-top: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  position: relative;
  overflow: hidden;
}

.hero-grid {
  display: grid;
  gap: clamp(2.5rem, 1rem + 5vw, 4.5rem);
  align-items: center;
}

@media (min-width: 900px) {
  .hero-grid {
    grid-template-columns: 1.15fr 0.85fr;
  }
}

.logo {
  width: clamp(180px, 40vw, 260px);
  height: auto;
  margin-bottom: clamp(1.75rem, 1rem + 2vw, 2.75rem);
}

.logo path {
  fill: var(--brand-lime);
}

.hero h1 {
  font-size: var(--fs-h1);
  margin-bottom: 1.15rem;
}

.hero h1 em {
  font-style: normal;
  color: var(--brand-lime);
}

.hero-sub {
  font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  color: var(--on-dark-soft);
  max-width: 42ch;
  margin-bottom: 2.25rem;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.cta-note {
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.7);
}

/* The mascot, floating free on the background -- the app never frames an
   illustration in a card. */
.hero-art {
  display: flex;
  justify-content: center;
}

.hero-art img {
  width: clamp(190px, 46vw, 300px);
  height: auto;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.3));
}

/* ----------------------------------------------------- categories (grid) --- */
.categories {
  background: var(--brand-orange);
  color: var(--ink);
}

.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: clamp(1rem, 0.5rem + 1.4vw, 1.6rem);
}

/* app/home.tsx: white pill card, purple Fredoka title, and a hard burnt-orange
   offset shadow with no blur (faked in the app with an absolute sibling View). */
.cat-card {
  background: #fff;
  border: 2px solid #fff;
  border-radius: var(--r-lg);
  padding: 1.4rem 1.6rem;
  box-shadow: -2px 5px 0 var(--card-shadow);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.cat-card h3 {
  font-size: var(--fs-h3);
  color: var(--card-purple);
}

.cat-card span {
  font-size: var(--fs-small);
  color: #6b5a4d;
}

/* ------------------------------------------------------------- features --- */
.features {
  background: var(--brand-teal);
  color: var(--ink);
}

.feature {
  display: grid;
  gap: clamp(1.5rem, 0.75rem + 3vw, 3.5rem);
  align-items: center;
  padding: clamp(1.75rem, 1rem + 2vw, 2.75rem) 0;
}

@media (min-width: 820px) {
  .feature {
    grid-template-columns: 280px 1fr;
  }
  .feature:nth-child(even) {
    grid-template-columns: 1fr 280px;
  }
  .feature:nth-child(even) .feature-art {
    order: 2;
  }
}

/* Fixed image well, contain, no frame -- matches the app's 240-280px wells. */
.feature-art {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

.feature-art img {
  max-height: 260px;
  width: auto;
  object-fit: contain;
}

.feature-body h3 {
  font-size: var(--fs-h2);
  margin-bottom: 0.75rem;
}

.feature-body p {
  max-width: 48ch;
  color: var(--ink-soft);
}

/* -------------------------------------------------------------- colours --- */
.colours {
  background: var(--brand-sand);
}

.swatches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 0.65rem;
}

.swatch {
  border-radius: 20px;
  aspect-ratio: 1;
  display: flex;
  align-items: flex-end;
  padding: 0.6rem;
  border: var(--hairline);
  font-family: 'Fredoka', sans-serif;
  font-size: 0.82rem;
}

/* ----------------------------------------------------------- get it two --- */
.get {
  background: var(--brand-indigo);
  color: var(--on-dark);
}

.get .section-head h2,
.get .section-head p {
  color: var(--on-dark);
}

.get-grid {
  display: grid;
  gap: clamp(1.25rem, 0.5rem + 2vw, 2rem);
}

@media (min-width: 860px) {
  .get-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Frosted surface, hairline border, no shadow -- the app's card idiom. */
.get-card {
  background: rgba(255, 255, 255, 0.14);
  border: var(--hairline-light);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  display: flex;
  flex-direction: column;
}

.get-card h3 {
  font-size: var(--fs-h3);
  margin-bottom: 0.6rem;
}

.get-card > p {
  color: var(--on-dark-soft);
  margin-bottom: 1.25rem;
}

.get-card .btn {
  align-self: flex-start;
  margin-bottom: 1.1rem;
}

.get-meta {
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.72);
  margin-top: auto;
}

.steps {
  margin: 0 0 1.1rem;
  padding-left: 1.35rem;
  font-size: var(--fs-small);
  color: var(--on-dark-soft);
}

.steps li + li {
  margin-top: 0.4rem;
}

.callout {
  border-left: 3px solid var(--brand-lime);
  padding: 0.15rem 0 0.15rem 0.9rem;
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.8);
}

/* --------------------------------------------------------------- privacy --- */
.privacy {
  background: var(--brand-lime-bg);
}

/* The analytics disclosure. .callout is white-on-dark elsewhere; on the lime
   section it needs the ink tokens instead. */
.privacy-note {
  margin-top: clamp(1.25rem, 0.75rem + 1.5vw, 2rem);
  border-left-color: var(--brand-purple);
  color: var(--ink-soft);
  max-width: 62ch;
}

.privacy-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 0.9rem;
}

.privacy-list li {
  background: rgba(255, 255, 255, 0.55);
  border: var(--hairline);
  border-radius: var(--r-md);
  padding: 1.1rem 1.35rem;
}

.privacy-list strong {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  display: block;
  margin-bottom: 0.2rem;
}

/* ---------------------------------------------------------------- footer --- */
.footer {
  background: var(--brand-purple);
  color: rgba(255, 255, 255, 0.72);
  padding: clamp(2.5rem, 1.5rem + 3vw, 4rem) var(--pad-x);
  font-size: var(--fs-small);
}

.footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  align-items: center;
}

.footer a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer a:hover {
  color: var(--brand-lime);
}