/* ==========================================================================
   KIDILLUS — CHRISTMAS THEME  (assets/css/christmas.css)  v2.0
   "Storybook winter" — bright snowy scene, not dark elegant.
   Shared by /christmas-book-deadline and /childrens-book-illustration-discount
   --------------------------------------------------------------------------
   Everything is scoped under .xmas-theme so it cannot leak into other pages.

   WHY THE HEADING RULE EXISTS:
   global.css sets  h1,h2,h3{color:#2a2a2a}  and  h2{color:#03a4ed}  as bare
   element selectors. A parent's `color` is only INHERITED, and an inherited
   value always loses to a direct element rule — which is why headings came
   out dark-on-dark and bright blue. Forcing `color:inherit` at (0,1,1)
   specificity beats the (0,0,1) global rule and hands colour control back
   to the section wrapper.
   ========================================================================== */

.xmas-theme {
  /* Winter sky */
  --xt-sky-1:  #a6d2f0;
  --xt-sky-2:  #d2e9fb;
  --xt-sky-3:  #eef7fe;
  --xt-frost:  #f4fafe;
  --xt-snow:   #ffffff;

  /* Ink — deep navy reads warm against ice blue */
  --xt-ink:    #14304a;
  --xt-mut:    #55708c;
  --xt-line:   #d8e8f4;

  /* Candy */
  --xt-berry:   #d13b48;
  --xt-berry-d: #ad2a36;
  --xt-berry-l: #ef6b74;

  /* Pine */
  --xt-pine:   #2f7d5d;
  --xt-pine-d: #1d5a41;
  --xt-pine-l: #dff0e7;

  /* Gingerbread + glow */
  --xt-ginger:   #c9834a;
  --xt-ginger-l: #f3e2cf;
  --xt-gold:     #edb556;

  --xt-r:  14px;
  --xt-r2: 22px;
}

/* ── THE FIX: give heading colour back to the container ── */
.xmas-theme h1, .xmas-theme h2, .xmas-theme h3,
.xmas-theme h4, .xmas-theme h5, .xmas-theme h6 { color: inherit; }

/* ══════════ BRIGHT SKY SURFACE ══════════ */
.xmas-theme .xt-sky {
  position: relative;
  background: linear-gradient(178deg, var(--xt-sky-1) 0%, var(--xt-sky-2) 42%, var(--xt-sky-3) 100%);
  color: var(--xt-ink);
  overflow: hidden;
}

/* Soft bokeh orbs — the glow in the reference shots */
.xmas-theme .xt-bokeh {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background-image:
    radial-gradient(circle 60px at 12% 22%, rgba(255,255,255,.55) 0%, transparent 70%),
    radial-gradient(circle 34px at 27% 62%, rgba(255,255,255,.45) 0%, transparent 70%),
    radial-gradient(circle 78px at 68% 15%, rgba(255,255,255,.40) 0%, transparent 70%),
    radial-gradient(circle 44px at 84% 48%, rgba(255,255,255,.50) 0%, transparent 70%),
    radial-gradient(circle 26px at 48% 34%, rgba(255,255,255,.55) 0%, transparent 70%),
    radial-gradient(circle 52px at 92% 78%, rgba(255,255,255,.35) 0%, transparent 70%),
    radial-gradient(circle 30px at 6%  74%, rgba(255,255,255,.40) 0%, transparent 70%);
  animation: xt-drift-glow 14s ease-in-out infinite alternate;
}
@keyframes xt-drift-glow {
  from { transform: translate3d(0,0,0)      scale(1);    opacity: .9; }
  to   { transform: translate3d(-14px,8px,0) scale(1.05); opacity: 1;  }
}

/* ══════════ FALLING SNOW ══════════
   Absolute (not fixed) so it stays inside the sky sections.
   Three parallax layers in one element — no extra DOM, no JS. */
.xmas-snow {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image:
    radial-gradient(2.6px 2.6px at 18% 12%, #fff 50%, transparent 51%),
    radial-gradient(2.6px 2.6px at 72% 28%, #fff 50%, transparent 51%),
    radial-gradient(2px   2px   at 42% 62%, rgba(255,255,255,.9) 50%, transparent 51%),
    radial-gradient(2px   2px   at 88% 78%, rgba(255,255,255,.9) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 8%  44%, rgba(255,255,255,.8) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 58% 88%, rgba(255,255,255,.8) 50%, transparent 51%);
  background-size: 330px 330px, 330px 330px, 235px 235px, 235px 235px, 165px 165px, 165px 165px;
  animation: xt-fall 24s linear infinite;
  will-change: background-position;
}
@keyframes xt-fall {
  to { background-position: 14px 330px, -16px 330px, 9px 235px, -11px 235px, 6px 165px, -7px 165px; }
}

@media (prefers-reduced-motion: reduce) {
  .xmas-snow, .xmas-theme .xt-bokeh, .xmas-theme .xt-lights li { animation: none !important; }
}

/* ══════════ WINTER SCENE (snow hills + frosted pines) ══════════ */
.xmas-theme .xt-scene { display: block; width: 100%; height: 150px; position: relative; z-index: 3; margin-bottom: -1px; }
.xmas-theme .xt-hill-back  { fill: #e4f2fd; }
.xmas-theme .xt-hill-mid   { fill: #f2f9ff; }
.xmas-theme .xt-hill-front { fill: #ffffff; }
.xmas-theme .xt-tree-back  { fill: #c3ddf1; }
.xmas-theme .xt-tree-front { fill: #a8cde8; }
.xmas-theme .xt-tree-cap   { fill: #ffffff; }

@media (max-width: 620px) { .xmas-theme .xt-scene { height: 88px; } }

/* ══════════ CANDY-CANE RIBBON ══════════ */
.xmas-theme .xt-ribbon {
  height: 8px; position: relative; z-index: 6;
  background: repeating-linear-gradient(
    -45deg,
    var(--xt-berry) 0 14px,
    #ffffff         14px 28px,
    var(--xt-pine)  28px 42px,
    #ffffff         42px 56px
  );
}

/* ══════════ STRING LIGHTS ══════════ */
.xmas-theme .xt-lights {
  display: flex; gap: 26px; justify-content: center; align-items: flex-start;
  padding: 0; margin: 0 0 6px; list-style: none; position: relative; z-index: 5;
}
.xmas-theme .xt-lights li {
  width: 10px; height: 14px; border-radius: 50% 50% 55% 55%;
  position: relative; animation: xt-twinkle 3.2s ease-in-out infinite;
}
.xmas-theme .xt-lights li::before {
  content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
  width: 3px; height: 6px; background: rgba(20,48,74,.28); border-radius: 1px;
}
.xmas-theme .xt-lights li:nth-child(4n+1) { background: #e8483f; box-shadow: 0 0 11px #e8483f; animation-delay: 0s; }
.xmas-theme .xt-lights li:nth-child(4n+2) { background: #f2c14e; box-shadow: 0 0 11px #f2c14e; animation-delay: .5s; }
.xmas-theme .xt-lights li:nth-child(4n+3) { background: #4fb477; box-shadow: 0 0 11px #4fb477; animation-delay: 1s; }
.xmas-theme .xt-lights li:nth-child(4n+4) { background: #5aa9e6; box-shadow: 0 0 11px #5aa9e6; animation-delay: 1.5s; }
@keyframes xt-twinkle { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

/* ══════════ BADGE ══════════ */
.xmas-theme .xt-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--xt-line);
  color: var(--xt-berry); padding: 7px 17px; border-radius: 100px;
  font-size: 11.5px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
  box-shadow: 0 3px 12px rgba(20,48,74,.09); position: relative; z-index: 5;
}
.xmas-theme .xt-badge .xt-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--xt-berry);
  box-shadow: 0 0 8px var(--xt-berry); animation: xt-twinkle 1.8s infinite;
}

/* ══════════ ICING EDGE (gingerbread-roof drip) ══════════ */
.xmas-theme .xt-icing { position: relative; }
.xmas-theme .xt-icing::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 11px;
  background:
    radial-gradient(circle 7px at 7px 0, #fff 96%, transparent 100%) repeat-x 0 0 / 14px 11px;
  filter: drop-shadow(0 1px 1px rgba(20,48,74,.09));
}

/* ══════════ SNOW-CAP (white cap on top of a card) ══════════ */
.xmas-theme .xt-cap { position: relative; overflow: hidden; }
.xmas-theme .xt-cap::after {
  content: ''; position: absolute; top: -14px; left: -6%; width: 112%; height: 26px;
  background: #fff; border-radius: 0 0 50% 50% / 0 0 100% 100%;
}

/* ══════════ CARD ══════════ */
.xmas-theme .xt-card {
  background: #fff; border-radius: var(--xt-r2);
  box-shadow: 0 14px 40px rgba(20,48,74,.13), 0 2px 6px rgba(20,48,74,.05);
}

/* ══════════ PINE PANEL (the one dark anchor) ══════════ */
.xmas-theme .xt-pine-panel {
  background:
    radial-gradient(ellipse 60% 50% at 12% 0%, rgba(255,255,255,.10) 0%, transparent 60%),
    linear-gradient(150deg, var(--xt-pine) 0%, var(--xt-pine-d) 100%);
  color: #fff;
}