/* ==========================================================================
   Seasonal look: Halloween (see inc/seasonal-looks.php)
   Loaded after theme.css only while a Halloween look is on. Body classes:
     .wu-look-halloween-subtle    Pumpkin Spice: light site, orange accents
     .wu-look-halloween-midnight  Midnight Header: night-sky header, light stories
     .wu-look-halloween-fright    Full Fright: the whole site in dark mode
   Decorations stay on the site's frame, never on story cards.
   ========================================================================== */

/* A cached page served after the season ends has its look classes taken
   off (wu_look_end_guard), so its decorations hide */
body:not(.wu-look) :is(.wu-look-greeting, .wu-look-hat, .wu-look-bats, .wu-look-spider, .wu-look-web, .wu-look-graves, .wu-look-events) {
    display: none !important;
}

.wu-look-halloween {
    --hw-pumpkin: #f97316;
    --hw-pumpkin-deep: #ea580c;
    --hw-pumpkin-text: #c2410c; /* dark enough for small text on white (5.2:1) */
    --hw-night: #170f22;
    --hw-night-2: #241736;
    --hw-night-3: #31214a;
    --hw-purple: #7c4dbd;
    --hw-moon: #fbe7b5;
    --hw-bat: #a58fcf; /* light enough to stand out against the night-sky headers */
}

/* ---------- Shared ---------- */

.wu-look-greeting {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--hw-pumpkin-text);
}

.wu-look-pumpkin {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.wu-look-events .wu-trending-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--hw-pumpkin-deep);
}

.wu-look-events .wu-trending-label .wu-look-pumpkin {
    width: 13px;
    height: 13px;
}

.wu-look-events .wu-trending-items a strong {
    color: var(--wu-text);
    font-weight: 600;
}

/* A pumpkin in front of section titles */
.wu-look-halloween .wu-section-title::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 9px;
    vertical-align: -2px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 7.5c-.6-2.4.2-4.3 2.2-5.2' stroke='%234d7c0f' stroke-width='2.2' fill='none' stroke-linecap='round'/%3E%3Cellipse cx='7.6' cy='14.5' rx='5.6' ry='7' fill='%23ea580c'/%3E%3Cellipse cx='16.4' cy='14.5' rx='5.6' ry='7' fill='%23ea580c'/%3E%3Cellipse cx='12' cy='14.5' rx='4.8' ry='7.4' fill='%23f97316'/%3E%3C/svg%3E") center / contain no-repeat;
}

.wu-look-halloween .wu-header-cta {
    background: var(--hw-pumpkin-deep);
}

.wu-look-halloween .wu-header-cta:hover {
    background: #9a3412;
}

/* Witch's hat on the dragon (header only) */
.wu-lockup-mark {
    position: relative;
}

.wu-lockup-mark .wu-look-hat {
    position: absolute;
    top: -18px;
    left: 8px;
    width: 32px;
    height: auto;
    transform: rotate(-12deg);
}

.wu-footer .wu-look-hat {
    display: none;
}

/* Bats perched in the logo row */
.wu-header-main {
    position: relative;
}

.wu-look-bats {
    position: absolute;
    top: 14px;
    left: calc(50% - 60px);
    width: 120px;
    height: 50px;
    pointer-events: none;
    color: #3b2a52;
    opacity: 0.75;
}

.wu-look-bats svg {
    position: absolute;
    height: auto;
}

.wu-look-bats svg:nth-child(1) { left: 0;    top: 4px;  width: 24px; rotate: -14deg; }
.wu-look-bats svg:nth-child(2) { left: 38px; top: 22px; width: 17px; rotate: 10deg; }
.wu-look-bats svg:nth-child(3) { left: 80px; top: 0;    width: 20px; rotate: -4deg; }

/* Spider dangling from the menu bar on a thread */
.wu-nav {
    position: relative;
}

.wu-look-spider {
    position: absolute;
    right: 64px;
    top: 100%;
    z-index: 5;
    width: 22px;
    height: 64px;
    pointer-events: none;
    transform-origin: 50% 0;
    animation: wu-hw-sway 4s ease-in-out infinite;
}

.wu-look-spider::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    width: 1px;
    height: 46px;
    background: rgba(60, 50, 80, 0.55);
}

.wu-look-spider svg {
    position: absolute;
    top: 42px;
    left: 0;
    width: 22px;
    color: var(--hw-night);
}

@keyframes wu-hw-sway {
    0%, 100% { transform: rotate(4deg); }
    50%      { transform: rotate(-4deg); }
}

/* Graveyard silhouette rising out of the footer */
.wu-look-graves {
    height: 46px;
    margin-top: 48px;
    margin-bottom: -1px;
    background: #1e1e1e; /* the footer's colour */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 46'%3E%3Crect y='36' width='900' height='10'/%3E%3Cpath d='M30 37v-4a10 10 0 0120 0v4z'/%3E%3Cpath d='M170 37v-5a13 13 0 0126 0v5z'/%3E%3Cpath d='M330 37v-2a8 8 0 0116 0v2z'/%3E%3Cpath d='M420 37v-5a11 11 0 0122 0v5z'/%3E%3Cpath d='M560 37v-3a9 9 0 0118 0v3z'/%3E%3Cpath d='M700 37v-6a12 12 0 0124 0v6z'/%3E%3Cpath d='M830 37v-3a9 9 0 0118 0v3z'/%3E%3Cpath d='M100 37v-22h-6v-5h6v-6h5v6h6v5h-6v22z'/%3E%3Cpath d='M620 37v-22h-6v-5h6v-6h5v6h6v5h-6v22z'/%3E%3Cpath d='M250 37v-20l-4 0 22-12 22 12h-4v20h-10v-10a4 4 0 00-8 0v10z'/%3E%3Cpath d='M460 37q30-10 60 0z'/%3E%3C/svg%3E") bottom / 900px 46px repeat-x;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 46'%3E%3Crect y='36' width='900' height='10'/%3E%3Cpath d='M30 37v-4a10 10 0 0120 0v4z'/%3E%3Cpath d='M170 37v-5a13 13 0 0126 0v5z'/%3E%3Cpath d='M330 37v-2a8 8 0 0116 0v2z'/%3E%3Cpath d='M420 37v-5a11 11 0 0122 0v5z'/%3E%3Cpath d='M560 37v-3a9 9 0 0118 0v3z'/%3E%3Cpath d='M700 37v-6a12 12 0 0124 0v6z'/%3E%3Cpath d='M830 37v-3a9 9 0 0118 0v3z'/%3E%3Cpath d='M100 37v-22h-6v-5h6v-6h5v6h6v5h-6v22z'/%3E%3Cpath d='M620 37v-22h-6v-5h6v-6h5v6h6v5h-6v22z'/%3E%3Cpath d='M250 37v-20l-4 0 22-12 22 12h-4v20h-10v-10a4 4 0 00-8 0v10z'/%3E%3Cpath d='M460 37q30-10 60 0z'/%3E%3C/svg%3E") bottom / 900px 46px repeat-x;
}

/* The footer sits right under the graves */
.wu-look-halloween .wu-look-graves + .wu-footer {
    margin-top: 0;
}

/* Cobweb in the lead story's corner */
.wu-look-web {
    position: absolute;
    top: 0;
    right: 0;
    width: 150px;
    height: 150px;
    color: rgba(230, 220, 250, 0.22);
    pointer-events: none;
}

.wu-look-halloween .wu-hero-link {
    position: relative;
}

/* ==========================================================================
   1. Pumpkin Spice
   ========================================================================== */

.wu-look-halloween-subtle {
    --wu-red: var(--hw-pumpkin-text);
    --wu-red-dark: #9a3412;
    --wu-red-light: #fff4ec;
}

/* Pumpkin and purple stripe in place of the red line */
.wu-look-halloween-subtle .wu-header {
    border-bottom-color: transparent;
    border-image: repeating-linear-gradient(135deg, var(--hw-pumpkin) 0 14px, var(--hw-purple) 14px 28px) 3;
}

/* ==========================================================================
   2. Midnight Header
   The header gets dark colours of its own, so everything in it (phone
   menu, dropdowns, search panel) follows without rules of its own
   ========================================================================== */

.wu-look-halloween-midnight {
    --wu-red: var(--hw-pumpkin-text);
    --wu-red-dark: #9a3412;
}

.wu-look-halloween-midnight .wu-header,
.wu-look-halloween-midnight .wu-look-events {
    --wu-red: var(--hw-pumpkin);
    --wu-red-dark: var(--hw-pumpkin-deep);
    --wu-red-light: #2b1a14;
    --wu-bg: var(--hw-night-2);
    --wu-bg-alt: var(--hw-night);
    --wu-bg-card: var(--hw-night-2);
    --wu-text: #f3eef9;
    --wu-text-secondary: #bcb0cf;
    --wu-text-tertiary: #9c90b0;
    --wu-border: #3f2f58;
    --wu-border-light: #2f2244;
    --wu-search-bg: rgba(255, 255, 255, 0.08);
    --wu-nav-hover: rgba(255, 255, 255, 0.07);
    color: var(--wu-text);
}

.wu-look-halloween-midnight .wu-header {
    background:
        radial-gradient(1.5px 1.5px at 12% 30%, #fff8 50%, transparent 51%),
        radial-gradient(1px 1px at 22% 70%, #fff7 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 41% 22%, #fff6 50%, transparent 51%),
        radial-gradient(1px 1px at 55% 60%, #fff8 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 67% 18%, #fff7 50%, transparent 51%),
        radial-gradient(1px 1px at 79% 48%, #fff6 50%, transparent 51%),
        radial-gradient(1px 1px at 91% 26%, #fff8 50%, transparent 51%),
        linear-gradient(180deg, var(--hw-night) 0%, var(--hw-night-2) 100%);
    border-bottom-color: var(--hw-pumpkin);
}

.wu-look-halloween-midnight .wu-topbar {
    background: rgba(0, 0, 0, 0.25);
}

.wu-look-halloween-midnight .wu-look-greeting,
.wu-look-halloween-midnight .wu-lockup-tagline {
    color: var(--hw-pumpkin);
}

/* Clip sideways only, so the fog and bats don't widen the page but the
   search panel can still drop down below */
.wu-look-halloween-midnight .wu-header-main {
    overflow-x: clip;
}

.wu-look-halloween-midnight .wu-header-main,
.wu-look-halloween-midnight .wu-nav {
    background: transparent;
}

.wu-look-halloween-midnight .wu-nav {
    background: rgba(0, 0, 0, 0.22);
}

/* Moon rising behind the dragon */
.wu-look-halloween-midnight .wu-header-main .wu-lockup {
    position: relative;
}

.wu-look-halloween-midnight .wu-header-main .wu-lockup::before {
    content: '';
    position: absolute;
    left: -26px;
    top: 50%;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    transform: translateY(-50%);
    background: radial-gradient(circle at 40% 40%, #fff6d8 0%, var(--hw-moon) 45%, #e9cd8a 70%, transparent 71%);
    box-shadow: 0 0 60px 18px rgba(251, 231, 181, 0.18);
    opacity: 0.9;
}

.wu-look-halloween-midnight .wu-header-main .wu-lockup-mark {
    color: var(--hw-night);
}

.wu-look-halloween-midnight .wu-header-cta {
    box-shadow: 0 0 18px rgba(249, 115, 22, 0.35);
}

.wu-look-halloween-midnight .wu-look-bats {
    width: 160px;
    height: 60px;
    left: 38%;
    color: var(--hw-bat);
    opacity: 1;
    filter: drop-shadow(0 0 4px rgba(249, 115, 22, 0.4));
}

.wu-look-halloween-midnight .wu-look-events {
    background: var(--hw-night-2);
    border-bottom-color: var(--hw-night-3);
}

.wu-look-halloween-midnight .wu-look-graves,
.wu-look-halloween-midnight .wu-footer {
    background: var(--hw-night-2);
}

/* ==========================================================================
   3. Full Fright
   ========================================================================== */

.wu-look-halloween-fright {
    --wu-red: var(--hw-pumpkin);
    --wu-red-dark: var(--hw-pumpkin-deep);
    --wu-red-light: #2b1a14;
    --wu-red-on-dark: var(--hw-pumpkin);
    --wu-bg: #1a1224;
    --wu-bg-alt: #110b18;
    --wu-bg-card: #1f162b;
    --wu-text: #f3eef9;
    --wu-text-secondary: #bcb0cf;
    --wu-text-tertiary: #8f83a3;
    --wu-border: #362a4a;
    --wu-border-light: #2a2038;
    --wu-search-bg: #271c35;
    --wu-nav-hover: #271c35;
    background:
        radial-gradient(ellipse 80% 40% at 50% 0%, rgba(124, 77, 189, 0.18), transparent 70%) no-repeat,
        var(--wu-bg-alt);
    color-scheme: dark;
}

.wu-look-halloween-fright .wu-look-greeting,
.wu-look-halloween-fright .wu-lockup-tagline {
    color: var(--hw-pumpkin);
}

.wu-look-halloween-fright .wu-header {
    background: linear-gradient(180deg, #120a1b, var(--wu-bg));
    border-bottom-color: var(--hw-pumpkin);
}

.wu-look-halloween-fright .wu-topbar {
    background: #0d0813;
}

/* Clip sideways only, so the fog and bats don't widen the page but the
   search panel can still drop down below */
.wu-look-halloween-fright .wu-header-main {
    overflow-x: clip;
}

/* Low fog drifting along the bottom of the logo row */
.wu-look-halloween-fright .wu-header-main::after {
    content: '';
    position: absolute;
    left: -10%;
    right: -10%;
    bottom: -18px;
    height: 46px;
    background:
        radial-gradient(ellipse 18% 60% at 15% 70%, rgba(200, 185, 230, 0.12), transparent 70%),
        radial-gradient(ellipse 22% 60% at 45% 80%, rgba(200, 185, 230, 0.10), transparent 70%),
        radial-gradient(ellipse 20% 60% at 78% 70%, rgba(200, 185, 230, 0.12), transparent 70%);
    animation: wu-hw-fog 14s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes wu-hw-fog {
    from { transform: translateX(-4%); }
    to   { transform: translateX(4%); }
}

.wu-look-halloween-fright .wu-lockup-mark {
    color: var(--hw-pumpkin);
}

.wu-look-halloween-fright .wu-header-main .wu-lockup-mark svg:first-child {
    filter: drop-shadow(0 0 10px rgba(249, 115, 22, 0.55));
}

.wu-look-halloween-fright .wu-look-hat path:not(:last-child) {
    fill: #4b3470;
}

.wu-look-halloween-fright .wu-header-cta {
    color: #1a0d05;
    box-shadow: 0 0 20px rgba(249, 115, 22, 0.4);
}

.wu-look-halloween-fright .wu-header-cta:hover {
    background: var(--hw-pumpkin);
}

.wu-look-halloween-fright .wu-look-bats {
    color: var(--hw-bat);
    opacity: 1;
    filter: drop-shadow(0 0 4px rgba(249, 115, 22, 0.45));
}

.wu-look-halloween-fright .wu-look-bats svg {
    animation: wu-hw-flap 0.35s ease-in-out infinite alternate;
}

@keyframes wu-hw-flap {
    from { transform: scaleY(1); }
    to   { transform: scaleY(0.55); }
}

.wu-look-halloween-fright .wu-look-spider::before {
    background: rgba(220, 210, 240, 0.35);
}

.wu-look-halloween-fright .wu-look-spider svg {
    color: #e9e3f2;
}

.wu-look-halloween-fright .wu-hero-link:hover,
.wu-look-halloween-fright .wu-card:hover {
    border-color: rgba(249, 115, 22, 0.45);
    box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.25), 0 8px 30px rgba(249, 115, 22, 0.12);
}

.wu-look-halloween-fright .wu-look-events {
    background: #150e1e;
}

/* Search words picked out in results */
.wu-look-halloween-fright .wu-results mark,
.wu-look-halloween-fright .wu-event-title mark {
    background: rgba(249, 115, 22, 0.28);
}

.wu-look-halloween-fright .wu-look-graves,
.wu-look-halloween-fright .wu-footer {
    background: #0b0710;
}

.wu-look-halloween-fright .wu-look-graves {
    margin-top: 24px;
}

/* High contrast (Accessibility pop-up): lighter greys on the dark pages */
html.wu-a11y-contrast .wu-look-halloween-fright,
html.wu-a11y-contrast .wu-look-halloween-midnight .wu-header,
html.wu-a11y-contrast .wu-look-halloween-midnight .wu-look-events {
    --wu-text-secondary: #ebe6f2;
    --wu-text-tertiary: #d3cadf;
    --wu-border: #8a7da0;
}

/* ---------- Phones ---------- */
@media (max-width: 768px) {
    .wu-look-halloween-midnight .wu-header-main .wu-lockup::before {
        width: 58px;
        height: 58px;
        left: -14px;
    }

    .wu-lockup-mark .wu-look-hat {
        width: 24px;
        top: -13px;
        left: 5px;
    }

    .wu-look-halloween-subtle .wu-look-bats {
        display: none;
    }

    .wu-look-spider {
        right: 24px;
    }

    .wu-look-web {
        width: 90px;
        height: 90px;
    }
}

/* ---------- Less motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .wu-look-spider,
    .wu-look-bats svg,
    .wu-look-halloween-fright .wu-header-main::after {
        animation: none !important;
    }
}