/* ============================================================
   HALLOWEEN DEMO THEMES
   Activated by html[data-halloween="1|2|3"] (see halloween.js).
   1 = Pumpkin Glow  (purple + orange, keeps the official look)
   2 = Haunted Night (dark mode, moon, bats, cobwebs)
   3 = Candy Treat   (pastel candy colours, falling sweets)
   ============================================================ */

/* ─── 1. Pumpkin Glow ──────────────────────────────────────── */
html[data-halloween="1"] {
    --primary:        #D9480F;
    --primary-dark:   #3B1758;
    --primary-light:  #FFE8CC;
    --accent:         #FFA94D;
    --accent-mid:     #FFC078;
    --accent-light:   #FFF4E6;
    --nav-bg:         #2B1240;
    --nav-hover:      #FFA94D;
    --gray-border:    #F5D0A9;
    --gray-text:      #7A5C45;
    --gray-light:     #FFF8F0;
    --shadow:         0 2px 12px rgba(217,72,15,.12);
    --shadow-md:      0 4px 20px rgba(217,72,15,.22);
}
html[data-halloween="1"] body { background: #FFF8F0; }
html[data-halloween="1"] .main-header {
    background: linear-gradient(120deg, #2B1240 0%, #3B1758 45%, #D9480F 85%, #FF922B 100%);
}
html[data-halloween="1"] .sub-nav .nav-link:hover,
html[data-halloween="1"] .sub-nav .nav-link.active { background-color: #D9480F; }
html[data-halloween="1"] .quick-btn { background: linear-gradient(90deg, #3B1758, #5F2C82); }
html[data-halloween="1"] .quick-btn:hover { background: #D9480F; }
html[data-halloween="1"] .slogan-bar { background: #FFE8CC; color: #3B1758; }
html[data-halloween="1"] .sec-badge { background: #D9480F; }
html[data-halloween="1"] .sec-title { color: #2B1240; }
html[data-halloween="1"] .country-pill { background: #FFF0E0; }
html[data-halloween="1"] .country-pill:hover { background: #D9480F; color: #fff; }
html[data-halloween="1"] .content-card { border-color: #F5D0A9; }
html[data-halloween="1"] .footer {
    background: linear-gradient(135deg, #2B1240 0%, #1A0B28 100%);
    border-top-color: #FF922B;
}

/* ─── 2. Haunted Night ─────────────────────────────────────── */
html[data-halloween="2"] {
    --primary:        #7C3AED;
    --primary-dark:   #2E1065;
    --primary-light:  #2A2240;
    --accent:         #9BE564;
    --accent-mid:     #7CC44A;
    --accent-light:   #232036;
    --nav-bg:         #0E0B18;
    --nav-hover:      #9BE564;
    --gray-border:    #3A3355;
    --gray-text:      #A9A0C4;
    --gray-light:     #14101F;
    --shadow:         0 2px 14px rgba(0,0,0,.45);
    --shadow-md:      0 6px 24px rgba(124,58,237,.35);
}
html[data-halloween="2"] body { background: #14101F; color: #E9E4F5; }
html[data-halloween="2"] .main-header {
    background: radial-gradient(circle at 88% 30%, #3B2A6B 0%, #1B1430 40%, #0E0B18 100%);
    position: relative; overflow: hidden;
}
html[data-halloween="2"] .sub-nav { border-bottom: 1px solid #2A2240; }
html[data-halloween="2"] .sub-nav .nav-link:hover,
html[data-halloween="2"] .sub-nav .nav-link.active { background-color: #9BE564; color: #14101F !important; }
html[data-halloween="2"] .slogan-bar { background: #1F1930; color: #C9BEF0; border-color: #2A2240; }
html[data-halloween="2"] .sec-badge { background: #9BE564; color: #14101F; }
html[data-halloween="2"] .sec-title { color: #F3EEFF; text-shadow: 0 0 12px rgba(155,229,100,.35); }
html[data-halloween="2"] .search-wrap { background: #1F1930; }
html[data-halloween="2"] .search-wrap input { color: #E9E4F5; }
html[data-halloween="2"] .quick-btn {
    background: linear-gradient(90deg, #2E1065, #4C1D95);
    border: 1px solid #4C3A80;
}
html[data-halloween="2"] .quick-btn:hover { background: #9BE564; color: #14101F; }
html[data-halloween="2"] .total-active-pill { background: #1F1930; color: #E9E4F5; }
html[data-halloween="2"] .region-col-header { background: #2A2240; color: #9BE564; }
html[data-halloween="2"] .country-pill { background: #1F1930; color: #E9E4F5; }
html[data-halloween="2"] .country-pill:hover { background: #7C3AED; color: #fff; }
html[data-halloween="2"] .content-card,
html[data-halloween="2"] .content-card .card-body { background: #1F1930; border-color: #2A2240; }
html[data-halloween="2"] .content-card .card-title { color: #F3EEFF; }
html[data-halloween="2"] .content-card:hover,
html[data-halloween="2"] .news-card:hover {
    box-shadow: 0 0 0 3px #9BE564, 0 0 22px 4px rgba(155,229,100,.55), 0 10px 32px rgba(155,229,100,.3);
}
html[data-halloween="2"] .card,
html[data-halloween="2"] .bg-white { background-color: #1F1930 !important; color: #E9E4F5; }
html[data-halloween="2"] .text-dark { color: #E9E4F5 !important; }
html[data-halloween="2"] .footer { background: #0E0B18; border-top-color: #9BE564; }

/* ─── 3. Candy Treat ───────────────────────────────────────── */
html[data-halloween="3"] {
    --primary:        #8E44C9;
    --primary-dark:   #5B2A86;
    --primary-light:  #F3E8FF;
    --accent:         #FFD27F;
    --accent-mid:     #FFB37F;
    --accent-light:   #FFF6E5;
    --nav-bg:         #7A3DB0;
    --nav-hover:      #FFD27F;
    --gray-border:    #EBD9FF;
    --gray-text:      #7D6A96;
    --gray-light:     #FFF9F2;
    --shadow:         0 3px 14px rgba(142,68,201,.12);
    --shadow-md:      0 6px 22px rgba(255,138,61,.25);
}
html[data-halloween="3"] body {
    background:
        radial-gradient(circle at 10% 20%, rgba(255,210,127,.25) 0 120px, transparent 121px),
        radial-gradient(circle at 90% 70%, rgba(126,217,181,.20) 0 160px, transparent 161px),
        #FFF9F2;
}
html[data-halloween="3"] .main-header {
    background: linear-gradient(120deg, #9D6BDB 0%, #C77DDB 45%, #FF9A5C 100%);
    border-bottom: 8px solid transparent;
    border-image: repeating-linear-gradient(90deg, #FFE066 0 22px, #FF8A3D 22px 44px, #FFFFFF 44px 66px) 8;
}
html[data-halloween="3"] .sub-nav .nav-link:hover,
html[data-halloween="3"] .sub-nav .nav-link.active { background-color: #FF8A3D; }
html[data-halloween="3"] .slogan-bar { background: #FFE9D6; color: #5B2A86; }
html[data-halloween="3"] .sec-badge { background: #FF8A3D; }
html[data-halloween="3"] .sec-title { color: #5B2A86; }
html[data-halloween="3"] .quick-btn {
    background: linear-gradient(90deg, #8E44C9, #B266D9);
    border-radius: 999px;
}
html[data-halloween="3"] .quick-btn:hover { background: #FF8A3D; transform: translateX(3px) rotate(-1deg); }
html[data-halloween="3"] .region-col-header { background: #FFE2B8; color: #5B2A86; }
html[data-halloween="3"] .country-pill { background: #F3E8FF; border-radius: 999px; }
html[data-halloween="3"] .country-pill:hover { background: #7ED9B5; color: #1e1630; }
html[data-halloween="3"] .content-card { border: 2px dashed #EBD9FF; border-radius: 20px; }
html[data-halloween="3"] .content-card:hover { border-color: #FF8A3D; transform: translateY(-4px) rotate(-.5deg); }
html[data-halloween="3"] .banner-outer { border: 6px solid #fff; box-shadow: 0 0 0 3px #FF8A3D, 0 8px 28px rgba(142,68,201,.25); }
html[data-halloween="3"] .footer {
    background: linear-gradient(135deg, #5B2A86 0%, #8E44C9 100%);
    border-top: 8px solid transparent;
    border-image: repeating-linear-gradient(90deg, #FFE066 0 22px, #FF8A3D 22px 44px, #FFFFFF 44px 66px) 8;
}

/* ============================================================
   DECORATIONS (injected by halloween.js)
   ============================================================ */
.hw-deco { pointer-events: none; user-select: none; }

/* Header corner art */
.hw-header-art {
    position: absolute; right: clamp(12px, 4vw, 60px); top: 50%;
    transform: translateY(-50%); font-size: clamp(1.6rem, 3.4vw, 2.8rem);
    display: flex; gap: .3em; z-index: 1;
}
.main-header { position: relative; }
/* keep the agency name clear of the header art */
html[data-halloween] .main-header > .container-fluid { padding-right: clamp(110px, 17vw, 230px); }
@media (max-width: 575.98px) {
    html[data-halloween] .main-header > .container-fluid { padding-right: 40px; }
}
.hw-header-art span { display: inline-block; animation: hw-bob 3s ease-in-out infinite; }
.hw-header-art span:nth-child(2) { animation-delay: .6s; }
.hw-header-art span:nth-child(3) { animation-delay: 1.2s; }

/* Greeting ribbon under the navbar */
.hw-ribbon {
    text-align: center; font-weight: 700; padding: 8px 12px;
    font-size: clamp(.85rem, 1.8vw, 1rem); letter-spacing: .02em;
}
html[data-halloween="1"] .hw-ribbon { background: #FF922B; color: #2B1240; }
html[data-halloween="2"] .hw-ribbon { background: #0E0B18; color: #9BE564; border-bottom: 1px solid #2A2240; }
html[data-halloween="3"] .hw-ribbon { background: #FFE066; color: #5B2A86; }

/* Theme 1: pennant garland */
.hw-garland {
    display: flex; justify-content: center; overflow: hidden; height: 34px;
    background: transparent;
}
.hw-garland i {
    flex: 0 0 34px; height: 30px; margin: 0 2px;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    display: flex; justify-content: center; font-style: normal;
    font-size: .8rem; padding-top: 2px; color: #fff;
}
.hw-garland i:nth-child(3n+1) { background: #D9480F; }
.hw-garland i:nth-child(3n+2) { background: #2B1240; }
.hw-garland i:nth-child(3n)   { background: #FFA94D; }

/* Theme 2: moon, flying bats, cobwebs, fog */
.hw-moon {
    position: absolute; right: clamp(130px, 15vw, 210px); top: 6px; width: 40px; height: 40px; border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #FFFBEA, #F6E7A6 60%, #E2C86A);
    box-shadow: 0 0 30px 8px rgba(246,231,166,.35);
}
.hw-bat {
    position: fixed; z-index: 1040; font-size: 1.6rem; top: 20vh; left: -60px;
    animation: hw-fly 14s linear infinite; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5));
}
.hw-web {
    position: fixed; z-index: 1030; width: clamp(90px, 14vw, 170px); height: auto; opacity: .55;
}
.hw-web.tl { top: 0; left: 0; }
.hw-web.tr { top: 0; right: 0; transform: scaleX(-1); }
.hw-spider {
    position: fixed; top: 0; z-index: 1035; width: 0; height: var(--len);
    border-left: 1px solid rgba(207,198,234,.6);   /* the silk thread */
    transform-origin: top center;
    animation: hw-dangle ease-in-out infinite;
}
.hw-spider span {
    position: absolute; bottom: 0; left: 0; transform: translate(-50%, 70%);
    line-height: 1; filter: drop-shadow(0 0 4px rgba(207,198,234,.75));   /* glow so it shows on the dark theme */
}
.hw-fog {
    position: fixed; left: 0; right: 0; bottom: 0; height: 90px; z-index: 1020;
    background: linear-gradient(to top, rgba(155,140,200,.18), transparent);
}

/* Theme 3: falling candy */
.hw-candy {
    position: fixed; top: -40px; z-index: 1040; font-size: 1.4rem;
    animation: hw-fall linear infinite;
}

/* Witch hat on the header logo (theme 3) */
.hw-hat {
    position: absolute; font-size: clamp(1.2rem, 2.6vw, 2rem);
    transform: rotate(-18deg); z-index: 2;
}

/* Pumpkin toggle (bottom-right, always shown) */
.hw-toggle {
    position: fixed; right: 20px; bottom: 20px; z-index: 10000;
    width: 76px; height: 76px; border-radius: 50%; border: none; cursor: pointer;
    font-size: 2.7rem; line-height: 1; padding: 0;
    display: flex; align-items: center; justify-content: center;
    background: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.25);
    transition: transform .2s, box-shadow .2s, background .2s;
    animation: hw-wiggle 4s ease-in-out infinite;
}
.hw-toggle:hover { animation: none; transform: scale(1.12) rotate(-8deg); box-shadow: 0 8px 26px rgba(217,72,15,.45); }
.hw-toggle:focus-visible { outline: 3px solid #FF922B; outline-offset: 3px; }
.hw-toggle.on {
    background: radial-gradient(circle, #FFB55C 0%, #D9480F 100%);
    box-shadow: 0 0 0 4px rgba(255,146,43,.35), 0 0 24px 6px rgba(255,146,43,.55);
    animation: none;
}
@keyframes hw-wiggle {
    0%, 86%, 100% { transform: rotate(0) }
    90% { transform: rotate(-12deg) }
    94% { transform: rotate(10deg) }
}

@keyframes hw-bob  { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-6px) rotate(-6deg) } }
@keyframes hw-fly  {
    0%   { transform: translate(0, 0) }
    25%  { transform: translate(30vw, -40px) }
    50%  { transform: translate(60vw, 20px) }
    75%  { transform: translate(85vw, -30px) }
    100% { transform: translate(110vw, 0) }
}
/* thread length moves (spider climbs up and drops), --len is set per spider */
@keyframes hw-dangle {
    0%, 100% { height: var(--len); transform: rotate(0) }
    30%      { height: calc(var(--len) * .55); transform: rotate(2deg) }
    60%      { height: calc(var(--len) * 1.15); transform: rotate(-2deg) }
}
@keyframes hw-fall {
    0%   { transform: translateY(0) rotate(0) }
    100% { transform: translateY(110vh) rotate(360deg) }
}

@media (prefers-reduced-motion: reduce) {
    .hw-header-art span, .hw-bat, .hw-candy, .hw-toggle, .hw-spider { animation: none !important; }
    .hw-bat, .hw-candy { display: none; }
}
@media (max-width: 575.98px) {
    .hw-header-art { display: none; }
    .hw-moon { right: 8px; width: 30px; height: 30px; }
    .hw-toggle { right: 14px; bottom: 14px; width: 62px; height: 62px; font-size: 2.2rem; }
}