/**
 * Adelaide Design Week — map.css
 *
 * Loaded only on /map/ and alongside the locator thumbnails in the program.
 * Colour comes entirely from the tokens in site.css; the only new value is
 * --map-water, which is the paper one shade down.
 */

:root {
    --map-water: #DDE0D9;
    --map-panel-w: 24rem;
}

/* The map
   ========================================================================== */

.map-head { padding-block-end: var(--space-2); }

.map-wrap {
    position: relative;
    width: 100%;
    /* Full viewport below the sticky masthead, less room for the legend. */
    height: clamp(26rem, calc(100vh - var(--header-h) - 16rem), 46rem);
    border-block: 1px solid var(--line);
    background: var(--paper);
}

.map-canvas { position: absolute; inset: 0; }

/* Mapbox's own chrome, pulled back to the brand. */
.map-wrap .mapboxgl-ctrl-group {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
}
.map-wrap .mapboxgl-ctrl-group button + button { border-top: 1px solid var(--line); }
.map-wrap .mapboxgl-ctrl-attrib {
    background: rgba(236, 239, 232, 0.85);
    font-family: var(--font-sans);
    font-size: 0.6875rem;
}
.map-wrap .mapboxgl-ctrl-attrib a { color: var(--ink-soft); }
.map-wrap .mapboxgl-ctrl-logo { opacity: 0.55; }

/* The scroll-gesture overlay inherits Mapbox's own type otherwise. */
.map-wrap .mapboxgl-scroll-zoom-blocker,
.map-wrap .mapboxgl-touch-pan-blocker {
    font-family: var(--font-sans);
    background: rgba(51, 51, 51, 0.7);
}

/* Panel
   ========================================================================== */

.map-panel {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    width: min(var(--map-panel-w), 100%);
    background: var(--paper);
    border-inline-start: 1px solid var(--line);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--space-3);
    z-index: 2;
}

.map-panel-close {
    position: sticky;
    top: 0;
    float: inline-end;
    margin-inline-start: var(--space-2);
    background: var(--paper);
    border: 1px solid var(--line);
    color: var(--ink);
    font-size: 0.8125rem;
    padding: 0.25rem 0.625rem;
    text-transform: lowercase;
}
.map-panel-close:hover { border-color: var(--ink); color: var(--ink-strong); }
.map-panel-close:focus-visible { outline: 2px solid var(--ink-strong); outline-offset: 2px; }

.map-panel-venue {
    font-family: var(--font-display);
    font-size: 1.375rem;
    text-transform: lowercase;
    color: var(--ink-strong);
    margin-block-end: 0.125rem;
}

.map-panel-count {
    font-size: 0.8125rem;
    color: var(--ink-soft);
    margin-block-end: var(--space-2);
}

.map-event {
    border-top: 1px solid var(--line);
    padding-block: var(--space-2);
}

.map-event-title {
    font-family: var(--font-display);
    font-size: 1rem;
    text-transform: lowercase;
    margin-block: 0 0.125rem;
}
.map-event-title a { text-decoration-thickness: 1px; }

.map-event-cat {
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: var(--ink-soft);
    margin-block-end: 0.375rem;
}

.map-when { font-size: 0.8125rem; line-height: 1.5; }
.map-when .map-day { color: var(--ink-strong); font-weight: 700; }

.map-event-link { font-size: 0.8125rem; margin-block: 0.5rem 0; }

/* Legend
   ========================================================================== */

.map-legend {
    max-width: var(--content-wide);
    margin: var(--space-3) auto 0;
    padding-inline: var(--space-2);
}

.map-legend-h {
    font-size: 0.875rem;
    margin-block: 0 var(--space-1);
    color: var(--ink-soft);
}

.map-legend ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem var(--space-3);
    font-size: 0.8125rem;
}
.map-legend li { display: flex; align-items: center; gap: 0.4rem; }

.map-legend-note {
    font-size: 0.75rem;
    color: var(--ink-soft);
    margin-block: var(--space-1) 0;
}

/* The six marks, matching MARKS in map.js. One shape, six fills — if these
   and the JS ever disagree, the legend is telling a lie about the map. */
.lg-mark { display: inline-flex; position: relative; }
.lg-mark .ast { width: 0.875rem; height: 0.875rem; }

.lg-exh  .ast { color: var(--ink-strong); }
.lg-conv .ast { color: var(--ink-strong); }
.lg-inst .ast { color: var(--ink-strong); transform: rotate(30deg); }
.lg-work .ast { color: var(--ink-soft); }
.lg-open .ast { color: var(--paper); stroke: var(--ink-strong); stroke-width: 110; }
.lg-tour .ast { color: var(--yellow); stroke: var(--ink-strong); stroke-width: 110; }

/* The paper core that marks a conversation. */
.lg-conv::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    width: 0.2rem;
    height: 0.2rem;
    border-radius: 50%;
    background: var(--paper);
    transform: translate(-50%, -50%);
}

/* Locator maps in the program
   ========================================================================== */

.venue-map {
    display: block;
    margin-block: var(--space-2) 0;
    border: 1px solid var(--line);
    max-width: 26rem;
}
.venue-map img { width: 100%; height: auto; }
.venue-map:hover { border-color: var(--ink); }

/* Narrow
   ========================================================================== */

@media (max-width: 700px) {
    .map-wrap { height: clamp(22rem, calc(100vh - var(--header-h) - 12rem), 34rem); }

    /* A right-hand panel on a phone would leave a sliver of map. Bottom
       sheet instead, so the pin stays visible above it. */
    .map-panel {
        inset: auto 0 0 0;
        width: 100%;
        max-height: 55%;
        border-inline-start: 0;
        border-top: 1px solid var(--ink);
    }
}

@media (prefers-reduced-motion: reduce) {
    .map-panel { transition: none; }
}

/* The keyboard route to the markers
   ==========================================================================
   Hidden from sight, never from the tab order — and it becomes visible the
   moment it takes focus, because a keyboard user navigating an invisible
   list has no idea where they are. */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.map-venues:focus-within {
    position: absolute;
    inset: 0 auto auto 0;
    z-index: 3;
    width: min(22rem, 90%);
    height: 100%;
    margin: 0;
    padding: var(--space-2);
    overflow-y: auto;
    clip-path: none;
    white-space: normal;
    background: var(--paper);
    border-inline-end: 1px solid var(--ink);
}

.map-venues h2 {
    font-size: 0.875rem;
    margin-block: 0 var(--space-1);
}

.map-venues button {
    display: block;
    width: 100%;
    text-align: start;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--line);
    padding: 0.4rem 0;
    font-size: 0.8125rem;
    color: var(--ink);
}
.map-venues button:hover { color: var(--ink-strong); }
.map-venues button:focus-visible {
    outline: 2px solid var(--ink-strong);
    outline-offset: -2px;
}