/* ==========================================================================
   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;
}

/* Sized against the dragon so it sits the same on every screen. The extra
   svg in the selector outranks theme.css's phone rule that sets the dragon's
   height on every svg in the mark, which pulled the hat down over its face. */
.wu-lockup-mark svg.wu-look-hat {
    position: absolute;
    top: -36%;
    left: 14%;
    width: 56%;
    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;
}

/* Police dog stories and their cards (inc/police-dogs.php): lighter blue on the dark pages */
.wu-look-halloween-fright {
    --wu-dog-ink: #a9c1ff;
    --wu-dog-tint: #1b2036;
    --wu-dog-line: #2f3a5c;
}

/* The paw gets the footer's yellow ring wherever stories are listed, so the
   navy circle shows on the dark pages */
.wu-look-halloween-fright .wu-dog-mark {
    margin-left: 1.5px;
    box-shadow: 0 0 0 1.5px var(--wu-dog-yellow);
}

/* 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-look-halloween-subtle .wu-look-bats {
        display: none;
    }

    /* Bats in the gap between the site name and the search/menu buttons,
       so they don't fly across the name */
    .wu-look-halloween-midnight .wu-look-bats,
    .wu-look-halloween-fright .wu-look-bats {
        top: 8px;
        left: auto;
        right: 108px;
        width: 60px;
        height: 40px;
    }

    /* Two up high, the low one at the right end where there's no text */
    .wu-look-bats svg:nth-child(1) { left: 0;    top: 2px;  width: 16px; }
    .wu-look-bats svg:nth-child(2) { left: 44px; top: 22px; width: 12px; }
    .wu-look-bats svg:nth-child(3) { left: 24px; top: 0;    width: 13px; }

    .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;
    }
}