/* The map pages in Hexlime style: the night sky of the cosmos layer, a chamfer-free glass card with
   lime corner brackets, HUD labels in mono, and map colours from the site palette.
   Loaded after season.css (and unesco.css) on /season/ and /unesco/ only; the legal pages keep season.css as is. */

:root {
    --season-bg: #0b0520;
    --season-card: rgba(16, 9, 38, 0.72);
    --season-ink: rgba(255, 255, 255, 0.92);
    --season-muted: rgba(255, 255, 255, 0.62);
    --season-stroke: rgba(198, 230, 65, 0.22);

    /* Map colours (read by season.js and unesco.js, so keep them 6-digit hex) */
    --season-high: #c6e641;
    --season-shoulder: #f2a65a;
    --season-low: #c4502e;
    --season-unknown: #2e2357;

    --unesco-cultural: #b48cff;
    --unesco-natural: #c6e641;
    --unesco-mixed: #f2a65a;
    --map-land: #241a4a;
    --map-border: rgba(255, 255, 255, 0.14);
}

body.season-page {
    min-height: 100vh;
    background:
        radial-gradient(1.5px 1.5px at 22px 38px, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(1px 1px at 140px 92px, rgba(233, 220, 255, 0.7), transparent),
        radial-gradient(1.2px 1.2px at 210px 170px, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 70px 210px, rgba(207, 233, 255, 0.6), transparent),
        linear-gradient(#0b0520, #170a38 70%, #22297a);
    background-size: 240px 240px, 240px 240px, 240px 240px, 240px 240px, 100% 100%;
    background-attachment: fixed;
}

/* Header: same logo and menu as the home page, minus its scroll tricks */
.season-page header.ui {
    position: fixed;
}

/* A dark fade behind the header so content scrolls away beneath it */
body.season-page::before {
    content: "";
    position: fixed;
    inset: 0 0 auto;
    height: 84px;
    z-index: 49;
    pointer-events: none;
    background: linear-gradient(#0b0520 55%, rgba(11, 5, 32, 0));
}

/* The mobile menu needs main.js; here the links simply stay in the bar */
@media (max-width: 820px) {
    .season-page .map-nav {
        position: static;
        flex-direction: row;
        min-width: 0;
        padding: 0;
        background: none;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .season-page .map-nav a:not(.map-back) {
        display: none;
    }
}

.season-wrap {
    padding-top: 104px;
}

/* Card: dark glass with lime corner brackets, like the cards on the home page */
.season-card {
    padding: 28px;
    border-radius: 0;
    border: 1px solid var(--season-stroke);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)),
        var(--season-card);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
    color: var(--season-ink);
}

.season-card::before,
.season-card::after {
    content: "";
    position: absolute;
    width: 22px;
    height: 22px;
    pointer-events: none;
}

.season-card::before {
    top: 8px;
    right: 8px;
    border-top: 2px solid var(--lime);
    border-right: 2px solid var(--lime);
}

.season-card::after {
    bottom: 8px;
    left: 8px;
    border-bottom: 2px solid var(--lime);
    border-left: 2px solid var(--lime);
}

/* Type: the home page scale */
.season-head .kicker {
    margin-bottom: 12px;
}

.season-title {
    font-family: var(--font-display);
    font-size: clamp(36px, 4.4vw, 56px);
    font-weight: 650;
    line-height: 1.05;
    letter-spacing: -0.02em;
    font-variation-settings: "opsz" 96;
    color: #fff;
    text-shadow: -1px 0 rgba(255, 60, 170, 0.45), 1px 0 rgba(94, 246, 255, 0.45);
}

.season-subtitle {
    margin-top: 10px;
    font-size: 17px;
    color: var(--season-muted);
}

.season-intro {
    max-width: 640px;
    margin: 12px 0 4px;
    font-size: 15px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.78);
}

.season-intro .pin {
    margin-right: 8px;
    font: 500 11px/1 var(--mono);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--lime);
    text-shadow: 0 0 8px rgba(198, 230, 65, 0.5);
}

/* HUD labels: mono, lime, uppercase */
.season-label,
.legend-item,
.monthbar-mini,
.monthbar-ticks {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.season-label {
    color: var(--lime);
    text-shadow: 0 0 8px rgba(198, 230, 65, 0.45);
}

.legend-item,
.monthbar-mini,
.monthbar-ticks {
    color: var(--season-muted);
}

/* Panels inside the card */
.season-legend,
.monthbar {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0;
    background: rgba(255, 255, 255, 0.04);
}

.monthbar-name {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    color: #fff;
}

.swatch {
    border-radius: 2px;
    border-color: rgba(255, 255, 255, 0.2);
}

/* Month slider: dark track, lime thumb */
.monthbar-range {
    -webkit-appearance: none;
    appearance: none;
    height: 18px;
}

.monthbar-range::-webkit-slider-runnable-track {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.12);
}

.monthbar-range::-webkit-slider-thumb {
    background: var(--lime);
    border-color: #0b0520;
    box-shadow: 0 0 10px rgba(198, 230, 65, 0.7);
}

.monthbar-range::-moz-range-track {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.12);
}

.monthbar-range::-moz-range-thumb {
    background: var(--lime);
    border-color: #0b0520;
    box-shadow: 0 0 10px rgba(198, 230, 65, 0.7);
}

/* Buttons and the search field */
.season-reset,
.filter-btn {
    border: 1px solid rgba(198, 230, 65, 0.35);
    border-radius: 0;
    background: rgba(255, 255, 255, 0.04);
    color: var(--lime);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    transition: background 0.15s ease, color 0.15s ease;
}

.season-reset:hover,
.filter-btn:hover:not(.active) {
    background: rgba(198, 230, 65, 0.12);
}

.filter-btn.active {
    background: var(--lime);
    border-color: var(--lime);
    color: #160c2e;
}

.filter-btn .filter-count {
    color: inherit;
    opacity: 0.7;
}

.map-find-input {
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 0;
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}

.map-find-input::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

/* The map itself */
.season-viz {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0;
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(94, 246, 255, 0.06), transparent 70%),
        rgba(5, 2, 16, 0.55);
}

.country {
    stroke: var(--map-border);
}

.country:hover {
    stroke: rgba(255, 255, 255, 0.55);
}

path.country.is-picked,
circle.site.is-picked {
    stroke: #fff;
}

/* Tooltip: a small HUD panel */
.season-tip {
    border: 1px solid rgba(198, 230, 65, 0.35);
    border-radius: 0;
    background: rgba(14, 8, 34, 0.96);
    color: var(--season-ink);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
}

.tip-name {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    color: #fff;
}

.tip-badge {
    border-radius: 0;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff;
}

.tip-row {
    color: var(--season-muted);
}

.tip-danger {
    color: #ff8a6a;
}

.season-note,
.season-note a,
.viz-error {
    color: var(--season-muted);
}

/* Touch screens: every control at least 44px, so a thumb can hit it (mouse layouts stay as they are) */
@media (pointer: coarse) {
    .season-reset:not([hidden]),
    .filter-btn,
    .map-back {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
    }

    #zoomIn,
    #zoomOut {
        min-width: 44px;
    }

    .monthbar-range,
    .map-find-input {
        min-height: 44px;
    }
}