/* =========================================================
   Baloo Publishing — Design Tokens (v2)
   Rebuilt around the official Brand Guidelines PDF:
   white-first, clean, Coco-Wyo-style breathing room.
   Navy / Red / Yellow are ACCENTS ONLY — not backgrounds.

   Typography: Montserrat is the brand's locked system font
   (body + most headings, per the guidelines). Dreamy Bubble —
   the real Silly Squad cover font, self-hosted below — is used
   ONLY as a sparing accent for playful, series-specific moments
   (hero word "Silly Squad", book-series callouts). It's a
   display face, not built for paragraphs, so it never touches
   body copy.
   ========================================================= */

@font-face {
  font-family: 'Dreamy Bubble';
  src: url('assets/fonts/Dreamy_Bubble.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --white: #FFFFFF;
  --navy: #0D2B6B;
  --navy-ink: #0A2054;
  --red: #CC1A1A;
  --red-dark: #A81414;
  --yellow: #FFE000;
  --yellow-dark: #E6C900;

  --paper: #FFFFFF;
  --surface: #F7F8FB;
  --line: #E7E9F0;
  --text: #171923;
  --text-muted: #6B7080;

  --font-body: 'Montserrat', system-ui, sans-serif;
  --font-playful: 'Dreamy Bubble', 'Montserrat', sans-serif;

  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --max-width: 1120px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }

body {
  margin: 0;
  overflow-x: hidden;
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--text);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-body);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 .45em;
  color: var(--navy);
}

.font-playful { font-family: var(--font-playful); font-weight: normal; letter-spacing: .01em; }

p { margin: 0 0 1em; }
a { color: inherit; }
img { max-width: 100%; display: block; }

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  padding-bottom: 12px;
}
/* Logo is real text, not an image — matches the brand guidelines exactly
   (Montserrat Bold "BALOO" + Montserrat Regular "PUBLISHING", stacked).
   Solves transparency/cropping/sizing problems permanently since it's
   always crisp at any size and any color, no raster file involved. */
.logo-mark { display: flex; align-items: center; text-decoration: none; }
.logo-text {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 24.64px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--text);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.logo-text .logo-baloo {
  display: inline-block;
  white-space: nowrap;
}
.logo-text .logo-sub {
  display: inline-block;
  font-weight: 600;
  font-size: 0.52em;
  letter-spacing: 0.04em;
  margin-top: 1px;
  color: var(--text);
  transform-origin: left;
  white-space: nowrap;
}
footer.site-footer .logo-text,
footer.site-footer .logo-text .logo-sub {
  color: var(--white);
}
footer.site-footer .logo-text { font-size: 24px; }

nav.primary-nav { display: none; }
nav.primary-nav a {
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
  margin-left: 30px;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
}
nav.primary-nav a:hover,
nav.primary-nav a.active {
  color: var(--navy);
  border-bottom-color: var(--red);
}
.menu-btn {
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: var(--radius-sm);
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.menu-btn span, .menu-btn span::before, .menu-btn span::after {
  content: ''; display: block;
  width: 18px; height: 2px;
  background: var(--navy);
  border-radius: 2px;
  position: relative;
}
.menu-btn span::before { position: absolute; top: -6px; }
.menu-btn span::after { position: absolute; top: 6px; }

.mobile-nav {
  display: none;
  flex-direction: column;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.mobile-nav.open { display: flex; }
.mobile-nav a {
  padding: 16px 20px;
  text-decoration: none;
  font-weight: 600;
  font-size: 17px;
  color: var(--text);
  border-top: 1px solid var(--line);
}

@media (min-width: 820px) {
  nav.primary-nav { display: flex; align-items: center; }
  .menu-btn { display: none; }
  .mobile-nav { display: none !important; }
}

/* ---------- More from Us dropdown (desktop) ---------- */
.nav-dropdown { position: relative; display: inline-flex; align-items: center; }
.nav-dropdown-trigger { display: inline-flex; align-items: center; gap: 4px; }
.nav-dropdown-trigger .chevron { display: none; }
.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 6px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(13,43,107,.08);
  padding: 8px;
  min-width: 210px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
  z-index: 50;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown-menu:hover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
nav.primary-nav .nav-dropdown-menu a {
  display: block;
  margin-left: 0;
  padding: 10px 12px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  color: var(--text);
  border-bottom: none;
  border-radius: var(--radius-sm);
  text-decoration: none;
}
nav.primary-nav .nav-dropdown-menu a:hover {
  background: var(--surface);
  color: var(--navy);
  border-bottom: none;
}

/* ---------- More from Us submenu (mobile) ---------- */
.mobile-nav-row {
  display: flex;
  align-items: stretch;
  border-top: 1px solid var(--line);
}
.mobile-nav-row a { border-top: none; flex: 1; }
.mobile-nav-chevron {
  background: none;
  border: none;
  padding: 0 20px;
  cursor: pointer;
  font-size: 30px;
  color: var(--text-muted);
  transition: transform .15s ease;
}
.mobile-nav-chevron.open { transform: rotate(180deg); }
.mobile-submenu {
  max-height: 0;
  overflow: hidden;
  background: var(--surface);
  transition: max-height .2s ease;
}
.mobile-submenu.open { max-height: 220px; }
.mobile-submenu a {
  display: block;
  padding: 13px 20px 13px 32px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  color: var(--text);
  text-decoration: none;
  border-top: 1px solid var(--line);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
  border: none;
  border-radius: 999px;
  padding: 15px 30px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:active { transform: scale(.97); }
.btn-red { background: var(--red); color: var(--white); }
.btn-red:hover { background: var(--red-dark); }
.btn-navy { background: var(--navy); color: var(--white); }
.btn-yellow { background: var(--yellow); color: var(--navy-ink); }
.btn-outline { background: var(--white); color: var(--navy); border: 1.5px solid var(--navy); }
.btn-outline:hover { background: var(--navy); color: var(--white); }
.btn-block { width: 100%; }

/* ---------- Hero ---------- */
.hero { padding: 56px 0 20px; text-align: center; }
.hero .eyebrow {
  display: inline-block;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--red);
  background: #FDEAEA;
  border-radius: 999px;
  padding: 7px 16px;
  margin-bottom: 20px;
}
.hero h1 { font-size: 38px; margin-bottom: 16px; }
.accent { color: var(--red); }
.hero p.sub {
  font-size: 18px;
  color: var(--text-muted);
  max-width: 46ch;
  margin: 0 auto 30px;
}

/* ---------- Hero photo (real photography goes here) ---------- */
.hero-photo {
  aspect-ratio: 4 / 5;
  width: 100%;
  max-width: 100%;
  margin: 0 auto 36px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
@media (min-width: 900px) {
  .hero-photo {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 2 / 1;
    height: auto;
    margin-left: 0;
    margin-right: 0;
  }
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.hero-photo .placeholder-note {
  font-size: 13px;
  font-weight: 700;
  color: #9AA0B4;
  text-align: center;
  padding: 24px;
  line-height: 1.5;
}
.hero-intro {
  max-width: 60ch;
  margin: 0 auto 34px;
}
.hero-intro h2 {
  font-size: 24px;
  margin-bottom: 12px;
}
.hero-intro p {
  font-size: 16px;
  color: var(--text-muted);
}
.lead-in-center {
  text-align: center;
  font-weight: 700;
  font-size: 18px;
  color: var(--navy);
  margin: 0 0 20px;
}
.freebie-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  max-width: 440px;
  margin: 0 auto 36px;
  align-items: stretch;
}
.freebie-preview {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 220px;
}
.freebie-preview img { width: 100%; height: 100%; object-fit: cover; }
.freebie-preview .placeholder-note { font-size: 13px; padding: 20px; text-align: center; color: #9AA0B4; font-weight: 700; }
@media (min-width: 760px) {
  .freebie-row { grid-template-columns: 1fr 1fr; max-width: 920px; }
}



/* ---------- Reveal effect: line art -> colored ----------
   Desktop: hover triggers a slow gradient wipe reveal.
   Mobile/touch: same wipe, auto-looping on its own, slow and continuous.
   Sized to match the freebie-row width at each breakpoint exactly. ---------- */
.reveal-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  max-width: 440px;
  margin: 0 auto 8px;
}
@media (min-width: 760px) {
  .reveal-grid { grid-template-columns: 1fr 1fr; max-width: 920px; margin-top: -12.5px; }
}
.reveal-caption {
  text-align: center;
  font-weight: 700;
  font-size: 18px;
  color: var(--navy);
  margin-bottom: 12px;
}
.reveal-box {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.reveal-box img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Hybrid approach: a TRUE mask-image radial-gradient (real smooth alpha
   falloff, not a blurred stack of clipped copies -- that previous approach
   was blurring the actual artwork's own edges, which echoes the heart/
   sheep/character outlines at each layer boundary as faint colored bands.
   That's what was reading as "rainbow rings" -- more layers or more blur
   was never going to fix it, because it was never a real gradient.
   mask-image gives a genuine continuous fade. It's used ONLY for the
   growing/shrinking motion here, where it has never actually caused
   problems -- the flicker was always specifically the STATIC HOLD.
   For the hold, we switch to the simplest possible "fully shown" state:
   no mask, no clip-path, nothing controlling visibility at all, just a
   plain image at full opacity. Can't get more static/robust than that. */
/* Growth: unchanged, this is the part that's been confirmed working well
   (fade quality, tempo, dust sync) -- bottom-left to top-right traveling
   reveal via a true mask-image gradient.
   Hold: unchanged, mask removed entirely, plain static full-opacity image.
   Retreat: SIMPLIFIED. Instead of animating the mask back through the
   same diagonal path in reverse (which requires the shrink to visually
   mirror the grow's exact geometry -- a much harder thing to get right,
   and the source of repeated bugs), the retreat is now just a plain
   uniform opacity fade of the whole revealed image. No path to retrace,
   no direction to get backwards. Simpler, and much more likely to be
   reliable everywhere. */
/* Growth: switched from a traveling/growing CIRCLE to a true LINEAR
   diagonal sweep. The circle approach could "un-reveal" areas as its
   center moved away from them, and didn't guarantee strictly diagonal
   ordering. A linear-gradient mask, animated by shifting its own stop
   percentages, is monotonic by construction (the revealed region only
   ever grows toward one direction, nothing can go backward) and its
   completion is exact -- the gradient's black stop reaches literally
   100% at the end, so there's no near-miss "pop" at the finish.

   IMPORTANT: animating between full gradient() strings at only 5
   keyframe stops does NOT interpolate smoothly in browsers -- each
   keyframe is a discrete value, so it visibly jumps from one to the
   next and holds ("stalls") in between. Fixed by registering a real
   animatable <number> via @property, then building the gradient from
   that number with calc(). The browser now animates one continuous
   number every frame, and the gradient recalculates from it live --
   truly smooth, not 4 discrete steps.

   Hold: unchanged, mask removed entirely, plain static full-opacity image.
   Retreat: unchanged, plain uniform opacity fade. */
@property --sweep {
  syntax: '<number>';
  inherits: false;
  initial-value: -45;
}
.reveal-box.is-growing img.reveal-colored,
.reveal-box.is-shrinking img.reveal-colored {
  will-change: mask-image, -webkit-mask-image, opacity;
}
.reveal-box img.reveal-colored {
  --sweep: -45;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-image: linear-gradient(to top right, black calc(var(--sweep) * 1%), transparent calc(var(--sweep) * 1% + 45%));
  mask-image: linear-gradient(to top right, black calc(var(--sweep) * 1%), transparent calc(var(--sweep) * 1% + 45%));
  opacity: 1;
}
.reveal-box.is-full img.reveal-colored {
  -webkit-mask-image: none;
  mask-image: none;
  opacity: 1;
}
@keyframes reveal-grow-once {
  from { --sweep: -45; }
  to   { --sweep: 100; }
}
.reveal-box.is-growing img.reveal-colored {
  animation: reveal-grow-once 4.5s linear forwards;
}
.reveal-box.is-shrinking img.reveal-colored {
  -webkit-mask-image: none;

  mask-image: none;
  opacity: 0;
  transition: opacity 1.5s ease;
}
/* ---------- Dust particles: the actual "magic" ingredient ----------
   Small glowing white dots (not colored emoji) that twinkle in a dense,
   staggered trail along the same bottom-left -> top-right sweep as the
   color, timed to the same .is-growing window on both desktop and mobile
   now (previously these used separate hover/no-hover timing systems). */
.dust {
  position: absolute;
  width: var(--sz);
  height: var(--sz);
  background: #fff;
  clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
  -webkit-clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
  filter: drop-shadow(0 0 4px rgba(255,255,255,.9));
  opacity: 0;
  transform: scale(0.2);
  pointer-events: none;
  z-index: 2;
}
@keyframes dust-twinkle {
  0%   { opacity: 0; transform: scale(0.2); }
  35%  { opacity: 1; transform: scale(1.3); }
  100% { opacity: 0; transform: scale(0.35); }
}
.reveal-box.is-growing .dust {
  animation: dust-twinkle 0.5s ease var(--d) 1;
}

/* ---------- Freebie capture form ---------- */
.capture-card {
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 12px 32px rgba(13,43,107,.08);
  border-radius: var(--radius-lg);
  padding: 28px 22px;
  max-width: 440px;
  margin: 0 auto;
  text-align: left;
}
.capture-card h2 { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
.capture-card .fine {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 10px;
  text-align: center;
}
.field {
  display: block;
  width: 100%;
  font-family: var(--font-body);
  font-size: 16px;
  padding: 14px 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  background: var(--surface);
}
.field:focus {
  outline: 2px solid var(--red);
  outline-offset: 1px;
  border-color: var(--red);
}
.form-success {
  display: none;
  font-weight: 400;
  font-size: 15px;
  color: var(--text-muted);
  padding: 10px 0 0;
}

/* ---------- Sections ---------- */
.section { padding: 52px 0; }
.section-head { text-align: center; margin-bottom: 32px; }
.section-head h2 { font-size: 27px; }
.section-head p { color: var(--text-muted); max-width: 50ch; margin: 0 auto; }

.surface-section { background: var(--surface); }
.navy-section { background: var(--navy); color: var(--white); }
.navy-section h2 { color: var(--white); }
.navy-section p { color: rgba(255,255,255,.75); }

/* ---------- Category tiles (home) ---------- */
.tile-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 640px) { .tile-grid { grid-template-columns: 1fr 1fr; } }
.tile-grid-3 { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 640px) { .tile-grid-3 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .tile-grid-3 { grid-template-columns: 1fr 1fr 1fr; } }
.tile {
  display: block;
  text-decoration: none;
  color: var(--text);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 24px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.tile:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(13,43,107,.08); }
.tile .tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--navy-ink);
  background: var(--yellow);
  border-radius: 999px;
  padding: 4px 12px;
  margin-bottom: 12px;
}
.tile h3 { font-size: 20px; margin-bottom: 6px; }
.tile p { font-size: 15px; color: var(--text-muted); margin: 0; }

/* ---------- Book cards ---------- */
.book-grid { display: grid; grid-template-columns: 1fr; gap: 22px; }
@media (min-width: 560px) { .book-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .book-grid { grid-template-columns: 1fr 1fr 1fr; } }
.book-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .12s ease;
}
.book-card:hover { box-shadow: 0 10px 26px rgba(13,43,107,.09); }
.book-card .cover {
  aspect-ratio: 1 / 1;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.book-card .cover img { width: 100%; height: 100%; object-fit: cover; }
.book-card .cover.placeholder {
  font-family: var(--font-body);
  font-weight: 700;
  color: #A7ADBD;
  font-size: 13px;
  text-align: center;
  padding: 16px;
  border: 1.5px dashed #D6D9E3;
  margin: 14px;
  border-radius: var(--radius-sm);
  aspect-ratio: auto;
  width: calc(100% - 28px);
  height: calc(100% - 28px);
}
.book-card .body { padding: 18px; flex: 1; display: flex; flex-direction: column; }
.book-card h3 { font-size: 18px; margin-bottom: 6px; }
.book-card p.desc { font-size: 14px; color: var(--text-muted); flex: 1; }
.book-card .btn { margin-top: 14px; font-size: 14px; padding: 12px 20px; }
.book-card .amazon-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #9AA0B4;
  margin: 14px 0 8px;
}
.country-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.country-btns a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  color: var(--navy);
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 7px 14px;
  transition: background .12s ease, color .12s ease;
}
.country-btns a:hover { background: var(--navy); color: var(--white); }
.badge-soon {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  background: var(--navy);
  color: var(--white);
  border-radius: 999px;
  padding: 4px 12px;
  margin-bottom: 8px;
  width: fit-content;
}

/* ---------- Toggle (adults/kids) ---------- */
.toggle-group {
  display: inline-flex;
  background: var(--surface);
  border-radius: 999px;
  padding: 4px;
  margin: 0 auto 34px;
}
.toggle-group button {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  border-radius: 999px;
  padding: 11px 22px;
  cursor: pointer;
}
.toggle-group button.active { background: var(--navy); color: var(--white); }
.toggle-wrap { text-align: center; }

/* ---------- Footer ---------- */
footer.site-footer {
  background: var(--navy);
  color: var(--white);
  padding: 44px 0 30px;
  margin-top: 20px;
}
footer.site-footer .cols { display: grid; gap: 26px; margin: 28px 0; }
@media (min-width: 640px) { footer.site-footer .cols { grid-template-columns: 1fr 1fr; max-width: 420px; } }
footer.site-footer h4 {
  font-family: var(--font-body);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 12px;
  color: var(--yellow);
}
footer.site-footer a { color: var(--white); text-decoration: none; opacity: .85; }
footer.site-footer .logo-mark { opacity: 1; }
footer.site-footer p { opacity: .8; font-size: 14px; }
footer.site-footer ul { list-style: none; padding: 0; margin: 0; }
footer.site-footer li { margin-bottom: 9px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.15);
  padding-top: 18px;
  font-size: 13px;
  opacity: .65;
}

/* ---------- Utility ---------- */
.center { text-align: center; }
.small { font-size: 14px; }