/* ============================================================================
   STORYBOOK THEME  (from mockup #69 - children's picture-book look)
   ----------------------------------------------------------------------------
   A re-skin layered ON TOP of style.css. Scoped to `body.theme-storybook`
   so it can be rolled out page-by-page (home first). Most of the re-skin is
   done by overriding the site's design tokens (the components already read
   them), plus a few storybook flourishes: a sky+hills+sun hero scene, chunky
   "stacked" drop-shadows, rounded pill nav, and the Baloo 2 / Fredoka /
   Quicksand type system.
   Load AFTER style.css / cart.css / birdhouses.css.
   ============================================================================ */

body.theme-storybook {
  /* ---- palette (warm picture-book) ---- */
  --bg:            #fff8ec;   /* cream  */
  --surface:       #fffdf6;   /* paper  */
  --surface-2:     #fbeede;
  --border:        rgba(122,90,68,0.16);
  --border-strong: rgba(122,90,68,0.30);
  --border-hover:  rgba(122,90,68,0.26);
  --text-primary:  #4a3b30;   /* ink      */
  --text-secondary:#6f5c4d;   /* ink-soft */
  --text-tertiary: #a08b78;
  --accent:        #ef6a5a;   /* berry      */
  --accent-hover:  #f17b6c;
  --accent-dark:   #d8523f;   /* berry-deep */
  --accent-light:  #fde0db;
  --green:         #6fb85a;
  --green-light:   #e3f3d6;
  /* ---- rounder shapes ---- */
  --radius-sm: 14px; --radius-md: 20px; --radius-lg: 26px; --radius-xl: 34px;
  /* ---- type ---- */
  --font: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* ---- storybook-only tokens ---- */
  --sky:#bfe3f2; --sky-deep:#9fd2ec; --meadow:#9ed47f; --meadow-deep:#6fb85a;
  --sun:#ffd24a; --sun-glow:#ffe79a; --berry:#ef6a5a; --berry-deep:#d8523f;
  --bark:#7a5a44; --cream:#fff8ec; --paper:#fffdf6;
  --sb-shadow:rgba(106,84,60,0.22);
  /* Tokens that dark-mode also reassigns - pin them so a storybook page stays
     light/illustrated even when the OS is in dark mode (inner-page heroes use
     --hero-from; without this they fall through to the dark value). */
  --hero-from: #dceefb;
  --nav-bg: rgba(255,253,246,0.92);
  --shadow-sm: 0 2px 0 rgba(106,84,60,0.10);
  --shadow-md: 0 8px 0 rgba(106,84,60,0.12), 0 12px 22px rgba(106,84,60,0.10);
  --shadow-lg: 0 12px 0 rgba(106,84,60,0.16), 0 18px 30px rgba(106,84,60,0.12);
  --red: #e0544a; --red-light: #fde0db;
  --warn-bg: #fdebd0; --warn-text: #a9722a;

  background: var(--cream);
  font-weight: 500;
}

/* Storybook is a fixed light/illustrated theme - silence the dark toggle here. */
body.theme-storybook .theme-toggle { display: none !important; }

/* Old blue->green->purple gradient-clipped accents clash with storybook.
   Reset the clip + fill so they read as the solid berry "pop" accent. */
body.theme-storybook .hero-title-accent,
body.theme-storybook #earthE,
body.theme-storybook #earthH,
body.theme-storybook #earthDot,
body.theme-storybook .mission-headline-accent,
body.theme-storybook .drops-headline-accent,
body.theme-storybook .ab-title-accent,
body.theme-storybook .cz-hero-title-accent,
body.theme-storybook .models-title-accent {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: var(--berry-deep);
  color: var(--berry-deep);
}

/* ---- headings ---- */
body.theme-storybook h1,
body.theme-storybook h2,
body.theme-storybook h3,
body.theme-storybook .hero-title,
body.theme-storybook .nav-logo,
body.theme-storybook .footer-logo {
  font-family: 'Baloo 2', cursive;
  letter-spacing: .2px;
}

/* ============================ NAV ============================ */
body.theme-storybook .nav {
  background: var(--paper);
  border-bottom: 4px solid #f0e3c8;
  box-shadow: 0 6px 0 rgba(240,227,200,0.5);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
body.theme-storybook .nav-logo { color: var(--berry-deep); font-weight: 800; }
body.theme-storybook .nav-bird-icon { color: #0071E3; }   /* original blue bird logo */
body.theme-storybook .nav-links { font-family: 'Fredoka', sans-serif; font-weight: 500; }
body.theme-storybook .nav-links a {
  border-radius: 30px; padding: 9px 16px; color: var(--text-secondary);
  transition: .18s;
}
body.theme-storybook .nav-links a:hover { background: #fbeede; color: var(--text-primary); }
body.theme-storybook .nav-links a.nav-active {
  background: var(--meadow); color: #2f5a23;
  box-shadow: 0 4px 0 var(--meadow-deep); font-weight: 600;
}
body.theme-storybook .cart-toggle {
  background: var(--sun); color: #7a5a10; border-radius: 50%;
  box-shadow: 0 4px 0 #e6b62f; border: 3px solid #fff;
}

/* ============================ HERO SCENES ============================ */
/* Every storybook hero shares ONE backdrop - identical sky, sun, clouds, and
   hills band - so they match across pages. Only the products in the per-page
   scene SVG differ (cavity birdhouse / mesh tube feeder / suet cage / saucer). */
body.theme-storybook .hero,
body.theme-storybook .models-hero,
body.theme-storybook .ab-hero,
body.theme-storybook .bh-page-header,
body.theme-storybook .faq-hero {
  position: relative; overflow: hidden;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='130'%3E%3Cg fill='%23ffffff' opacity='0.9'%3E%3Cellipse cx='110' cy='58' rx='70' ry='28'/%3E%3Cellipse cx='152' cy='48' rx='44' ry='23'/%3E%3Cellipse cx='66' cy='50' rx='38' ry='20'/%3E%3C/g%3E%3C/svg%3E") 88% 14px / 300px auto no-repeat,
    linear-gradient(180deg, var(--sky) 0%, #d6ecf6 56%, var(--cream) 100%);
}
/* sun - identical on every page */
body.theme-storybook .hero::after,
body.theme-storybook .models-hero::after,
body.theme-storybook .ab-hero::after,
body.theme-storybook .bh-page-header::after,
body.theme-storybook .faq-hero::after {
  content: ""; position: absolute; top: 42px; left: 7%;
  width: 110px; height: 110px; border-radius: 50%; pointer-events: none; z-index: 1;
  background: radial-gradient(circle, var(--sun-glow) 0 42%, var(--sun) 43% 62%, rgba(255,210,74,0) 64%);
}
/* hills + products band - identical size, only the SVG differs per page */
body.theme-storybook .hero::before,
body.theme-storybook .models-hero::before,
body.theme-storybook .ab-hero::before,
body.theme-storybook .bh-page-header::before,
body.theme-storybook .faq-hero::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  aspect-ratio: 1440 / 240;        /* height tracks width -> the scene never crops */
  pointer-events: none; z-index: 1;
  background-position: center bottom; background-repeat: no-repeat; background-size: 100% 100%;
}
body.theme-storybook .hero::before         { background-image: url("/static/images/scene_home.svg"); }
body.theme-storybook .models-hero::before  { background-image: url("/static/images/scene_shop.svg"); }
body.theme-storybook .ab-hero::before      { background-image: url("/static/images/scene_about.svg"); }
body.theme-storybook .bh-page-header::before { background-image: url("/static/images/scene_guide.svg"); }
body.theme-storybook .faq-hero::before     { background-image: url("/static/images/scene_faq.svg"); }

/* lift content above the scene + storybook title colours */
body.theme-storybook .hero-content,
body.theme-storybook .hero-sub,
body.theme-storybook .models-hero > *,
body.theme-storybook .ab-hero > *,
body.theme-storybook .bh-page-header > *,
body.theme-storybook .faq-hero > * { position: relative; z-index: 3; }
body.theme-storybook .hero-title,
body.theme-storybook .models-title,
body.theme-storybook .ab-title,
body.theme-storybook .bh-page-title,
body.theme-storybook .faq-title { color: #2c4a78; text-shadow: 0 3px 0 rgba(255,255,255,0.55); }
body.theme-storybook .hero-sub,
body.theme-storybook .models-sub,
body.theme-storybook .ab-sub,
body.theme-storybook .ab-hero p,
body.theme-storybook .bh-page-sub,
body.theme-storybook .faq-sub { color: #3c5a82; font-weight: 600; }
body.theme-storybook .hero-bird { color: #4f9ed6; }   /* the storybook bluebird */

/* frosted readability panel behind hero text sitting on the scene.
   Each panel is a shrink-wrapped BLOCK so it keeps its own line (an
   inline-block here would flow beside its siblings, e.g. the eyebrow). */
body.theme-storybook .hero-title,
body.theme-storybook .models-title,
body.theme-storybook .models-eyebrow,
body.theme-storybook .ab-title,
body.theme-storybook .bh-page-title,
body.theme-storybook .faq-title,
body.theme-storybook .hero-sub,
body.theme-storybook .models-sub,
body.theme-storybook .ab-sub,
body.theme-storybook .ab-hero p,
body.theme-storybook .bh-page-sub,
body.theme-storybook .bh-page-eyebrow,
body.theme-storybook .faq-sub,
body.theme-storybook .faq-eyebrow,
body.theme-storybook .hero-eyebrow {
  display: block;
  width: fit-content;
  max-width: 100%;
  background: rgba(255, 251, 244, 0.42);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  border-radius: 16px;
  padding: 0.18em 0.6em;
}
/* centred heroes: keep the shrink-wrapped panels centred. */
body.theme-storybook .hero-title,
body.theme-storybook .models-title,
body.theme-storybook .models-eyebrow,
body.theme-storybook .ab-title,
body.theme-storybook .bh-page-title,
body.theme-storybook .bh-page-sub,
body.theme-storybook .bh-page-eyebrow,
body.theme-storybook .faq-title,
body.theme-storybook .hero-sub,
body.theme-storybook .models-sub,
body.theme-storybook .ab-sub,
body.theme-storybook .ab-hero p,
body.theme-storybook .faq-sub,
body.theme-storybook .faq-eyebrow {
  margin-left: auto;
  margin-right: auto;
}
/* the lead-time notice tucks up under the old flat hero (-32px); with the
   scene band now living at the hero's bottom it would slide under the band,
   so drop it clear and lift it above the landscape. */
body.theme-storybook .shop-notice {
  margin-top: 16px;
  position: relative;
  z-index: 2;
}
/* GUIDE: full-width hero/backdrop above the sidebar+content layout, sized
   IDENTICALLY to .models-hero so it matches every other page. */
body.theme-storybook .bh-page-header {
  display: block;
  margin-bottom: 0;
  padding: calc(var(--nav-h) + 80px) 24px 64px;   /* == .models-hero */
  min-height: 507px;                               /* match shop/about hero height */
  text-align: center;
}
body.theme-storybook .bh-page-header-inner {
  position: relative;
  z-index: 3;
  max-width: 880px;                                /* == .models-hero-inner */
  margin: 0 auto;
}
/* match the standard hero title/sub scale (base is only 32px/15px) */
body.theme-storybook .bh-page-title {
  font-size: 56px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -1.2px;
  margin-bottom: 20px;
}
body.theme-storybook .bh-page-sub {
  font-size: 18px;
  line-height: 1.55;
  max-width: 720px;
}
body.theme-storybook .bh-page-eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--berry-deep, #d8523f);
  margin-bottom: 16px;
}
/* the header now clears the nav, so the layout below no longer needs to */
body.theme-storybook .bh-layout { padding-top: 0; }

/* feature callout (e.g. the mesh-tube secure twist-lock) */
body.theme-storybook .series-feature {
  margin: 14px auto 0;
  max-width: 640px;
  background: var(--surface);
  border: 2px solid color-mix(in srgb, var(--meadow-deep) 45%, transparent);
  border-radius: var(--radius-md, 16px);
  padding: 12px 16px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-secondary);
}
body.theme-storybook .series-feature strong { color: var(--text-primary); }
body.theme-storybook .series-feature-tag {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--meadow-deep);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  vertical-align: 1px;
}

/* ===== WAVE SECTION BREAKS + VIVID BANDS (from storybook mockup #69) =====
   Every content section gets a solid picture-book colour and a wavy SVG lip
   that rises into the section above it, so the long runs of text read as
   distinct panels. One shared wave mask is tinted by each section's own
   background (background:inherit), so colours stay DRY. */
body.theme-storybook {
  --sb-wave: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%2080'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%2040%20Q360%200%20720%2036%20T1440%2028%20V80%20H0%20Z'%20fill='%23000'/%3E%3C/svg%3E");
}
body.theme-storybook .mission-section,
body.theme-storybook .system-section,
body.theme-storybook .about-section,
body.theme-storybook .models-series,
body.theme-storybook .models-system,
body.theme-storybook .ab-section:not(:first-of-type),
body.theme-storybook .sp-conservation,
body.theme-storybook .sp-quickfacts,
body.theme-storybook .sp-section,
body.theme-storybook .faq-cta-section,
body.theme-storybook .ct-section,
body.theme-storybook .lg-section,
body.theme-storybook .footer {
  position: relative;
  overflow: visible;
  border-top: none;
}
body.theme-storybook .mission-section::before,
body.theme-storybook .system-section::before,
body.theme-storybook .about-section::before,
body.theme-storybook .models-series::before,
body.theme-storybook .models-system::before,
body.theme-storybook .ab-section:not(:first-of-type)::before,
body.theme-storybook .sp-conservation::before,
body.theme-storybook .sp-quickfacts::before,
body.theme-storybook .sp-section::before,
body.theme-storybook .faq-cta-section::before,
body.theme-storybook .ct-section::before,
body.theme-storybook .lg-section::before,
body.theme-storybook .footer::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%;
  height: 52px; background: inherit; pointer-events: none;
  -webkit-mask: var(--sb-wave) center bottom / 100% 100% no-repeat;
          mask: var(--sb-wave) center bottom / 100% 100% no-repeat;
}

/* --- band colours (solid, so the wave seam matches exactly) --- */
/* HOME */
body.theme-storybook #mission.mission-section      { background: var(--meadow-deep); }
body.theme-storybook #engineering.mission-section  { background: var(--cream); }
body.theme-storybook .system-section               { background: var(--sky); }
body.theme-storybook .about-section                { background: #ffe0d4; }   /* peach */
/* SHOP */
body.theme-storybook .models-series                { background: var(--cream); }
body.theme-storybook .models-series-alt            { background: var(--sky); }
body.theme-storybook .models-system               { background: var(--meadow-deep); }
/* ABOUT */
body.theme-storybook .ab-section:nth-of-type(2)    { background: var(--meadow-deep); }
body.theme-storybook .ab-section.ab-section-alt    { background: #ffe0d4; }   /* peach */
/* SPECIES (individual bird pages) - light bands so the dark facts text stays
   readable; the conservation status card keeps its own colour on top. */
body.theme-storybook .sp-description               { background: var(--cream); }
body.theme-storybook .sp-conservation              { background: var(--cream); }
body.theme-storybook .sp-quickfacts                { background: var(--sky); }
body.theme-storybook .sp-section                   { background: var(--cream); }
body.theme-storybook .sp-section-alt               { background: #ffe0d4; }   /* peach */
/* these sections are short; pad them so their content clears the 52px wave
   that the following section raises into their bottom edge */
body.theme-storybook .sp-description  { padding-bottom: 40px; border-bottom: none; }
body.theme-storybook .sp-conservation { padding-bottom: 48px; border-bottom: none; }
body.theme-storybook .sp-quickfacts   { padding-top: 28px; padding-bottom: 60px; border-bottom: none; }
/* FAQ / CONTACT / LEGAL */
body.theme-storybook .faq-cta-section              { background: var(--meadow-deep); padding-top: 56px; }
body.theme-storybook .ct-section                   { background: var(--sky); }
body.theme-storybook .lg-section                   { background: var(--sky); }
/* footer keeps its bark background; its wave just inherits it */
/* the Cavity-Series wave rises into the category toggle above it (tight on
   mobile) - lift the toggle + the CTA above the wave so they stay visible */
body.theme-storybook .shop-tabs,
body.theme-storybook .shop-custom-cta { position: relative; z-index: 3; }
/* the trust strip sits directly above the green mission band, whose wave
   rises 52px into it - too thin to survive, so pad its bottom to keep the
   content clear (the wave then reads as the strip's wavy lower edge). */
body.theme-storybook .trust-strip { position: relative; padding-bottom: 58px; }
@media (max-width: 600px) {
  /* stack the items full-width so the long line wraps instead of running
     off-screen; drop the vertical dividers now that they stack */
  body.theme-storybook .trust-strip-inner {
    flex-direction: column; align-items: stretch; gap: 14px;
  }
  body.theme-storybook .trust-item,
  body.theme-storybook .trust-item span {
    white-space: normal; text-align: center;
  }
  body.theme-storybook .trust-item { justify-content: center; }
  body.theme-storybook .trust-divider { display: none; }
}

/* --- light type on the green bands --- */
body.theme-storybook #mission .mission-eyebrow { color: #eafbe0; }
body.theme-storybook #mission .mission-headline,
body.theme-storybook .models-system .series-title {
  color: #fff; text-shadow: 0 3px 0 rgba(47,90,35,0.35);
}
body.theme-storybook #mission .mission-headline-accent {
  background: none; -webkit-text-fill-color: var(--sun-glow); color: var(--sun-glow);
}
body.theme-storybook #mission .mission-lede,
body.theme-storybook #mission .mission-pledge,
body.theme-storybook .models-system .series-sub { color: #effaea; }

/* ===== LIVING SCENE BIRDS (home hero) - peek from the house, sway on
   the feeder. Shares the scene band box so coords line up with scene_home. */
.hero-scene-life { display: none; }
body.theme-storybook .hero-scene-life {
  display: block;
  position: absolute; left: 0; right: 0; bottom: -1px;
  aspect-ratio: 1440 / 240;          /* identical band box to the scene ::before */
  pointer-events: none; z-index: 2;  /* above the scene (z-1), behind text panels (z-3) */
}
body.theme-storybook .sb-peek {
  transform-box: fill-box; transform-origin: 50% 92%;
  animation: sbPeek 7s ease-in-out infinite;
}
body.theme-storybook .sb-peek-b { animation-delay: 3.5s; }
body.theme-storybook .sb-sway {
  transform-box: fill-box; transform-origin: 50% 6%;
  animation: sbSway 2.6s ease-in-out infinite;
}
body.theme-storybook .sb-sway-b { animation-duration: 3.1s; animation-delay: -1.2s; }
@keyframes sbPeek {
  0%, 100% { transform: scale(0);            opacity: 0; }
  8%       { transform: scale(1);            opacity: 1; }
  14%      { transform: scale(1) rotate(9deg); }
  22%      { transform: scale(1) rotate(-9deg); }
  38%      { transform: scale(1) rotate(0deg); opacity: 1; }
  46%      { transform: scale(0);            opacity: 0; }
}
@keyframes sbSway {
  0%, 100% { transform: rotate(-11deg); }
  50%      { transform: rotate(11deg); }
}

/* ============================ SEARCH ============================ */
body.theme-storybook .search-section { background: var(--cream); }
body.theme-storybook .search-card {
  background: var(--paper); border: 3px solid #fff; border-radius: 28px;
  box-shadow: 0 12px 0 var(--sb-shadow), 0 18px 30px rgba(106,84,60,0.12);
}
body.theme-storybook .search-card input,
body.theme-storybook .search-mini,
body.theme-storybook .search-card select {
  border-radius: 16px; font-family: 'Quicksand', sans-serif; font-weight: 600;
}
/* primary buttons: chunky storybook "press" */
body.theme-storybook .search-btn,
body.theme-storybook .btn-primary,
body.theme-storybook button[type="submit"] {
  font-family: 'Fredoka', sans-serif; font-weight: 600;
  background: var(--berry); color: #fff; border: none;
  border-radius: 20px; box-shadow: 0 5px 0 var(--berry-deep);
  transition: .12s;
}
body.theme-storybook .search-btn:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--berry-deep); }
body.theme-storybook .search-btn:active { transform: translateY(2px); box-shadow: 0 3px 0 var(--berry-deep); }

/* ============================ SPECIES RESULT CARDS ============================ */
body.theme-storybook .bh-species-card {
  background: var(--paper); border: 3px solid #fff; border-radius: 26px;
  box-shadow: 0 10px 0 var(--sb-shadow), 0 16px 26px rgba(106,84,60,0.10);
  transition: .2s;
}
body.theme-storybook .bh-species-card:hover {
  transform: translateY(-5px) rotate(-.5deg);
  box-shadow: 0 14px 0 var(--border-strong), 0 22px 34px rgba(106,84,60,0.14);
}
body.theme-storybook .bh-species-common { font-family: 'Baloo 2', cursive; }
body.theme-storybook .bh-species-sci { color: var(--meadow-deep); }

/* ============================ FOOTER ============================ */
body.theme-storybook .footer { background: var(--bark); color: #f4e7d8; }
body.theme-storybook .footer-logo { color: #ffd9a0; }
body.theme-storybook .footer-bird { color: #ffd9a0; }
body.theme-storybook .footer-tagline,
body.theme-storybook .footer-copy { color: #d6c2af; }
body.theme-storybook .footer-links a { color: #e4d4c2; }
body.theme-storybook .footer-links a:hover { color: #fff; }
body.theme-storybook .footer-social a { color: #e4d4c2; background: rgba(255,255,255,0.08); }
body.theme-storybook .footer-social a:hover { color: #fff; background: rgba(255,255,255,0.18); }

/* (Shop + About hero scenes are handled by the unified HERO SCENES block
   above - same sky/sun/clouds/hills, with scene_shop.svg / scene_about.svg
   supplying each page's products.) */

/* ============================ MOBILE ============================ */
@media (max-width: 760px) {
  body.theme-storybook .hero::after { width: 84px; height: 84px; top: 22px; }
  body.theme-storybook .hero::before { height: 96px; background-size: 100% 96px; }
}