/*
Theme Name: Kai à la Mode – Brand Bible
Theme URI: https://example.com/kai-a-la-mode
Author: Bowsong Inc.
Author URI: https://example.com
Description: An online brand bible theme for Kai à la Mode™ — a children's media brand. The palette is scooped straight from Kai himself (a red merle pup: whipped-cream white, caramel swirl, fudge ripple brown, blue-moon eyes, strawberry-red bandana) and from the ice cream parlor his name comes from. Built for kids 4–8 and the grown-ups who read to them.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kai-a-la-mode
Tags: children, education, brand, one-column, custom-colors
*/

/* ============================================================
   1. FLAVOR TOKENS — the Kai à la Mode palette
   Every color is either a part of Kai or a scoop in the case.
   ============================================================ */
:root {
  /* Kai the red merle */
  --whipped-cream: #FFFDF8;   /* Kai's white patches / vanilla base */
  --vanilla-scoop: #FFF4E2;   /* page background, soft-serve vanilla */
  --caramel-swirl: #D9A05B;   /* Kai's light brown merle */
  --toasted-waffle: #B97B3E;  /* waffle cone / deeper caramel */
  --fudge-ripple:  #4A2F23;   /* Kai's dark brown / body text */
  --strawberry-bandana: #E8483F; /* the trademark red bandana */
  --blue-moon: #7CC8E8;       /* Kai's light blue eyes / blue moon scoop */
  --blue-moon-deep: #3FA7D6;
  --mint-chip: #7BD1A0;       /* Calm & growth accents */
  --lemon-sherbet: #FFD97A;   /* Thankful / joy accents */
  --bubblegum: #F7A8C4;       /* Play & friendship accents */

  --radius-scoop: 28px;
  --radius-chip: 999px;
  --shadow-scoop: 0 6px 0 rgba(74, 47, 35, 0.16);
  --font-display: "Baloo 2", "Comic Sans MS", cursive;
  --font-body: "Nunito", "Segoe UI", sans-serif;
}

/* ============================================================
   2. BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--vanilla-scoop);
  color: var(--fudge-ripple);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
}

img { max-width: 100%; height: auto; }

a { color: var(--blue-moon-deep); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--strawberry-bandana); }
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--blue-moon-deep);
  outline-offset: 3px;
  border-radius: 6px;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  color: var(--fudge-ripple);
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(2.4rem, 6vw, 4rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
h3 { font-size: clamp(1.3rem, 2.5vw, 1.6rem); }

p { margin: 0 0 1em; max-width: 68ch; }

.wrap { width: min(1080px, 92%); margin-inline: auto; }

/* ============================================================
   3. HEADER — the parlor sign
   ============================================================ */
.site-header {
  background: var(--whipped-cream);
  border-bottom: 4px dotted var(--caramel-swirl);
  padding: 0.9rem 0;
  position: sticky;
  top: 0;
  z-index: 50;
}

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

.site-logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--fudge-ripple);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.site-logo:hover { color: var(--strawberry-bandana); }
.site-logo .cone { font-size: 1.7rem; }

.site-nav ul {
  list-style: none;
  display: flex;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.site-nav a {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  color: var(--fudge-ripple);
  background: var(--vanilla-scoop);
  border: 2.5px solid var(--fudge-ripple);
  border-radius: var(--radius-chip);
  padding: 0.35rem 0.95rem;
  box-shadow: 0 3px 0 rgba(74,47,35,0.2);
}
.site-nav a:hover {
  background: var(--blue-moon);
  transform: translateY(-2px);
}

/* ============================================================
   4. HERO — the first scoop
   ============================================================ */
.hero {
  background: var(--whipped-cream);
  text-align: center;
  padding: 4.5rem 0 6.5rem;
  position: relative;
}

.hero .kicker {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--toasted-waffle);
  font-size: 1.1rem;
  margin-bottom: 0.4rem;
}

.hero h1 {
  color: var(--strawberry-bandana);
  text-shadow: 3px 3px 0 var(--lemon-sherbet);
  margin-bottom: 0.3em;
}

.hero .tagline {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  font-weight: 600;
  color: var(--blue-moon-deep);
  margin-inline: auto;
}

.hero .blurb { margin-inline: auto; }

/* Kai's palette swatch row */
.kai-swatches {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}
.kai-swatches .swatch {
  width: 72px;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.kai-swatches .swatch span:last-child { min-height: 2.4em; display: grid; place-items: start center; }
.kai-swatches .dot {
  width: 56px; height: 56px;
  border-radius: 50% 50% 46% 54% / 55% 52% 48% 45%; /* hand-scooped, not perfect */
  border: 3px solid var(--fudge-ripple);
  margin: 0 auto 0.35rem;
  box-shadow: var(--shadow-scoop);
}

/* Melting drip divider between sections */
.drip { display: block; width: 100%; height: 44px; margin-top: -1px; }

/* ============================================================
   5. SECTIONS
   ============================================================ */
.section { padding: 3.5rem 0 4rem; }
.section.alt { background: var(--whipped-cream); }

.section-title {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}
.section-title::before { margin-top: 0.32em; }
.section-title::before {
  content: "";
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--strawberry-bandana);
  border: 3px solid var(--fudge-ripple);
  flex: none;
}
.section#modes .section-title::before { background: var(--blue-moon); }
.section#world .section-title::before { background: var(--mint-chip); }
.section#friends .section-title::before { background: var(--bubblegum); }
.section#books .section-title::before { background: var(--lemon-sherbet); }
.section#voice .section-title::before { background: var(--caramel-swirl); }

/* ============================================================
   6. MODE SCOOPS — the signature element
   Each core mode is a scoop sitting on a waffle cone.
   ============================================================ */
.mode-case {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 1.6rem 1.2rem;
  margin-top: 2rem;
}

.mode-scoop {
  text-align: center;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.mode-scoop .scoop {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--scoop, var(--blue-moon));
  border: 3.5px solid var(--fudge-ripple);
  border-radius: var(--radius-scoop) var(--radius-scoop) 14px 14px;
  padding: 1.3rem 1rem 1.1rem;
  box-shadow: var(--shadow-scoop);
  position: relative;
}
.mode-scoop:nth-child(odd) .scoop { transform: rotate(-1.2deg); }
.mode-scoop:nth-child(even) .scoop { transform: rotate(1deg); }

.mode-scoop h3 { margin-bottom: 0.35rem; }
.mode-scoop .learns {
  font-size: 0.92rem;
  font-weight: 700;
  margin: 0;
  color: var(--fudge-ripple);
}

/* the cone under the scoop */
.mode-scoop .cone-tip {
  width: 0; height: 0;
  margin: -2px auto 0;
  border-left: 34px solid transparent;
  border-right: 34px solid transparent;
  border-top: 40px solid var(--toasted-waffle);
  filter: drop-shadow(0 4px 0 rgba(74,47,35,0.15));
}

/* scoop flavors mapped to modes */
.flavor-strawberry { --scoop: #F9B8B2; }
.flavor-bluemoon   { --scoop: #A9DDF3; }
.flavor-mint       { --scoop: #B4E7CB; }
.flavor-lemon      { --scoop: #FFE7A3; }
.flavor-bubblegum  { --scoop: #F9C9DC; }
.flavor-caramel    { --scoop: #EBC393; }
.flavor-vanilla    { --scoop: #FFF3D6; }
.flavor-blueberry  { --scoop: #C9C4F0; }
.flavor-orange     { --scoop: #FFCFA3; }
.flavor-pistachio  { --scoop: #D8E8B0; }

/* ============================================================
   7. CHARACTER CARDS — friends at the parlor counter
   ============================================================ */
.friend-counter {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.4rem;
  margin-top: 2rem;
}

.friend-card {
  background: var(--whipped-cream);
  border: 3.5px solid var(--fudge-ripple);
  border-radius: var(--radius-scoop);
  padding: 1.4rem 1.4rem 1.2rem;
  box-shadow: var(--shadow-scoop);
  border-top: 14px solid var(--flavor, var(--blue-moon));
}
.section.alt .friend-card { background: var(--vanilla-scoop); }

.friend-card .emoji { font-size: 2.4rem; line-height: 1; display: block; margin-bottom: 0.4rem; }
.friend-card .role {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--toasted-waffle);
  margin-bottom: 0.5rem;
}
.friend-card ul { margin: 0; padding-left: 1.2rem; }

/* mode chips inside cards */
.chip-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.8rem; }
.chip {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  background: var(--flavor, var(--blue-moon));
  border: 2.5px solid var(--fudge-ripple);
  border-radius: var(--radius-chip);
  padding: 0.15rem 0.7rem;
}

/* ============================================================
   8. MODE VALLEY MAP LIST
   ============================================================ */
.valley-list {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}
.valley-list li {
  background: var(--whipped-cream);
  border: 3px dashed var(--caramel-swirl);
  border-radius: 18px;
  padding: 1rem 1.2rem;
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
}
.valley-list .pin { font-size: 1.6rem; line-height: 1.3; }
.valley-list strong { font-family: var(--font-display); font-size: 1.1rem; display: block; }
.valley-list .mode-tag { font-weight: 800; color: var(--blue-moon-deep); }

/* ============================================================
   9. BOOKSHELF — first 12 books as spines
   ============================================================ */
.bookshelf {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1rem;
  margin-top: 2rem;
  counter-reset: book;
}
.book {
  background: var(--whipped-cream);
  border: 3px solid var(--fudge-ripple);
  border-left: 12px solid var(--flavor, var(--blue-moon));
  border-radius: 12px;
  padding: 1rem 1.1rem;
  box-shadow: 0 4px 0 rgba(74,47,35,0.14);
}
.book::before {
  counter-increment: book;
  content: "Book " counter(book);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--toasted-waffle);
  display: block;
}
.book h3 { font-size: 1.15rem; margin: 0.15rem 0 0.3rem; }
.book .lesson { font-size: 0.95rem; margin: 0; font-weight: 700; }

/* ============================================================
   10. STORY FORMULA — the recipe card (a real sequence,
   so numbered steps are earned here)
   ============================================================ */
.recipe {
  background: var(--whipped-cream);
  border: 3.5px solid var(--fudge-ripple);
  border-radius: var(--radius-scoop);
  box-shadow: var(--shadow-scoop);
  padding: 1.8rem 1.8rem 1.4rem;
  margin-top: 2rem;
}
.recipe ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
  display: grid;
  gap: 0.9rem;
}
.recipe li {
  counter-increment: step;
  display: flex;
  gap: 0.9rem;
  align-items: center;
}
.recipe li::before {
  content: counter(step);
  font-family: var(--font-display);
  font-weight: 800;
  flex: none;
  width: 2.1rem; height: 2.1rem;
  display: grid; place-items: center;
  background: var(--lemon-sherbet);
  border: 3px solid var(--fudge-ripple);
  border-radius: 50%;
  align-self: center;
}
.recipe strong { font-family: var(--font-display); }

/* ============================================================
   11. CATCHPHRASES — speech scoops
   ============================================================ */
.catchphrases { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.5rem; }
.bubble {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  background: var(--blue-moon);
  border: 3px solid var(--fudge-ripple);
  border-radius: 24px 24px 24px 6px;
  padding: 0.7rem 1.2rem;
  box-shadow: 0 4px 0 rgba(74,47,35,0.18);
}
.bubble.primary { background: var(--strawberry-bandana); color: var(--whipped-cream); font-size: 1.35rem; }

/* ============================================================
   12. WORDPRESS CONTENT DEFAULTS
   ============================================================ */
.entry-content h2, .entry-content h3 { margin-top: 1.6em; }
.entry-content blockquote {
  border-left: 8px solid var(--blue-moon);
  background: var(--whipped-cream);
  margin: 1.5em 0;
  padding: 1em 1.4em;
  border-radius: 0 18px 18px 0;
  font-family: var(--font-display);
}
.wp-block-button__link, .button {
  font-family: var(--font-display);
  font-weight: 700;
  background: var(--strawberry-bandana);
  color: var(--whipped-cream);
  border: 3px solid var(--fudge-ripple);
  border-radius: var(--radius-chip);
  padding: 0.6rem 1.4rem;
  box-shadow: 0 4px 0 rgba(74,47,35,0.25);
  text-decoration: none;
  display: inline-block;
}
.wp-block-button__link:hover, .button:hover { background: var(--blue-moon-deep); color: var(--whipped-cream); }

.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px; width: 1px;
  overflow: hidden;
  position: absolute !important;
}

/* ============================================================
   13. FOOTER — the bottom of the cone
   ============================================================ */
.site-footer {
  background: var(--fudge-ripple);
  color: var(--vanilla-scoop);
  text-align: center;
  padding: 2.5rem 0 2.8rem;
  margin-top: 4rem;
}
.site-footer a { color: var(--blue-moon); }
.site-footer .catch { font-family: var(--font-display); font-size: 1.3rem; margin-bottom: 0.4rem; }
.site-footer p { margin-inline: auto; }

/* ============================================================
   14. MOBILE
   ============================================================ */
@media (max-width: 760px) {
  html { scroll-padding-top: 132px; }
  body { font-size: 1rem; }

  .site-header { padding: 0.6rem 0; }
  .site-header .wrap { justify-content: center; gap: 0.5rem; }
  .site-logo { font-size: 1.25rem; }
  .site-nav ul { justify-content: center; gap: 0.3rem; }
  .site-nav a {
    font-size: 0.85rem;
    padding: 0.25rem 0.7rem;
    box-shadow: 0 2px 0 rgba(74,47,35,0.2);
  }

  .hero { padding: 2.6rem 0 4.6rem; }
  .hero h1 { text-shadow: 2px 2px 0 var(--lemon-sherbet); }
  .kai-swatches { gap: 0.45rem; }
  .kai-swatches .swatch { width: 60px; font-size: 0.66rem; }
  .kai-swatches .dot { width: 46px; height: 46px; }

  .section { padding: 2.6rem 0 3rem; }

  /* two tidy columns of scoops on phones */
  .mode-case { grid-template-columns: repeat(2, 1fr); gap: 1.3rem 0.9rem; }
  .mode-scoop .scoop { padding: 1rem 0.7rem 0.9rem; }
  .mode-scoop h3 { font-size: 1.08rem; }
  .mode-scoop .learns { font-size: 0.82rem; }
  .mode-scoop .cone-tip {
    border-left-width: 26px;
    border-right-width: 26px;
    border-top-width: 32px;
  }

  .friend-counter, .valley-list, .bookshelf { grid-template-columns: 1fr; }
  .recipe { padding: 1.3rem 1.1rem 1.1rem; }
  .bubble { font-size: 1.02rem; }
  .bubble.primary { font-size: 1.15rem; }
  .site-footer { padding: 2rem 0 2.3rem; }
}

@media (max-width: 380px) {
  .mode-case { grid-template-columns: 1fr; }
  .site-nav a { font-size: 0.8rem; }
}


/* ============================================================
   15. LOCK SCREEN — the parlor is members-only
   ============================================================ */
.lock-body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: var(--vanilla-scoop);
}
.lock-card {
  width: min(430px, 100%);
  background: var(--whipped-cream);
  border: 3.5px solid var(--fudge-ripple);
  border-radius: var(--radius-scoop);
  box-shadow: var(--shadow-scoop);
  padding: 2rem 1.8rem 1.8rem;
  text-align: center;
}
.lock-card .cone { font-size: 2.6rem; display: block; margin-bottom: 0.4rem; }
.lock-card h1 { font-size: 1.9rem; color: var(--strawberry-bandana); text-shadow: 2px 2px 0 var(--lemon-sherbet); }
.lock-card p { margin-inline: auto; }
.lock-card form { display: grid; gap: 0.8rem; margin-top: 1.2rem; }
.lock-card input[type="password"] {
  font: 700 1.05rem var(--font-body);
  color: var(--fudge-ripple);
  background: var(--vanilla-scoop);
  border: 3px solid var(--fudge-ripple);
  border-radius: var(--radius-chip);
  padding: 0.65rem 1.1rem;
  text-align: center;
}
.lock-card input[type="password"]:focus-visible { outline: 3px solid var(--blue-moon-deep); outline-offset: 2px; }
.lock-card button {
  font: 700 1.1rem var(--font-display);
  background: var(--strawberry-bandana);
  color: var(--whipped-cream);
  border: 3px solid var(--fudge-ripple);
  border-radius: var(--radius-chip);
  padding: 0.65rem 1.2rem;
  cursor: pointer;
  box-shadow: 0 4px 0 rgba(74,47,35,0.25);
}
.lock-card button:hover { background: var(--blue-moon-deep); }
.lock-error {
  background: #FBE3E1;
  border: 2.5px solid var(--strawberry-bandana);
  border-radius: 12px;
  padding: 0.5rem 0.9rem;
  font-weight: 700;
}