/*
 * Halloween Map theme — overrides for the shared interactive-map renderer.
 *
 * Loaded by templates/interactive-map/render.php ONLY when the page template sets
 * $map_theme = 'halloween'. Every rule is scoped to body.map-theme-halloween, so
 * the Interactive Map, Venues Map and Pirate Map templates are never affected.
 *
 * Look: midnight-purple panels, bone-white type, glowing pumpkin-orange accents,
 * a faint cobweb in the panel corner. The display font (Creepster, dripping
 * horror lettering) is used ONLY for large headings — it is hard to read small.
 * Everything people read at length stays in the renderer's sans-serif.
 *
 * Contrast (WCAG 2.1 AA), checked against the solid colours below:
 *   bone #f6efe0 on panel #241a33 ................ 14.4 : 1
 *   bone #f6efe0 on active row #3a2a52 ........... 11.2 : 1
 *   mist #d9cbe8 on panel #241a33 ................ 10.8 : 1  (secondary text)
 *   orange #ff8a1f on panel #241a33 .............. 7.0 : 1  (links, selected title)
 *   orange #ff8a1f on active row #3a2a52 ......... 5.5 : 1
 *   ink #120d18 on orange #ff8a1f ................ 8.1 : 1  (buttons)
 *   bone #f6efe0 on header band #120d18 .......... 16.7 : 1
 *   focus ring #ff8a1f vs panel .................. 7.0 : 1  (non-text ≥ 3 : 1)
 */

/* ── Self-hosted display font (SIL Open Font License — assets/fonts/halloween/OFL-Creepster.txt) ── */
@font-face {
    font-family: 'Creepster';
    src: url('../../assets/fonts/halloween/Creepster-Regular.woff2') format('woff2'); /* Latin subset, 28 KB */
    font-display: swap; /* text stays visible while the font loads */
}

/* ── Palette ────────────────────────────────────────────────────────────────── */
body.map-theme-halloween {
    --hm-night:   #1b1424;
    --hm-panel:   #241a33;
    --hm-band:    #120d18;   /* header band, overlay ink */
    --hm-active:  #3a2a52;   /* selected row */
    --hm-bone:    #f6efe0;
    --hm-mist:    #d9cbe8;
    --hm-orange:  #ff8a1f;   /* text-safe orange on dark */
    --hm-pumpkin: #e8741c;   /* fills, glows */
    --hm-display: 'Creepster', Impact, 'Arial Black', sans-serif;

    background: var(--hm-night);
    color: var(--hm-bone);
}

/* ── Sidebar: a dark panel with a pumpkin glow and a cobweb in the corner ──── */
body.map-theme-halloween .sidebar-content {
    background-color: rgba(36, 26, 51, 0.97); /* near-opaque so contrast holds over any map */
    border: 1px solid rgba(232, 116, 28, 0.55);
    box-shadow: 0 0 28px rgba(232, 116, 28, 0.35), 0 8px 30px rgba(0, 0, 0, 0.6);
    color: var(--hm-bone);
    /* decorative cobweb, drawn with CSS only (no image request) */
    background-image:
        repeating-radial-gradient(circle at 100% 100%, transparent 0 22px, rgba(217, 203, 232, 0.07) 22px 23px),
        repeating-conic-gradient(from 180deg at 100% 100%, transparent 0 14deg, rgba(217, 203, 232, 0.07) 14deg 15deg);
    background-size: 160px 160px;
    background-position: right bottom;
    background-repeat: no-repeat;
}
body.map-theme-halloween .sidebar-header {
    background-color: var(--hm-band);
    color: var(--hm-bone);
    border-bottom: 2px solid var(--hm-pumpkin);
}
body.map-theme-halloween .sidebar-header-title {
    font-family: var(--hm-display);
    font-weight: 400;
    font-size: 1.35em;      /* larger wraps "Campus Venues" onto two lines */
    letter-spacing: 0.04em;
    color: var(--hm-orange);
    text-shadow: 0 0 8px rgba(232, 116, 28, 0.6);
}
body.map-theme-halloween .sidebar-toggle {
    background: var(--hm-panel);
    border: 2px solid var(--hm-pumpkin);
}
body.map-theme-halloween .toggle-icon-open { color: var(--hm-orange); }
body.map-theme-halloween .drag-handle { background: rgba(255, 138, 31, 0.6); }

/* ── Map-style switcher + "Set start" (on the dark header band) ───────────── */
body.map-theme-halloween #map-layer-switcher label,
body.map-theme-halloween .set-start-btn {
    color: var(--hm-bone);
    border-color: rgba(246, 239, 224, 0.5);
}
body.map-theme-halloween #map-layer-switcher label:hover,
body.map-theme-halloween .set-start-btn:hover { background: rgba(255, 138, 31, 0.15); }
body.map-theme-halloween #map-layer-switcher input[type="radio"]:checked + label,
body.map-theme-halloween .set-start-btn[aria-pressed="true"] {
    background: var(--hm-orange);
    border-color: var(--hm-orange);
    color: var(--hm-band);
}

/* ── Search ────────────────────────────────────────────────────────────────── */
body.map-theme-halloween #location-search {
    background: var(--hm-band);
    color: var(--hm-bone);
    border-bottom: 1px solid rgba(232, 116, 28, 0.5);
}
body.map-theme-halloween #location-search::placeholder { color: var(--hm-mist); }
body.map-theme-halloween #location-search:focus { background: #000; }

/* ── Listings ──────────────────────────────────────────────────────────────── */
body.map-theme-halloween .listings .item { border-bottom: 1px solid rgba(217, 203, 232, 0.15); }
body.map-theme-halloween .listings .item .title { color: var(--hm-bone); }
body.map-theme-halloween .listings .item .title:hover { color: var(--hm-orange); }
body.map-theme-halloween .listings .item.active { background-color: var(--hm-active); }
body.map-theme-halloween .listings .item.active .title {
    color: var(--hm-orange);
    border-left-color: var(--hm-pumpkin);
}
body.map-theme-halloween .details,
body.map-theme-halloween .active .details { color: var(--hm-mist); }
body.map-theme-halloween .details a { color: var(--hm-orange); }

body.map-theme-halloween .listing-close-button {
    background-color: var(--hm-orange);
    color: var(--hm-band);
}
body.map-theme-halloween .listing-close-button:hover { background-color: var(--hm-bone); color: var(--hm-band); }

/* ── Popups ────────────────────────────────────────────────────────────────── */
body.map-theme-halloween .mapboxgl-popup-content {
    background: var(--hm-panel);
    color: var(--hm-bone);
    border: 1px solid rgba(232, 116, 28, 0.6);
    box-shadow: 0 0 22px rgba(232, 116, 28, 0.35), 0 6px 18px rgba(0, 0, 0, 0.55);
}
body.map-theme-halloween .mapboxgl-popup-content .popup-header { background-color: var(--hm-band); }
body.map-theme-halloween .mapboxgl-popup-content h3 {
    background: var(--hm-band);          /* replaces the purple gradient */
    color: var(--hm-orange);
    font-family: var(--hm-display);
    font-weight: 400;
    font-size: 24px;
    letter-spacing: 0.04em;
    text-shadow: 0 0 8px rgba(232, 116, 28, 0.55);
}
body.map-theme-halloween .mapboxgl-popup-content div div.popup-content { color: var(--hm-bone); }
body.map-theme-halloween .popup-content a { color: var(--hm-orange); }
body.map-theme-halloween .mapboxgl-popup-close-button {
    background-color: var(--hm-orange);
    color: var(--hm-band);
}
body.map-theme-halloween .mapboxgl-popup-close-button:hover { background-color: var(--hm-bone); }
body.map-theme-halloween .mapboxgl-popup-anchor-top > .mapboxgl-popup-tip { border-bottom-color: var(--hm-band); }
body.map-theme-halloween .mapboxgl-popup-anchor-bottom > .mapboxgl-popup-tip { border-top-color: var(--hm-panel); }

body.map-theme-halloween .hover-label-popup .mapboxgl-popup-content {
    background: var(--hm-band);
    color: var(--hm-bone);
    border: 1px solid var(--hm-pumpkin);
}
body.map-theme-halloween .hover-label-popup .mapboxgl-popup-tip { border-top-color: var(--hm-band); }

/* ── Directions buttons (base CSS uses !important on colour, so we must too) ── */
body.map-theme-halloween .dir-btn { border-color: var(--hm-orange); }
body.map-theme-halloween .dir-btn--navigate { background-color: var(--hm-orange); color: var(--hm-band) !important; }
body.map-theme-halloween .dir-btn--navigate:hover { background-color: var(--hm-bone); color: var(--hm-band) !important; }
body.map-theme-halloween .dir-btn--route { background-color: transparent; color: var(--hm-orange) !important; }
body.map-theme-halloween .dir-btn--route:hover { background-color: var(--hm-active); }

/* ── Route start banner ────────────────────────────────────────────────────── */
body.map-theme-halloween #route-start-banner {
    background: rgba(18, 13, 24, 0.96);
    color: var(--hm-bone);
    border: 1px solid var(--hm-pumpkin);
}
body.map-theme-halloween #route-start-clear { color: var(--hm-bone); border-color: rgba(246, 239, 224, 0.6); }

/* ── Instructions overlay ──────────────────────────────────────────────────── */
body.map-theme-halloween #map-intro-overlay { background: rgba(8, 5, 12, 0.85); }
body.map-theme-halloween #map-intro-card {
    background: var(--hm-panel);
    color: var(--hm-bone);
    border: 1px solid var(--hm-pumpkin);
    box-shadow: 0 0 40px rgba(232, 116, 28, 0.4), 0 10px 40px rgba(0, 0, 0, 0.7);
}
body.map-theme-halloween #map-intro-card h2 {
    color: var(--hm-orange);
    font-family: var(--hm-display);
    font-weight: 400;
    font-size: 1.8rem;
    letter-spacing: 0.05em;
    text-shadow: 0 0 10px rgba(232, 116, 28, 0.6);
}
body.map-theme-halloween #map-intro-card ul li { color: var(--hm-mist); }
body.map-theme-halloween #map-intro-card ul li strong { color: var(--hm-bone); }
body.map-theme-halloween #map-intro-card ul li .tip-icon {
    background: rgba(232, 116, 28, 0.15);
    border-color: var(--hm-pumpkin);
    color: var(--hm-orange);
}
body.map-theme-halloween #map-intro-dismiss {
    background: var(--hm-orange);
    color: var(--hm-band);
}
body.map-theme-halloween #map-intro-dismiss:hover { background: var(--hm-bone); }

/* ── Focus: one clear, consistent ring everywhere (WCAG 2.4.7) ─────────────── */
body.map-theme-halloween :focus-visible,
body.map-theme-halloween #map-layer-switcher input[type="radio"]:focus-visible + label,
body.map-theme-halloween #map-intro-dismiss:focus-visible {
    outline: 3px solid var(--hm-orange);
    outline-offset: 2px;
}
/* The dismiss button IS orange — ring it in bone so the focus is still visible. */
body.map-theme-halloween #map-intro-dismiss:focus-visible { outline-color: var(--hm-bone); }

/* ── Scrollbar ─────────────────────────────────────────────────────────────── */
body.map-theme-halloween ::-webkit-scrollbar-thumb { background: var(--hm-pumpkin); }

/* ── Printable map (PDF) link: orange on panel 7.0 : 1, bone on hover 14.4 : 1 ── */
body.map-theme-halloween .sidebar-footer { border-top-color: rgba(232, 116, 28, 0.45); }
body.map-theme-halloween .map-pdf-link,
body.map-theme-halloween #map-intro-card .map-pdf-link { color: var(--hm-orange); }
body.map-theme-halloween .map-pdf-link:hover,
body.map-theme-halloween #map-intro-card .map-pdf-link:hover { color: var(--hm-bone); }

/* ── Respect reduced-motion preferences ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    body.map-theme-halloween * { transition: none !important; }
}