/* Festive storefront styles. Loaded only by /shop/, /holiday/, /holiday/trivia/,
   /holiday/host-planner/, /holiday/kids-table/ and /journal/2027/.
   Every rule is scoped to body.festive so other pages stay as they are.
   Body copy stays on the storefront sans stack. Fredoka is for headings,
   prices and buy buttons. Nav metrics are left alone so the mobile header
   wraps the same way it does without this file.

   Product photos use <picture>: webp first, jpg fallback, 720 by 1022.
*/

@font-face {
  font-family: Fredoka;
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url("/assets/fonts/fredoka-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Local fallback tuned to Fredoka Bold (Noto Sans Bold on this stack:
   size-adjust 92.1%, ascent 105.76%, descent 25.62%). */
@font-face {
  font-family: "Fredoka Fallback";
  src: local("Noto Sans"), local("Liberation Sans"), local("Arial"), local("Segoe UI");
  font-style: normal;
  font-weight: 700;
  size-adjust: 92.1%;
  ascent-override: 105.76%;
  descent-override: 25.62%;
  line-gap-override: 0%;
}

:root {
  --festive-display: Fredoka, "Fredoka Fallback", "Avenir Next", "Segoe UI", sans-serif;
  --festive-pumpkin: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22%235C3D0A%22%20d%3D%22M30%206h4c1%206%201%209%200%2012h-4c-1-3-1-6%200-12z%22%2F%3E%3Cellipse%20cx%3D%2232%22%20cy%3D%2240%22%20rx%3D%2213%22%20ry%3D%2216%22%20fill%3D%22%23C2410C%22%2F%3E%3Cellipse%20cx%3D%2222%22%20cy%3D%2240%22%20rx%3D%228%22%20ry%3D%2214%22%20fill%3D%22%239A3412%22%2F%3E%3Cellipse%20cx%3D%2242%22%20cy%3D%2240%22%20rx%3D%228%22%20ry%3D%2214%22%20fill%3D%22%23E07030%22%2F%3E%3C%2Fsvg%3E");
  --festive-leaf: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22%23C2410C%22%20d%3D%22M8%2040C18%2016%2040%208%2056%2010%2052%2028%2042%2042%2026%2050%2018%2054%2010%2052%208%2040z%22%2F%3E%3Cpath%20d%3D%22M16%2046c10-10%2020-18%2034-24%22%20fill%3D%22none%22%20stroke%3D%22%236B4A12%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  --festive-acorn: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22%23E0B03A%22%20d%3D%22M12%2028c2-10%2014-16%2020-16s18%206%2020%2016z%22%2F%3E%3Cpath%20fill%3D%22%239A3412%22%20d%3D%22M16%2028h32c-2%2016-10%2028-16%2028S18%2044%2016%2028z%22%2F%3E%3Cpath%20fill%3D%22%235C3D0A%22%20d%3D%22M32%208c2%204%202%206%200%208-2-2-2-4%200-8z%22%2F%3E%3C%2Fsvg%3E");
  --festive-snow: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%2314532D%22%20stroke-width%3D%224%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M32%206v52M12%2020l40%2024M12%2044L52%2020M10%2032h44%22%2F%3E%3Cpath%20d%3D%22M32%2014l6%207M32%2014l-6%207M32%2050l6-7M32%2050l-6-7%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --festive-snow-red: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%237F1D1D%22%20stroke-width%3D%224%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M32%208v48M16%2016l32%2032M16%2048L48%2016%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%224%22%20fill%3D%22%23E0B03A%22%2F%3E%3C%2Fsvg%3E");
  --festive-holly: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22%231F6B45%22%20d%3D%22M8%2036c14-24%2028-20%2030-8%2010-16%2026-10%2024%206-10%201-16%2010-16%2018-8-8-22-8-28%200-4%208%200%2016%208%2018C12%2066%204%2052%208%2036z%22%2F%3E%3Ccircle%20fill%3D%22%23B42318%22%20cx%3D%2234%22%20cy%3D%2240%22%20r%3D%225%22%2F%3E%3Ccircle%20fill%3D%22%239F1239%22%20cx%3D%2244%22%20cy%3D%2234%22%20r%3D%224%22%2F%3E%3Ccircle%20fill%3D%22%23C43A2F%22%20cx%3D%2228%22%20cy%3D%2232%22%20r%3D%223.5%22%2F%3E%3C%2Fsvg%3E");
  --festive-star: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22%23C4A35A%22%20d%3D%22M32%204l7.2%2018.2L58%2024.6%2042.8%2036.2%2047.6%2056%2032%2045.6%2016.4%2056l4.8-19.8L6%2024.6l18.8-2.4z%22%2F%3E%3C%2Fsvg%3E");
  --festive-star-sm: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22%23E0B03A%22%20d%3D%22M32%208l5%2014h14l-11%208%204%2014-12-8-12%208%204-14-11-8h14z%22%2F%3E%3C%2Fsvg%3E");
}

body.festive {
  --festive-cream: #fff6e8;
  --festive-paper: #fffdf8;
  --festive-ink: #1c1915;
  --festive-header: #9a3412;
  --festive-banner: #7c2d12;
  --festive-footer: #6b2710;
  --festive-on-header: #fff8f0;
  --festive-on-footer: #fff6e8;
  --festive-gold: #e0b03a;
  --festive-gold-soft: #f6e7b8;
  --festive-link: #7f1d1d;
  --festive-heading: #9a3412;
  --festive-card-border: #c2410c;
  --festive-shadow: #e0b03a;
  --festive-price: #7f1d1d;
  --festive-price-bg: #fff4d6;
  --festive-price-border: #e0b03a;
  --festive-button: #9a3412;
  --festive-button-hover: #7c2d12;
  --festive-button-text: #fff8f0;
  --festive-button-edge: #6b2710;
  --festive-ribbon: #ffe4c4;
  --festive-speck: #f6d7bc;
  --festive-speck-2: #f8e7c3;
  --festive-glow: #c2410c;
  --festive-icon-a: var(--festive-pumpkin);
  --festive-icon-b: var(--festive-acorn);
  --festive-icon-c: var(--festive-leaf);
  color: var(--festive-ink);
  background-color: var(--festive-cream);
  background-image:
    radial-gradient(circle at 7% 14%, var(--festive-speck) 0 5px, transparent 6px),
    radial-gradient(circle at 93% 20%, var(--festive-speck-2) 0 4px, transparent 5px),
    radial-gradient(circle at 16% 48%, var(--festive-speck-2) 0 3px, transparent 4px),
    radial-gradient(circle at 86% 62%, var(--festive-speck) 0 5px, transparent 6px),
    radial-gradient(circle at 10% 80%, var(--festive-speck) 0 4px, transparent 5px),
    radial-gradient(circle at 74% 90%, var(--festive-speck-2) 0 3px, transparent 4px),
    radial-gradient(ellipse 58% 32% at 0% -6%, color-mix(in srgb, var(--festive-glow) 20%, transparent), transparent 70%),
    radial-gradient(ellipse 42% 26% at 100% 0%, color-mix(in srgb, var(--festive-gold) 32%, transparent), transparent 72%);
  background-repeat: no-repeat;
  font-family: var(--sans);
}

body.festive-thanksgiving {
  --festive-icon-a: var(--festive-pumpkin);
  --festive-icon-b: var(--festive-acorn);
  --festive-icon-c: var(--festive-leaf);
}

body.festive-christmas {
  --festive-cream: #f7fbf4;
  --festive-paper: #fffdf8;
  --festive-header: #14532d;
  --festive-banner: #7f1d1d;
  --festive-footer: #14281f;
  --festive-heading: #14532d;
  --festive-card-border: #166534;
  --festive-shadow: #7f1d1d;
  --festive-button: #7f1d1d;
  --festive-button-hover: #641616;
  --festive-button-edge: #4c1010;
  --festive-ribbon: #e7f2ea;
  --festive-speck: #e7f2ea;
  --festive-speck-2: #f8d4d4;
  --festive-glow: #166534;
  --festive-icon-a: var(--festive-snow);
  --festive-icon-b: var(--festive-holly);
  --festive-icon-c: var(--festive-snow-red);
}

body.festive-journal {
  --festive-cream: #fff8e7;
  --festive-paper: #fffdf6;
  --festive-header: #5c3d0a;
  --festive-banner: #3f2a12;
  --festive-footer: #3f2a12;
  --festive-gold: #c4a35a;
  --festive-link: #5c3d0a;
  --festive-heading: #5c3d0a;
  --festive-card-border: #c4a35a;
  --festive-shadow: #a67c2d;
  --festive-price: #5c3d0a;
  --festive-button: #5c3d0a;
  --festive-button-hover: #3f2a12;
  --festive-button-text: #fff8e7;
  --festive-button-edge: #3f2a12;
  --festive-ribbon: #fff4d6;
  --festive-speck: #f8e7c3;
  --festive-speck-2: #fff4d6;
  --festive-glow: #c4a35a;
  --festive-icon-a: var(--festive-star);
  --festive-icon-b: var(--festive-holly);
  --festive-icon-c: var(--festive-star-sm);
}

body.festive-shop,
body.festive-holiday {
  --festive-header: #7f1d1d;
  --festive-banner: #6b2a1a;
  --festive-footer: #3b1d12;
  --festive-heading: #7f1d1d;
  --festive-card-border: #c4a35a;
  --festive-shadow: #7f1d1d;
  --festive-price: #9a3412;
  --festive-ribbon: #fff1dc;
  --festive-glow: #c2410c;
  --festive-icon-a: var(--festive-leaf);
  --festive-icon-b: var(--festive-holly);
  --festive-icon-c: var(--festive-snow);
}

body.festive h1,
body.festive h2,
body.festive h3,
body.festive .hday-kicker {
  font-family: var(--festive-display);
  font-weight: 700;
  letter-spacing: 0;
  color: var(--festive-heading);
}

body.festive h1,
body.festive h2,
body.festive h3 {
  line-height: 1.2;
  overflow-wrap: break-word;
}

body.festive .hday-kicker {
  font-size: 0.82rem;
  letter-spacing: 0.08em;
}

body.festive a { color: var(--festive-link); }

body.festive .hday-header {
  background: var(--festive-header);
  border-bottom: 6px solid var(--festive-gold);
  color: var(--festive-on-header);
}

body.festive-shop .hday-header,
body.festive-holiday .hday-header {
  background: linear-gradient(90deg, #9a3412 0%, #7f1d1d 52%, #14532d 100%);
}

body.festive .hday-header a,
body.festive .hday-header a:hover {
  color: var(--festive-on-header);
}

body.festive .hday-brand-sub { color: var(--festive-gold-soft); }

body.festive .hday-banner {
  background: var(--festive-banner);
  color: var(--festive-on-header);
}

body.festive .hday-footer {
  background: var(--festive-footer);
  color: var(--festive-on-footer);
}

body.festive .hday-footer a,
body.festive .hday-footer a:hover { color: var(--festive-on-footer); }

body.festive .hday-main::before {
  content: "";
  display: block;
  height: 44px;
  margin: 0 0 1.1rem;
  border: 3px solid var(--festive-card-border);
  border-radius: 999px;
  background-color: var(--festive-ribbon);
  background-image: var(--festive-icon-a), var(--festive-icon-b), var(--festive-icon-c);
  background-repeat: no-repeat;
  background-position: 12px center, center center, calc(100% - 12px) center;
  background-size: 30px 30px, 28px 28px, 30px 30px;
  box-shadow: 0 5px 0 var(--festive-shadow);
}

body.festive .shop-card,
body.festive .hday-shot,
body.festive .hday-facts li,
body.festive .jrnl-size,
body.festive .hday-spec,
body.festive .hday-faq details {
  border: 4px solid var(--festive-card-border);
  border-radius: 28px;
  background: var(--festive-paper);
  box-shadow: 0 8px 0 var(--festive-shadow);
}

body.festive .shop-card {
  gap: 0.9rem;
  padding: 1rem;
}

body.festive .hday-shot { padding: 0.9rem; }

/* Cover sits at the top of the hero, beside the heading on wide screens. */
body.festive .hday-hero { align-items: start; }

@media (max-width: 879px) {
  body.festive .hday-hero {
    display: flex;
    flex-direction: column;
  }

  body.festive .hday-hero > div { display: contents; }

  body.festive .hday-hero > div > * { order: 4; }

  body.festive .hday-hero > div > .hday-kicker { order: 1; }

  body.festive .hday-hero > div > h1 { order: 2; }

  body.festive .hday-hero > .hday-shot {
    order: 3;
    margin: 0.4rem 0 0.6rem;
  }
}

body.festive .hday-facts { gap: 1.15rem; }

body.festive .hday-facts li { padding: 1.05rem 1.1rem 1.15rem; }

body.festive .jrnl-size {
  padding: 1.15rem;
  gap: 0.85rem;
}

body.festive .hday-shot img,
body.festive .shop-card img {
  border: 3px solid var(--festive-card-border);
  border-radius: 18px;
}

body.festive .hday-price-amount {
  font-family: var(--festive-display);
  font-weight: 700;
  color: var(--festive-price);
  background: var(--festive-price-bg);
  border: 3px solid var(--festive-price-border);
  border-radius: 18px;
  padding: 0.08em 0.42em 0.16em;
  line-height: 1.15;
  box-decoration-break: clone;
}

body.festive .hday-pay,
body.festive .hday-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  min-width: min(100%, 12rem);
  max-width: 100%;
  margin-top: 0.55rem;
  padding: 0.85rem 1.25rem;
  border-radius: 999px;
  border: 3px solid var(--festive-button-edge);
  font-family: var(--festive-display);
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: break-word;
}

body.festive .hday-pay,
body.festive .hday-pay:visited,
body.festive .hday-pay:hover,
body.festive .hday-pay:focus {
  background: var(--festive-button);
  color: var(--festive-button-text);
  box-shadow: 0 5px 0 var(--festive-button-edge);
}

body.festive .hday-pay:hover { background: var(--festive-button-hover); }

body.festive .hday-download,
body.festive .hday-download:visited,
body.festive .hday-download:hover {
  background: var(--festive-paper);
  color: var(--festive-link);
  border-color: var(--festive-card-border);
  box-shadow: 0 5px 0 var(--festive-shadow);
}

body.festive .hday-hero .hday-pay,
body.festive .hday-hero .hday-download,
body.festive .hday-section .hday-pay,
body.festive .hday-section .hday-download {
  width: 100%;
  max-width: 36rem;
}

body.festive .shop-card .hday-pay {
  width: 100%;
  max-width: none;
  margin-top: auto;
}

body.festive .shop-card .hday-price-amount {
  font-size: clamp(1.85rem, 5vw, 2.4rem);
}

body.festive .jrnl-size .hday-pay {
  flex: 1 1 12rem;
  width: 100%;
  max-width: 22rem;
  margin-top: 0;
}

body.festive .hday-eligibility,
body.festive .hday-callout {
  background: var(--festive-paper);
  color: var(--festive-ink);
  border: 3px solid var(--festive-link);
  border-left-width: 8px;
  border-radius: 16px;
}

body.festive #bundle {
  padding: 1rem 1.1rem 1.2rem;
  border: 4px solid var(--festive-card-border);
  border-radius: 28px;
  background: var(--festive-paper);
  box-shadow: 0 8px 0 var(--festive-shadow);
}

body.festive #rounds > ol,
body.festive #activities > ol,
body.festive #pages > ol {
  margin: 0.5rem 0 0;
  padding: 1rem 1rem 1rem 2.2rem;
  background: var(--festive-paper);
  border: 4px solid var(--festive-card-border);
  border-radius: 28px;
  box-shadow: 0 8px 0 var(--festive-shadow);
}

body.festive-shop #gather-and-play {
  --festive-card-border: #c4a35a;
  --festive-shadow: #7f1d1d;
  --festive-price: #9a3412;
  background: linear-gradient(180deg, #fff6e8 0%, #f7fbf4 100%);
}

body.festive-shop #gather-and-play h2 { color: #7f1d1d; }

body.festive-shop #christmas-trivia,
body.festive-shop #trivia-bundle {
  --festive-card-border: #166534;
  --festive-shadow: #7f1d1d;
  --festive-price: #7f1d1d;
  --festive-heading: #14532d;
  background: #f7fbf4;
}

body.festive-shop #host-planner,
body.festive-shop #kids-table,
body.festive-shop #kids-bundle {
  --festive-card-border: #c2410c;
  --festive-shadow: #e0b03a;
  --festive-price: #7f1d1d;
  --festive-heading: #9a3412;
  background: #fff6e8;
}

body.festive-shop #bible-journal-2027 {
  --festive-card-border: #c4a35a;
  --festive-shadow: #a67c2d;
  --festive-price: #5c3d0a;
  --festive-heading: #5c3d0a;
  background: #fff8e7;
}

body.festive-holiday #thanksgiving-packs,
body.festive-holiday #games .hday-games > div:first-child {
  --festive-card-border: #c2410c;
  --festive-shadow: #e0b03a;
  --festive-heading: #9a3412;
  background: #fff6e8;
  border: 4px solid #c2410c;
  border-radius: 28px;
  box-shadow: 0 8px 0 #e0b03a;
}

body.festive-holiday #thanksgiving-packs { padding: 1rem 1.1rem 1.15rem; }

body.festive-holiday #games .hday-games > div:first-child { padding: 1rem 1.05rem 1.15rem; }

body.festive-holiday #trivia-bundle,
body.festive-holiday #games .hday-games > div:last-child {
  --festive-card-border: #166534;
  --festive-shadow: #7f1d1d;
  --festive-heading: #14532d;
  background: #f7fbf4;
  border: 4px solid #166534;
  border-radius: 28px;
  box-shadow: 0 8px 0 #7f1d1d;
}

body.festive-holiday #trivia-bundle { padding: 1rem 1.1rem 1.2rem; }

body.festive-holiday #games .hday-games > div:last-child { padding: 1rem 1.05rem 1.15rem; }

body.festive-holiday #games .hday-games { gap: 1.35rem; }

picture.festive-cover {
  display: block;
  min-width: 0;
  margin: 0;
}

picture.festive-cover img {
  display: block;
  width: 100%;
  height: auto;
}

body.festive #bundle > picture.festive-cover {
  max-width: 22rem;
  margin: 0.35rem 0 0.9rem;
}

@media (max-width: 400px) {
  body.festive .hday-main {
    padding-left: 0.85rem;
    padding-right: 0.85rem;
  }

  body.festive .hday-main::before {
    background-position: 8px center, center center, calc(100% - 8px) center;
    background-size: 26px 26px, 24px 24px, 26px 26px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  body.festive .hday-main::before {
    animation: festive-bob 6.5s ease-in-out infinite alternate;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.festive .hday-main::before { animation: none; }
}

@keyframes festive-bob {
  from { background-position: 12px center, center center, calc(100% - 12px) center; }
  to { background-position: 18px 40%, center 58%, calc(100% - 18px) 42%; }
}

@media print {
  body.festive {
    background: #fff;
  }

  body.festive .hday-main::before { display: none; }

  body.festive .hday-banner,
  body.festive .hday-header,
  body.festive .hday-footer {
    background: #fff;
    color: #000;
  }
}