/*
* christmas.css
* Christmas & New Year theme (front pages only). Loaded only while the theme is
* active — see config/christmas.php. Everything is scoped to html.christmas.
*/

html.christmas {
  --xm-night: #08121f;
  --xm-night-2: #0b1a2d;
  --xm-teal: #0f3340;
  --xm-pine: #17463d;
  --xm-gold: #ffd27a;
  --xm-snow: #eef5ff;
  --xm-card: #11203a;
  --xm-border: rgba(160, 190, 230, 0.13);
  --bs-body-bg: #0a1525;
  --bs-body-bg-rgb: 10, 21, 37;
  --bs-border-color: #22344f;
  background-color: var(--bs-body-bg);
}

/* ------------------------------------------------------------------ Night palette */
html.christmas body {
  background-color: var(--bs-body-bg);
}
html.christmas .card {
  --bs-card-bg: var(--xm-card);
  background-color: var(--bs-card-bg);
  border-color: var(--xm-border);
}
html.christmas .bg-body {
  background-color: var(--bs-body-bg) !important;
}
html.christmas .dropdown-menu,
html.christmas .modal-content {
  background-color: #10203a;
}
html.christmas .bg-light {
  background-color: rgba(190, 215, 255, 0.06) !important;
}
html.christmas .accordion {
  --bs-accordion-bg: var(--xm-card);
}

/* Popular extensions band (home + extension detail): .bg-body equals the page colour
   in this theme, so give the section its own lighter night band and a frosted top
   edge to separate it from the content above. */
html.christmas .help-center-popular-articles {
  position: relative;
  background:
    radial-gradient(ellipse 60% 120px at 50% 0, rgba(190, 215, 255, 0.07), transparent 70%),
    linear-gradient(180deg, #0e1d34 0%, #0b182c 100%) !important;
  border-top: 1px solid transparent;
}
html.christmas .help-center-popular-articles::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(190, 215, 255, 0.28) 25%,
    rgba(238, 245, 255, 0.55) 50%,
    rgba(190, 215, 255, 0.28) 75%,
    transparent 100%
  );
  pointer-events: none;
}

/* Glassy night navbar — keeps links readable over the decorations behind it */
html.christmas .layout-navbar .navbar.landing-navbar {
  background-color: rgba(8, 18, 32, 0.62);
  border-color: rgba(180, 205, 240, 0.1);
  -webkit-backdrop-filter: saturate(120%) blur(8px);
  backdrop-filter: saturate(120%) blur(8px);
}
html.christmas .layout-navbar.navbar-active .navbar.landing-navbar {
  background: rgba(10, 22, 40, 0.92);
  border-color: rgba(180, 205, 240, 0.1);
}
@media (max-width: 991.98px) {
  html.christmas .layout-navbar .navbar.landing-navbar .landing-nav-menu {
    background-color: #0d1c33;
  }
}

/* Footer: snowbank on its top edge + deeper night tint */
html.christmas .landing-footer {
  position: relative;
}
html.christmas .landing-footer::before {
  content: '';
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: -38px;
  height: 52px;
  background: url('../img/christmas/drift.svg') center bottom / auto 100% repeat-x;
  pointer-events: none;
}
html.christmas .landing-footer .footer-overlay {
  background: linear-gradient(180deg, rgba(8, 18, 31, 0.85), rgba(8, 18, 31, 0.7));
}
html.christmas .landing-footer .footer-bottom {
  background-color: #070f1b;
}

/* ------------------------------------------------------------------ Snowfall */
.christmas-snow {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1029; /* under the fixed navbar, modals and chat widget */
  pointer-events: none;
}

/* ------------------------------------------------------------------ Snow-capped buttons
 * 3-slice cap: fixed left/right ends + two repeating middle tiles of co-prime widths
 * (bumps 56px, icicles 97px), so long buttons never show an obvious repeat while
 * short buttons still get rounded ends. Icon buttons get a single dome cap. */
:where(html.christmas) :where(.btn) {
  position: relative;
}
/* how-it-works resets every element with `all: revert` */
html.christmas .cz-hiw .btn {
  position: relative;
}
html.christmas .btn:where(:not(.btn-link, .btn-close, [class*='btn-text-'], .no-snow))::before {
  content: '';
  position: absolute;
  z-index: 2;
  top: -8px;
  left: -3px;
  right: -3px;
  height: 17px;
  padding: 0 12px;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 17'%3E%3Cpath d='M14 4C9 3.2 4.6 4 2.2 6.3.4 8.1.9 10.4 3.2 11c.6 1.6.7 3.2 1.7 3.6 1-.4 1.1-2 1.3-3.4 2.6-.3 5-.6 7.8-.6z' fill='%23bdd0e8'/%3E%3Cpath d='M14 4C9 3.2 4.6 4 2.2 6.3 1 7.6 1.4 9 3.6 9.2c3.4.2 6.4-.4 10.4-.4z' fill='%23f7fbff'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 17'%3E%3Cg transform='matrix(-1 0 0 1 14 0)'%3E%3Cpath d='M14 4C9 3.2 4.6 4 2.2 6.3.4 8.1.9 10.4 3.2 11c.6 1.6.7 3.2 1.7 3.6 1-.4 1.1-2 1.3-3.4 2.6-.3 5-.6 7.8-.6z' fill='%23bdd0e8'/%3E%3Cpath d='M14 4C9 3.2 4.6 4 2.2 6.3 1 7.6 1.4 9 3.6 9.2c3.4.2 6.4-.4 10.4-.4z' fill='%23f7fbff'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 97 17'%3E%3Cpath d='M20 9.4c.3 2.4.5 4.9 2 5.6 1.5-.7 1.7-3.2 2-5.6zM61 9.6c.2 1.8.4 3.6 1.6 4.1 1.2-.5 1.4-2.3 1.6-4.1zM82.4 9.6c.2 1 .3 2.1 1.1 2.4.8-.3.9-1.4 1.1-2.4z' fill='%23e9f1fb'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 17'%3E%3Cpath d='M0 4C6 1.2 12 1.2 17 3.4 21 2 26 2 30 3.6 36 .8 46 1 51 3.2 53 3.6 54.5 4 56 4v6.6c-6 .8-12-.6-18 .2-7 .8-14-.8-21 .1-7 .7-12-.7-17-.3z' fill='%23bdd0e8'/%3E%3Cpath d='M0 4C6 1.2 12 1.2 17 3.4 21 2 26 2 30 3.6 36 .8 46 1 51 3.2 53 3.6 54.5 4 56 4v4.8c-7 .8-13-.6-19 .2-7 .8-13-.6-20 .1-7 .7-12-.7-17-.3z' fill='%23f7fbff'/%3E%3C/svg%3E");
  background-position: left top, right top, 9px top, 0 top;
  background-size: 14px 17px, 14px 17px, 97px 17px, 56px 17px;
  background-repeat: no-repeat, no-repeat, repeat-x, repeat-x;
  background-origin: border-box, border-box, content-box, content-box;
  background-clip: border-box, border-box, content-box, content-box;
  filter: drop-shadow(0 1px 0.5px rgba(4, 12, 28, 0.45));
  transition: transform 0.25s ease;
}
html.christmas .btn:where(:not(.btn-link, .btn-close, [class*='btn-text-'], .no-snow)):hover::before {
  transform: translateY(-1px);
}

/* Small buttons: a lighter, thinner cap */
html.christmas .btn.btn-sm:not(.btn-icon)::before {
  top: -6px;
  height: 13px;
  padding: 0 9px;
  background-size: 11px 13px, 11px 13px, 74px 13px, 43px 13px;
  background-position: left top, right top, 7px top, 0 top;
}
/* Large buttons: a fuller cap */
html.christmas .btn.btn-lg:not(.btn-icon)::before {
  top: -9px;
  height: 20px;
  padding: 0 14px;
  background-size: 16px 20px, 16px 20px, 114px 20px, 66px 20px;
}
/* Pill buttons: keep the cap on the flat top, away from the rounded ends */
html.christmas .btn.rounded-pill:not(.btn-icon)::before,
html.christmas .cz-hiw .btn::before {
  left: 14px;
  right: 14px;
}
/* Icon / round buttons: a single snow dome */
html.christmas .btn.btn-icon::before,
html.christmas .btn.rounded-circle::before {
  left: -2px;
  right: -2px;
  padding: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 17' preserveAspectRatio='none'%3E%3Cpath d='M2 10.6C.6 6.6 6.4 3.2 13 3.6 17.6 1.2 25 1.4 29 3.8c6.4-.2 10.6 3.4 9 6.8-1 .4-1.6.6-2.6.6.2 1.8.4 3.6-.9 4.2-1.3-.6-1.5-2.4-1.5-4C24 11.8 12 11.8 2 10.6z' fill='%23bdd0e8'/%3E%3Cpath d='M2.6 9C1.6 6 7 3.4 13 3.8 17.6 1.6 25 1.8 29 4c6 0 9.8 2.6 8.6 5.2-12 1.2-23 1-35-.2z' fill='%23f7fbff'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-position: center top;
  background-repeat: no-repeat;
  background-origin: border-box;
  background-clip: border-box;
}

/* ------------------------------------------------------------------ Page headers
 * Used where the animated hero doesn't fit but there is room for artwork. Uses the
 * optional photo from CHRISTMAS_HEADER_IMAGE, otherwise an SVG night landscape. */
html.christmas .help-center-header {
  background:
    url('../img/christmas/hills.svg') center bottom / 100% 150px no-repeat,
    url('../img/christmas/stars-a.svg') 0 0 / 600px 400px repeat,
    linear-gradient(180deg, #091428 0%, #0c2236 55%, #0f3340 100%);
  isolation: isolate;
}
html.christmas .help-center-header::before,
html.christmas .help-center-header::after {
  content: '';
  z-index: -1;
  top: 0;
  bottom: auto;
  width: min(34vw, 380px);
  height: min(15.2vw, 170px);
  background:
    url('../img/christmas/garland-glow-a.svg') left top / 100% auto no-repeat,
    url('../img/christmas/garland.svg') left top / 100% auto no-repeat;
  transform: none;
  pointer-events: none;
}
html.christmas .help-center-header::before {
  left: 0;
  right: auto;
}
html.christmas .help-center-header::after {
  left: auto;
  right: 0;
  transform: scaleX(-1);
}
html.christmas-photo .help-center-header {
  background:
    linear-gradient(180deg, rgba(8, 18, 31, 0.55) 0%, rgba(8, 18, 31, 0.78) 100%),
    var(--christmas-header-image) center / cover no-repeat,
    #0a1525;
}
html.christmas-photo .help-center-header::before,
html.christmas-photo .help-center-header::after {
  display: none;
}
html.christmas .help-center-header h1,
html.christmas .help-center-header h3 {
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

/* ------------------------------------------------------------------ Hero scene */
html.christmas .landing-hero.has-christmas-scene {
  background: linear-gradient(180deg, #050d1b 0%, #08172c 42%, #0d2a3a 78%, #0f3340 100%);
  isolation: isolate;
}
html.christmas .landing-hero.has-christmas-scene::before,
html.christmas .landing-hero.has-christmas-scene::after {
  display: none;
}

.christmas-scene {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.christmas-scene > * {
  position: absolute;
  display: block;
  max-width: none;
  user-select: none;
}
.christmas-scene__stars,
.christmas-scene__stars-twinkle {
  inset: 0 0 25% 0;
  background: url('../img/christmas/stars-a.svg') 0 0 / 600px 400px repeat;
  opacity: 0.8;
}
.christmas-scene__stars-twinkle {
  background-image: url('../img/christmas/stars-b.svg');
  background-position: 170px 60px;
  animation: xm-twinkle 4.5s ease-in-out infinite alternate;
}
.christmas-scene__moon {
  left: 11%;
  top: 150px;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 38%, #fffbea 0%, #f6ecc4 55%, #e2d39b 100%);
  box-shadow: 0 0 40px 12px rgba(255, 238, 186, 0.22), 0 0 140px 50px rgba(160, 200, 255, 0.08);
}
.christmas-scene__sleigh {
  top: 96px;
  left: 0;
  width: 250px;
  opacity: 0;
  filter: drop-shadow(0 0 6px rgba(255, 214, 140, 0.55));
  animation: xm-sleigh 24s linear 2s infinite;
}
.christmas-scene__hills {
  left: 0;
  bottom: 40px;
  width: 100%;
  height: 230px;
}
.christmas-scene__trees,
.christmas-scene__glow {
  bottom: 18px;
  width: min(25vw, 360px);
}
.christmas-scene__trees--left,
.christmas-scene__glow--left {
  left: -24px;
}
.christmas-scene__trees--right,
.christmas-scene__glow--right {
  right: -24px;
}
.christmas-scene__glow {
  animation: xm-twinkle 2.8s ease-in-out infinite alternate;
}
.christmas-scene__glow.is-b {
  animation-delay: -1.4s;
}
.christmas-scene__drift {
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 90px;
}
.christmas-scene__garland {
  top: 0;
  width: min(32vw, 440px);
}
.christmas-scene__garland--left {
  left: 0;
}
.christmas-scene__garland--right {
  right: 0;
  transform: scaleX(-1);
}
.christmas-scene__garland-glow {
  animation: xm-twinkle 2.2s ease-in-out infinite alternate;
}
.christmas-scene__garland-glow.is-b {
  animation-delay: -1.1s;
}
.christmas-scene [data-depth] {
  will-change: transform;
}

/* Greeting pill above the hero title (inspired by the event-date pill) */
.christmas-greeting {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  padding: 0.35rem 1rem;
  border: 1px solid rgba(255, 220, 150, 0.35);
  border-radius: 999px;
  background: rgba(8, 18, 32, 0.55);
  color: #ffe2a6;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  box-shadow: 0 0 24px rgba(255, 210, 122, 0.12);
}
.christmas-greeting::before,
.christmas-greeting::after {
  content: '\2744';
  color: #cfe3ff;
  font-size: 0.75rem;
}

@keyframes xm-twinkle {
  from { opacity: 0.35; }
  to { opacity: 1; }
}
@keyframes xm-sleigh {
  0% { opacity: 0; transform: translate3d(105vw, 20px, 0) rotate(-4deg); }
  4% { opacity: 1; }
  45% { transform: translate3d(35vw, -14px, 0) rotate(-1deg); }
  60% { opacity: 1; }
  70% { opacity: 0; transform: translate3d(-30vw, 16px, 0) rotate(3deg); }
  100% { opacity: 0; transform: translate3d(-30vw, 16px, 0) rotate(3deg); }
}

@media (max-width: 991.98px) {
  .christmas-scene__trees,
  .christmas-scene__glow {
    width: 42vw;
  }
  .christmas-scene__garland {
    width: 46vw;
  }
  .christmas-scene__moon {
    top: 110px;
    width: 56px;
    height: 56px;
  }
  .christmas-scene__hills {
    height: 140px;
  }
  .christmas-scene__sleigh {
    top: 84px;
    width: 180px;
  }
}
@media (max-width: 575.98px) {
  .christmas-scene__garland--right,
  .christmas-scene__trees--right,
  .christmas-scene__glow--right {
    display: none;
  }
  .christmas-scene__garland {
    width: 60vw;
    opacity: 0.85;
  }
}

/* ------------------------------------------------------------------ Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .christmas-scene * {
    animation: none !important;
    transition: none !important;
  }
  .christmas-scene__sleigh {
    display: none;
  }
}