/* ============================================================================
   Countries page — activity map

   The map panel was a fixed 1100x600 box centred with
   `margin-left: 50%; transform: translateX(-50%)`, with a 260px filter column
   that held one toggle and several hundred pixels of nothing. It scales with
   the viewport now, and the filter column carries the legend, the counts and
   the view controls so the space earns its keep.
   ============================================================================ */

.map-page-tokens,
#countryMapParent {
    --map-surface: #ffffff;
    --map-panel: #f8fafc;
    --map-border: #e2e8f0;
    --map-text: var(--color-primary, #003657);
    --map-text-muted: #64748b;
    --map-text-faint: #94a3b8;
    --map-accent: var(--color-secondary, #1c6bb1);
    --map-radius: 18px;
    --map-radius-sm: 8px;
    --map-filters-width: 250px;
}

/* ============================================================
   Toggle switch
   switch.css already ships one globally at 50px with a #2196f3 fill; this is
   the same control sized and coloured for this panel.
   ============================================================ */
#countryMapParent .switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
}

#countryMapParent .switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

#countryMapParent .slider {
    position: absolute;
    inset: 0;
    cursor: pointer;
    background-color: #cbd5e1;
    transition: background-color 0.2s ease;
}

#countryMapParent .slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    right: auto;
    aspect-ratio: auto;
    background-color: white;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

#countryMapParent input:checked + .slider {
    background-color: var(--map-accent);
}

#countryMapParent input:focus-visible + .slider {
    box-shadow: 0 0 0 3px rgba(28, 107, 177, 0.3);
}

#countryMapParent input:checked + .slider:before {
    transform: translateX(18px);
}

#countryMapParent .slider.round {
    border-radius: 24px;
}

#countryMapParent .slider.round:before {
    border-radius: 50%;
}

/* ============================================================
   Panel header (inside the card)
   ============================================================ */
.map-panel-header {
    display: flex;
    align-items: center;
    gap: 16px;

    flex-shrink: 0;
    padding: 20px 26px;

    background: var(--map-surface);
    border-bottom: 1px solid var(--map-border);
}

.map-panel-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    width: 44px;
    height: 44px;
    border-radius: 12px;

    background: color-mix(in srgb, var(--map-accent) 12%, white);
    color: var(--map-accent);
    font-size: 1.1em;
}

.map-panel-heading {
    min-width: 0;
}

/* common.css sizes h2 from --textsize-h2, which is ~3.1rem — far too large for
   a panel header. */
.map-panel-header h2 {
    margin: 0;
    font-size: 1.15em !important;
    font-weight: 700 !important;
    line-height: 1.25;
    color: var(--map-text);
    text-transform: none;
}

.map-panel-header p {
    margin: 3px 0 0;
    font-size: 0.8em;
    line-height: 1.45;
    color: var(--map-text-muted);
}

/* ============================================================
   Map panel
   ============================================================ */
#countryMapParent {
    position: relative;

    /* Was a hard 1100x600. The height follows the width so the map keeps a
       sensible shape on a laptop and on a 4K monitor alike. */
    width: min(1240px, 100%);
    aspect-ratio: 16 / 9;
    max-height: 680px;
    min-height: 440px;

    margin: 0 auto 5vh;

    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--map-radius);
    overflow: hidden;

    background-color: var(--map-surface);
    box-shadow:
        0 18px 55px rgba(0, 0, 0, 0.35),
        0 2px 10px rgba(0, 0, 0, 0.15);

    /* Header row, then the filters/map row. */
    display: flex;
    flex-direction: column;
}

.map-panel-body {
    display: flex;
    flex-direction: row;
    flex: 1;
    min-height: 0;
}

/* ── Map canvas ─────────────────────────────────────────── */

#countryMapParent .map-canvas {
    position: relative;
    flex: 1;
    min-width: 0;
    height: 100%;
    background: #eef2f6;
}

#countryMapParent #map {
    width: 100%;
    height: 100%;
    border-radius: 0;
}

/* Covers the canvas until Mapbox reports the style loaded, so the panel never
   shows a bare grey rectangle. */
.map-loading {
    position: absolute;
    inset: 0;
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;

    background: #eef2f6;
    color: var(--map-text-faint);
    font-size: 0.9em;

    transition: opacity 0.35s ease, visibility 0.35s ease;
}

#countryMapParent.is-ready .map-loading {
    opacity: 0;
    visibility: hidden;
}

.map-spinner {
    width: 26px;
    height: 26px;
    border: 3px solid #dbe3ec;
    border-top-color: var(--map-accent);
    border-radius: 50%;
    animation: map-spin 0.8s linear infinite;
}

@keyframes map-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .map-spinner {
        animation-duration: 2.4s;
    }
}

/* ============================================================
   Filter panel
   ============================================================ */
#countryMapParent #map-filters {
    display: flex;
    flex-direction: column;

    width: var(--map-filters-width);
    flex-shrink: 0;
    height: 100%;
    box-sizing: border-box;

    background-color: var(--map-panel);
    border-right: 1px solid var(--map-border);
}

.map-filters-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    padding: 18px 20px 12px;
    border-bottom: 1px solid var(--map-border);
}

.map-filters-head > h3 {
    display: flex;
    align-items: center;
    gap: 8px;

    margin: 0;
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--map-text);
}

.map-filters-head > h3 > i {
    color: var(--map-accent);
    font-size: 1.05em;
}

.map-filter-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75em;
    color: var(--map-text-faint);
}

.map-filter-actions[hidden] {
    display: none;
}

/* Text buttons. The global button rule would make these blue pills. */
:not(.mapboxgl-ctrl) > button.map-linkbutton {
    height: auto;
    padding: 0;
    margin: 0;

    background: none;
    border: none;
    border-radius: 0;

    color: var(--map-accent);
    font-size: 1em;
    font-weight: 600;
    font-family: inherit;

    cursor: pointer;
    overflow: visible;
}

.map-linkbutton::after {
    display: none !important;
}

.map-linkbutton:hover {
    text-decoration: underline;
    filter: none;
}

/* The dot-as-legend link is not self-evident, and the panel has the room. */
.map-filters-hint {
    margin: 12px 20px 0;
    font-size: 0.74em;
    line-height: 1.45;
    color: var(--map-text-faint);
}

/* ── Category rows ──────────────────────────────────────── */

#countryMapParent #tag-filters {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 6px 20px;
}

#countryMapParent #tag-filters > .entry {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;

    width: 100%;
    padding: 11px 0;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

#countryMapParent #tag-filters > .entry:last-child {
    border-bottom: none;
}

/* The dot is the legend: it is the colour the category's pins are drawn in. */
.entry-dot {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--dot-color, #64748b);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--dot-color, #64748b) 18%, transparent);
}

.entry-name {
    flex: 1;
    min-width: 0;

    font-size: 0.85em;
    font-weight: 500;
    color: var(--map-text);

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.entry-count {
    font-size: 0.72em;
    font-weight: 700;
    color: var(--map-text-muted);
    background: rgba(15, 23, 42, 0.06);
    border-radius: 100px;
    padding: 2px 8px;
    flex-shrink: 0;
}

.map-filter-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;

    padding: 32px 8px;
    text-align: center;

    color: var(--map-text-faint);
    font-size: 0.82em;
}

.map-filter-empty > i {
    font-size: 1.7em;
    opacity: 0.5;
}

/* ── Panel footer ───────────────────────────────────────── */

.map-filters-foot {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;

    padding: 14px 20px 18px;
    border-top: 1px solid var(--map-border);
}

.map-marker-count {
    font-size: 0.76em;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--map-text-faint);
}

:not(.mapboxgl-ctrl) > button.map-reset-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    width: 100%;
    height: 36px;
    padding: 0 12px;
    margin: 0;

    background: var(--map-surface);
    border: 1px solid var(--map-border);
    border-radius: var(--map-radius-sm);

    color: var(--map-text);
    font-size: 0.82em;
    font-weight: 600;
    font-family: inherit;

    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.map-reset-button::after {
    display: none !important;
}

.map-reset-button:hover {
    background: #eef4fa;
    border-color: var(--map-accent);
    color: var(--map-accent);
    filter: none;
}

.map-reset-button > i {
    font-size: 0.95em;
    color: var(--map-accent);
}

/* ============================================================
   Marker popups
   ============================================================ */
.mapboxgl-popup-content {
    border: none;
    border-radius: 14px !important;
    overflow: hidden;
    box-shadow: 0 10px 34px rgba(0, 20, 35, 0.24) !important;
    padding: 0 !important;
}

.mapboxgl-popup-close-button {
    display: none;
}

.mapmarker-hidden {
    opacity: 0 !important;
    pointer-events: none;
}

/* ── Markers ─────────────────────────────────────────────
 * Mapbox's default pin is a 27x41 teardrop. A dozen of them around the Baltic
 * pile into an unreadable heap at region zoom, so these are small ringed dots
 * instead — they overlap far more gracefully, and lift to the front on hover.
 */
/* NOTHING HERE MAY TRANSITION `transform`, AND NOTHING HERE MAY SET IT.
 *
 * `.map-pin` is not a child of the marker — it *is* the marker. countrymap.js
 * builds it in createMarkerElement() and hands it straight to
 * `new mapboxgl.Marker({ element: ... })`, and Mapbox then owns that element's
 * `transform`: it rewrites it to `translate(-50%, -50%) translate(Xpx, Ypx)` on
 * every animation frame of every pan, drag and zoom to keep the pin over its
 * coordinate. (It also adds the `mapboxgl-marker` class to this same element,
 * which is why the two rules that used to be separate are now one.)
 *
 * So `transition: transform` here told the browser to animate each of those
 * per-frame position writes over 160ms, and the pins visibly trailed the map
 * while it moved. The hover rule was worse in a quieter way: `transform:
 * scale(1.45)` replaces the whole property, so hovering a pin threw away
 * Mapbox's translate and the pin jumped to the map's origin until the next
 * frame put it back.
 *
 * The independent `scale` property is the way to grow it. It is a separate
 * property from `transform`, so Mapbox's writes and this one no longer collide,
 * and the two compose in a fixed order (translate, rotate, scale, then
 * transform) — the -50% centering is a percentage of the border box, which
 * `scale` does not change, so the pin stays centred on its coordinate. On a
 * browser too old for it (pre-2022) the hover simply does not grow, which is the
 * right way for this to degrade on the school hardware this map is used on.
 */
/* The marker root. Mapbox owns its `transform`; this rule must never write one,
 * and must never scale it by any route. Size only, so the `translate(-50%, -50%)`
 * Mapbox applies resolves against the right box and the dot sits on its
 * coordinate. */
.map-pin {
    width: 16px;
    height: 16px;
    box-sizing: border-box;

    cursor: pointer;
    transition: opacity 0.2s ease;
}

/* The dot is what a visitor actually sees, and the only thing that grows. It is
 * inside the marker rather than being the marker precisely so it can be scaled
 * without touching the transform Mapbox is writing sixty times a second. */
.map-pin-dot {
    width: 100%;
    height: 100%;
    box-sizing: border-box;

    border-radius: 50%;
    background: var(--pin-color, #1c6bb1);
    border: 2.5px solid #fff;
    box-shadow:
        0 1px 4px rgba(0, 20, 35, 0.45),
        0 0 0 1px rgba(0, 20, 35, 0.08);

    transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.map-pin:hover .map-pin-dot,
.map-pin:focus-visible .map-pin-dot {
    transform: scale(1.45);
    box-shadow:
        0 3px 10px rgba(0, 20, 35, 0.5),
        0 0 0 4px color-mix(in srgb, var(--pin-color, #1c6bb1) 28%, transparent);
}

.map-pin:focus-visible {
    outline: none;
}

/* A hovered pin has to come out from under its neighbours to be clickable. */
.mapboxgl-marker:hover,
.mapboxgl-marker:focus-within {
    z-index: 3;
}

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

.map-popup-cover {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 0;
}

.map-popup-body {
    padding: 12px 14px 14px;
}

.map-popup-badge {
    display: inline-block;
    margin-bottom: 7px;
    padding: 2px 9px;

    border-radius: 100px;
    background: color-mix(in srgb, var(--badge-color, #1c6bb1) 14%, white);
    color: var(--badge-color, #1c6bb1);

    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.map-popup-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-primary, #003657);
    margin: 0;
}

.map-popup-text {
    margin: 5px 0 0;
    font-size: 13px;
    line-height: 1.45;
    color: #64748b;

    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* An anchor, not the button-that-calls-window.open this replaced. */
a.map-popup-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    width: 100%;
    height: 36px;
    margin-top: 12px;
    box-sizing: border-box;

    background: var(--color-secondary, #1c6bb1);
    border-radius: var(--map-radius-sm, 8px);

    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;

    transition: background 0.15s ease;
}

a.map-popup-button:hover {
    background: var(--color-primary, #003657);
}

a.map-popup-button > i {
    font-size: 11px;
}

/* Mapbox's own controls, brought in line with the panel. */
.mapboxgl-ctrl-group {
    border-radius: var(--map-radius-sm) !important;
    box-shadow: 0 2px 10px rgba(0, 20, 35, 0.18) !important;
}

/* ============================================================
   Country info card (below the map)
   ============================================================ */
/* Rendered through the layout's `content_after` slot, so it sits directly in
   #contentWrapper at full width — without a gutter it would run to the screen
   edges on a phone. */
.country-info-box {
    width: min(1240px, 100%);
    margin: 0 auto 60px;
    padding: 0 clamp(14px, 4vw, 24px);
    box-sizing: border-box;
}

.country-info-card {
    background: white;
    border-radius: var(--map-radius, 18px);
    padding: clamp(24px, 4vw, 44px);
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.16);
}

/* The heading was white text sitting on the navy above the card, which left it
   orphaned from the paragraphs it introduces. It is part of the card now. */
.country-info-heading {
    color: var(--color-primary, #003657) !important;
    font-size: clamp(1.3em, 2.4vw, 1.7em);
    font-weight: 700 !important;
    line-height: 1.2;
    margin: 0 0 18px;
}

.country-info-card > p {
    color: var(--color-text);
    line-height: 1.75;
    margin: 0 0 16px 0;
    font-size: 0.95em;
    max-width: 70ch;
}

.country-tags-label {
    margin: 26px 0 12px !important;
    font-size: 0.72em !important;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #94a3b8 !important;
}

.country-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.country-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    background: rgba(0, 54, 87, 0.05);
    border: 1px solid rgba(0, 54, 87, 0.14);
    border-radius: 100px;
    padding: 6px 16px;

    font-size: 0.85em;
    color: var(--color-primary);
    font-weight: 500;

    cursor: default;
    user-select: none;
    transition: background 0.18s ease, border-color 0.18s ease;
}

.country-tag:hover {
    background: rgba(0, 54, 87, 0.1);
    border-color: rgba(0, 54, 87, 0.28);
}

.country-flag {
    font-size: 1.05em;
    line-height: 1;
}

/* ============================================================
   Responsive
   ============================================================ */

/* Below this the filter column takes too much of the map's width. */
@media screen and (max-width: 860px) {
    #countryMapParent {
        aspect-ratio: auto;
        height: auto;
        max-height: none;
    }

    /* The panel is already a column (header, then body); it is the *body* that
       has to stop being a row and put the filters under the map. */
    .map-panel-body {
        flex-direction: column;
    }

    #countryMapParent .map-canvas {
        height: 58vh;
        min-height: 320px;
        max-height: 520px;
        order: 1;
    }

    #countryMapParent #map-filters {
        order: 2;
        width: 100%;
        height: auto;
        border-right: none;
        border-top: 1px solid var(--map-border);
    }

    #countryMapParent #tag-filters {
        max-height: 190px;
    }

    .map-filters-foot {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    :not(.mapboxgl-ctrl) > button.map-reset-button {
        width: auto;
    }
}

@media screen and (max-width: 600px) {
    /* The map lives inside .pageContent, which is 80% wide with 10% margins —
       on a 375px phone that spends 75px of a 375px screen on empty gutters, and
       the map is the reason the page exists. 118% of 80% is 94.4% of the
       wrapper, so this reclaims most of it without ever exceeding the page
       width (no viewport units, so a classic scrollbar cannot push it over). */
    #countryMapParent {
        width: 118%;
        margin-left: -9%;
        border-radius: 14px;
    }

    #countryMapParent .map-canvas {
        height: 50vh;
        min-height: 280px;
    }

    .map-panel-header {
        padding: 16px 18px;
        gap: 12px;
    }

    .map-panel-icon {
        width: 38px;
        height: 38px;
        border-radius: 10px;
    }

    .map-panel-header h2 {
        font-size: 1.02em !important;
    }
}