/* ==========================================================================
   JACOBS CAKE WORLD — SEASONAL HERO BANNERS CSS
   Organized, modular styles for holiday & seasonal homepage slider themes.
   Supports: Christmas, Halloween, and future seasonal events.
   ========================================================================== */

/* ── 1. COMMON / CANVAS STYLES ───────────────────────────────────────────── */
.jcw-hero__snow-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* ══════════════════════════════════════════════════════════════════════════
   2. CHRISTMAS THEME (Holiday Season: Nov – Jan)
   ══════════════════════════════════════════════════════════════════════════ */

/* Background Overlay: Deep warm holiday vignette so white & gold text pops on any photo */
.jcw-hero__slide--christmas::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/* Heading: crisp snow-white with warm festive crimson & champagne gold ambient aura */
.jcw-hero__slide--christmas .jcw-hero__heading {
    color: #FFFFFF !important;
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.9), 0 0 40px rgba(220, 38, 38, 0.35), 0 0 16px rgba(255, 215, 120, 0.25) !important;
}

/* Subheading: warm creamy ivory/snow tone */
.jcw-hero__slide--christmas .jcw-hero__sub {
    color: #F8F3EC !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9) !important;
}

/* Primary CTA Button: Rich Radiant Holiday Ruby / Crimson Gradient */
.jcw-hero__slide--christmas .jcw-btn--hero.jcw-btn--primary {
    background: linear-gradient(135deg, #D42438 0%, #A31224 100%) !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 215, 120, 0.45) !important;
    box-shadow: 0 8px 24px rgba(163, 18, 36, 0.55), 0 0 18px rgba(212, 36, 56, 0.35) !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.jcw-hero__slide--christmas .jcw-btn--hero.jcw-btn--primary:hover {
    background: linear-gradient(135deg, #E82C42 0%, #B8152B 100%) !important;
    box-shadow: 0 12px 32px rgba(212, 36, 56, 0.7), 0 0 26px rgba(255, 215, 120, 0.5) !important;
    transform: translateY(-2px) !important;
    border-color: rgba(255, 230, 160, 0.85) !important;
}

/* Secondary CTA Button: Frosted Glass & Champagne Gold Outline */
.jcw-hero__slide--christmas .jcw-btn--hero.jcw-btn--outline {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #FFF2D6 !important;
    border: 2px solid rgba(255, 215, 140, 0.75) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35), inset 0 0 14px rgba(255, 215, 120, 0.15) !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.jcw-hero__slide--christmas .jcw-btn--hero.jcw-btn--outline:hover {
    background: rgba(255, 215, 140, 0.22) !important;
    border-color: #FFE29A !important;
    color: #FFFFFF !important;
    box-shadow: 0 8px 26px rgba(212, 36, 56, 0.4), 0 0 20px rgba(255, 215, 140, 0.45) !important;
    transform: translateY(-2px) !important;
}

/* Badges: Frosted Winter Crystal Pill with Gold & Champagne Accents */
.jcw-hero__slide--christmas .jcw-hero__badge-item {
    background: rgba(20, 10, 14, 0.72) !important;
    border: 1px solid rgba(255, 215, 140, 0.35) !important;
    border-radius: 30px !important;
    padding: 7px 18px !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
    transition: all 0.3s ease !important;
}

.jcw-hero__slide--christmas .jcw-hero__badge-item:hover {
    border-color: rgba(255, 215, 140, 0.8) !important;
    background: rgba(28, 16, 22, 0.88) !important;
    box-shadow: 0 6px 20px rgba(212, 36, 56, 0.4) !important;
}

.jcw-hero__slide--christmas .jcw-hero__badge-text {
    color: #FFF6EC !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9) !important;
    font-weight: 600 !important;
}

.jcw-hero__slide--christmas .jcw-badge-icon {
    color: #FFD272 !important;
    filter: drop-shadow(0 0 8px rgba(255, 210, 114, 0.7)) !important;
}

/* Christmas Navigation Controls (when Christmas Slide is active) */
.jcw-hero--christmas-active .jcw-hero__dot {
    background: rgba(255, 255, 255, 0.4) !important;
}

.jcw-hero--christmas-active .jcw-hero__dot:hover {
    background: rgba(255, 215, 120, 0.9) !important;
}

.jcw-hero--christmas-active .jcw-hero__dot--active {
    background: linear-gradient(90deg, #D42438, #FFD272) !important;
    box-shadow: 0 0 16px rgba(212, 36, 56, 0.8) !important;
}

.jcw-hero--christmas-active .jcw-hero__arrow {
    background: rgba(20, 10, 16, 0.65) !important;
    border-color: rgba(255, 215, 140, 0.35) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

.jcw-hero--christmas-active .jcw-hero__arrow svg {
    stroke: #FFF4E6 !important;
}

.jcw-hero--christmas-active .jcw-hero__arrow:hover {
    background: #B8152B !important;
    border-color: #FFD272 !important;
    box-shadow: 0 0 22px rgba(212, 36, 56, 0.7) !important;
}

.jcw-hero--christmas-active .jcw-hero__arrow:hover svg {
    stroke: #FFFFFF !important;
}

/* Mobile backdrop gradient override for Christmas slides */
@media (max-width: 991px) {
    .jcw-hero__slide--christmas .jcw-hero__inner {
        background: linear-gradient(
            0deg,
            rgba(12, 6, 10, 0) 0%,
            rgba(14, 8, 12, 0.5) 30%,
            rgba(14, 8, 12, 0.5) 60%,
            rgba(12, 6, 10, 0) 100%
        ) !important;
        border-radius: 12px;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

@media (max-width: 500px) {
.jcw-hero__badges {
    display: none;
}
}

/* ══════════════════════════════════════════════════════════════════════════
   3. HALLOWEEN THEME (October)
   ══════════════════════════════════════════════════════════════════════════ */

.jcw-hero__slide--halloween::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 20% 50%, rgba(12, 6, 4, 0.78) 0%, rgba(12, 6, 4, 0.5) 45%, rgba(12, 6, 4, 0.12) 75%, transparent 100%);
    z-index: 1;
    pointer-events: none;
}

/* Heading: warm candlelight ivory with subtle spooky pumpkin/amber backlight glow */
.jcw-hero__slide--halloween .jcw-hero__heading {
    color: #FFF5E6 !important;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.85), 0 0 35px rgba(255, 117, 24, 0.45) !important;
}

/* Subheading: warm peach amber tone */
.jcw-hero__slide--halloween .jcw-hero__sub {
    color: #F8D7B8 !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85) !important;
}

/* Primary CTA Button: Vibrant Glowing Jack-O'-Lantern Pumpkin Orange */
.jcw-hero__slide--halloween .jcw-btn--hero.jcw-btn--primary {
    background: linear-gradient(135deg, #FF6F00 0%, #E65100 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 8px 24px rgba(230, 81, 0, 0.5), 0 0 16px rgba(255, 111, 0, 0.3) !important;
}

.jcw-hero__slide--halloween .jcw-btn--hero.jcw-btn--primary:hover {
    background: linear-gradient(135deg, #FF851A 0%, #F55A00 100%) !important;
    box-shadow: 0 10px 30px rgba(255, 111, 0, 0.7), 0 0 25px rgba(255, 133, 26, 0.5) !important;
    transform: translateY(-2px) !important;
}

/* Secondary CTA Button: Glowing Amber / Candlelight translucent outline */
.jcw-hero__slide--halloween .jcw-btn--hero.jcw-btn--outline {
    background: rgba(255, 111, 0, 0.12) !important;
    color: #FFA94D !important;
    border: 2px solid rgba(255, 140, 40, 0.7) !important;
    backdrop-filter: blur(8px) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35), inset 0 0 12px rgba(255, 111, 0, 0.15) !important;
}

.jcw-hero__slide--halloween .jcw-btn--hero.jcw-btn--outline:hover {
    background: rgba(255, 111, 0, 0.28) !important;
    border-color: #FFB366 !important;
    color: #ffffff !important;
    box-shadow: 0 8px 25px rgba(255, 111, 0, 0.45), 0 0 18px rgba(255, 169, 77, 0.4) !important;
    transform: translateY(-2px) !important;
}

/* Badges: Dark amber pill glass effect */
.jcw-hero__slide--halloween .jcw-hero__badge-item {
    background: rgba(20, 10, 8, 0.65) !important;
    border: 1px solid rgba(255, 140, 40, 0.35) !important;
    border-radius: 30px !important;
    padding: 6px 16px !important;
    backdrop-filter: blur(8px) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45), inset 0 1px 1px rgba(255, 200, 150, 0.15) !important;
    transition: all 0.3s ease !important;
}

.jcw-hero__slide--halloween .jcw-hero__badge-item:hover {
    border-color: rgba(255, 140, 40, 0.75) !important;
    background: rgba(30, 15, 10, 0.85) !important;
    box-shadow: 0 6px 18px rgba(230, 81, 0, 0.35) !important;
}

.jcw-hero__slide--halloween .jcw-hero__badge-text {
    color: #FFE6D1 !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8) !important;
}

.jcw-hero__slide--halloween .jcw-badge-icon {
    color: #FF922B !important;
    filter: drop-shadow(0 0 8px rgba(255, 146, 43, 0.65)) !important;
}

/* Halloween Navigation Controls */
.jcw-hero--halloween-active .jcw-hero__dot {
    background: rgba(255, 255, 255, 0.35) !important;
}

.jcw-hero--halloween-active .jcw-hero__dot:hover {
    background: rgba(255, 146, 43, 0.85) !important;
}

.jcw-hero--halloween-active .jcw-hero__dot--active {
    background: linear-gradient(90deg, #FF6F00, #FFA94D) !important;
    box-shadow: 0 0 14px rgba(255, 111, 0, 0.75) !important;
}

.jcw-hero--halloween-active .jcw-hero__arrow {
    background: rgba(25, 12, 8, 0.6) !important;
    border-color: rgba(255, 140, 40, 0.35) !important;
    backdrop-filter: blur(8px) !important;
}

.jcw-hero--halloween-active .jcw-hero__arrow svg {
    stroke: #FFE6D1 !important;
}

.jcw-hero--halloween-active .jcw-hero__arrow:hover {
    background: #E65100 !important;
    border-color: #FF851A !important;
    box-shadow: 0 0 20px rgba(255, 111, 0, 0.6) !important;
}

.jcw-hero--halloween-active .jcw-hero__arrow:hover svg {
    stroke: #ffffff !important;
}

/* Mobile backdrop gradient override for Halloween slides */
@media (max-width: 991px) {
    .jcw-hero__slide--halloween .jcw-hero__inner {
        background: linear-gradient(
            0deg,
            rgba(10, 5, 4, 0) 0%,
            rgba(10, 5, 4, 0.45) 30%,
            rgba(10, 5, 4, 0.45) 60%,
            rgba(10, 5, 4, 0) 100%
        ) !important;
        border-radius: 12px;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}