/*
======================
THE REALM — the map of Illica
realm.css
======================

Was the main site's /interactive-map tool page; now a Crimson Court page.
The map itself is Leaflet, so most of this file is teaching Leaflet's own
chrome — tooltips, popups, zoom controls — to speak in the court's voice.

Pin colours match the map embedded on the hub (see court-hub.css), and
follow BRANDING.md: gold for nations, crimson for cities, velvet for
regions — "background depth, region pins" is what the token is for — and
silver, the rare second metal, for landmarks.
*/

:root {
    --map-nation-color: var(--royal-gold);
    --map-city-color: var(--crimson-blood);
    --map-region-color: var(--royal-velvet);
    --map-landmark-color: var(--royal-silver);
}

/* Shown only when scripting is off; the map cannot draw without it. */
.realm-noscript {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-align: center;
    background: var(--royal-black);
    color: var(--parchment);
    font-family: 'EB Garamond', Georgia, serif;
}

.realm-noscript h1 {
    font-family: 'Cinzel', Georgia, serif;
    margin-bottom: 20px;
}

.realm-noscript a { color: var(--royal-gold); }

/*
======================
MAP FRAME
======================
*/
.map-container {
    position: relative;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 0;
    height: min(72vh, 720px);
    min-height: 460px;
    width: 100%;
    background: var(--court-raised);
    border: 1px solid var(--court-border);
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
}

@media (max-width: 992px) {
    .map-container {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        height: auto;
    }
}

/*
======================
MAP CONTROLS
======================
*/
.map-controls {
    background: var(--court-surface);
    border-right: 1px solid var(--court-line);
    color: var(--parchment);
    padding: 22px 20px;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
    z-index: 1;
}

.filter-container h3 {
    color: var(--royal-gold);
    font-family: 'Cinzel', Georgia, serif;
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    margin: 0 0 16px;
    border-bottom: 1px solid var(--court-line);
    padding-bottom: 10px;
}

.filter-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.filter-option {
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
    padding-left: 28px;
}

.filter-option input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* A square box that takes the colour of the pins it controls. */
.checkmark {
    position: absolute;
    left: 0;
    top: 2px;
    height: 17px;
    width: 17px;
    background: var(--royal-black);
    border: 1px solid var(--court-border);
    border-radius: 0;
    transition: background .18s ease, border-color .18s ease;
}

.filter-option:hover input ~ .checkmark { border-color: var(--royal-gold); }

.filter-option input:checked ~ .checkmark {
    background: var(--royal-gold);
    border-color: var(--royal-gold);
}

.filter-option[data-type="nation"] input:checked ~ .checkmark {
    background: var(--map-nation-color);
    border-color: var(--map-nation-color);
}

.filter-option[data-type="city"] input:checked ~ .checkmark {
    background: var(--map-city-color);
    border-color: var(--map-city-color);
}

.filter-option[data-type="region"] input:checked ~ .checkmark {
    background: var(--map-region-color);
    border-color: var(--royal-velvet);
}

.filter-option[data-type="landmark"] input:checked ~ .checkmark {
    background: var(--map-landmark-color);
    border-color: var(--map-landmark-color);
}

.checkmark::after {
    content: "";
    position: absolute;
    display: none;
}

.filter-option input:checked ~ .checkmark::after { display: block; }

.filter-option .checkmark::after {
    left: 6px;
    top: 2px;
    width: 4px;
    height: 9px;
    border: solid var(--royal-black);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Region pins are dark enough that a black tick would vanish. */
.filter-option[data-type="region"] .checkmark::after { border-color: var(--parchment); }

.label-text {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 17px;
    color: var(--parchment);
}

.search-container {
    display: flex;
    margin-top: auto;
}

.search-container input {
    flex: 1;
    min-width: 0;
    height: 40px;
    padding: 10px 12px;
    background: var(--court-raised);
    border: 1px solid var(--court-border);
    border-right: 0;
    border-radius: 2px 0 0 2px;
    color: var(--parchment);
    font: 17px 'EB Garamond', Georgia, serif;
}

.search-container input::placeholder { color: var(--court-secondary); }

.search-container input:focus {
    outline: none;
    border-color: var(--royal-gold);
}

.search-container button {
    width: 42px;
    background: var(--crimson-dark);
    color: var(--parchment);
    border: 1px solid var(--crimson-blood);
    border-radius: 0 2px 2px 0;
    cursor: pointer;
    transition: background .18s ease;
}

.search-container button:hover { background: var(--crimson-blood); }

@media (max-width: 992px) {
    .map-controls {
        border-right: 0;
        border-bottom: 1px solid var(--court-line);
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 18px;
    }

    .filter-container,
    .search-container {
        flex: 1;
        min-width: 250px;
    }

    .search-container { margin-top: 0; }
}

/*
======================
MAP DISPLAY
======================
*/
#ederia-map {
    width: 100%;
    height: 100%;
    min-height: 420px;
    background: var(--royal-black);
    border-radius: 0;
    overflow: hidden;
    position: relative;
}

/*
======================
LEAFLET, IN THE COURT'S VOICE
======================
*/
.leaflet-container {
    background: var(--royal-black);
    font-family: 'EB Garamond', Georgia, serif;
}

.leaflet-control-zoom a {
    background: var(--court-raised);
    border: 1px solid var(--court-border);
    color: var(--royal-gold);
}

.leaflet-control-zoom a:hover {
    background: var(--court-hover);
    color: var(--royal-gold-light);
}

/* Markers must not animate on hover, or they drift off their coordinates. */
.leaflet-marker-icon { transition: none !important; }

.custom-tooltip {
    background: rgba(15, 15, 26, .94);
    color: var(--parchment);
    border: 1px solid var(--court-border);
    border-radius: 0;
    padding: 6px 11px;
    font-family: 'Cinzel', Georgia, serif;
    font-size: 11px;
    letter-spacing: .08em;
    text-align: center;
    box-shadow: none;
}

.custom-tooltip::before { border-top-color: var(--court-border); }

.leaflet-popup-content-wrapper {
    background: var(--court-raised);
    border: 1px solid var(--court-border);
    border-radius: 2px;
    color: var(--parchment);
}

.leaflet-popup-content {
    margin: 14px;
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 17px;
}

.leaflet-popup-tip {
    background: var(--court-raised);
    border: 1px solid var(--court-border);
}

.leaflet-popup-close-button { color: var(--court-secondary) !important; }

/*
======================
MARKERS
======================
*/
.custom-marker {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--royal-black);
    color: var(--crimson-blood);
    border: 2px solid var(--crimson-blood);
    font-size: 14px;
    box-shadow: none;
}

.marker-nation {
    color: var(--map-nation-color);
    border-color: var(--map-nation-color);
}

.marker-city {
    color: var(--map-city-color);
    border-color: var(--map-city-color);
}

.marker-region {
    color: var(--parchment);
    border-color: var(--royal-velvet);
    background: var(--royal-velvet);
}

.marker-landmark {
    color: var(--map-landmark-color);
    border-color: var(--map-landmark-color);
}

.custom-marker.hover {
    box-shadow: 0 0 0 3px rgba(212, 175, 55, .35);
    z-index: 1000 !important;
}

.custom-marker.hover .marker-inner {
    transform: scale(1.1);
    transition: transform .18s ease;
}

/*
======================
LOCATION PANEL
======================
*/
.location-panel {
    position: absolute;
    right: -400px; /* Start offscreen */
    top: 0;
    width: 400px;
    height: 100%;
    background: var(--court-surface);
    border-left: 1px solid var(--court-border);
    box-shadow: -8px 0 30px rgba(0, 0, 0, .55);
    z-index: 1000;
    transition: right .4s ease;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.location-panel.active { right: 0; }

.panel-header {
    background: var(--court-raised);
    border-bottom: 1px solid var(--court-line);
    border-top: 2px solid var(--royal-gold);
    color: var(--parchment);
    padding: 22px 24px;
    position: relative;
}

.panel-header h2 {
    margin: 0 0 8px;
    font-family: 'Cinzel', Georgia, serif;
    font-size: 24px;
    color: var(--royal-gold-light);
    padding-right: 34px;
}

.location-type {
    display: inline-block;
    padding: 3px 10px;
    background: var(--court-surface);
    border: 1px solid var(--court-line);
    border-radius: 2px;
    font-family: 'Cinzel', Georgia, serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--crimson-light);
}

/* The type's own colour, as the rule across the top of its panel. */
.panel-header.type-nation   { border-top-color: var(--map-nation-color); }
.panel-header.type-city     { border-top-color: var(--map-city-color); }
.panel-header.type-region   { border-top-color: var(--royal-velvet); }
.panel-header.type-landmark { border-top-color: var(--map-landmark-color); }

.close-panel {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 30px;
    height: 30px;
    background: var(--court-surface);
    border: 1px solid var(--court-border);
    border-radius: 2px;
    color: var(--royal-gold);
    font-size: 13px;
    cursor: pointer;
    transition: background .18s ease;
    z-index: 2;
}

.close-panel:hover { background: var(--court-hover); }

.panel-content {
    padding: 22px 24px;
    flex: 1;
    overflow-y: auto;
}

.location-image-container {
    width: 100%;
    border: 1px solid var(--court-line);
    border-radius: 0;
    overflow: hidden;
    margin-bottom: 22px;
    box-shadow: none;
}

.location-image-container img {
    width: 100%;
    height: auto;
    display: block;
}

.location-description {
    margin-bottom: 22px;
    color: var(--parchment);
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 18px;
    line-height: 1.7;
}

.location-details {
    border-top: 1px solid var(--court-line);
    padding-top: 22px;
}

.detail-section { margin-bottom: 22px; }

.detail-item { margin-bottom: 10px; }

.detail-label {
    font-family: 'Cinzel', Georgia, serif;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--royal-gold);
    margin-right: 6px;
}

.detail-value {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 17px;
    color: var(--parchment);
}

/* Sessions played here, from /api/public/location-sessions. The other half of
   the link a session's location chips make. */
.location-sessions {
    margin-bottom: 22px;
}

.location-sessions h3 {
    font-family: 'Cinzel', Georgia, serif;
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--royal-gold);
    margin-bottom: 12px;
}

.location-sessions-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.location-sessions-list li {
    margin-bottom: 8px;
}

.location-sessions-list a {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 9px 12px;
    background: var(--court-raised);
    border: 1px solid var(--court-line);
    border-left: 2px solid var(--crimson-blood);
    border-radius: 2px;
    color: var(--parchment);
    text-decoration: none;
    transition: background .18s ease, border-color .18s ease;
}

.location-sessions-list a:hover,
.location-sessions-list a:focus-visible {
    background: var(--court-hover);
    border-color: var(--court-border);
    border-left-color: var(--crimson-blood);
}

.location-sessions-list .session-number {
    flex-shrink: 0;
    font-family: 'Cinzel', Georgia, serif;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--crimson-light);
}

.location-sessions-list .session-name {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 17px;
}

.related-locations h3 {
    font-family: 'Cinzel', Georgia, serif;
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--royal-gold);
    margin-bottom: 12px;
}

.related-locations ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.related-locations li { margin-bottom: 8px; }

.related-locations a {
    display: flex;
    align-items: center;
    padding: 9px 12px;
    border: 1px solid var(--court-line);
    border-radius: 2px;
    background: var(--court-raised);
    color: var(--parchment);
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 17px;
    text-decoration: none;
    transition: background .18s ease, border-color .18s ease;
}

.related-locations a:hover {
    background: var(--court-hover);
    border-color: var(--court-border);
    transform: none;
}

.related-locations a i {
    margin-right: 10px;
    color: var(--royal-gold);
}

@media (max-width: 768px) {
    .location-panel {
        width: 100%;
        right: -100%;
    }
}