/**
 * themes/christmas/theme.css
 * Self-contained modular stylesheet for the "Christmas" (christmas) theme.
 * Nordic Midwinter in silver frost, ice-blue, and dark slate with selective accents
 * in warm Swedish Christmas red and candlelight gold.
 */

html[data-season="christmas"],
body.season-christmas {
  --hero-image-url: url("../../images/hero_christmas.webp");
  --theme-card-radius: 16px;
  --theme-inner-card-radius: 14px;
}

html[data-season="christmas"] main > section {
  border-radius: var(--theme-card-radius, 16px);
  border: 1px solid rgba(180, 206, 232, 0.14);
  box-shadow:
    0 14px 34px -10px rgba(4, 9, 16, 0.48),
    inset 0 1px 0 0 rgba(220, 236, 252, 0.08);
}

html[data-season="christmas"][data-theme="light"] main > section,
html[data-season="christmas"] body:not(.dark) main > section {
  border: 1px solid rgba(36, 68, 98, 0.12);
  box-shadow:
    0 12px 28px -8px rgba(18, 36, 56, 0.08),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.85);
}

html[data-season="christmas"] .project-card {
  border-radius: var(--theme-inner-card-radius, 14px);
}

/* ==========================================================================
   MENU TOMTE ORNAMENT IN OFFCANVAS MENU
   ========================================================================== */

html[data-season="christmas"] .menu-santa-peek {
  width: 142px !important;
  height: auto !important;
  right: 4px !important;
  bottom: 0 !important;
}

html[data-season="christmas"] .menu-santa-img {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  opacity: calc(0.95 * var(--shadow-multiplier, 1)) !important;
  filter: drop-shadow(0 6px 16px rgba(4, 10, 18, 0.38)) !important;
  transform-origin: bottom right !important;
  transform: scale(var(--menu-scale, 1)) !important;
}

html[data-season="christmas"][data-theme="light"] .menu-santa-img,
html[data-season="christmas"] body:not(.dark) .menu-santa-img {
  opacity: calc(0.96 * var(--shadow-multiplier, 1)) !important;
  filter: drop-shadow(0 5px 14px rgba(18, 32, 48, 0.18)) !important;
}

/* Show Christmas-specific menu items only when Christmas theme is active */
.season-christmas-only {
  display: none !important;
}

html[data-season="christmas"] .season-christmas-only,
body.season-christmas .season-christmas-only {
  display: list-item !important;
}

/* ==========================================================================
   MODULAR SCROLL & IMAGE FILTER MODES FOR THEME: CHRISTMAS
   ========================================================================== */

/* 1. Default mode: grayscale_to_color (grayscale when out of view, full color when scrolled into view) */
html[data-season="christmas"][data-image-scroll-effect="grayscale_to_color"] .hero-image,
html[data-season="christmas"]:not([data-image-scroll-effect]) .hero-image {
  filter: grayscale(100%);
  transition: filter 0.5s ease;
}
html[data-season="christmas"][data-image-scroll-effect="grayscale_to_color"] .hero.in-view .hero-image,
html[data-season="christmas"]:not([data-image-scroll-effect]) .hero.in-view .hero-image {
  filter: grayscale(0%);
}
html[data-season="christmas"][data-image-scroll-effect="grayscale_to_color"] .project-card img,
html[data-season="christmas"]:not([data-image-scroll-effect]) .project-card img {
  filter: grayscale(100%);
}
html[data-season="christmas"][data-image-scroll-effect="grayscale_to_color"] .project-card.img-in-view img,
html[data-season="christmas"]:not([data-image-scroll-effect]) .project-card.img-in-view img {
  filter: grayscale(0%);
}

/* 2. Mode: full_color (images are always 100% color regardless of scroll position) */
html[data-season="christmas"][data-image-scroll-effect="full_color"] .hero-image,
html[data-season="christmas"][data-image-scroll-effect="full_color"] .hero.in-view .hero-image,
html[data-season="christmas"][data-image-scroll-effect="full_color"] .project-card img,
html[data-season="christmas"][data-image-scroll-effect="full_color"] .project-card.img-in-view img {
  filter: grayscale(0%) !important;
}

/* 3. Mode: sepia_to_color (warm vintage sepia until scrolled into view) */
html[data-season="christmas"][data-image-scroll-effect="sepia_to_color"] .hero-image,
html[data-season="christmas"][data-image-scroll-effect="sepia_to_color"] .project-card img {
  filter: sepia(75%) contrast(0.95) brightness(0.95) !important;
}
html[data-season="christmas"][data-image-scroll-effect="sepia_to_color"] .hero.in-view .hero-image,
html[data-season="christmas"][data-image-scroll-effect="sepia_to_color"] .project-card.img-in-view img {
  filter: sepia(0%) contrast(1) brightness(1) !important;
}

/* 4. Mode: always_grayscale (monochrome editorial style at all scroll positions) */
html[data-season="christmas"][data-image-scroll-effect="always_grayscale"] .hero-image,
html[data-season="christmas"][data-image-scroll-effect="always_grayscale"] .hero.in-view .hero-image,
html[data-season="christmas"][data-image-scroll-effect="always_grayscale"] .project-card img,
html[data-season="christmas"][data-image-scroll-effect="always_grayscale"] .project-card.img-in-view img {
  filter: grayscale(100%) !important;
}

/* 5. Card border highlight on scroll (.project-card.in-view) */
html[data-season="christmas"][data-card-scroll-highlight="off"] .project-card.in-view {
  border-color: var(--border-color) !important;
}

/* 6. Section fade-in on scroll */
html[data-season="christmas"][data-section-scroll-fade="off"] main > section {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}