/* Hanukkah keeps the proven countdown scaffold, but shifts the whole page into a festival-of-lights mood: blue glass, candle gold, star shimmer, and a warm window-at-night atmosphere. */
@import url("/fathers-day.css?v=20260422b");

:root {
  --amber-900: #10336c;
  --amber-700: #285aa6;
  --amber-600: #4d82d1;
  --amber-400: #f3cb63;
  --maple-900: #0b1b3b;
  --maple-800: #18315e;
  --maple-700: #30518f;
  --maple-600: #6d92cf;
  --sage-700: #4f6ea5;
  --sage-500: #d2def6;
  --cream-100: #fbf8f1;
  --cream-200: #f1e9d6;
  --leaf-100: #f7f9ff;
  --leaf-200: #e2e9f8;
  --ink-900: #17305a;
  --ink-700: #43618c;
  --ink-500: #7182a1;
  --panel: rgba(246, 249, 255, 0.84);
  --panel-strong: rgba(251, 253, 255, 0.94);
  --border: rgba(49, 88, 153, 0.18);
  --shadow-soft: 0 16px 40px rgba(18, 37, 79, 0.14);
  --shadow-card: 0 22px 44px rgba(17, 32, 68, 0.18);
  --digit-color: #f7d97b;
  --digit-shadow: 0 10px 24px rgba(243, 203, 99, 0.2);
  --bg-main:
    radial-gradient(circle at 14% 16%, rgba(89, 144, 235, 0.18), transparent 24%),
    radial-gradient(circle at 82% 16%, rgba(243, 203, 99, 0.14), transparent 22%),
    radial-gradient(circle at 50% 88%, rgba(163, 190, 241, 0.18), transparent 30%),
    linear-gradient(150deg, #f9fbff 0%, #eef3fd 42%, #eef2f9 68%, #f7f2e8 100%);
}

:root[data-theme="night"] {
  --panel: rgba(10, 22, 48, 0.74);
  --panel-strong: rgba(13, 27, 58, 0.9);
  --border: rgba(243, 203, 99, 0.16);
  --ink-900: #f5f8ff;
  --ink-700: #dce7fb;
  --ink-500: #a8b8d9;
  --digit-color: #f8de8d;
  --digit-shadow: 0 10px 24px rgba(243, 203, 99, 0.22);
  --bg-main:
    radial-gradient(circle at 14% 16%, rgba(54, 96, 178, 0.28), transparent 24%),
    radial-gradient(circle at 82% 16%, rgba(243, 203, 99, 0.12), transparent 22%),
    radial-gradient(circle at 50% 88%, rgba(61, 100, 173, 0.18), transparent 30%),
    linear-gradient(150deg, #071127 0%, #0d1f46 38%, #0a1837 68%, #091224 100%);
}

.hanukkah-page .harvest-crown {
  background:
    radial-gradient(circle at 16% 48%, rgba(102, 157, 244, 0.22), transparent 30%),
    radial-gradient(circle at 42% 50%, rgba(243, 203, 99, 0.16), transparent 28%),
    radial-gradient(circle at 68% 46%, rgba(179, 207, 255, 0.22), transparent 28%),
    radial-gradient(circle at 88% 48%, rgba(255, 255, 255, 0.14), transparent 30%);
}

.hanukkah-page .crown-seed:nth-child(1) {
  background: linear-gradient(180deg, #f7de92, #f3cb63);
}

.hanukkah-page .crown-seed:nth-child(2) {
  background: linear-gradient(180deg, #dce8ff, #8cb1ef);
}

.hanukkah-page .crown-seed:nth-child(3) {
  background: linear-gradient(180deg, #86aef7, #457ed0);
}

.hanukkah-page .crown-seed:nth-child(4) {
  background: linear-gradient(180deg, #fffdf7, #dce8ff);
}

.hanukkah-page .crown-sun {
  background: radial-gradient(circle at 35% 35%, #fffef7 0%, #f3cb63 48%, #83aef1 76%, #ffffff 100%);
  box-shadow: 0 0 0 6px rgba(243, 203, 99, 0.08), 0 0 20px rgba(131, 174, 241, 0.24);
}

.hanukkah-page .brand-dot {
  background: #f3cb63;
  box-shadow: 0 0 0 4px rgba(243, 203, 99, 0.14), 0 0 18px rgba(243, 203, 99, 0.3);
}

.hanukkah-page .utility-bar {
  background: linear-gradient(180deg, rgba(250, 252, 255, 0.84), rgba(237, 243, 255, 0.7));
}

:root[data-theme="night"] .hanukkah-page .utility-bar {
  background: linear-gradient(180deg, rgba(14, 28, 58, 0.88), rgba(10, 22, 46, 0.76));
}

.hanukkah-page .festival-stage {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
    linear-gradient(180deg, rgba(9, 24, 54, 0.98) 0%, rgba(10, 28, 63, 0.98) 50%, rgba(9, 21, 45, 0.98) 100%);
}

.hanukkah-page .menorah-glow {
  background:
    radial-gradient(circle at 35% 35%, rgba(255, 252, 241, 0.98), rgba(243, 203, 99, 0.84) 34%, rgba(121, 160, 230, 0.38) 68%, transparent 76%);
  box-shadow: 0 0 0 18px rgba(121, 160, 230, 0.12), 0 0 42px rgba(243, 203, 99, 0.18);
}

.hanukkah-page .menorah-glow::after {
  background: rgba(5, 10, 24, 0.38);
}

.hanukkah-page .star-swarm {
  color: rgba(243, 203, 99, 0.74);
}

.hanukkah-page .festival-band span,
.hanukkah-page .window-icons span {
  background: rgba(246, 249, 255, 0.08);
  border-color: rgba(164, 193, 245, 0.16);
}

.hanukkah-page .hanukkah-wrap.left {
  left: 10px;
}

.hanukkah-page .hanukkah-wrap.right {
  right: 10px;
}

.hanukkah-page .hanukkah-svg {
  filter: drop-shadow(0 14px 20px rgba(4, 8, 20, 0.32));
}

.hanukkah-page .lantern-string span {
  background: linear-gradient(180deg, rgba(243, 203, 99, 0.86), rgba(77, 130, 209, 0.22));
}

.hanukkah-page .lantern-string span::before {
  background: radial-gradient(circle at 50% 45%, rgba(255, 250, 236, 0.94), rgba(243, 203, 99, 0.76) 48%, rgba(243, 203, 99, 0.08) 78%, transparent 80%);
}

.hanukkah-page .lantern-string::before {
  background: linear-gradient(90deg, rgba(98, 136, 208, 0.18), rgba(243, 203, 99, 0.3), rgba(98, 136, 208, 0.18));
}

body.hanukkah .celebration {
  display: grid;
  opacity: 1;
  transform: translateY(0);
}

.hanukkah-page .celebration-orb {
  background: radial-gradient(circle at 35% 35%, #fffef7, #f3cb63 34%, #87aeea 66%, #284f8f 100%);
  box-shadow: 0 16px 30px rgba(9, 20, 45, 0.32);
}

.hanukkah-page .celebration h2 {
  color: #fff7da;
}

.hanukkah-page .section-header h2,
.hanukkah-page .intro h1,
.hanukkah-page .planner-card h3,
.hanukkah-page .mode-card h3,
.hanukkah-page .checklist-card h3,
.hanukkah-page .stat-card strong,
.hanukkah-page .seo-link-card strong,
.hanukkah-page .faq-item summary {
  text-wrap: balance;
}

.hanukkah-page .seo-resource-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.02)),
    linear-gradient(135deg, rgba(11, 24, 53, 0.96), rgba(8, 18, 39, 0.96));
}

.hanukkah-page .faq-item[open] summary {
  color: #f3cb63;
}

.hanukkah-page .progress-fill {
  background: linear-gradient(90deg, rgba(77, 130, 209, 0.92), rgba(243, 203, 99, 0.92), rgba(178, 213, 255, 0.92));
}

@media (max-width: 900px) {
  .hanukkah-page .festival-band {
    width: min(420px, calc(100% - 84px));
  }

  .hanukkah-page .window-icons {
    margin-top: 206px;
  }
}

@media (max-width: 720px) {
  .hanukkah-page .window-icons {
    grid-template-columns: repeat(3, 1fr);
  }

  .hanukkah-page .window-icons span:nth-child(4),
  .hanukkah-page .window-icons span:nth-child(5) {
    display: none;
  }
}

@media (max-width: 640px) {
  .hanukkah-page .festival-stage {
    min-height: 264px;
  }

  .hanukkah-page .menorah-glow {
    width: 128px;
  }

  .hanukkah-page .festival-band {
    top: 132px;
    width: min(332px, calc(100% - 34px));
    gap: 8px;
  }

  .hanukkah-page .hanukkah-wrap {
    width: 118px;
  }

  .hanukkah-page .hanukkah-wrap.left {
    left: 4px;
  }

  .hanukkah-page .hanukkah-wrap.right {
    right: 4px;
  }

  .hanukkah-page .window-icons {
    margin-top: 182px;
    width: min(334px, 100%);
  }
}

@media (max-width: 480px) {
  .hanukkah-page .festival-band {
    grid-template-columns: repeat(2, 1fr);
    top: 126px;
    width: min(304px, calc(100% - 24px));
  }

  .hanukkah-page .hanukkah-wrap.left {
    width: 108px;
    left: 8px;
  }

  .hanukkah-page .hanukkah-wrap.right {
    width: 88px;
    right: -2px;
    bottom: 28px;
  }

  .hanukkah-page .window-icons {
    width: min(304px, calc(100% - 24px));
  }
}