/* ==========================================================================
   🎃 HALLOWEEN SEASONAL THEME (EVENTS-WEB)
   Clean, tasteful holiday accents with atmospheric spider & cobweb micro-details.
   No neon header backgrounds — clean native navbar with orange border accents.
   ========================================================================== */

/* ── 1. Color System & Accents Override ──────────────────────────────────── */
.theme-halloween {
    --accent-color: #ff7518 !important;
    --border-color: #ff7518 !important;
    --border-light: rgba(255, 117, 24, 0.28) !important;
    --hover-bg: rgba(255, 117, 24, 0.12) !important;
    --button-bg: #e65c00 !important;
    --placeholder-color: #c9bbae !important;
    --abbrevitation-color: #ffa726 !important;
    --e-accent: #ff7518 !important;
    --e-accent-2: #ffa726 !important;
    --e-card-border: rgba(255, 117, 24, 0.28) !important;
    --e-shadow: 0 4px 18px rgba(0, 0, 0, 0.4) !important;
}

/* Light Theme Support */
.theme-halloween.light-theme,
.light-theme.theme-halloween,
.light-theme .theme-halloween {
    --accent-color: #e65100 !important;
    --border-color: #e65100 !important;
    --border-light: rgba(230, 81, 0, 0.3) !important;
    --hover-bg: rgba(230, 81, 0, 0.12) !important;
    --button-bg: #e65100 !important;
    --placeholder-color: #555555 !important;
    --abbrevitation-color: #bf360c !important;
    --e-accent: #e65100 !important;
    --e-accent-2: #f57c00 !important;
    --e-card-border: rgba(230, 81, 0, 0.25) !important;
}

/* ── 2. Header & Navigation (Clean Native Background, Orange Border Only) ── */
.theme-halloween header {
    /* NO custom gradient background! Keep native var(--card-bg) */
    border-bottom: 2px solid #ff7518 !important;
    /* Clean native shadow without any neon orange tint */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
    position: sticky;
    top: 0;
    overflow: visible !important;
}

.theme-halloween.light-theme header,
.light-theme .theme-halloween header {
    border-bottom: 2px solid #e65100 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
}


/* Nav Buttons: Native styling with clean orange accents on hover/active (no neon glow) */
.theme-halloween .nav-button.active,
.theme-halloween #main-nav .nav-button.active {
    background: rgba(255, 117, 24, 0.12) !important;
    border-color: #ff7518 !important;
    color: #ff7518 !important;
    box-shadow: 0 2px 8px rgba(255, 117, 24, 0.25) !important;
}

.theme-halloween .nav-button.active i,
.theme-halloween #main-nav .nav-button.active i {
    color: #ff7518 !important;
}

.theme-halloween .nav-button:hover,
.theme-halloween #main-nav .nav-button:hover {
    border-color: rgba(255, 117, 24, 0.6) !important;
    color: #ff7518 !important;
    box-shadow: none !important;
}

.theme-halloween .nav-button:hover i,
.theme-halloween #main-nav .nav-button:hover i {
    color: #ff7518 !important;
}

.theme-halloween .nav-dropdown-menu {
    border: 1px solid rgba(255, 117, 24, 0.35) !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5) !important;
}

.theme-halloween .nav-dropdown-item:hover {
    background-color: rgba(255, 117, 24, 0.15) !important;
    color: #ffaa44 !important;
}

.theme-halloween .nav-dropdown-item:hover i {
    color: #ffaa44 !important;
}

/* Active Dropdown Item (Overrides blue box-shadow from style.css:437) */
.theme-halloween .nav-dropdown-item.active {
    color: #ff7518 !important;
    background-color: rgba(255, 117, 24, 0.15) !important;
    border: 1px solid rgba(255, 117, 24, 0.45) !important;
    box-shadow: 0 2px 10px rgba(255, 117, 24, 0.4) !important;
}

.theme-halloween .nav-dropdown-item.active i {
    color: #ff7518 !important;
}

/* Sub-nav Links & Tabs Across Site */
.theme-halloween .pg-sub-nav-link.active {
    background-color: #ff7518 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(255, 117, 24, 0.4) !important;
}

.theme-halloween .t-tab.active {
    color: #ff7518 !important;
    border-bottom-color: #ff7518 !important;
    background: rgba(255, 117, 24, 0.1) !important;
}

.theme-halloween .tab-btn.active {
    background: #ff7518 !important;
    border-color: #ff7518 !important;
    color: #fff !important;
    box-shadow: 0 0 15px rgba(255, 117, 24, 0.4) !important;
}

/* ── 3. Buttons & Form Elements ─────────────────────────────────────────── */
.theme-halloween .primary-button,
.theme-halloween .modal-btn-primary,
.theme-halloween .submit-button,
.theme-halloween .btn-primary,
.theme-halloween .login-button {
    background: linear-gradient(135deg, #ff7518 0%, #d35400 100%) !important;
    border: 1px solid rgba(255, 180, 50, 0.35) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25) !important;
}

.theme-halloween .primary-button:hover,
.theme-halloween .modal-btn-primary:hover,
.theme-halloween .submit-button:hover,
.theme-halloween .btn-primary:hover,
.theme-halloween .login-button:hover {
    box-shadow: 0 6px 18px rgba(255, 117, 24, 0.35) !important;
    transform: translateY(-2px) !important;
}

.theme-halloween .search-input:focus,
.theme-halloween .modal-input:focus,
.theme-halloween input[type="text"]:focus,
.theme-halloween input[type="number"]:focus,
.theme-halloween select:focus,
.theme-halloween textarea:focus {
    border-color: #ff7518 !important;
    box-shadow: 0 0 0 2px rgba(255, 117, 24, 0.25) !important;
}

.theme-halloween th {
    color: var(--accent-color) !important;
}

/* ── 4. Cards & Section Borders ─────────────────────────────────────────── */
.theme-halloween .section,
.theme-halloween .profile-header,
.theme-halloween .stat-card,
.theme-halloween .login-container,
.theme-halloween .avatar-upload-container,
.theme-halloween .modal-content,
.theme-halloween .card {
    border-color: rgba(255, 117, 24, 0.25) !important;
    transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.theme-halloween .section:hover,
.theme-halloween .stat-card:hover,
.theme-halloween .card:hover {
    border-color: rgba(255, 117, 24, 0.45) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
}

/* Footer Accent */
.theme-halloween .site-footer {
    border-top: 1px solid rgba(255, 117, 24, 0.35) !important;
}

/* Scrollbar */
.theme-halloween ::-webkit-scrollbar-thumb {
    background: #ff7518 !important;
    border-radius: 6px !important;
}
.theme-halloween ::-webkit-scrollbar-thumb:hover {
    background: #ffa726 !important;
}

/* ── 5. Jack-o'-Lantern Pumpkin Badge in Header ─────────────────────────── */
.header-pumpkin-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-left: 8px;
    cursor: pointer;
    vertical-align: middle;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 8px rgba(255, 117, 24, 0.4));
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    user-select: none;
}
.header-pumpkin-badge:hover {
    transform: scale(1.15) rotate(-6deg);
}
.header-pumpkin-svg {
    width: 100%;
    height: 100%;
    display: block;
}
.header-pumpkin-svg .pumpkin-glow-elem {
    animation: candleFlicker 3s infinite alternate;
}
@keyframes candleFlicker {
    0%, 100% { opacity: 0.95; filter: drop-shadow(0 0 2px #ffeb3b); }
    25% { opacity: 0.7; filter: drop-shadow(0 0 1px #ff9800); }
    50% { opacity: 1; filter: drop-shadow(0 0 4px #ffeb3b); }
    75% { opacity: 0.8; filter: drop-shadow(0 0 2px #ffc107); }
}

/* ── 6. Navbar Cobwebs & Hanging Spider ──────────────────────────────────── */
.header-halloween-decor {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: visible;
    z-index: 10;
}

/* Cobweb in the left corner of navbar */
.header-web-left {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 65px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top left;
    opacity: 0.38;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 65' fill='none' stroke='%23ff9f43' stroke-width='1.1' stroke-linecap='round'%3E%3Cline x1='0' y1='0' x2='100' y2='0'/%3E%3Cline x1='0' y1='0' x2='85' y2='22'/%3E%3Cline x1='0' y1='0' x2='68' y2='45'/%3E%3Cline x1='0' y1='0' x2='40' y2='58'/%3E%3Cline x1='0' y1='0' x2='0' y2='65'/%3E%3Cpath d='M22 0 Q16 7 14 9 Q10 14 7 16 Q5 18 0 22'/%3E%3Cpath d='M44 0 Q34 13 30 18 Q23 27 16 32 Q12 36 0 41'/%3E%3Cpath d='M68 0 Q54 20 47 25 Q36 38 23 45 Q16 50 0 55'/%3E%3Cpath d='M90 0 Q72 25 61 32 Q45 48 29 55 Q20 59 0 63'/%3E%3C/svg%3E");
}

/* Cobweb in the right corner of navbar */
.header-web-right {
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 65px;
    transform: scaleX(-1);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top left;
    opacity: 0.38;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 65' fill='none' stroke='%23ff9f43' stroke-width='1.1' stroke-linecap='round'%3E%3Cline x1='0' y1='0' x2='100' y2='0'/%3E%3Cline x1='0' y1='0' x2='85' y2='22'/%3E%3Cline x1='0' y1='0' x2='68' y2='45'/%3E%3Cline x1='0' y1='0' x2='40' y2='58'/%3E%3Cline x1='0' y1='0' x2='0' y2='65'/%3E%3Cpath d='M22 0 Q16 7 14 9 Q10 14 7 16 Q5 18 0 22'/%3E%3Cpath d='M44 0 Q34 13 30 18 Q23 27 16 32 Q12 36 0 41'/%3E%3Cpath d='M68 0 Q54 20 47 25 Q36 38 23 45 Q16 50 0 55'/%3E%3Cpath d='M90 0 Q72 25 61 32 Q45 48 29 55 Q20 59 0 63'/%3E%3C/svg%3E");
}

/* Scalloped cobweb drapes hanging along the bottom edge of the navbar */
.header-web-drape {
    position: absolute;
    bottom: -10px;
    height: 11px;
    background-size: contain;
    background-repeat: repeat-x;
    opacity: 0.32;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 11' fill='none' stroke='%23ff9f43' stroke-width='0.8' stroke-linecap='round'%3E%3Cpath d='M0 0 Q15 10 30 0 Q45 10 60 0'/%3E%3Cpath d='M5 0 Q15 5 25 0 M35 0 Q45 5 55 0' stroke-width='0.5'/%3E%3Cline x1='15' y1='5' x2='15' y2='10' stroke-width='0.5'/%3E%3Cline x1='45' y1='5' x2='45' y2='10' stroke-width='0.5'/%3E%3C/svg%3E");
}
.header-web-drape.drape-1 {
    left: 200px;
    width: 140px;
}
.header-web-drape.drape-2 {
    right: 280px;
    width: 120px;
}

/* Spider hanging on a silk thread from the bottom of the navbar */
.header-hanging-spider {
    position: absolute;
    bottom: -58px;
    right: 220px;
    width: 24px;
    height: 60px;
    pointer-events: none;
    z-index: 1001;
    transform-origin: top center;
    animation: spiderSwing 4.8s ease-in-out infinite alternate;
}

.spider-thread {
    position: absolute;
    top: 0;
    left: 11px;
    width: 1px;
    height: 40px;
    background: linear-gradient(180deg, rgba(255, 160, 60, 0.5) 0%, rgba(255, 255, 255, 0.4) 100%);
    box-shadow: 0 0 1px rgba(255, 255, 255, 0.4);
    animation: threadBob 12s ease-in-out infinite;
}

.hanging-spider-body {
    position: absolute;
    top: 38px;
    left: 0;
    width: 24px;
    height: 24px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
    animation: bodyBob 12s ease-in-out infinite;
}

.spider-hang-svg {
    width: 100%;
    height: 100%;
    display: block;
}

@keyframes spiderSwing {
    0% { transform: rotate(-5deg); }
    50% { transform: rotate(1deg); }
    100% { transform: rotate(5deg); }
}

@keyframes threadBob {
    0%, 100% { height: 40px; }
    30% { height: 26px; }
    50% { height: 50px; }
    75% { height: 35px; }
}

@keyframes bodyBob {
    0%, 100% { top: 38px; }
    30% { top: 24px; }
    50% { top: 48px; }
    75% { top: 33px; }
}

/* ── 7. Spider Roaming Freely Around Navbar (Controlled by JS) ──────────── */
.header-roaming-spider {
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    pointer-events: none;
    z-index: 1002;
    transform-origin: 12px 12px;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.8));
    will-change: transform;
}

.spider-sprite {
    width: 100%;
    height: 100%;
    display: block;
}

.spider-svg-elem {
    width: 100%;
    height: 100%;
    display: block;
}

/* Spider walking leg cycle */
.header-roaming-spider.is-walking .spider-leg {
    animation: legCrawlCycle 0.2s linear infinite alternate;
    transform-origin: 18px 18px;
}
.header-roaming-spider.is-walking .leg-l2,
.header-roaming-spider.is-walking .leg-l4,
.header-roaming-spider.is-walking .leg-r1,
.header-roaming-spider.is-walking .leg-r3 {
    animation-delay: 0.1s;
}

@keyframes legCrawlCycle {
    0% { transform: rotate(-7deg); }
    100% { transform: rotate(7deg); }
}

/* Spider thread when dropping down */
.spider-thread-line {
    position: absolute;
    bottom: 100%;
    left: 11px;
    width: 1px;
    height: 0px;
    background: linear-gradient(180deg, rgba(255, 160, 60, 0.6) 0%, rgba(255, 255, 255, 0.5) 100%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.header-roaming-spider.is-dangling .spider-thread-line {
    opacity: 1;
}

/* ── Swooping Atmospheric Bats (Side-Profile Flight) ─────────────────────── */
.halloween-swooping-bat {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 997;
    width: 44px;
    height: 26px;
    transform-origin: 22px 13px;
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.75));
    opacity: 0;
    will-change: transform, opacity;
}

.swooping-bat-svg {
    width: 100%;
    height: 100%;
    display: block;
}

.bat-wing-front {
    transform-origin: 24px 14px;
    animation: wingFlapFront 0.22s ease-in-out infinite alternate;
}
.bat-wing-back {
    transform-origin: 22px 13px;
    animation: wingFlapBack 0.22s ease-in-out infinite alternate;
}

@keyframes wingFlapFront {
    0% { transform: rotate(-35deg) scaleY(1); }
    100% { transform: rotate(35deg) scaleY(-0.7); }
}

@keyframes wingFlapBack {
    0% { transform: rotate(-30deg) scaleY(0.9); }
    100% { transform: rotate(30deg) scaleY(-0.6); }
}

/* ── 8. Ambient Page Atmosphere (Screen Webs, Bats, Embers) ──────────────── */
/* Screen corner cobwebs */
.halloween-corner-web {
    position: fixed;
    top: 0;
    width: 110px;
    height: 110px;
    pointer-events: none;
    opacity: 0.25;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 999;
}
.web-top-left {
    left: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none' stroke='%23ff9f43' stroke-width='1.2' stroke-linecap='round'%3E%3Cline x1='0' y1='0' x2='120' y2='0'/%3E%3Cline x1='0' y1='0' x2='110' y2='35'/%3E%3Cline x1='0' y1='0' x2='95' y2='70'/%3E%3Cline x1='0' y1='0' x2='70' y2='95'/%3E%3Cline x1='0' y1='0' x2='35' y2='110'/%3E%3Cline x1='0' y1='0' x2='0' y2='120'/%3E%3Cpath d='M25 0 Q20 8 18 10 Q14 16 10 18 Q8 20 0 25'/%3E%3Cpath d='M50 0 Q42 16 38 20 Q30 32 20 38 Q16 42 0 50'/%3E%3Cpath d='M75 0 Q65 24 58 30 Q46 48 30 58 Q24 65 0 75'/%3E%3Cpath d='M100 0 Q88 32 78 40 Q62 64 40 78 Q32 88 0 100'/%3E%3Cpath d='M120 0 Q110 35 95 70 Q70 95 35 110 Q0 120 0 120'/%3E%3C/svg%3E");
}
.web-top-right {
    right: 0;
    transform: scaleX(-1);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none' stroke='%23ff9f43' stroke-width='1.2' stroke-linecap='round'%3E%3Cline x1='0' y1='0' x2='120' y2='0'/%3E%3Cline x1='0' y1='0' x2='110' y2='35'/%3E%3Cline x1='0' y1='0' x2='95' y2='70'/%3E%3Cline x1='0' y1='0' x2='70' y2='95'/%3E%3Cline x1='0' y1='0' x2='35' y2='110'/%3E%3Cline x1='0' y1='0' x2='0' y2='120'/%3E%3Cpath d='M25 0 Q20 8 18 10 Q14 16 10 18 Q8 20 0 25'/%3E%3Cpath d='M50 0 Q42 16 38 20 Q30 32 20 38 Q16 42 0 50'/%3E%3Cpath d='M75 0 Q65 24 58 30 Q46 48 30 58 Q24 65 0 75'/%3E%3Cpath d='M100 0 Q88 32 78 40 Q62 64 40 78 Q32 88 0 100'/%3E%3Cpath d='M120 0 Q110 35 95 70 Q70 95 35 110 Q0 120 0 120'/%3E%3C/svg%3E");
}


/* Floating warm embers */
.halloween-embers-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 96;
}

.halloween-ember {
    position: absolute;
    bottom: -15px;
    border-radius: 50%;
    background: radial-gradient(circle, #ffaa00 0%, #ff5500 70%, transparent 100%);
    box-shadow: 0 0 8px #ff7518;
    pointer-events: none;
    animation: riseEmber linear infinite;
}

.ember-1 { left: 8%; width: 4px; height: 4px; animation-duration: 15s; animation-delay: 0s; }
.ember-2 { left: 25%; width: 5px; height: 5px; animation-duration: 19s; animation-delay: 3s; }
.ember-3 { left: 45%; width: 3px; height: 3px; animation-duration: 13s; animation-delay: 6s; }
.ember-4 { left: 65%; width: 5px; height: 5px; animation-duration: 17s; animation-delay: 2s; }
.ember-5 { left: 80%; width: 4px; height: 4px; animation-duration: 21s; animation-delay: 5s; }
.ember-6 { left: 93%; width: 3px; height: 3px; animation-duration: 16s; animation-delay: 8s; }
.ember-7 { left: 16%; width: 4px; height: 4px; animation-duration: 17s; animation-delay: 4s; }
.ember-8 { left: 34%; width: 3px; height: 3px; animation-duration: 14s; animation-delay: 7s; }
.ember-9 { left: 54%; width: 5px; height: 5px; animation-duration: 22s; animation-delay: 1s; }
.ember-10 { left: 72%; width: 3px; height: 3px; animation-duration: 15s; animation-delay: 9s; }
.ember-11 { left: 86%; width: 4px; height: 4px; animation-duration: 18s; animation-delay: 5s; }
.ember-12 { left: 96%; width: 3px; height: 3px; animation-duration: 13s; animation-delay: 11s; }

@keyframes riseEmber {
    0% { transform: translateY(0) translateX(0) scale(0.6); opacity: 0; }
    15% { opacity: 0.55; }
    50% { transform: translateY(-50vh) translateX(20px) scale(1); opacity: 0.7; }
    85% { opacity: 0.3; }
    100% { transform: translateY(-105vh) translateX(-15px) scale(0.5); opacity: 0; }
}

/* ── 9. Accessibility & Mobile Optimization ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .halloween-bat,
    .halloween-ember,
    .header-hanging-spider,
    .spider-thread,
    .hanging-spider-body,
    .header-crawling-spider,
    .spider-leg,
    .header-pumpkin-badge {
        animation: none !important;
        opacity: 0.5 !important;
    }
}

@media (max-width: 768px) {
    .halloween-corner-web,
    .header-web-drape,
    .header-crawling-spider-track,
    .halloween-bat {
        display: none !important;
    }
    .header-web-left,
    .header-web-right {
        width: 60px;
        height: 45px;
        opacity: 0.25;
    }
    .header-hanging-spider {
        right: 80px;
    }
    .header-pumpkin-badge {
        width: 32px;
        height: 32px;
        margin-left: 4px;
    }
}