/* ============================================
   SHARED SEASONAL BACKGROUNDS
============================================ */
/* Variable sources:
   inc/core-theme-seasonal-backgrounds.php -> bombo_get_season_bg_inline_css()
*/
/* ============================================
   1. Videot + Pelit
============================================ */

/* Use viewport-locked background layer for transparent-header pages.
   This prevents mobile zoom/stretch when page content is tall. */
.page-template-template-videot .bg-wrapper,
.page-pelit .bg-wrapper,
.jakso-template-default .bg-wrapper,
.tarinatuokio-template-default .bg-wrapper,
.elokuva-template-default .bg-wrapper,
.pmpro-levels .bg-wrapper,
.pmpro-checkout .bg-wrapper,
.pmpro-login .bg-wrapper,
.pmpro-confirmation .bg-wrapper,
.pmpro-account .bg-wrapper,
.page-template-template-account .bg-wrapper {
  position: relative;
  background-image: none !important;
  background-color: #0c1c30;
}

.page-template-template-videot .bg-wrapper::before,
.page-pelit .bg-wrapper::before,
.jakso-template-default .bg-wrapper::before,
.tarinatuokio-template-default .bg-wrapper::before,
.elokuva-template-default .bg-wrapper::before,
.pmpro-levels .bg-wrapper::before,
.pmpro-checkout .bg-wrapper::before,
.pmpro-login .bg-wrapper::before,
.pmpro-confirmation .bg-wrapper::before,
.pmpro-account .bg-wrapper::before,
.page-template-template-account .bg-wrapper::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
}

/* 1. Videot + Pelit - TALVI */
.season-winter.page-template-template-videot .bg-wrapper,
.season-winter.page-pelit .bg-wrapper,
.season-winter.jakso-template-default .bg-wrapper,
.season-winter.tarinatuokio-template-default .bg-wrapper,
.season-winter.elokuva-template-default .bg-wrapper {
  background-image:
    linear-gradient(
      135deg,
      rgba(30, 50, 80, 0.7),
      rgba(200, 215, 230, 0.35)
    ),
    var(--bombo-bg-shared-winter);
}

.season-winter.page-template-template-videot .bg-wrapper::before,
.season-winter.page-pelit .bg-wrapper::before,
.season-winter.jakso-template-default .bg-wrapper::before,
.season-winter.tarinatuokio-template-default .bg-wrapper::before,
.season-winter.elokuva-template-default .bg-wrapper::before {
  background-image:
    linear-gradient(
      135deg,
      rgba(30, 50, 80, 0.7),
      rgba(200, 215, 230, 0.35)
    ),
    var(--bombo-bg-shared-winter);
}

/* 1. Videot + Pelit - KEVÄT - SPRING - 1 - MAALISKUU + HUHTIKUU*/
.season-spring-1.page-template-template-videot .bg-wrapper,
.season-spring-1.page-pelit .bg-wrapper,
.season-spring-1.jakso-template-default .bg-wrapper,
.season-spring-1.tarinatuokio-template-default .bg-wrapper,
.season-spring-1.elokuva-template-default .bg-wrapper
{  background-image:
    linear-gradient(
      135deg,
      rgba(30, 50, 80, 0.7),
      rgba(200, 215, 230, 0.35)
    ),
    var(--bombo-bg-shared-spring-2);
}

.season-spring-1.page-template-template-videot .bg-wrapper::before,
.season-spring-1.page-pelit .bg-wrapper::before,
.season-spring-1.jakso-template-default .bg-wrapper::before,
.season-spring-1.tarinatuokio-template-default .bg-wrapper::before,
.season-spring-1.elokuva-template-default .bg-wrapper::before {
  background-image:
    linear-gradient(
      135deg,
      rgba(30, 50, 80, 0.7),
      rgba(200, 215, 230, 0.35)
    ),
    var(--bombo-bg-shared-spring-2);
}


/* 1. Videot + Pelit - KEVÄT - SPRING - 2 - TOUKOKUU*/
.season-spring-2.page-template-template-videot .bg-wrapper,
.season-spring-2.page-pelit .bg-wrapper,
.season-spring-2.jakso-template-default .bg-wrapper,
.season-spring-2.tarinatuokio-template-default .bg-wrapper,
.season-spring-2.elokuva-template-default .bg-wrapper {
  background-image:
    linear-gradient(
      135deg,
      rgba(30, 50, 80, 0.7),
      rgba(200, 215, 230, 0.35)
    ),
    var(--bombo-bg-shared-spring-2);
}

.season-spring-2.page-template-template-videot .bg-wrapper::before,
.season-spring-2.page-pelit .bg-wrapper::before,
.season-spring-2.jakso-template-default .bg-wrapper::before,
.season-spring-2.tarinatuokio-template-default .bg-wrapper::before,
.season-spring-2.elokuva-template-default .bg-wrapper::before {
  background-image:
    linear-gradient(
      135deg,
      rgba(30, 50, 80, 0.7),
      rgba(200, 215, 230, 0.35)
    ),
    var(--bombo-bg-shared-spring-2);
}


/* 1. Videot + Pelit - KESÄ - SUMMER - KESÄKUU, HEINÄKUU, ELOKUU */
.season-summer.page-template-template-videot .bg-wrapper,
.season-summer.page-pelit .bg-wrapper,
.season-summer.jakso-template-default .bg-wrapper,
.season-summer.tarinatuokio-template-default .bg-wrapper,
.season-summer.elokuva-template-default .bg-wrapper {
  background-image:
    linear-gradient(
      135deg,
      rgba(30, 50, 80, 0.7),
      rgba(200, 215, 230, 0.35)
    ),
    var(--bombo-bg-shared-summer);
}

.season-summer.page-template-template-videot .bg-wrapper::before,
.season-summer.page-pelit .bg-wrapper::before,
.season-summer.jakso-template-default .bg-wrapper::before,
.season-summer.tarinatuokio-template-default .bg-wrapper::before,
.season-summer.elokuva-template-default .bg-wrapper::before {
  background-image:
    linear-gradient(
      135deg,
      rgba(30, 50, 80, 0.7),
      rgba(200, 215, 230, 0.35)
    ),
    var(--bombo-bg-shared-summer);
}

/* SYKSY - AUTUMN - SYYSKUU - LOKAKUU */
.season-autumn.page-template-template-videot .bg-wrapper,
.season-autumn.page-pelit .bg-wrapper,
.season-autumn.jakso-template-default .bg-wrapper,
.season-autumn.tarinatuokio-template-default .bg-wrapper,
.season-autumn.elokuva-template-default .bg-wrapper {
  background-image:
    linear-gradient(
      135deg,
      rgba(30, 50, 80, 0.7),
      rgba(200, 215, 230, 0.35)
    ),
    var(--bombo-bg-shared-autumn);
}

.season-autumn.page-template-template-videot .bg-wrapper::before,
.season-autumn.page-pelit .bg-wrapper::before,
.season-autumn.jakso-template-default .bg-wrapper::before,
.season-autumn.tarinatuokio-template-default .bg-wrapper::before,
.season-autumn.elokuva-template-default .bg-wrapper::before {
  background-image:
    linear-gradient(
      135deg,
      rgba(30, 50, 80, 0.7),
      rgba(200, 215, 230, 0.35)
    ),
    var(--bombo-bg-shared-autumn);
}

/* 1. Videot + Pelit = TRANSPARENT HEADER */
.page-template-template-videot .site-header,
.page-template-template-videot main,
.page-pelit .site-header,
.page-pelit main,
.jakso-template-default .site-header,
.jakso-template-default main,
.tarinatuokio-template-default .site-header,
.tarinatuokio-template-default main,
.elokuva-template-default .site-header,
.elokuva-template-default main {
  background: transparent;
  box-shadow: none;
}

/* 1. Videot + Pelit = BG-OVERLAY */
.page-template-template-videot .bg-overlay,
.page-pelit .bg-overlay,
.jakso-template-default .bg-overlay,
.tarinatuokio-template-default .bg-overlay,
.elokuva-template-default .bg-overlay {
  background: rgba(0, 0, 0, 0.7);
}

/* ============================================
   2. KERHO BACKGROUNDS
   2.1 Front page CTA card
============================================ */
.season-winter .feature-kerho .feature-background {
  background-image: var(--bombo-bg-kerho-1-winter);
}

.season-spring-1 .feature-kerho .feature-background {
  background-image: var(--bombo-bg-kerho-1-spring-1);
}

.season-spring-2 .feature-kerho .feature-background {
  background-image: var(--bombo-bg-kerho-1-spring-2);
}

.season-summer .feature-kerho .feature-background {
  background-image: var(--bombo-bg-kerho-1-summer);
}

.season-autumn .feature-kerho .feature-background {
  background-image: var(--bombo-bg-kerho-1-autumn);
}

/* ============================================
   2.2 Kerho page hero
============================================ */
.page-bombon-kerho .bg-wrapper {
  background-image: none !important;
  background-color: #0c1c30 !important;
  background-attachment: scroll !important;
}

.page-bombon-kerho .bg-wrapper::before {
  content: none !important;
  background-image: none !important;
}

.page-bombon-kerho .bg-overlay {
  position: absolute;
  inset: 0;
  background: transparent !important;
}

.page-bombon-kerho .site-header {
  background: var(--header-gradient) !important;
  box-shadow: 0 6px 14px rgba(5, 11, 20, 0.24) !important;
}

.season-winter .kerho-hero-section {
  --bombo-kerho-hero-bg: var(--bombo-bg-kerho-1-winter);
}

.season-spring-1 .kerho-hero-section {
  --bombo-kerho-hero-bg: var(--bombo-bg-kerho-1-spring-1);
}

.season-spring-2 .kerho-hero-section {
  --bombo-kerho-hero-bg: var(--bombo-bg-kerho-1-spring-2);
}

.season-summer .kerho-hero-section {
  --bombo-kerho-hero-bg: var(--bombo-bg-kerho-1-summer);
}

.season-autumn .kerho-hero-section {
  --bombo-kerho-hero-bg: var(--bombo-bg-kerho-1-autumn);
}

/* ============================================
   2.3 Kerho page gift section
============================================ */
.season-winter .kerho-gifts {
  background-image: var(--bombo-bg-kerho-2-winter);
}

.season-spring-1 .kerho-gifts {
  background-image: var(--bombo-bg-kerho-2-spring-1);
}

.season-spring-2 .kerho-gifts {
  background-image: var(--bombo-bg-kerho-2-spring-2);
}

.season-summer .kerho-gifts {
  background-image: var(--bombo-bg-kerho-2-summer);
}

.season-autumn .kerho-gifts {
  background-image: var(--bombo-bg-kerho-2-autumn);
}

/* ============================================
   2.4 Kerho page footer CTA
============================================ */
.season-winter .kerho-cta-footer {
  background-image: var(--bombo-bg-kerho-3-winter);
}

.season-spring-1 .kerho-cta-footer {
  background-image: var(--bombo-bg-kerho-3-spring-1);
}

.season-spring-2 .kerho-cta-footer {
  background-image: var(--bombo-bg-kerho-3-spring-2);
}

.season-summer .kerho-cta-footer {
  background-image: var(--bombo-bg-kerho-3-summer);
}

.season-autumn .kerho-cta-footer {
  background-image: var(--bombo-bg-kerho-3-autumn);
}

/* ============================================
   2.5 Kerho seasonal overrides
============================================ */
.season-spring-1 .kerho-hero-section {
  --kerho-hero-bg-position: center;
}

@media (max-width: 768px) {
  .season-spring-1 .kerho-hero-section {
    --kerho-hero-overlay: linear-gradient(
      160deg,
      rgba(8, 20, 40, 0.62),
      rgba(15, 45, 70, 0.4)
    );
  }
}

.season-spring-1 .kerho-gifts {
  --kerho-gifts-bg-position: bottom;
}

.season-spring-1 .kerho-cta-footer {
  --kerho-cta-bg-position: bottom;
  --kerho-cta-overlay: linear-gradient(
    135deg,
    rgba(3, 30, 30, 0.3),
    rgba(30, 50, 30, 0.5)
  );
}

/* Front page Kerho CTA card overlay: matched to Kerho page footer CTA for spring-1. */
.season-spring-1 .feature-section.feature-kerho {
  --feature-kerho-bg-position: bottom;
  --feature-kerho-overlay: linear-gradient(
    135deg,
    rgba(3, 30, 30, 0.3),
    rgba(30, 50, 30, 0.5)
  );
}

/* ============================================
   4. PMPRO + LOGIN + ACCOUNT PAGES
============================================ */
.season-winter {
  --bombo-pmpro-bg: var(--bombo-bg-kerho-1-winter);
}

.season-spring-1 {
  --bombo-pmpro-bg: var(--bombo-bg-kerho-1-spring-1);
}

.season-spring-2 {
  --bombo-pmpro-bg: var(--bombo-bg-kerho-1-spring-2);
}

.season-summer {
  --bombo-pmpro-bg: var(--bombo-bg-kerho-1-summer);
}

.season-autumn {
  --bombo-pmpro-bg: var(--bombo-bg-kerho-1-autumn);
}

.pmpro-levels .bg-wrapper::before,
.pmpro-checkout .bg-wrapper::before,
.pmpro-login .bg-wrapper::before,
.pmpro-confirmation .bg-wrapper::before,
.pmpro-account .bg-wrapper::before,
.page-template-template-account .bg-wrapper::before {
  background-image: var(--bombo-pmpro-bg, var(--bombo-bg-kerho-1-winter));
}

/* Account pages: keep seasonal background on desktop.
   Root fallback color prevents overscroll flash on mobile browsers. */
body.pmpro-account,
body.page-template-template-account {
  background-color: #0f2740 !important;
}

html:has(body.pmpro-account),
html:has(body.page-template-template-account) {
  background-color: #0f2740 !important;
}

/* Jäsenyys-sivu (account-sub-jasenyys):
   Desktopilla käytä samaa seasonal taustakuvaa kuin PMPro kerho-plus -polulla.
   Mobiilissa pidetään taustakuva pois (ei hyppimistä). */
@media (min-width: 769px) {
  body.account-sub-jasenyys.page-template-template-account .bg-wrapper {
    background-image: none !important;
    background-color: #0f2740 !important;
  }

  body.account-sub-jasenyys.page-template-template-account .bg-wrapper::before {
    content: "" !important;
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: var(--bombo-pmpro-bg, var(--bombo-bg-kerho-1-winter)) !important;
  }

  body.account-sub-jasenyys.page-template-template-account .bg-overlay {
    background: rgba(0, 0, 0, 0.7) !important;
  }
}

/* Checkout pages (/vahvista-tilaus/?pmpro_level=1,2,3):
   use stable solid background on all viewports (same visual mode as mobile). */
.pmpro-checkout .bg-wrapper {
  background-image: none !important;
  background-color: #0f2740 !important;
}

.pmpro-checkout .bg-wrapper::before {
  content: none !important;
  background-image: none !important;
}

.pmpro-checkout .bg-overlay {
  background: linear-gradient(
    180deg,
    rgba(8, 20, 35, 0.22),
    rgba(8, 20, 35, 0.14)
  ) !important;
}

/* Checkout + Confirmation:
   Desktop: seasonal background enabled.
   Mobile: stable solid background (no image jump). */
@media (max-width: 768px) {
  .pmpro-levels .bg-wrapper,
  .pmpro-checkout .bg-wrapper,
  .pmpro-confirmation .bg-wrapper {
    background-image: none !important;
    background-color: #0f2740;
  }

  .pmpro-levels .bg-wrapper::before,
  .pmpro-checkout .bg-wrapper::before,
  .pmpro-confirmation .bg-wrapper::before {
    content: none !important;
    background-image: none !important;
  }

  .pmpro-levels .bg-overlay,
  .pmpro-checkout .bg-overlay,
  .pmpro-confirmation .bg-overlay {
    background: linear-gradient(
      180deg,
      rgba(8, 20, 35, 0.22),
      rgba(8, 20, 35, 0.14)
    ) !important;
  }
}

/* 4. PMPRO - BG OVERLAY */
.pmpro-levels .bg-overlay,
.pmpro-checkout .bg-overlay,
.pmpro-login .bg-overlay,
.pmpro-confirmation .bg-overlay,
.pmpro-account .bg-overlay,
.page-template-template-account .bg-overlay {
  background: rgba(0, 0, 0, 0.7);
}

/* 4. PMPRO  = TRANSPARENT HEADER */
.pmpro-levels .site-header,
.pmpro-checkout .site-header,
.pmpro-login .site-header,
.pmpro-confirmation .site-header,
.pmpro-account .site-header,
.page-template-template-account .site-header {
  background: transparent;
  box-shadow: none;
}

/* 4. PMPRO  = TRANSPARENT MAIN */
.pmpro-levels main,
.pmpro-checkout main,
.pmpro-login main,
.pmpro-confirmation main,
.pmpro-account main,
.page-template-template-account main {
  background: transparent;
  box-shadow: none;
}

/* 4. PMPRO  = TRANSPARENT FOOTER */
.pmpro-checkout footer,
.pmpro-login footer,
.pmpro-confirmation footer,
.pmpro-account footer,
.page-template-template-account .site-footer {
  background-color: transparent;
  box-shadow: none;
}

/* Keep levels page footer readable (semi-transparent instead of fully transparent). */
.pmpro-levels footer {
  background-color: rgba(12, 28, 52, 0.82);
}

/* PMPRO mobile: estä fixed-taustan zoom/hyppy scrollissa */
@media (max-width: 768px) {
  .pmpro-levels .bg-wrapper,
  .pmpro-checkout .bg-wrapper,
  .pmpro-login .bg-wrapper,
  .pmpro-confirmation .bg-wrapper,
  .pmpro-account .bg-wrapper,
  .page-template-template-account .bg-wrapper {
    background-attachment: scroll !important;
    background-position: center top;
    background-size: cover;
  }

  /* Account pages remain static on mobile too (same as desktop). */
  .page-template-template-account .bg-wrapper,
  .pmpro-account .bg-wrapper {
    background-image: none !important;
    background-color: #0f2740 !important;
  }

  .page-template-template-account .bg-wrapper::before,
  .pmpro-account .bg-wrapper::before {
    content: none !important;
    background-image: none !important;
  }

  .page-template-template-account .bg-overlay,
  .pmpro-account .bg-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      rgba(8, 20, 35, 0.22),
      rgba(8, 20, 35, 0.14)
    ) !important;
  }

  body.account-sub-jasenyys.page-template-template-account .bg-wrapper::before {
    content: none !important;
    background-image: none !important;
  }
}

/* ============================================
   VIDEO PAGES - STABLE BACKGROUND MODE
   - Disable seasonal bg image layer
   - Use normal header (non-transparent)
   - Use stable gradient background instead of viewport image
============================================ */
.page-template-template-videot .bg-wrapper,
.page-pelit .bg-wrapper,
.jakso-template-default .bg-wrapper,
.tarinatuokio-template-default .bg-wrapper,
.elokuva-template-default .bg-wrapper,
.single-yhteistyovideo .bg-wrapper {
  background-image: none !important;
  background-color: #0c1c30 !important;
}

/* Prevent white root background flashes on mobile overscroll/admin-bar offset. */
body.page-template-template-videot,
body.page-pelit,
body.jakso-template-default,
body.tarinatuokio-template-default,
body.elokuva-template-default,
body.single-yhteistyovideo {
  background-color: #0c1c30;
}

.page-template-template-videot .bg-wrapper::before,
.page-pelit .bg-wrapper::before,
.jakso-template-default .bg-wrapper::before,
.tarinatuokio-template-default .bg-wrapper::before,
.elokuva-template-default .bg-wrapper::before,
.single-yhteistyovideo .bg-wrapper::before {
  content: none !important;
  background-image: none !important;
}

.page-template-template-videot .bg-overlay,
.page-pelit .bg-overlay,
.jakso-template-default .bg-overlay,
.tarinatuokio-template-default .bg-overlay,
.elokuva-template-default .bg-overlay,
.single-yhteistyovideo .bg-overlay {
  background: transparent !important;
}

.page-template-template-videot .site-header,
.page-pelit .site-header,
.jakso-template-default .site-header,
.tarinatuokio-template-default .site-header,
.elokuva-template-default .site-header,
.single-yhteistyovideo .site-header {
  background: var(--header-gradient) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset !important;
}

.page-template-template-videot main,
.page-pelit main,
.jakso-template-default main,
.tarinatuokio-template-default main,
.elokuva-template-default main,
.single-yhteistyovideo main {
  background: linear-gradient(
    145deg,
    rgba(36, 61, 102, 0.97),
    rgba(26, 88, 116, 0.95)
  ) !important;
}




/* ============================================
   HOME SECTIONS
============================================ */
/* ============================================
   SHARED SEASONAL BACKGROUNDS
   HOME + VIDEOS
============================================ */
.preview-card {
  background:
    linear-gradient(
      135deg,
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 1)
    )
}

.season-spring-1 .preview-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-image:
    linear-gradient(
      100deg,
      rgba(4, 8, 6, 0.96) 0%,
      rgba(10, 16, 12, 0.91) 48%,
      rgba(20, 36, 24, 0.78) 100%
    );
  background-position: left;
}

.season-spring-1 .preview-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(
      135deg,
      rgba(90, 130, 90, 0.08),
      rgba(220, 240, 210, 0.02)
    ),
    var(--bombo-bg-shared-spring-1);
  background-position: left;
  background-size: cover;
  opacity: 0.42;
}

.season-spring-1 .preview-card > * {
  position: relative;
  z-index: 1;
}

.season-spring-2 .preview-card {
  background-image:
    linear-gradient(
      135deg,
      rgba(120, 170, 120, 0.55),
      rgba(220, 240, 210, 0.25)
    ),
    var(--bombo-bg-shared-spring-2);
}

.season-summer .preview-card {
  background-image:
    linear-gradient(
      135deg,
      rgba(255, 180, 90, 0.6),
      rgba(255, 230, 160, 0.3)
    ),
    var(--bombo-bg-shared-summer);
}

.season-autumn .preview-card {
  background-image:
    linear-gradient(
      135deg,
      rgba(140, 80, 40, 0.65),
      rgba(220, 170, 120, 0.3)
    ),
    var(--bombo-bg-shared-autumn);
}