/* Map links on the homepage (2026-10-22): teaser strip under the hero, "Zie deze op de kaart" under the
   type cards, the Lijst | Kaart switch, profile links, the "Kaart" nav item and the phone map button.
   Own file next to style.css so the integration can be moved or removed in one piece. Page tokens come
   from style.css (:root, light and dark). Badge styles below are copied from wereld/wereld.css and scoped
   to the teaser, because the homepage does not load that stylesheet. */
:root {
    --map-gutter: clamp(12px, 3vw, 48px); /* never more than 4vw a side (owner) */
    --font-map: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --map-scene-bg: linear-gradient(180deg, var(--parchment) 0%, var(--sand) 55%, color-mix(in srgb, var(--sea) 35%, var(--sand)) 100%);
    --map-land: color-mix(in srgb, var(--terracotta) 22%, var(--sand));
    --map-coast: color-mix(in srgb, var(--gold) 70%, var(--ink));
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --map-scene-bg: linear-gradient(180deg, color-mix(in srgb, var(--ink) 93%, var(--parchment)) 0%, color-mix(in srgb, var(--sea) 45%, var(--ink)) 100%);
        --map-land: color-mix(in srgb, var(--parchment) 16%, var(--ink));
        --map-coast: var(--gold);
    }
}

.icon-map { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }

/* ---------- Teaser strip ---------- */
.map-teaser {
    display: grid;
    grid-template-columns: 45% minmax(0, 1fr);
    align-items: center;
    gap: var(--map-gutter);
    height: clamp(320px, 56vh, 60vh);
    max-height: 60vh;
    padding: clamp(16px, 3vh, 40px) var(--map-gutter);
    background: var(--surface);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.map-teaser-media {
    position: relative;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    border-radius: var(--radius-small, 8px);
    background: var(--map-scene-bg);
    cursor: pointer;
    isolation: isolate; /* CSS2DRenderer z-indexes stay inside (see wereld.css) */
}
.map-teaser-svg { display: block; width: 100%; height: 100%; padding: 4%; }
.map-teaser-land { fill: var(--map-land); stroke: var(--map-coast); stroke-width: 6; stroke-linejoin: round; }
.map-teaser-dot { fill: var(--gold); stroke: var(--ink); stroke-width: 5; transform-box: fill-box; transform-origin: center; }
@keyframes map-teaser-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.55); opacity: .55; }
}
/* motion-on = the homepage's motion state: off under prefers-reduced-motion unless the visitor chose "aan" */
.motion-on .map-teaser-dot { animation: map-teaser-pulse 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * 190ms); }
.map-teaser-media.is-live .map-teaser-svg { visibility: hidden; }
.map-teaser-scene { position: absolute; inset: 0; }
.map-teaser-scene[hidden] { display: none; }
.map-teaser-scene canvas { display: block; width: 100%; height: 100%; }

.map-teaser-text { min-width: 0; }
.map-teaser-text h2 {
    margin: 0 0 12px;
    font-family: var(--font-heading);
    font-size: clamp(1.6rem, 3.2vw, 3rem);
    line-height: 1.1;
    color: var(--primary, var(--text));
    text-wrap: balance;
}
.map-teaser-text p { margin: 0 0 20px; color: var(--text-muted); font-size: clamp(1rem, 1.25vw, 1.2rem); text-wrap: pretty; }
.map-teaser-cta { gap: 8px; text-decoration: none; }
.map-teaser-lang { font-weight: 400; font-size: .85em; opacity: .85; }
.map-teaser-lang:empty { display: none; }

@media (max-width: 767px) {
    .map-teaser {
        grid-template-columns: minmax(0, 1fr);
        height: auto;
        max-height: 50vh;
        gap: 12px;
        align-content: start;
    }
    .map-teaser-media { height: clamp(120px, 22vh, 200px); }
    .map-teaser-text h2 { font-size: clamp(1.3rem, 5.6vw, 1.75rem); margin-bottom: 6px; }
    .map-teaser-text p { margin-bottom: 12px; font-size: .95rem; hyphens: auto; }
    .map-teaser-cta { width: 100%; justify-content: center; }
}

.mt-cta-full { display: none; }
.map-teaser.is-interactive .mt-cta-open { display: none; }
.map-teaser.is-interactive .mt-cta-full { display: inline; }

/* ---------- Desktop with a mouse: the full map, almost a screen high (owner 2026-10-23) ----------
   Same query as js/map-teaser.js. Text band on top, the map under it at the screen height minus the fixed
   header, so a visitor who scrolls to it has the whole map in view. Without WebGL the flat map fills it. */
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
    .map-teaser {
        grid-template-columns: minmax(0, 1fr);
        height: auto;
        max-height: none;
        gap: clamp(12px, 2vh, 20px);
        padding: clamp(20px, 3vh, 32px) var(--map-gutter);
    }
    .map-teaser-text {
        order: -1;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
        column-gap: clamp(16px, 3vw, 48px);
    }
    .map-teaser-text h2 { grid-column: 1; margin-bottom: 6px; font-size: clamp(1.6rem, 2.6vw, 2.6rem); }
    .map-teaser-text p { grid-column: 1; margin: 0; }
    .map-teaser-cta { grid-column: 2; grid-row: 1 / span 2; align-self: end; }
    /* Clear of the fixed header and of the strip the page keeps free at the bottom for the sticky CTA bar
       or the open cookie banner (body padding-bottom in style.css), so the zoom buttons are never covered. */
    .map-teaser-media {
        height: calc(100svh - var(--header-height, 70px) - max(64px, var(--cookie-h, 0px)) - env(safe-area-inset-bottom, 0px) - 2 * clamp(12px, 2vh, 20px));
        min-height: 460px;
        max-height: 1100px;
    }
}
/* Narrow desktop windows: the button goes under the text instead of beside it. */
@media (min-width: 768px) and (max-width: 1023px) and (hover: hover) and (pointer: fine) {
    .map-teaser-text { grid-template-columns: minmax(0, 1fr); }
    .map-teaser-cta { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 12px; }
}

/* ---------- The live map (desktop). Copied from wereld/wereld.css and scoped to the teaser, because the
   homepage does not load that stylesheet. Everything on the map keeps the parchment chips and a system
   font: wereld-scene.js measures the labels with that font. ---------- */
.map-teaser-media.is-live { cursor: auto; }
.map-teaser-scene:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.map-teaser-scene canvas { touch-action: none; }
.map-teaser-scene .wd-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; font-family: var(--font-map); }
.map-teaser-scene .wd-badge, .map-teaser-scene .wd-label {
    pointer-events: auto;
    padding: 0; border: 0; background: none; font: inherit; color: var(--ink); cursor: pointer;
}
.map-teaser-scene .wd-badge-in, .map-teaser-scene .wd-label-in { pointer-events: none; }
.map-teaser-scene .wd-badge { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; }
.map-teaser-scene .wd-badge-in {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 34px; padding: 4px 6px 4px 12px; border-radius: 999px;
    background: var(--parchment); color: var(--ink);
    border: 1px solid color-mix(in srgb, var(--gold) 70%, var(--ink));
    box-shadow: 0 6px 18px color-mix(in srgb, var(--ink) 22%, transparent);
    font-size: .875rem; font-weight: 600; white-space: nowrap;
    opacity: 0;
}
.map-teaser-scene .wd-badge-types {
    display: inline-flex; flex-direction: column; align-items: center; gap: 0;
    padding: 2px 8px; border-radius: 8px; pointer-events: none; opacity: 0;
    background: color-mix(in srgb, var(--parchment) 92%, transparent); color: var(--ink);
    font-size: .8125rem; font-weight: 600; line-height: 1.35; white-space: nowrap;
}
.map-teaser-scene .wd-badge.is-in .wd-badge-in, .map-teaser-scene .wd-badge.is-in .wd-badge-types { opacity: 1; }
.map-teaser-scene .wd-badge-count {
    display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px;
    border-radius: 999px; background: var(--ink); color: var(--gold); font-size: .8125rem; font-weight: 700;
}
.map-teaser-scene .wd-badge.is-hot .wd-badge-in, .map-teaser-scene .wd-badge.is-hot .wd-badge-types { background: var(--ink); color: var(--parchment); }
.map-teaser-scene .wd-badge.is-hot .wd-badge-count { background: var(--gold); color: var(--ink); }
.map-teaser-scene .wd-badge:focus-visible, .map-teaser-scene .wd-label:focus-visible { outline: none; }
.map-teaser-scene .wd-badge:focus-visible .wd-badge-in, .map-teaser-scene .wd-label:focus-visible .wd-label-in { outline: 3px solid var(--terracotta); outline-offset: 2px; }
.map-teaser-scene .wd-leaders { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.map-teaser-scene .wd-leaders line { stroke: var(--ink); stroke-opacity: .55; stroke-width: 1.25; }

.map-teaser-scene .wd-label-in {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px; border-radius: 6px;
    background: color-mix(in srgb, var(--parchment) 94%, transparent);
    border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent);
    box-shadow: 0 3px 10px color-mix(in srgb, var(--ink) 18%, transparent);
    font-weight: 600; white-space: nowrap; line-height: 1.2;
    opacity: 0;
    transform: scale(.82);
}
.map-teaser-scene .wd-type-h {
    pointer-events: none; padding: 4px 12px; border-radius: 999px; white-space: nowrap;
    background: var(--ink); color: var(--parchment); border: 1px solid var(--gold);
    font-weight: 700; letter-spacing: .02em; line-height: 1.2;
    box-shadow: 0 3px 10px color-mix(in srgb, var(--ink) 22%, transparent);
    opacity: 0;
}
.map-teaser-scene .wd-type-h.is-in { opacity: 1; }
.map-teaser-scene .wd-label-text { display: inline-flex; align-items: baseline; gap: 6px; }
.map-teaser-scene .wd-label.is-stack .wd-label-text { flex-direction: column; align-items: flex-start; gap: 0; }
.map-teaser-scene .wd-label.is-stack.is-left .wd-label-text { align-items: flex-end; }
.map-teaser-scene .wd-label-domain { font-weight: 400; color: var(--muted); }
.map-teaser-scene .wd-label.is-hot .wd-label-domain, .map-teaser-scene .wd-label:focus-visible .wd-label-domain { color: color-mix(in srgb, var(--parchment) 80%, var(--ink)); }
.map-teaser-scene .wd-label.is-right .wd-label-in { transform-origin: left center; }
.map-teaser-scene .wd-label.is-left .wd-label-in { transform-origin: right center; }
.map-teaser-scene .wd-label.is-in .wd-label-in { opacity: 1; transform: none; }
.map-teaser-scene .wd-label .wd-star { width: 1em; height: 1em; margin: 0; color: var(--gold); }
.map-teaser-scene .wd-label.is-hot .wd-label-in, .map-teaser-scene .wd-label:focus-visible .wd-label-in { background: var(--ink); color: var(--parchment); border-color: var(--gold); }
.map-teaser-scene .wd-label.is-target .wd-label-in { border-color: var(--terracotta); box-shadow: 0 0 0 3px color-mix(in srgb, var(--terracotta) 45%, transparent); }
.map-teaser-scene .wd-icon { width: 1.125em; height: 1.125em; flex: none; fill: currentColor; }

/* Area bar: back, name, type tabs. Above the label layer. */
.map-teaser-scene .wd-region-bar {
    position: absolute; top: 12px; left: 12px; right: 12px; z-index: 2;
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
}
.map-teaser-scene .wd-region-bar[hidden] { display: none; }
.map-teaser-scene .wd-back, .map-teaser-scene .wd-tab {
    display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 8px 14px;
    border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); border-radius: 8px;
    background: var(--parchment); color: var(--ink); font: inherit; font-family: var(--font-map); font-size: .875rem; cursor: pointer;
}
.map-teaser-scene .wd-back:hover, .map-teaser-scene .wd-tab:hover { border-color: var(--terracotta); }
.map-teaser-scene .wd-tab[aria-pressed="true"] { background: var(--ink); color: var(--parchment); border-color: var(--ink); }
.map-teaser-scene .wd-back:focus-visible, .map-teaser-scene .wd-tab:focus-visible { outline: 3px solid var(--terracotta); outline-offset: 2px; }
.map-teaser-scene .wd-region-name {
    margin: 0; padding: 6px 12px; border-radius: 8px;
    background: var(--parchment); color: var(--ink); font-family: var(--font-heading); font-weight: 600; font-size: 1.0625rem;
}
.map-teaser-scene .wd-tabs { display: flex; flex-wrap: wrap; gap: 6px; flex-basis: 100%; }
.map-teaser-scene .wd-tabs:empty { display: none; }

/* Help line bottom left, zoom buttons bottom right; both step aside in an area (the labels need the room). */
.map-teaser-scene .wd-scene-help {
    position: absolute; left: 12px; bottom: 12px; right: 76px; margin: 0;
    max-width: fit-content;
    padding: 6px 10px; border-radius: 6px;
    background: var(--parchment); color: var(--ink); font-family: var(--font-map); font-size: .8125rem;
}
.mt-zoom { position: absolute; right: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.mt-zoom-btn {
    display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
    border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); border-radius: 8px;
    background: var(--parchment); color: var(--ink); cursor: pointer;
}
.mt-zoom-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.mt-zoom-btn:hover { border-color: var(--terracotta); }
.mt-zoom-btn:focus-visible { outline: 3px solid var(--terracotta); outline-offset: 2px; }
.map-teaser-scene[data-view="region"] .wd-scene-help, .map-teaser-scene[data-view="region"] .mt-zoom { display: none; }

/* "Ctrl + scroll" hint over the middle of the map, as on embedded maps elsewhere. */
.mt-wheel-hint {
    position: absolute; inset: 0; z-index: 3; margin: 0;
    display: grid; place-items: center; pointer-events: none;
    background: color-mix(in srgb, var(--ink) 45%, transparent);
    opacity: 0; visibility: hidden;
}
.mt-wheel-hint span {
    padding: 10px 18px; border-radius: 8px;
    background: var(--ink); color: var(--parchment); font-family: var(--font-map); font-size: 1rem; font-weight: 600;
}
.mt-wheel-hint.is-on { opacity: 1; visibility: visible; }
.map-teaser-scene[data-motion="on"] .mt-wheel-hint { transition: opacity .2s ease, visibility .2s; }
.map-teaser-scene[data-motion="on"] .wd-badge-in, .map-teaser-scene[data-motion="on"] .wd-badge-types { transition: opacity .35s ease, background-color .2s ease, color .2s ease; }
.map-teaser-scene[data-motion="on"] .wd-type-h { transition: opacity .32s ease; }
.map-teaser-scene[data-motion="on"] .wd-label-in {
    transition: opacity .32s ease var(--d, 0ms), transform .42s cubic-bezier(.2, 1.3, .4, 1) var(--d, 0ms), background-color .15s ease, color .15s ease;
}

/* ---------- Domain card: the only dark surface, above the fixed header and the sticky bars ---------- */
body.mt-locked { overflow: hidden; }
.mt-overlay {
    position: fixed; inset: 0; z-index: 1100;
    display: flex; align-items: center; justify-content: center;
    padding: var(--map-gutter);
    background: color-mix(in srgb, var(--ink) 55%, transparent);
}
.mt-overlay[hidden] { display: none; }
.mt-card {
    position: relative;
    width: min(100%, 440px);
    padding: 28px 24px 24px;
    border-radius: 12px;
    background: var(--ink); color: var(--parchment);
    border: 1px solid var(--border-strong); /* separates the card from an ink page in dark mode */
    box-shadow: 0 20px 48px color-mix(in srgb, var(--ink) 50%, transparent);
}
.mt-card-area { margin: 0 0 4px; color: var(--gold); font-size: .875rem; }
.mt-card-title { margin: 0; font-family: var(--font-heading); font-weight: 600; font-size: clamp(1.375rem, 5vw, 1.75rem); overflow-wrap: anywhere; color: var(--parchment); }
.mt-card-stats { margin: 16px 0 20px; display: grid; gap: 4px; }
.mt-card-stats div { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; border-bottom: 1px solid color-mix(in srgb, var(--parchment) 16%, transparent); }
.mt-card-stats dt { color: var(--sand); }
.mt-card-stats dd { margin: 0; font-weight: 600; text-align: right; }
.mt-card .wd-icon { width: 1.125em; height: 1.125em; flex: none; fill: currentColor; }
.mt-star { color: var(--gold); vertical-align: -0.15em; margin-right: 6px; }
.mt-close {
    display: flex; align-items: center; gap: 6px; margin: -8px -8px 8px auto;
    min-height: 44px; padding: 8px 14px;
    border: 1px solid color-mix(in srgb, var(--parchment) 45%, transparent); border-radius: 8px;
    background: transparent; color: var(--parchment); font: inherit; cursor: pointer;
}
.mt-close:hover { border-color: var(--gold); }
.mt-cta {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
    padding: 10px 18px; border-radius: 8px;
    background: var(--gold); color: var(--ink); font-weight: 700; text-decoration: none;
}
.mt-cta[hidden] { display: none; }
.mt-cta:hover { background: var(--sand); color: var(--ink); }
.mt-close:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.mt-cta:focus-visible { outline: 3px solid var(--parchment); outline-offset: 3px; }

/* ---------- Type cards: second link under "Bekijk alle" ---------- */
.sector-cards .sector-card { flex-direction: column; }
.sector-card-map {
    display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
    min-height: 44px; margin: -6px 0 6px; padding: 0 18px;
    color: var(--text); font-size: .9rem; text-decoration: underline; text-underline-offset: 3px;
}
.sector-card-map:hover { color: var(--accent); }
.sector-card-map:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Lijst | Kaart switch next to the list heading ---------- */
.card .head.pf-head-switch { flex-wrap: wrap; gap: 10px 16px; }
.pf-viewswitch { display: inline-flex; flex: none; border: 1px solid var(--border-strong, var(--border)); border-radius: 999px; overflow: hidden; background: var(--bg); }
.pf-viewswitch-item {
    display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 18px;
    color: var(--text); font-size: .9rem; font-weight: 600; text-decoration: none;
}
.pf-viewswitch-item.is-active { background: var(--text); color: var(--bg); }
.pf-viewswitch a.pf-viewswitch-item:hover { color: var(--accent); }
.pf-viewswitch a.pf-viewswitch-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }

/* ---------- Profile cards ---------- */
.profile-card .profile-map {
    display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 8px;
    color: var(--text); font-weight: 600; font-size: .92rem; text-decoration: underline; text-underline-offset: 3px;
}
.profile-card .profile-map:hover { color: var(--accent); }

/* ---------- Nav item ---------- */
/* Plain inline like its neighbours, so it shares their baseline; the icon hangs on that baseline. */
nav#main-nav a.nav-map .icon-map { width: 1.2em; height: 1.2em; margin-right: 5px; vertical-align: -0.25em; }
/* Narrow desktops: the seventh item would push the nav onto a second line, so the icon stands alone
   there; the word stays in the DOM for screen readers and as the link's accessible name. */
@media (min-width: 769px) and (max-width: 1279px) {
    nav#main-nav a.nav-map .icon-map { margin-right: 0; }
    nav#main-nav a.nav-map span {
        position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
        overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }
}

/* ---------- Phone map button: above the sticky CTA bar and the cookie banner ---------- */
.map-fab { display: none; }
@media (max-width: 767px) {
    .map-fab {
        position: fixed; z-index: 950;
        right: 12px;
        bottom: calc(max(64px, var(--cookie-h, 0px)) + 12px + env(safe-area-inset-bottom, 0px));
        display: inline-flex; align-items: center; gap: 8px;
        height: 56px; padding: 0 20px; border-radius: 999px;
        background: var(--text); color: var(--bg);
        font-weight: 700; text-decoration: none;
        box-shadow: 0 8px 24px color-mix(in srgb, var(--ink) 35%, transparent);
        transition: opacity .25s ease, transform .25s ease;
    }
    .map-fab:hover, .map-fab:focus-visible { color: var(--bg); }
    .map-fab:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
    .map-fab.is-away { opacity: 0; transform: translateY(12px); pointer-events: none; visibility: hidden; }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) { .map-fab { transition: none; } }