/*
 * Koeltekaart Amsterdam
 *
 * Developed by UvA CSSci students:
 * Bissola, Alejandro, Alva, Charlie, Nojus, and Meng.
 *
 * Capstone Project 2026.
 */

/**
 * Koeltekaart Amsterdam — Application Styles
 *
 * Amsterdam Design System (ADS) design tokens are declared in :root.
 * Color, typography, spacing, and border values all reference ADS variables
 * so future brand updates require only token changes.
 *
 * Naming conventions:
 *   --ams-*          ADS design tokens (do not override)
 *   .ams-*           ADS component classes (BEM: .ams-component--modifier)
 *   .li-*            Landing / hero section
 *   .lv-*            Location list view
 *   .cs-*            Contact strip (footer)
 *   .hc-*            Hover card (map tooltip)
 *   .cp-*            Contact page overlay
 *   .tp-*            Tips page overlay
 */

/* ── Amsterdam Sans — official Amsterdam city typeface ───────────────────── */
@font-face {
  font-family: 'AmsterdamSans';
  src: url('../fonts/AmsterdamSans-Regular.woff2') format('woff2'),
       url('../fonts/AmsterdamSans-Regular.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'AmsterdamSans';
  src: url('../fonts/AmsterdamSans-Light.woff2') format('woff2'),
       url('../fonts/AmsterdamSans-Light.woff') format('woff');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'AmsterdamSans';
  src: url('../fonts/AmsterdamSans-Bold.woff2') format('woff2'),
       url('../fonts/AmsterdamSans-Bold.woff') format('woff');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'AmsterdamSans';
  src: url('../fonts/AmsterdamSans-ExtraBold.woff2') format('woff2'),
       url('../fonts/AmsterdamSans-ExtraBold.woff') format('woff');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'AmsterdamSans';
  src: url('../fonts/AmsterdamSans-Italic.woff2') format('woff2'),
       url('../fonts/AmsterdamSans-Italic.woff') format('woff');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'AmsterdamSans';
  src: url('../fonts/AmsterdamSans-BoldItalic.woff2') format('woff2'),
       url('../fonts/AmsterdamSans-BoldItalic.woff') format('woff');
  font-weight: 700; font-style: italic; font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ADS colour tokens */
  --ams-color-interactive-default:  #004699;
  --ams-color-interactive-hover:    #003677;
  --ams-color-interactive-disabled: #767676;
  --ams-color-interactive-inverse:  #ffffff;
  --ams-color-text-default:         #202020;
  --ams-color-text-secondary:       #767676;
  --ams-color-text-inverse:         #ffffff;
  --ams-color-background-default:   #ffffff;
  --ams-color-separator:            #d1d1d1;
  --ams-color-feedback-error:       #ec0000;
  --ams-color-feedback-success:     #00893c;
  --ams-color-feedback-warning:     #ff9100;
  --ams-color-feedback-info:        #009de6;
  --ams-color-highlight-purple:     #a00078;
  --ams-color-highlight-lime:       #bed200;
  --ams-color-highlight-magenta:    #e50082;
  --ams-color-highlight-yellow:     #ffe600;

  /* ADS typography tokens */
  --ams-font-family:            "AmsterdamSans", Arial, sans-serif;
  --ams-body-font-size:         clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem);
  --ams-body-font-weight:       400;
  --ams-body-line-height:       1.6;
  --ams-body-small-font-size:   1rem;
  --ams-body-small-line-height: 1.5;
  --ams-body-large-font-size:   clamp(1.3125rem, 1.2411rem + 0.3571vw, 1.5625rem);
  --ams-body-large-line-height: 1.5;
  --ams-heading-font-weight:    700;
  --ams-heading-1-font-size:    clamp(2rem, 1.7143rem + 1.4286vw, 3rem);
  --ams-heading-1-line-height:  1.2;
  --ams-heading-2-font-size:    clamp(1.5rem, 1.3571rem + 0.7143vw, 2rem);
  --ams-heading-2-line-height:  1.3;
  --ams-heading-3-font-size:    clamp(1.3125rem, 1.2411rem + 0.3571vw, 1.5625rem);
  --ams-heading-3-line-height:  1.3;
  --ams-heading-4-font-size:    clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem);
  --ams-heading-4-line-height:  1.4;
  --ams-heading-5-font-size:    1rem;
  --ams-heading-5-line-height:  1.4;

  /* ADS spacing tokens */
  --ams-space-xs:  clamp(0.25rem, 0.2143rem + 0.1786vw, 0.375rem);
  --ams-space-s:   clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem);
  --ams-space-m:   clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem);
  --ams-space-l:   clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem);
  --ams-space-xl:  clamp(2.25rem, 1.8214rem + 2.1429vw, 3.75rem);
  --ams-space-2xl: clamp(3rem, 2.25rem + 3.75vw, 5.625rem);

  /* ADS border tokens */
  --ams-border-width-s:  0.0625rem;
  --ams-border-width-m:  0.125rem;
  --ams-border-width-l:  0.1875rem;
  --ams-border-width-xl: 0.25rem;

  /* Bridge: project vars -> ADS tokens */
  --font:     var(--ams-font-family);
  --text:     var(--ams-color-text-default);
  --muted:    var(--ams-color-text-secondary);
  --red:      var(--ams-color-feedback-error);
  --green:    var(--ams-color-feedback-success);
  --navy:     var(--ams-color-interactive-default);
  --orange:   var(--ams-color-feedback-warning);
  --c-koelte: var(--ams-color-interactive-default);
  --c-water:  var(--ams-color-feedback-info);
  --c-park:   var(--ams-color-feedback-success);
  --black:    var(--ams-color-text-default);
  --white:    var(--ams-color-background-default);
  --surface:  var(--ams-color-background-default);
  --font-serif: var(--ams-font-family);

  /* Project-specific */
  --bg:      #f5f5f5;
  --border:  rgba(0,0,0,0.07);
  --shadow:  rgba(0,0,0,0.10);
  --subtle:  #bebebe;
  --radius:    10px;
  --radius-lg: 20px;
  --top:       64px;
  --banner-h:  44px;
  --sidebar-w: 340px;
  --panel-w:   440px;
  --contact-h: 54px;
  --offset:    var(--top); /* banner moved out of the fixed topbar; offset = nav height only */

  /* ── Unified type scale ───────────────────────────────────────────────────
     One ladder for the whole app — legend, list and detail panel share these
     so body copy reads at a consistent 15px and captions at 12-13px.        */
  --fs-micro:   11px;   /* uppercase eyebrow labels, badges */
  --fs-caption: 12px;   /* tertiary captions, pills */
  --fs-small:   13px;   /* secondary text, chips, meta */
  --fs-body:    15px;   /* primary readable body (legend, list, detail) */
  --fs-title:   17px;   /* item / section titles */
  --fs-heading: 20px;   /* panel headings */
}

html { height: 100%; scroll-behavior: smooth; }
body {
  min-height: 100%;
  overflow-y: auto;
  font-family: var(--font);
  font-size: var(--ams-body-font-size);
  line-height: var(--ams-body-line-height);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── Topbar ───────────────────────────────────────────────────────────────── */
#topbar {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 500;
  display: flex; flex-direction: column;
  background: #fff;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

/* ── Heat plan banner ────────────────────────────────────────────────────── */
#heat-banner {
  min-height: var(--banner-h);
  display: flex; align-items: center;
  flex-shrink: 0; z-index: 5;
  transition: background 0.45s ease;
  overflow: hidden;
}
.heat-banner--active   { background: #ec0000; }
.heat-banner--inactive { background: #767676; }

.banner-inner {
  display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 0 20px;
}
.banner-pulse {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,0.88);
  animation: banner-pulse 2s ease-in-out infinite;
}
.heat-banner--inactive .banner-pulse {
  animation: none; background: rgba(255,255,255,0.30);
}
@keyframes banner-pulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.7);opacity:0.55} }
.banner-text {
  flex: 1; font-size: 15.5px; font-weight: 600;
  color: #fff; line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Main nav row: logo · title · search · actions */
.topbar-main {
  height: var(--top);
  display: flex; align-items: center; padding: 0 20px; gap: 14px;
  flex-shrink: 0;
}

.logo-img-link { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; }
.logo-badge {
  display: flex; align-items: center; justify-content: center;
  background: transparent;   /* inverted header: logo sits directly on white, no box */
  border-radius: 0;
  padding: 0;
  line-height: 0;
}
.logo-img { height: 30px; width: auto; display: block; }

.topbar-title {
  flex: 1; min-width: 0;
  font-size: 17px; font-weight: 700; color: var(--navy); letter-spacing: -0.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* " Amsterdam" span — hidden at narrower widths (see responsive breakpoints) */

.topbar-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

/* ── Search ──────────────────────────────────────────────────────────────── */
#search-wrap { flex: 1; min-width: 120px; max-width: 380px; position: relative; }
#search-input {
  width: 100%; height: 40px; background: #fff;
  border: 1.5px solid rgba(0,0,0,0.18); border-radius: 19px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  color: #202020; font-family: var(--font); font-size: 13.5px;
  padding: 0 14px 0 38px; outline: none;
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
  -webkit-appearance: none; appearance: none; letter-spacing: 0.01em;
}
#search-input::placeholder { color: rgba(0,0,0,0.38); }
#search-input:focus { background: #ffffff; border-color: rgba(0,70,153,0.5); box-shadow: 0 0 0 2px rgba(0,70,153,0.12); }
#search-input::-webkit-search-cancel-button { opacity: 0.5; }
.search-icon {
  position: absolute; left: 12px; top: 50%;
  transform: translateY(-50%); pointer-events: none; color: rgba(0,0,0,0.45);
}
#search-wrap:focus-within .search-icon { color: rgba(0,70,153,0.7); }
#search-results {
  position: absolute; top: calc(100% + 7px); left: 0; right: 0;
  background: var(--surface); border: var(--ams-border-width-s) solid rgba(0,0,0,0.07);
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06), 0 20px 48px rgba(0,0,0,0.10);
  overflow: hidden; z-index: 600;
}
#search-results[hidden] { display: none; }
.sr-item { padding: 9px 16px; cursor: pointer; border-bottom: 1px solid rgba(0,0,0,0.05); transition: background 0.1s; }
.sr-item:last-child { border-bottom: none; }
.sr-item:hover { background: var(--bg); }
.sr-item--local { border-left: 2px solid var(--c-koelte); }
.sr-name { font-size: 13px; font-weight: 500; letter-spacing: -0.01em; color: var(--text); }
.sr-sub  { font-size: 11px; color: var(--muted); margin-top: 1px; }

/* ── Topbar controls ─────────────────────────────────────────────────────── */
/* Waiting state: blue background + white text */
/* Clicked / selected state: white background + blue text */
/* Shape update: make each button a pill / oval like Kaart/Lijst */

.ctrl-btn,
#btn-lang {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  height: 40px;
  padding: 0 18px;

  background: #fff;
  border: 1.5px solid var(--navy);
  border-radius: 100px;
  color: var(--navy);

  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;

  cursor: pointer;
  white-space: nowrap;

  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

/* Language toggle always reads as the active/primary action — solid navy. */
#btn-lang {
  background: var(--navy);
  color: var(--white);
}

.ctrl-btn:hover {
  background: rgba(0,70,153,0.08);
  border-color: var(--navy);
  color: var(--navy);
}
#btn-lang:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
  filter: brightness(1.12);
}

.ctrl-btn.active,
#btn-lang.active,
.ctrl-btn[aria-pressed="true"],
#btn-lang[aria-pressed="true"],
.ctrl-btn[aria-current="page"],
#btn-lang[aria-current="page"] {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

.ctrl-btn.active:hover,
#btn-lang.active:hover,
.ctrl-btn[aria-pressed="true"]:hover,
#btn-lang[aria-pressed="true"]:hover,
.ctrl-btn[aria-current="page"]:hover,
#btn-lang[aria-current="page"]:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

.ctrl-btn.icon-only {
  padding: 0 12px;
  border-radius: 100px;
}

.lang-btn {
  min-width: 54px;
  padding: 0 16px;
  justify-content: center;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.ctrl-btn svg,
#btn-lang svg {
  color: inherit;
  stroke: currentColor;
}

.ctrl-btn svg [stroke],
#btn-lang svg [stroke] {
  stroke: currentColor;
}

.ctrl-btn svg [fill]:not([fill="none"]),
#btn-lang svg [fill]:not([fill="none"]) {
  fill: currentColor;
}



/* ── Page wrapper ────────────────────────────────────────────────────────── */
#page { margin-top: var(--offset); }

/* ── Scroll-snap: lock onto either the landing OR the fully-docked map app ───
   The map+contact section is a full-height sticky block, so without snapping it
   can rest half-revealed with the contact bar below the fold. Two proximity
   snap points (landing top · docked map) let a scroll settle cleanly on one or
   the other. scroll-padding-top keeps snapped sections clear of the fixed
   topbar. Proximity (not mandatory) so reading the tall landing copy is
   unaffected. A wheel/two-finger gesture scrolls the page freely because
   Leaflet scrollWheelZoom is off (see initMap), so these points are reachable.
   Lives on <html>, the document scroll container (body only has min-height). */
html { scroll-snap-type: y proximity; scroll-padding-top: var(--offset); }
/* Lock the page behind the full-screen mobile legend/filter overlay so the
   background doesn't scroll through underneath it on touch devices (which can
   look like the overlay "doesn't cover" the page). */
html:has(body.sidebar-open) { overflow: hidden; }
#landing-intro,
#snap-app-anchor { scroll-snap-align: start; }
/* Zero-height marker sitting at the seam between landing and the map app; its
   snap-start position equals the fully-docked scroll position. */
#snap-app-anchor { height: 0; pointer-events: none; }

/* ── Map + contact wrapper — Stacks the elements separately ────────────── */
#map-contact-wrap {
  position: sticky;
  top: var(--offset);
  height: calc(100vh - var(--offset));
  height: calc(100dvh - var(--offset));
  display: grid;
  grid-template-rows: auto 1fr auto;  /* heat banner · map · contact row */
  overflow: hidden;
}

#map-section {
  position: relative;
  display: flex;           /* Sidebar + map share the same row height */
  flex-direction: row;
  width: 100%;
  height: 100%;
  min-height: 0; /* Prevents map from expanding past its grid row */
  overflow: hidden; /* Prevent Leaflet panes from bleeding into the footer row */
}

/* ── Map ─────────────────────────────────────────────────────────────────── */
#map {
  flex: 1;           /* fill width to the right of sidebar (row flex) */
  align-self: stretch; /* fill the full cross-axis height of #map-section */
  min-height: 0;
  position: relative;
  z-index: 0;
  min-width: 0;
}

/* ── Loading bar ─────────────────────────────────────────────────────────── */
#loader {
  position: fixed; top: var(--offset); left: 0; right: 0;
  height: 2px; z-index: 600;
  background: linear-gradient(90deg, transparent, var(--green), #34d399, var(--green), transparent);
  background-size: 300% 100%;
  animation: slide 1.8s ease infinite;
  opacity: 0; transition: opacity 0.2s; pointer-events: none;
}
#loader.on { opacity: 1; }
@keyframes slide { 0%{background-position:100% 0} 100%{background-position:-100% 0} }

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
#sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  height: 100%;
  position: relative;
  z-index: 440; background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  overflow-y: auto; overflow-x: hidden;
  transition: width 0.24s cubic-bezier(0.4,0,0.2,1),
              border-color 0.24s ease;
}
/* Native scrollbars are hidden everywhere a custom always-visible bar is used
   (see .cscrollbar / attachCustomScrollbar in app.js). */
#sidebar { scrollbar-width: none; }
#sidebar::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* ── Custom always-visible scrollbar (blue thumb, no track, no hover grey) ──── */
.cscrollbar {
  position: sticky; top: 0; left: 0;
  width: 100%; height: 0;
  z-index: 20;
  pointer-events: none;
}
.cscrollbar-thumb {
  position: absolute; top: 0; right: 3px;
  width: 6px; height: 0;
  border-radius: 3px;
  background: var(--navy);
  opacity: 0;
  pointer-events: none;   /* never intercept clicks unless actually scrollable */
  cursor: pointer;
  transition: opacity 0.18s ease, background 0.12s ease;
}
.cscrollbar.is-scrollable .cscrollbar-thumb { opacity: 1; pointer-events: auto; }
.cscrollbar-thumb:hover { background: var(--ams-color-interactive-hover, #003a7d); }

/* Desktop-only legend header (collapsible). Hidden on mobile, where the
   sidebar is a full overlay with its own .sidebar-mobile-header. */
.legend-header { display: none; }

/* ── Desktop collapse tabs — shared left + right styling ─────────────────── */
#sidebar-collapse-btn,
#right-panel-toggle {
  display: none; /* mobile: hidden */
}

/* ════════ DESKTOP (true pointer devices only — touch tablets use mobile) ════════ */
@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
  /* ── Left sidebar becomes a floating, collapsible legend card ─────────── */
  #sidebar {
    position: absolute;
    top: 14px; left: 14px;
    width: min(380px, calc(50% - 28px));
    height: auto;
    max-height: calc(78% - 22px);   /* expanded legend may use up to 78% of the map height so all layer options stay visible */
    border: 1px solid var(--border);
    border-radius: 16px;
    background: rgba(255,255,255,0.97);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.16);
    padding: 0;
    overflow: hidden scroll;   /* always show the scrollbar track so the legend reads as scrollable */
    transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.4,0,0.2,1);
  }

  /* Legend header — title + collapse control, sticky atop the scroll area */
  .legend-header {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 12px 12px 11px 18px;
    position: sticky; top: 0; z-index: 3;
    background: rgba(255,255,255,0.97);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
  }
  .legend-title { font-size: 14.5px; font-weight: 800; letter-spacing: -0.01em; color: var(--text); }
  .sidebar-mobile-header { display: none; }

  /* Right-side header controls: "Clear filters" pill + collapse button */
  .legend-header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
  .legend-clear-btn {
    display: none; /* only visible when filters are active */
    align-items: center; justify-content: center;
    height: 32px; padding: 0 12px;
    border-radius: 9px;
    border: 1.5px solid var(--navy);
    background: transparent;
    color: var(--navy);
    font-family: var(--font);
    font-size: 12.5px; font-weight: 600;
    cursor: pointer; white-space: nowrap;
    transition: background 0.12s;
  }
  .legend-clear-btn:not([hidden]) { display: flex; }
  .legend-clear-btn:hover { background: rgba(0,70,153,0.06); }
  .legend-clear-btn:active { background: rgba(0,70,153,0.10); }
  .legend-clear-btn[hidden] { display: none; }

  #sidebar-collapse-btn {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; padding: 0; flex-shrink: 0;
    background: var(--navy); border: 1.5px solid var(--navy); color: #fff;
    border-radius: 9px; cursor: pointer; box-shadow: 0 2px 6px rgba(0,70,153,0.28);
    transition: filter 0.12s;
  }
  #sidebar-collapse-btn:hover { filter: brightness(1.22); }
  /* Chevron points UP while expanded (click = roll up); DOWN while collapsed (click = drop down) */
  #sidebar-collapse-btn svg { width: 15px; height: 15px; flex-shrink: 0; stroke: currentColor; stroke-width: 0.8px; transform: rotate(180deg); transition: transform 0.22s; }

  /* Collapsed: hide the body, leaving the header pill as the launcher */
  #map-section.sidebar-collapsed .legend-body { display: none; }
  #map-section.sidebar-collapsed .legend-header { border-bottom: none; }
  #map-section.sidebar-collapsed #sidebar-collapse-btn svg { transform: rotate(0deg); }
  #sidebar {
    --sidebar-resize-hitbox: 8px;
  }
  #sidebar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--sidebar-resize-hitbox);
    cursor: ns-resize;
    background: transparent;
    z-index: 4;
  }

  /* ── Right detail/list panel collapse tab (vertical tab, unchanged) ───── */
  #right-panel-toggle {
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 450; width: 22px; height: 110px; padding: 0;
    background: var(--navy); border: 1.5px solid var(--navy); color: #fff;
    cursor: pointer; box-shadow: 0 2px 10px rgba(0,70,153,0.28);
    right: var(--panel-w); border-right: none; border-radius: 10px 0 0 10px;
    transition: right 0.24s cubic-bezier(0.4,0,0.2,1), filter 0.12s;
  }
  #right-panel-toggle:hover { filter: brightness(1.22); }
  #right-panel-toggle svg { width: 11px; height: 18px; flex-shrink: 0; stroke: currentColor; stroke-width: 1.1px; transition: transform 0.24s cubic-bezier(0.4,0,0.2,1); }
  #map-section.detail-open #right-panel-toggle { right: 520px; transition: background 0.12s, color 0.12s; }
  #map-section.detail-snap #right-panel-toggle { transition: none !important; }
  #map-section.right-panel-collapsed #right-panel-toggle { right: 0; }
  #map-section.right-panel-collapsed #right-panel-toggle svg { transform: rotate(180deg); }
}

/* ── Filter FAB (mobile only) ────────────────────────────────────────────── */
#btn-filter-fab {
  display: none; /* shown via @media (max-width: 768px) */
}
.fab-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 4px;
  background: var(--navy); color: #fff;
  border-radius: 100px; font-size: 10px; font-weight: 700;
  border: 1.5px solid rgba(255,255,255,0.4);
}
.fab-count[hidden] { display: none; }

/* Mobile-only scroll handle — hidden on desktop */
.map-scroll-handle { display: none; }

/* ── Sidebar mobile header ───────────────────────────────────────────────── */
.sidebar-mobile-header {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  height: 52px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 2;
}
.sidebar-mobile-title {
  font-size: 14px; font-weight: 700; color: var(--text); letter-spacing: -0.01em;
}

/* Mobile header: "Clear filters" pill — matches the close button exactly */
.sidebar-clear-btn {
  display: none; /* only visible when filters are active */
  align-items: center;
  gap: 5px;
  padding: 7px 14px !important;
  border-radius: 100px !important;
  border: 1.5px solid rgba(0,0,0,0.18) !important;
  background: transparent !important;
  color: var(--navy) !important;
  font-family: var(--font);
  font-size: 13px; font-weight: 600;
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
  transition: background 0.12s;
}
.sidebar-clear-btn:not([hidden]) { display: flex; }
.sidebar-clear-btn:active { background: rgba(0,70,153,0.10) !important; }
.sidebar-clear-btn[hidden] { display: none !important; }

.sidebar-mobile-close {
  width: 32px; height: 32px; border-radius: 50%; border: none;
  background: rgba(0,0,0,0.08); color: #111;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background 0.12s, color 0.12s;
  padding: 0; line-height: 0; flex-shrink: 0;
}
.sidebar-mobile-close svg { stroke: currentColor; stroke-width: 0.8px; }
.sidebar-mobile-close:hover { background: rgba(0,0,0,0.14); color: #000; }

@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  /* Two-line banner on mobile */
  :root { --banner-h: 48px; }
  #heat-banner { min-height: var(--banner-h); align-items: center; }
  .banner-inner { padding: 7px 12px; gap: 7px; align-items: center; }
  .banner-text {
    font-size: 13px; line-height: 1.35;
    white-space: normal; overflow: visible; text-overflow: unset;
  }
  .banner-pulse { width: 6px; height: 6px; flex-shrink: 0; align-self: center; }

  /* Elevate the sticky wrapper's stacking context above the topbar (z-index 500).
     Without this, the topbar always paints above the sidebar (which lives inside
     this stacking context) regardless of the sidebar's own z-index value. */
  #map-contact-wrap { z-index: 600; }

  /* The search dropdown lives inside the topbar (z-index 500), so it is normally
     painted *under* the elevated map wrapper above. While results are open, lift
     the whole topbar context above it; reverts when closed so the sidebar overlay
     still paints above the topbar. */
  #topbar:has(#search-results:not([hidden])) { z-index: 700; }

  /* Map section: column flex */
  #map-section { flex-direction: column; }

  /* Hide the separate filter bar — FAB overlay is used instead */
  #mobile-filter-bar { display: none !important; }

  /* Map fills remaining height in column flex */
  #map { width: 100%; flex: 1; min-height: 0; }

  #map-contact-wrap > footer { flex-shrink: 0; width: 100%; }

  /* ── Filter FAB — floating pill, top-left of map/list ──────────────────── */
  #btn-filter-fab {
    display: flex !important;
    align-items: center;
    gap: 7px;
    position: absolute;     /* anchored to #map-section (position:relative) */
    top: 8px;               /* aligns with the list header title; scroll handle removed */
    left: 12px;
    z-index: 420;
    height: 40px;
    padding: 0 18px;
    background: #fff;
    border: 1.5px solid var(--navy);
    border-radius: 12px;          /* rounded box, not a pill */
    color: var(--navy);
    font-family: var(--font); font-size: 13.5px; font-weight: 700;
    letter-spacing: 0;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0,70,153,0.20);
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s, color 0.15s;
    pointer-events: auto;
  }
  #btn-filter-fab:active { background: rgba(0,70,153,0.08); }

  /* Hide FAB while the sidebar is open (sidebar covers the screen) */
  body.sidebar-open #btn-filter-fab { display: none !important; }
  body.mobile-detail-open #btn-filter-fab { display: none !important; }

  /* On a location's detail screen, the Kaart/Lijst view toggle is irrelevant —
     hide it so it doesn't float over the detail. */
  body.mobile-detail-open .view-toggle-bar { display: none !important; }

  /* FAB sits at top-left — push title/count to right edge, both right-aligned */
  .panel-hdr { padding-left: 72px; }
  #panel-hdr-list { margin-left: auto; align-items: flex-end; }
  .lv-other-hdr-list { margin-left: auto; align-items: flex-end; }

  /* ── Sidebar — full-screen overlay so no map peeks out below ───────────── */
  #sidebar {
    display: flex !important;
    position: fixed !important;     /* cover the whole viewport */
    /* Pin all four edges. With `bottom: 0` the overlay is anchored exactly to
       the screen bottom (no sub-pixel gap), and `min-height` below guarantees
       it's never shorter than the large viewport even in odd toolbar states. */
    inset: 0 !important;
    top: 0; left: 0; right: 0; bottom: 0;
    width: auto !important;
    height: auto;
    max-height: none;
    min-height: 100vh;              /* fallback */
    min-height: 100lvh;            /* large viewport — toolbars hidden */
    border-radius: 0; border-right: none !important; box-shadow: none;
    z-index: 900;                   /* above topbar (500/700) and contact wrap (600) */
    transform: translateX(-100%);   /* off-screen to the left */
    transition: transform 0.30s cubic-bezier(0.2,0,0,1);
    overflow-y: auto; overflow-x: hidden;
  }
  body.sidebar-open #sidebar { transform: translateX(0); }
  /* Cover the home-indicator / notch safe areas so nothing peeks past the edges. */
  #sidebar { padding-bottom: env(safe-area-inset-bottom); }

  /* iOS Safari/WebKit clips a `position: fixed` element to the nearest ancestor
     that has `overflow: hidden`. Here that ancestor is #map-section, whose
     bottom edge sits right at the view toggle — so the overlay stops there and
     the map shows below it (this is exactly why it works in desktop Chrome but
     not on iOS). While the overlay is open, relax overflow on those ancestors
     so the fixed overlay can reach the true viewport edges. The map is fully
     covered by the overlay during this time, so there's no visual side effect. */
  body.sidebar-open #map-contact-wrap,
  body.sidebar-open #map-section { overflow: visible; }

  #sidebar-backdrop { display: none !important; }

  /* ── Mobile legend header — matches the desktop legend design language ──── */
  .sidebar-mobile-header {
    display: flex !important;
    position: sticky;
    top: 0;
    z-index: 10;             /* above scrolling content inside the sidebar */
    background: var(--surface) !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 0 14px 0 18px;
    height: 58px;
    flex-shrink: 0;
    gap: var(--ams-space-s);
    align-items: center;
    justify-content: space-between;
  }
  .sidebar-mobile-title {
    font-size: 17px !important;
    font-weight: 800 !important;
    color: var(--text) !important;
    letter-spacing: -0.01em;
    flex: 1;
  }
  .sidebar-mobile-close {
    display: flex !important;
    align-items: center;
    gap: 5px;
    padding: 8px 15px 8px 12px !important;
    border-radius: 100px !important;
    border: 1.5px solid var(--navy) !important;
    background: var(--navy) !important;
    color: #fff !important;
    font-family: var(--font);
    font-size: 13.5px; font-weight: 600;
    width: auto !important; height: auto !important;
    line-height: 1 !important;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: filter 0.12s;
  }
  .sidebar-mobile-close svg { stroke: currentColor; stroke-width: 0.8px; }
  .sidebar-mobile-close:active { filter: brightness(1.25); }

  #sidebar-collapse-btn { display: none !important; }
}

/* ── Sidebar sections (minimal/flat) ─────────────────────────────────────── */
.sidebar-section {
  padding: 6px 0 2px;
}
.sidebar-section + .sidebar-section {
  border-top: 1px solid rgba(0,0,0,0.05);
}

/* ── Filter groups — static (non-collapsible) ────────────────────────────── */
.filter-group { border-top: 1px solid var(--border); }
.filter-group:first-child { border-top: none; }
.filter-group--static .filter-group-label {
  display: flex; align-items: center;
  padding: 11px 14px 8px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--muted); user-select: none;
}
.filter-group-body { padding-bottom: 4px; }

/* ── Collapsible filter section accordions ───────────────────────────────── */
.filter-section-accordion {
  border-top: none;  /* no border between a layer and its own sub-filters */
}
/* Strong separator: end of one layer's sub-filters → next layer */
.filter-section-accordion + .layer-row {
  border-top: 1px solid rgba(0,0,0,0.12);
  margin-top: 4px;
}
.filter-section-summary {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  cursor: pointer; user-select: none; list-style: none;
  font-weight: 400;
  font-size: 12px; font-weight: 600;
  color: var(--muted);
  -webkit-tap-highlight-color: transparent;
}
.filter-section-summary::-webkit-details-marker,
.filter-section-summary::marker { display: none; }
.filter-section-summary:hover { color: var(--text); }
/* Accordion expand button — same navy square as the legend collapse button,
   just smaller. The square never rotates; only the chevron inside flips. */
.filter-section-chevron {
  margin-left: auto; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  background: var(--navy); color: #fff;
  border-radius: 7px;
  box-shadow: 0 1px 4px rgba(0,70,153,0.28);
  transition: filter 0.12s;
}
.filter-section-chevron-icon {
  width: 11px; height: 11px; display: block;
  fill: currentColor;
  transition: transform 0.2s ease;
}
.filter-section-summary:hover .filter-section-chevron { filter: brightness(1.22); }
details.filter-section-accordion[open] .filter-section-chevron-icon {
  transform: rotate(180deg);
}
/* Hide accordion when its chip container is empty */
.filter-section-accordion:has(> summary + div:empty) { display: none; }
.sidebar-section-title {
  padding: 6px 14px 5px;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.09em;
  color: rgba(0,0,0,0.28);
}

/* ── Mode toggle ─────────────────────────────────────────────────────────── */
.mode-toggle {
  display: flex; padding: 10px 14px; gap: 4px;
  border-bottom: 1px solid rgba(0,0,0,0.05); flex-shrink: 0;
}
.mode-btn {
  flex: 1; padding: 6px 0;
  border: var(--ams-border-width-s) solid var(--border); background: transparent; color: var(--muted);
  font-size: 12px; font-weight: 600; font-family: var(--font);
  border-radius: 6px; cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  letter-spacing: -0.01em;
}
.mode-btn.active { background: var(--text); border-color: var(--text); color: #fff; }
.mode-btn:hover:not(.active) { border-color: var(--text); color: var(--text); }
body.mode-user #sidebar-policy { display: none; }
.sidebar-spacer { flex: 1; min-height: 12px; }

/* ── Category chips (desktop sidebar & mobile bar — unified pill style) ──── */
.category-chips { display: flex; flex-wrap: wrap; gap: 5px; padding: 4px 14px 10px; overflow: hidden; }
/* Shared pill base — also matched by .mfb-chip below */
.cat-chip {
  display: inline-flex; align-items: center; gap: 7px;
  height: 28px; padding: 0 12px; border-radius: 100px;
  border: var(--ams-border-width-m) solid rgba(0,0,0,0.09); background: var(--surface);
  color: var(--muted); font-size: 13px; font-weight: 500;
  font-family: var(--font); cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s, box-shadow 0.12s;
  white-space: nowrap; --cat-color: var(--c-koelte);
  -webkit-tap-highlight-color: transparent;
}
.cat-chip:hover { border-color: var(--cat-color); color: var(--cat-color); box-shadow: 0 0 0 2px color-mix(in srgb, var(--cat-color) 12%, transparent); }
.cat-chip.active { background: var(--cat-color); border-color: var(--cat-color); color: #fff; box-shadow: none; }
.cat-chip-dot { width: 13px; height: 13px; border-radius: 50%; flex-shrink: 0; opacity: 0.95; }
.cat-chip.active .cat-chip-dot { opacity: 1; background: rgba(255,255,255,0.85) !important; }
/* Sub-filter strip nested below a layer row */
.layer-subfilter { padding-left: 36px !important; padding-top: 2px !important; border-top: 1px solid var(--border); }
/* Amenity sub-filter — slightly different visual separation */
.amenity-subfilter { border-top-style: dashed; margin-bottom: 4px; }

/* ── Layer rows ──────────────────────────────────────────────────────────── */
.layer-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; cursor: pointer;
  transition: background 0.1s; user-select: none;
}
.layer-row:hover { background: rgba(0,0,0,0.02); }
.layer-row + .layer-row { border-top: 1px solid rgba(0,0,0,0.12); margin-top: 4px; }
.l-dot {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.20);
  transition: opacity 0.2s;
}
.l-dot svg { display: block; }
.layer-row:not(.on) .l-dot { opacity: 0.28; }
/* Koelteplekken uses per-type colors — show as multi-color gradient dot */
.layer-row[data-cat="koelteplekken"] .l-dot {
  background: conic-gradient(
    #004699 0deg 60deg, #a00078 60deg 120deg, #00893c 120deg 180deg,
    #ff9100 180deg 240deg, #bed200 240deg 300deg, #e50082 300deg 360deg
  ) !important;
}
.l-name { flex: 1; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); transition: color 0.15s; }
.layer-row:not(.on) .l-name { color: var(--muted); }
.l-count { font-size: 11.5px; font-weight: 500; color: var(--subtle); font-variant-numeric: tabular-nums; min-width: 24px; text-align: right; }
.layer-row.on .l-count { color: var(--green); font-weight: 600; }
.l-sw {
  width: 26px; height: 15px; background: rgba(0,0,0,0.13);
  border-radius: 8px; position: relative; flex-shrink: 0; transition: background 0.2s;
}
.l-sw::after {
  content: ''; position: absolute; width: 11px; height: 11px; border-radius: 50%;
  top: 2px; left: 2px; background: white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
  transition: transform 0.2s cubic-bezier(0.2,0,0,1);
}
.layer-row.on .l-sw { background: var(--green); }
.layer-row.on .l-sw::after { transform: translateX(11px); }

/* ── Koelteplaats sub-controls ───────────────────────────────────────────── */
#koelte-controls { padding: 0 0 4px; }

/* ── Filter chips (amenity filters — same pill shape as cat-chip) ─────────── */
.filter-chips { display: flex; flex-wrap: wrap; gap: 5px; padding: 4px 14px 10px; }
.detail-chips { padding: 8px 0 4px; }
.filter-chip {
  display: inline-flex; align-items: center;
  height: 28px; padding: 0 12px; border-radius: 100px;
  border: 1.5px solid rgba(0,0,0,0.09); background: var(--surface);
  color: var(--muted); font-size: 13px; font-weight: 500;
  font-family: var(--font); cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.filter-chip:not(:disabled):hover { border-color: var(--c-koelte); color: var(--c-koelte); }
.filter-chip.on  { background: rgba(0,137,60,0.08); border-color: rgba(0,137,60,0.3); color: #00893c; }
.filter-chip.on:hover { background: rgba(0,137,60,0.13); border-color: var(--green); }
.filter-chip.off { background: transparent; border-color: var(--border); color: var(--subtle); cursor: default; opacity: 0.55; }
.filter-chip.active,
.filter-chip.active:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

/* ── Heat overlay ────────────────────────────────────────────────────────── */
.heat-dot { background: linear-gradient(135deg, var(--ams-color-feedback-success) 0%, var(--ams-color-highlight-yellow) 50%, var(--ams-color-feedback-error) 100%) !important; }
#heat-row:not(.on) .heat-dot { opacity: 0.22; }
.heat-legend { display: flex; align-items: center; gap: 7px; padding: 2px 14px 8px; }
.heat-legend[hidden] { display: none; }
.heat-gradient { flex: 1; height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--ams-color-feedback-success), var(--ams-color-highlight-yellow), var(--ams-color-feedback-warning), var(--ams-color-feedback-error)); }
.heat-label { font-size: 9.5px; letter-spacing: 0.02em; color: var(--muted); }


/* ── Detail name elements (shared by panel and sheet) ────────────────────── */
.sheet-badge {
  display: inline-block; font-size: 9px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.07em;
  padding: 2px 8px; border-radius: 5px; margin-bottom: 4px;
}
.sheet-name {
  font-size: var(--ams-heading-4-font-size); font-weight: var(--ams-heading-font-weight);
  letter-spacing: -0.03em; color: var(--text); line-height: var(--ams-heading-4-line-height);
}

/* ── Tags ────────────────────────────────────────────────────────────────── */
.tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; border-radius: 5px; border: var(--ams-border-width-s) solid transparent;
  font-size: 11px; font-weight: 500; line-height: 1.4; white-space: nowrap;
}
.tag-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.tag-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.tag--open   { background: rgba(0,137,60,0.09);  color: #00893c; border-color: rgba(0,137,60,0.18); }
.tag--closed { background: rgba(236,0,0,0.08); color: var(--ams-color-feedback-error); border-color: rgba(236,0,0,0.14); }
.tag--open .tag-dot   { background: #00893c; }
.tag--closed .tag-dot { background: #ec0000; }
.tag--category { font-weight: 500; }
.tag--inactive { background: rgba(118,118,118,0.10); color: var(--ams-color-text-secondary); border-color: rgba(118,118,118,0.22); }

/* ── Detail (sheet / mobile) ─────────────────────────────────────────────── */
.detail-media-row { display: flex; gap: 10px; align-items: stretch; margin-bottom: 10px; }
.detail-hours-col { flex: 1; min-width: 0; }
.detail-photo-wrap { flex-shrink: 0; border-radius: 10px; overflow: hidden; background: var(--bg); display: flex; }
.detail-photo { height: 100%; width: auto; max-width: 160px; display: block; object-fit: cover; }

/* ── Detail (right panel) ────────────────────────────────────────────────── */
.detail-panel-body { padding: 0 0 var(--ams-space-m); display: flex; flex-direction: column; gap: var(--ams-space-s); }

/* 16:9 photo at the top of the detail panel — inset so it clears the scrollbar */
.detail-img-full {
  margin: 10px 12px 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg);
  border-radius: 10px;
  flex-shrink: 0;
}
.detail-img-full img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Fallback link when Drive image can't load */
.detail-photo-fallback {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  color: rgba(255,255,255,0.85); font-size: 13px; font-weight: 500;
  text-decoration: none; background: rgba(0,70,153,0.6);
}
.detail-photo-fallback:hover { color: #fff; text-decoration: underline; }

/* Colored accent bar at top of non-photo detail panels */
.detail-panel-accent { height: 5px; flex-shrink: 0; }

/* Info section padding */
.detail-panel-info { padding: var(--ams-space-s) var(--ams-space-m) 0; display: flex; flex-direction: column; gap: var(--ams-space-s); }
.detail-header-row { display: flex; align-items: flex-start; gap: 12px; }
.detail-header-info { flex: 1; min-width: 0; }
.detail-panel-name {
  font-size: var(--ams-heading-4-font-size); font-weight: var(--ams-heading-font-weight);
  line-height: var(--ams-heading-4-line-height); letter-spacing: -0.02em;
  color: var(--text); margin: 3px 0 5px; white-space: normal;
}
/* Compact hours in detail panel */
.detail-panel-info .hours-wrap { margin-bottom: 0; }
.detail-panel-info .hours-table { padding: 2px 0; }
.detail-panel-info .hours-row { padding: 3px 10px; }
.detail-panel-info .hours-day  { font-size: 13px; width: 26px; }
.detail-panel-info .hours-time { font-size: 13.5px; }
.detail-panel-info .hours-status { padding: var(--ams-space-xs) var(--ams-space-s); font-size: var(--ams-body-small-font-size); }
.detail-panel-info .filter-chips.detail-chips { padding: 0; }
.detail-panel-info .detail-notes { padding: 8px 0; font-size: 14px; }
.detail-panel-info .detail-actions { margin-top: 4px; gap: 6px; padding: 0; }
.detail-panel-info .btn-website,
.detail-panel-info .btn-directions { height: 42px; font-size: 14px; }
/* Heat plan hours note */
.detail-heat-hours-note {
  display: flex; align-items: center; gap: 6px;
  background: rgba(236,0,0,0.06); border: 1px solid rgba(236,0,0,0.15);
  border-radius: 7px; padding: 6px 11px;
  font-size: 13px; color: var(--ams-color-feedback-error);
}
.detail-heat-hours-note svg { flex-shrink: 0; }

/* Icon badge in detail panel header (swimming spots, parks) */
.detail-icon-badge {
  width: 44px; height: 44px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px; border: 1px solid transparent;
  background: rgba(0,0,0,0.04);
}

/* Legacy namesec — keep for sheet/mobile compat */
.detail-panel-namesec { margin-bottom: 14px; }
.detail-panel-namesec .sheet-name { font-size: 17px; white-space: normal; }
.detail-panel-namesec .sheet-badge { margin-bottom: 3px; }

/* ── Opening hours ───────────────────────────────────────────────────────── */
.hours-wrap { margin-bottom: var(--ams-space-s); border: var(--ams-border-width-s) solid var(--border); border-radius: var(--radius); overflow: hidden; }
.hours-status { display: flex; align-items: center; gap: 7px; padding: var(--ams-space-xs) var(--ams-space-s); font-size: var(--ams-body-small-font-size); border-bottom: var(--ams-border-width-s) solid var(--border); }
.hours-status--open    { background: rgba(0,137,60,0.07); }
.hours-status--closed  { background: rgba(236,0,0,0.05); }
.hours-status--unknown { background: var(--bg); color: var(--muted); font-style: italic; border-bottom: none; }
.hours-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.hours-status--open    .hours-dot { background: #00893c; }
.hours-status--closed  .hours-dot { background: #ec0000; }
.hours-status--unknown .hours-dot { background: var(--subtle); }
.hours-status--open    span:not(.hours-dot) { color: #006d2e; }
.hours-status--closed  span:not(.hours-dot) { color: var(--ams-color-feedback-error); }
.hours-table { padding: 6px 0; }
.hours-row { display: flex; align-items: center; padding: 4px 12px; border-radius: 4px; margin: 1px 4px; }
.hours-row--today { background: rgba(0,70,153,0.07); }
.hours-row--today .hours-day { color: var(--navy); font-weight: 700; }
.hours-day  { font-size: 13px; font-weight: 500; color: var(--muted); width: 30px; flex-shrink: 0; }
.hours-time { font-size: 13.5px; font-weight: 500; color: var(--text); }
.hours-time--closed { color: var(--subtle); font-style: italic; }
.hours-note { font-size: 13px; color: var(--muted); background: var(--bg); border-radius: var(--radius); padding: 8px 11px; margin-bottom: 8px; line-height: 1.5; }

/* ── Detail category label + inactive notice ─────────────────────────────── */
.dp-cat {
  display: inline-block; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted); margin-bottom: 5px;
}
.inactive-notice {
  display: flex; align-items: center; gap: 8px;
  background: rgba(236,0,0,0.05); border: 1px solid rgba(236,0,0,0.18);
  border-radius: var(--radius); padding: 9px 12px;
  font-size: 12.5px; color: var(--ams-color-feedback-error); margin-bottom: 10px;
}

/* ── Detail panel: status + sections + amenity grid ──────────────────────── */
/* Labelled section (Openingstijden / Voorzieningen / Over deze plek) */
.dp-section {
  display: flex; flex-direction: column; gap: 7px;
  padding-top: var(--ams-space-s);
  border-top: 1px solid var(--border);
}
.dp-section-title {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
}
.dp-section-title-text { min-width: 0; }
/* Open/closed status pill — rides on the right of the Openingstijden title */
.dp-status { flex-shrink: 0; }

/* Amsterdam Design System info note (replaces the plain grey hours box) */
.ads-info-note {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 13px; line-height: 1.45; color: var(--text);
  background: color-mix(in srgb, var(--ams-color-feedback-info) 9%, transparent);
  border-left: 3px solid var(--ams-color-feedback-info);
  border-radius: 6px; padding: 8px 10px;
}
.ads-info-note-ic { color: var(--ams-color-feedback-info); flex-shrink: 0; display: flex; line-height: 0; margin-top: 1px; }
.dp-section .detail-notes { border-top: none; padding: 0; color: var(--text); }
.dp-section .hours-note { margin-bottom: 0; }

/* Facilities grid — scannable present (check) vs absent (cross) */
.dp-amenity-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 12px; }
.dp-amenity { display: flex; align-items: center; gap: 8px; font-size: 13px; min-width: 0; }
.dp-amenity-ic {
  display: flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
}
.dp-amenity.has .dp-amenity-ic { background: rgba(0,137,60,0.13); color: #00893c; }
.dp-amenity.no  .dp-amenity-ic { background: rgba(0,0,0,0.05); color: var(--subtle); }
.dp-amenity-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-amenity.has .dp-amenity-lbl { color: var(--text); }
.dp-amenity.no  .dp-amenity-lbl { color: var(--subtle); }

/* Sticky action bar pinned to the foot of the detail panel */
.detail-panel-body { min-height: 100%; }
.detail-actions--sticky {
  position: sticky; bottom: 0;
  margin-top: auto;
  padding: 10px var(--ams-space-m) calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 12px rgba(0,0,0,0.05);
  z-index: 5;
}

/* ── Detail secondary + notes ────────────────────────────────────────────── */
.detail-secondary-info { display: flex; flex-wrap: wrap; gap: 5px; padding: 4px 0 8px; border-top: 1px solid var(--border); margin-top: 2px; }
.secondary-pill { font-size: 11px; font-weight: 500; color: var(--muted); background: var(--bg); border-radius: 4px; padding: 2px 8px; border: 1px solid var(--border); }
.secondary-pill::before { content: "✓ "; color: var(--green); font-weight: 700; }
.detail-notes { font-size: 14px; color: var(--muted); line-height: 1.65; padding: 10px 0; border-top: 1px solid var(--border); }

/* ── Action buttons — unified ─────────────────────────────────────────────── */
.detail-actions {
  display: flex; flex-direction: column; gap: var(--ams-space-xs); margin-top: var(--ams-space-s);
}
.btn-website,
.btn-directions {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  height: 44px; padding: 0 var(--ams-space-m);
  border: none; border-radius: 10px;
  font-family: var(--font); font-size: var(--ams-body-small-font-size); font-weight: 600;
  cursor: pointer; text-decoration: none;
  transition: background 0.15s, transform 0.1s; line-height: 1; white-space: nowrap;
}
.btn-website    { background: var(--navy); color: #fff; }
.btn-website:hover { background: #003580; }
.btn-website:active { transform: scale(0.98); }
.btn-directions { background: var(--ams-color-text-default); color: #fff; }
.btn-directions:hover { filter: brightness(1.25); }
.btn-directions:active { transform: scale(0.98); }

/* ── Sheet: property grid ────────────────────────────────────────────────── */
.prop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ams-space-xs); }
.prop-cell { background: var(--bg); border-radius: var(--radius); padding: var(--ams-space-xs) var(--ams-space-s); }
.prop-cell.full { grid-column: 1 / -1; }
.prop-label { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(0,0,0,0.34); margin-bottom: 3px; }
.prop-value { font-size: var(--ams-body-small-font-size); font-weight: 500; color: var(--text); line-height: var(--ams-body-small-line-height); }

/* ── Buurt detail ────────────────────────────────────────────────────────── */
.buurt-score-row { display: flex; align-items: baseline; justify-content: space-between; padding: 4px 0 10px; border-bottom: 1px solid var(--border); margin-bottom: 10px; }
.buurt-score-label { font-size: 11px; color: var(--muted); font-weight: 500; }
.buurt-score-val   { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.buurt-pills { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
.buurt-pill  { flex: 1 1 calc(33% - 6px); min-width: 68px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 5px 8px; }
.bp-label { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 2px; }
.bp-val   { font-size: 13px; font-weight: 700; color: var(--text); }
.radar-wrap { padding: 4px 0 6px; }

/* ── Leaflet overrides ───────────────────────────────────────────────────── */
.koelte-icon { background: none !important; border: none !important; }
.koelte-icon svg { display: block; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.22)); }
.leaflet-control-zoom { border: none !important; box-shadow: none !important; margin: 14px 14px !important; display: flex !important; flex-direction: column; gap: 7px; }
.leaflet-control-zoom a {
  background: var(--navy) !important; border: 1.5px solid var(--navy) !important;
  color: #fff !important; width: 42px !important; height: 42px !important;
  display: flex !important; align-items: center; justify-content: center;
  border-radius: 12px !important; box-shadow: 0 3px 12px rgba(0,70,153,0.30) !important;
  transition: filter 0.12s;
}
.leaflet-control-zoom a:hover { filter: brightness(1.22); }
.leaflet-control-zoom a svg { display: block; }
.leaflet-control-zoom-in  { border-radius: 12px !important; }
.leaflet-control-zoom-out { border-radius: 12px !important; }
.leaflet-control-attribution { background: rgba(255,255,255,0.85) !important; font-size: 10px !important; color: var(--subtle) !important; border-radius: 6px 0 0 0 !important; backdrop-filter: blur(4px) !important; }
.leaflet-control-attribution a { color: var(--muted) !important; }
.leaflet-popup-content-wrapper { background: var(--surface) !important; border: 1px solid rgba(0,0,0,0.07) !important; border-radius: 12px !important; color: var(--text) !important; box-shadow: 0 4px 24px rgba(0,0,0,0.10) !important; padding: 0 !important; }
.leaflet-popup-content { margin: 0 !important; }
.leaflet-popup-tip { background: var(--surface) !important; }
.popup-box  { padding: 11px 14px; }
.popup-name { font-size: 13px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 2px; }
.popup-sub  { font-size: 11px; color: var(--muted); }

/* ── Hover card ──────────────────────────────────────────────────────────── */
#hover-card {
  position: fixed; z-index: 800; pointer-events: none;
  background: rgba(13,13,13,0.92); backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  border: 1px solid rgba(255,255,255,0.08); border-radius: 10px;
  padding: 10px 14px 11px; min-width: 150px; max-width: 230px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.28);
  opacity: 0; transform: translateY(4px) scale(0.97);
  transition: opacity 0.12s ease, transform 0.12s ease;
}
#hover-card.visible { opacity: 1; transform: translateY(0) scale(1); }
.hc-accent { height: 2px; border-radius: 1px; margin-bottom: 7px; }
.hc-name   { font-size: 12px; font-weight: 600; color: #fff; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-sub    { font-size: 10px; color: rgba(255,255,255,0.42); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── User location marker ────────────────────────────────────────────────── */
.user-marker-icon { background: none !important; border: none !important; }
.user-dot  { position: absolute; width: 14px; height: 14px; left: 7px; top: 7px; background: var(--navy); border: 2.5px solid #fff; border-radius: 50%; box-shadow: 0 2px 8px rgba(0,70,153,0.5); z-index: 2; }
.user-pulse { position: absolute; width: 28px; height: 28px; left: 0; top: 0; background: rgba(0,70,153,0.15); border-radius: 50%; animation: pulse-ring 2s ease-out infinite; z-index: 1; }
@keyframes pulse-ring { 0%{transform:scale(0.65);opacity:0.9} 100%{transform:scale(2.6);opacity:0} }

/* ── Tips page ───────────────────────────────────────────────────────────── */
#tips-page {
  position: fixed; inset: 0; z-index: 700; background: var(--bg);
  transform: translateX(100%); transition: transform 0.30s cubic-bezier(0.2,0,0,1);
  display: flex; flex-direction: column; overflow: hidden; pointer-events: none;
}
#tips-page.open { transform: translateX(0); pointer-events: auto; }
.tips-page-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; height: var(--top); background: var(--black);
  flex-shrink: 0; gap: 12px;
}
.tips-back-btn {
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 7px; color: rgba(255,255,255,0.75);
  font-family: var(--font); font-size: 12.5px; font-weight: 500;
  padding: 0 12px; height: 34px; cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.tips-back-btn:hover { background: rgba(255,255,255,0.13); color: #fff; }
.tips-page-title { font-size: 15px; font-weight: 600; color: #fff; letter-spacing: -0.02em; }
.tips-page-body { flex: 1; overflow-y: auto; padding: 0 0 40px; }
.tips-page-body::-webkit-scrollbar { width: 3px; }
.tips-page-body::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 2px; }
.tp-hero { background: var(--navy); padding: 40px 28px 32px; color: white; }
.tp-hero-title { font-size: var(--ams-heading-1-font-size); font-weight: var(--ams-heading-font-weight); letter-spacing: -0.02em; line-height: var(--ams-heading-1-line-height); margin-bottom: 8px; text-wrap: balance; }
.tp-hero-sub   { font-size: 14px; opacity: 0.78; font-weight: 400; }
.tp-heatplan-box { background: white; margin: 16px 16px 0; border-radius: 12px; padding: 16px 18px; border-left: 3px solid var(--c-koelte); box-shadow: 0 1px 4px rgba(0,0,0,0.04); }
.tp-heatplan-title { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 5px; }
.tp-heatplan-body  { font-size: 12.5px; color: var(--muted); line-height: 1.7; }
.tp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px 16px 0; }
@media (max-width: 600px) { .tp-grid { grid-template-columns: 1fr; } }
.tp-card { background: white; border-radius: 12px; padding: 16px 16px 18px; box-shadow: 0 1px 4px rgba(0,0,0,0.04); border: 1px solid var(--border); }
.tp-card-title { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 6px; letter-spacing: -0.01em; }
.tp-card-body  { font-size: 13px; color: var(--muted); line-height: 1.7; }
.tp-emergency { margin: 16px 16px 0; background: rgba(236,0,0,0.05); border: 1px solid rgba(236,0,0,0.18); border-radius: 12px; padding: 18px 18px 20px; }
.tp-emergency-title { font-size: 15px; font-weight: 700; color: #ec0000; margin-bottom: 7px; }
.tp-emergency-body  { font-size: 13.5px; color: var(--ams-color-feedback-error); line-height: 1.7; }
.tp-disclaimer { margin: 16px 16px 0; font-size: 11px; color: var(--subtle); line-height: 1.65; padding: 12px 14px; background: white; border-radius: 8px; border: 1px solid var(--border); }

/* ── Contact page ─────────────────────────────────────────────────────────── */
#contact-page {
  position: fixed; inset: 0; z-index: 600; background: var(--surface);
  transform: translateX(100%); transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
  pointer-events: none; display: flex; flex-direction: column;
}
#contact-page.open { transform: translateX(0); pointer-events: auto; }
.sidebar-policy { background: var(--bg); border-top: 1px solid var(--border); }
.cp-card { margin: 0 16px 14px; background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px 18px; }
.cp-card--highlight { background: rgba(0,157,230,0.05); border-color: rgba(0,157,230,0.3); }
.cp-card-heading { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.cp-card-title { font-size: 16px; font-weight: 700; color: var(--text); letter-spacing: -0.02em; }
.cp-card-body { font-size: 13px; color: var(--muted); line-height: 1.65; margin: 0 0 14px; padding: 0; }
.cp-row { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-top: 1px solid var(--border); }
.cp-row:first-of-type { border-top: none; }
.cp-row-label { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--subtle); text-transform: uppercase; letter-spacing: 0.04em; }
.cp-row-value { font-size: 13.5px; color: var(--text); line-height: 1.55; display: flex; flex-direction: column; gap: 2px; }
.cp-link { color: var(--navy); text-decoration: none; font-weight: 500; }
.cp-link:hover { text-decoration: underline; }
.cp-sub { font-size: 11.5px; color: var(--muted); }

/* ── View toggle — hidden on desktop, floating pill INSIDE the map on mobile ─ */
.view-toggle-bar { display: none; }

@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  .view-toggle-bar {
    display: flex;
    position: absolute;            /* anchored to #map-section, not viewport */
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    z-index: 420;
    background: #fff;
    border: 1.5px solid var(--navy);
    border-radius: 12px;           /* rounded box, not a pill */
    padding: 3px;
    box-shadow: 0 4px 14px rgba(0,70,153,0.20);
    gap: 0;
    pointer-events: auto;
  }
  /* Extra breathing room at bottom of list so the floating view toggle doesn't
     cover the last item. iOS Safari drops `padding-bottom` on a scroll
     container, so add a real spacer block at the end of the scrollable content. */
  #list-view-inner::after {
    content: '';
    display: block;
    height: calc(96px + env(safe-area-inset-bottom, 0px));
    flex-shrink: 0;
  }
}

.view-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 20px;
  border: none;
  border-radius: 9px;          /* rounded box segment */

  /* Inactive: transparent on the white bar, navy text/icon */
  background: transparent;
  color: var(--navy);

  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
  letter-spacing: 0;
}

.view-btn:hover:not(.active) {
  background: rgba(0,70,153,0.08);
  color: var(--navy);
}

.view-btn.active,
.view-btn[aria-pressed="true"],
.view-btn[aria-current="page"] {
  /* Selected: navy fill + white text — matches desktop active buttons */
  background: var(--navy);
  color: var(--white);
  font-weight: 700;
}

.view-btn.active:hover,
.view-btn[aria-pressed="true"]:hover,
.view-btn[aria-current="page"]:hover {
  background: var(--navy);
  color: var(--white);
}

.view-btn svg {
  color: inherit;
  stroke: currentColor;
}

.view-btn svg [stroke] {
  stroke: currentColor;
}

.view-btn svg [fill]:not([fill="none"]) {
  fill: currentColor;
}



/* ── Right panel (list + detail) ─────────────────────────────────────────── */
#list-view {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--panel-w);
  background: var(--surface);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 5;
}

/* Ensure the hidden attribute actually hides the panel */
#list-view[hidden] {
  display: none !important;
}

#list-view-inner {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;              /* no trailing space — list stops at the last location */
  scrollbar-width: none;   /* native hidden — custom .cscrollbar used instead */
}
#list-view-inner::-webkit-scrollbar { width: 0; height: 0; display: none; }

@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
  /* Right panel is always visible on desktop unless visually collapsed */
  #list-view[hidden] {
    display: flex !important;
  }

  /* Right gutter so neither the OS page scrollbar (overlaying the viewport edge
     on macOS) nor the custom list scrollbar covers content. The custom thumb
     (right:3px of this padded content box) sits in the gutter, just left of the
     page scrollbar at the very edge. */
  #list-view-inner { padding-right: 14px; }

  #list-view {
    transition:
      transform 0.24s cubic-bezier(0.4,0,0.2,1),
      border-color 0.24s ease;
  }

  /* Offset Leaflet zoom buttons so they do not overlap the right panel */
  .leaflet-top.leaflet-right {
    right: calc(var(--panel-w) + 8px);
  }

  /* Detail mode makes the right panel wider */
  #map-section.detail-open #list-view {
    width: 520px;
  }

  #map-section.detail-open .leaflet-top.leaflet-right {
    right: 528px;
  }

  /* Hide the right panel by sliding it out of the map area */
  #map-section.right-panel-collapsed #list-view {
    transform: translateX(100%);
    border-left-color: transparent;
  }

  /* When the right panel is hidden, return Leaflet controls to the map edge */
  #map-section.right-panel-collapsed .leaflet-top.leaflet-right {
    right: 8px;
  }
}

/* Mobile: list/detail panel participates in the column layout */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  #list-view {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    flex: 1;
    min-height: 0;
    border-left: none;
    box-shadow: none;
  }

  body.mobile-panel-open #map {
    display: none;
  }

  #right-panel-toggle {
    display: none !important;
  }
}

/* ── Panel header ─────────────────────────────────────────────────────────── */
.panel-hdr {
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--surface);
  min-height: 56px;
  display: flex;
  align-items: center;
}
#panel-hdr-list { display: flex; flex-direction: column; gap: 1px; }
#panel-hdr-title {
  font-size: 16px; font-weight: 800;
  color: var(--text); letter-spacing: -0.01em;
}
#panel-hdr-count { font-size: 12px; color: var(--muted); }

/* "Other locations" divider inside the list — matches panel-hdr style */
.lv-other-hdr {
  padding: 14px 16px 12px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  min-height: 56px;
  display: flex;
  align-items: center;
}
.lv-other-hdr-list { display: flex; flex-direction: column; gap: 1px; }
/* Match the "near me" panel header (#panel-hdr-title / -count) exactly. */
.lv-other-hdr-title { font-size: 16px; font-weight: 800; color: var(--text); letter-spacing: -0.01em; }
.lv-other-hdr-count { font-size: 12px; color: var(--muted); }

.panel-hdr-back {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(0,0,0,0.06); border: none; cursor: pointer;
  color: var(--muted); padding: 0; line-height: 0; flex-shrink: 0;
  transition: background 0.12s, color 0.12s;
}
.panel-hdr-back:hover { background: rgba(0,0,0,0.10); color: var(--text); }
.panel-hdr-back[hidden] { display: none; }
#panel-hdr-list[hidden] { display: none; }

/* ── List items ──────────────────────────────────────────────────────────── */
.lv-section-hdr {
  padding: 10px 16px 8px;
  font-size: 12.5px; font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
}
.lv-section-hdr-count {
  font-size: 11px; font-weight: 500; color: var(--subtle);
  background: var(--bg); padding: 1px 7px; border-radius: 10px;
  border: 1px solid var(--border);
}
.lv-list { list-style: none; }

.lv-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.1s;
}
.lv-item:hover { background: var(--bg); }

.lv-photo {
  width: 62px;
  height: 62px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lv-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lv-photo--placeholder span {
  font-size: 20px; font-weight: var(--ams-heading-font-weight);
  letter-spacing: -0.02em; line-height: 1;
  font-family: var(--font);
}

.lv-content { flex: 1; min-width: 0; }

.lv-top-row {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 2px;
}
.lv-name {
  font-size: 15px; font-weight: 600; color: var(--text);
  letter-spacing: -0.01em; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lv-status-badge {
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: 2px 6px; border-radius: 4px; flex-shrink: 0;
}
.lv-status-badge--open    { background: rgba(0,137,60,0.10);   color: #00893c; }
.lv-status-badge--closing { background: rgba(255,145,0,0.12); color: #b36800; }
.lv-status-badge--closed  { background: rgba(236,0,0,0.08);    color: var(--ams-color-feedback-error); }
.lv-status-badge--unknown { background: rgba(0,0,0,0.06);      color: var(--muted); }

.lv-meta {
  font-size: 13px; color: var(--muted);
  margin-bottom: 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.lv-footer {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
}
.lv-dist {
  font-size: 12px; font-weight: 600;
  color: var(--navy); background: rgba(0,70,153,0.08);
  padding: 2px 7px; border-radius: 4px; flex-shrink: 0;
}
.lv-amenity {
  font-size: 12px; font-weight: 500; color: var(--muted);
  background: var(--bg); border: 1px solid var(--border);
  padding: 1px 6px; border-radius: 4px; white-space: nowrap;
}
.lv-amenity--more { color: var(--subtle); }

/* Right column — status badge on top, click chevron below it */
.lv-right {
  display: flex; flex-direction: column; align-items: flex-end;
  justify-content: space-between; align-self: stretch;
  flex-shrink: 0; gap: 8px;
}
/* Chevron — signals each row opens a detail view */
.lv-chevron {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  color: var(--navy); background: rgba(0,70,153,0.07);
  transition: background 0.12s, transform 0.12s, color 0.12s;
}
.lv-item:hover .lv-chevron { background: var(--navy); color: #fff; transform: translateX(2px); }
.lv-item:hover .lv-name { color: var(--navy); }

.lv-empty { padding: 48px 24px; text-align: center; }
.lv-empty-title { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.lv-empty-sub   { font-size: 13px; color: var(--muted); line-height: 1.6; }

/* ── Landing intro ───────────────────────────────────────────────────────── */
#landing-intro { background: transparent; }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.li-hero { background: var(--navy); position: relative; overflow: hidden; }


.li-headline {
  display: flex; flex-direction: column;
  font-family: var(--font);
  font-size: clamp(38px, 5.4vw, 66px);
  font-weight: var(--ams-heading-font-weight); line-height: var(--ams-heading-1-line-height); letter-spacing: -0.02em;
  color: #fff; margin-bottom: 20px;
  text-wrap: balance;
}
.li-tagline-sub {
  font-size: clamp(14px, 1.55vw, 17px);
  color: rgba(255,255,255,0.82);
  line-height: 1.5; max-width: 460px;
  margin: -6px 0 26px;
}
.li-hl-line { display: block; }
.li-hl-accent {
  font-style: italic;
  position: relative; display: inline-block; padding-bottom: 8px;
  white-space: nowrap;   /* keep "Zoek verkoeling." together — the "g." must never orphan to a new line */
}
.li-hl-accent::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 60%; height: 5px; background: var(--red); border-radius: 3px;
}
/* Dutch: underline drawn by .li-hl-u span injected via JS */
.li-hl-accent::after { display: none; }
.li-hl-u { display: inline-block; position: relative; }
.li-hl-u::after {
  content: ''; position: absolute; left: 0; bottom: -8px;
  width: 100%; height: 5px; background: var(--red); border-radius: 3px;
}
.li-hero-sub {
  font-size: clamp(14px, 1.5vw, 16px);
  color: rgba(255,255,255,0.68);
  line-height: 1.65; max-width: 440px; margin-bottom: 28px;
}
.li-cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--red); color: #fff; border: none;
  border-radius: 8px; padding: 13px 28px;
  font-size: 14px; font-weight: 700; font-family: var(--font);
  letter-spacing: -0.01em; cursor: pointer; white-space: nowrap;
  transition: background 0.15s;
}
.li-cta:hover { filter: brightness(0.85); }

/* ── Hero inner: centred container — pulls tagline away from left edge ───── */
.li-hero-inner {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  /* Constrain to 960px so centering is visible even on 1280px laptops */
  width: min(960px, 100%);
  margin: 0 auto;
  padding: 0;
}

/* Left: headline + sub + CTA */
.li-hero-content {
  flex: 1;
  min-width: 0;
  padding: clamp(48px, 8vh, 96px) clamp(16px, 3vw, 40px) clamp(28px, 4vh, 48px) clamp(20px, 5vw, 56px);
}

/* ── Right: weather column — 3 metrics stacked, fills hero height ─────────── */
.li-weather-col {
  /* No separate background — unified with the navy hero */
  display: flex;
  flex-direction: column;
  width: clamp(180px, 22vw, 280px);
  flex-shrink: 0;
  position: relative;
}
/* Gradient separator — fades at top and bottom, invisible at edges */
.li-weather-col::before {
  content: '';
  position: absolute;
  left: 0; top: 8%; height: 84%; width: 1px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(255,255,255,0.14) 20%,
    rgba(255,255,255,0.14) 80%,
    transparent
  );
  pointer-events: none;
}

/* Each metric fills an equal third of the column height */
.li-weather-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;   /* right-align all content within item */
  justify-content: center;
  gap: 5px;
  padding: 12px clamp(16px, 2.5vw, 32px) 12px clamp(8px, 1.5vw, 16px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  text-align: right;
}
.li-weather-item:last-child { border-bottom: none; }

.li-weather-icon { color: rgba(255,255,255,0.5); flex-shrink: 0; width: 24px; height: 24px; }
.li-weather-val {
  font-size: clamp(24px, 2.8vw, 40px);
  font-weight: var(--ams-heading-font-weight); color: #fff; line-height: 1;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.li-weather-lbl {
  font-size: clamp(9px, 0.9vw, 11px); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: rgba(255,255,255,0.38);
  white-space: normal; line-height: 1.35; text-align: right;
}
.li-weather-credit {
  text-align: right;
  font-size: 9.5px; color: rgba(255,255,255,0.20);
  padding: 6px clamp(16px, 2.5vw, 32px) 8px;
  flex-shrink: 0;
}
.li-weather-credit a {
  color: rgba(255,255,255,0.30);
  text-decoration: underline; text-underline-offset: 2px;
}

/* ── Stats strip — stretches full hero width ─────────────────────────────── */
.li-stats-strip {
  display: flex; align-items: stretch;
  padding: 0 clamp(20px, 5vw, 48px);
  border-top: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.20);
}
.li-stat-item {
  flex: 1;                    /* equal share of full width */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  padding: clamp(14px, 2vh, 22px) 0;
}
.li-stat-num {
  font-family: var(--font);
  font-size: clamp(22px, 2.8vw, 36px);
  font-weight: var(--ams-heading-font-weight); letter-spacing: -0.02em; color: #fff; line-height: 1;
}
.li-stat-lbl {
  font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.10em;
  color: rgba(255,255,255,0.48); text-align: center;
}
.li-stat-div {
  width: 1px; background: rgba(255,255,255,0.12);
  margin: clamp(14px, 2vh, 22px) 0; flex-shrink: 0; align-self: stretch;
}

/* ── Mobile hero ─────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Stack hero vertically: headline on top, weather strip below */
  .li-hero-inner {
    flex-direction: column;
    align-items: stretch;
  }
  .li-hero-content {
    padding: clamp(32px, 6vh, 56px) clamp(18px, 5vw, 24px) clamp(18px, 3vh, 28px);
    max-width: 100%;
  }

  /* Weather becomes a horizontal 3-column strip below the headline */
  .li-weather-col {
    flex-direction: row;       /* 3 items side-by-side */
    width: 100%;
    border-top: 1px solid rgba(255,255,255,0.08);
  }
  /* Hide the vertical gradient separator on mobile */
  .li-weather-col::before { display: none; }
  .li-weather-item {
    align-items: center;     /* re-centre for horizontal strip on mobile */
    text-align: center;
    border-bottom: none;
    border-right: 1px solid rgba(255,255,255,0.06);
    padding: 14px 8px;
    gap: 4px;
  }
  .li-weather-item:last-child { border-right: none; }
  .li-weather-icon  { display: none; }
  .li-weather-val   { font-size: clamp(20px, 6vw, 28px); }
  .li-weather-lbl   { font-size: 9px; letter-spacing: 0.06em; }
  .li-weather-credit { display: none; }
}

/* ── Accessibility ───────────────────────────────────────────────────────── */
.sr-only,
.ams-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link,
.ams-skip-link { position: fixed; top: 8px; left: 8px; z-index: 9999; background: var(--black); color: var(--white); padding: 10px 14px; border-radius: 6px; transform: translateY(-140%); text-decoration: none; font-weight: var(--ams-heading-font-weight); }
.skip-link:focus,
.ams-skip-link:focus { transform: translateY(0); }

/* ── Mobile filter bar ───────────────────────────────────────────────────── */
#mobile-filter-bar { display: none; } /* shown only in mobile media query */
/* .mfb-filters-btn intentionally has no default display:none here —
   its parent #mobile-filter-bar is already hidden on desktop, and
   adding display:none after the media query would silently override
   the inline-flex set inside @media (max-width: 768px). */

/* Shared chip base — matches .cat-chip exactly */
.mfb-chip,
.mfb-amenity,
.mfb-layer {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 12px;
  border-radius: 100px;
  border: 1.5px solid rgba(0,0,0,0.09);
  background: var(--surface);
  color: var(--muted);
  font-family: var(--font); font-size: 12px; font-weight: 500;
  white-space: nowrap; cursor: pointer; flex-shrink: 0;
  transition: background 0.13s, border-color 0.13s, color 0.13s;
  -webkit-tap-highlight-color: transparent;
}
.mfb-chip:active,
.mfb-amenity:active,
.mfb-layer:active { opacity: 0.80; }

/* Category chip — active state */
.mfb-chip--active {
  background: var(--navy); border-color: var(--navy); color: #fff;
  font-weight: 600;
}

/* Amenity chip */
.mfb-amenity { gap: 5px; }
.mfb-amenity--active {
  background: var(--navy); border-color: var(--navy); color: #fff;
  font-weight: 600;
}
.mfb-amenity-check {
  display: none; width: 10px; height: 10px; flex-shrink: 0;
}
.mfb-amenity--active .mfb-amenity-check { display: block; }

/* Layer toggle chip */
.mfb-layer.on  { border-color: rgba(0,0,0,0.12); background: var(--surface); color: var(--text); font-weight: 600; }
.mfb-layer:not(.on) { color: var(--subtle); background: var(--bg); border-color: var(--border); opacity: 0.6; }

/* Coloured dot inside layer chip */
.mfb-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  transition: background 0.13s;
}

/* ── Koelteplekken DivIcon markers ───────────────────────────────────────── */
/* Leaflet adds leaflet-marker-icon; we reset its defaults and use our own  */
.leaflet-marker-icon { background: none !important; border: none !important; }

/* Single-element marker: the div IS the dot. Pulse rings use ::before/::after.
   IMPORTANT: no CSS border — use box-shadow for the white ring instead.
   border shifts the padding edge inward, which offsets `top/left: 50%`
   for the absolute-positioned pulse rings by the border-width value. */
.koelte-marker {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--mc, #004699);
  /* White ring + drop shadow both via box-shadow — zero border keeps box model clean */
  box-shadow: 0 0 0 2.5px rgba(255,255,255,0.95), 0 1px 6px rgba(0,0,0,0.38);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* House glyph sits above the pulse rings (which use z-index:-1) */
.koelte-marker svg { position: relative; z-index: 1; pointer-events: none; }

/* On touch devices the small water-tap / swimming-spot bubbles are hard to hit.
   Add an invisible, larger tap target around each marker without changing how
   it looks. The pseudo-element is part of the marker element, so taps on it
   still trigger the marker's click handler. */
@media (hover: none) and (pointer: coarse) {
  .water-icon-marker::before,
  .swim-icon-marker::before {
    content: '';
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    /* transparent — purely an enlarged hit area */
  }
}

/* Shade legend — compact: a time-slot selector + a single shade→sun gradient scale */
.shade-legend { padding: 6px 14px 10px; display: flex; flex-direction: column; gap: 7px; }
/* Class display:flex above would otherwise override the [hidden] attribute, leaving
   the shade info on screen while the layer is deselected — keep it truly hidden. */
.shade-legend[hidden] { display: none; }
/* Time-slot switcher — pick a different shade snapshot */
.shade-slots { display: flex; gap: 5px; flex-wrap: wrap; }
.shade-slot-btn {
  flex: 1 1 0; min-width: 44px;
  padding: 5px 0; border-radius: 7px;
  border: 1.5px solid rgba(0,0,0,0.12); background: var(--surface);
  color: var(--muted); font-size: 12.5px; font-weight: 600;
  font-family: var(--font); cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.shade-slot-btn:hover { border-color: var(--navy); color: var(--navy); }
.shade-slot-btn.active { background: var(--navy); border-color: var(--navy); color: #fff; }
/* Single gradient scale conveys shade (dark) → full sun (light) in one row */
.shade-scale { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--muted); }
.shade-scale-bar {
  flex: 1; height: 8px; border-radius: 4px;
  background: linear-gradient(to right, #004699 0%, #ffe600 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
}
.shade-scale-label { white-space: nowrap; }
.koelte-marker--inactive {
  opacity: 0.38;
  box-shadow: 0 0 0 2.5px rgba(255,255,255,0.55);
}

/* ── Heat-plan pulse rings — two expanding halos, staggered 50% ─────────
   Each ring exactly overlays the dot (inset: 0) and scales from its own
   centre (default transform-origin). It sits BEHIND the dot (z-index: -1),
   so at scale(1) it is fully hidden by the dot and only emerges as an
   outward halo — it can never appear as a separate, offset dot. */
@keyframes koelte-pulse {
  0%   { transform: scale(1);   opacity: 0.5; }
  70%  { transform: scale(3.2); opacity: 0.04; }
  100% { transform: scale(3.2); opacity: 0; }
}

#map-section.heat-active .koelte-marker:not(.koelte-marker--inactive)::before,
#map-section.heat-active .koelte-marker:not(.koelte-marker--inactive)::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--mc, #004699);
  pointer-events: none;
  z-index: -1;
  animation: koelte-pulse 4.0s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
}
#map-section.heat-active .koelte-marker:not(.koelte-marker--inactive)::after {
  animation-delay: 2.0s;
}

/* Extra glow on the dot when heat plan is active */
#map-section.heat-active .koelte-marker:not(.koelte-marker--inactive) {
  box-shadow: 0 0 0 2.5px rgba(255,255,255,0.95), 0 1px 6px rgba(0,0,0,0.38), 0 0 12px color-mix(in srgb, var(--mc, #004699) 70%, transparent);
}

/* ── Mobile topbar ───────────────────────────────────────────────────────── */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  /* Nav row wraps: Row 1 (logo + title + actions), Row 2 (search) */
  :root { --top: 100px; }

  .topbar-main {
    height: var(--top);
    padding: 8px 12px 6px; gap: 8px;
    flex-wrap: wrap; align-content: flex-start;
  }
  .logo-img-link { order: 1; flex: 0 0 auto; }
  .logo-badge { padding: 3px 7px; }
  .logo-img { height: 24px; }
  /* Title: responsive, between logo and actions in row 1 — don't grow, margin-left:auto on actions handles spacing */
  .topbar-title {
    order: 2; flex: 0 1 auto; min-width: 0; max-width: 200px;
    font-size: 13px;
  }

  .topbar-actions { order: 3; margin-left: auto; flex: 0 0 auto; display: flex; gap: 5px; }

  /* Search bar fills full second row */
  #search-wrap {
    order: 4;
    flex: 1 1 100%;
    max-width: none;
    min-width: 0;
    width: 100%;
  }
  #search-input { height: 40px; border-radius: 20px; font-size: 14px; background: #fff; }

  .ctrl-btn { height: 40px; padding: 0 14px; border-radius: 100px; white-space: nowrap; }
  .lang-btn { min-width: 54px; padding: 0 14px; justify-content: center; }


  /* Banner text slightly smaller on mobile to prevent wrapping */
  .banner-text { font-size: 12px; }

  /* Mobile map scroll handle removed — kept hidden on all viewports. */
  .map-scroll-handle { display: none !important; }
}

/* ── Responsive topbar title ─────────────────────────────────────────────── */
/* At narrow widths: hide "Amsterdam", then hide entire title */
@media (max-width: 500px) {
  .title-city { display: none; }
}
@media (max-width: 295px) {
  .topbar-title { display: none !important; }
}

/* ── Landing hero responsive (handled by clamp above) ────────────────────── */

/* ── Language visibility ─────────────────────────────────────────────────── */
.lang-nl, .lang-en { display: none; }
/* Inline elements */
html[lang="nl"] span.lang-nl, html[lang="nl"] a.lang-nl { display: inline; }
html[lang="en"] span.lang-en, html[lang="en"] a.lang-en { display: inline; }
/* Block elements — explicit values to avoid revert inconsistencies */
html[lang="nl"] p.lang-nl, html[lang="nl"] ul.lang-nl, html[lang="nl"] ol.lang-nl,
html[lang="nl"] div.lang-nl, html[lang="nl"] h2.lang-nl, html[lang="nl"] h3.lang-nl { display: block; }
html[lang="en"] p.lang-en, html[lang="en"] ul.lang-en, html[lang="en"] ol.lang-en,
html[lang="en"] div.lang-en, html[lang="en"] h2.lang-en, html[lang="en"] h3.lang-en { display: block; }
/* Image elements — for GGD logo language switching */
html[lang="nl"] img.lang-nl { display: block; }
html[lang="nl"] img.lang-en { display: none; }
html[lang="en"] img.lang-nl { display: none; }
html[lang="en"] img.lang-en { display: block; }

/* ── Info content section ─────────────────────────────────────────────────── */

.info-section-wrap {
  background: var(--surface);
  width: 100%;
  border-top: 1px solid var(--border);
}
.info-section {
  max-width: min(1200px, 100%);
  margin: 0 auto;
  padding: clamp(20px, 3vh, 36px) clamp(20px, 5vw, 56px) clamp(20px, 3vh, 36px);
}
.info-section-heading {
  font-size: var(--ams-heading-2-font-size);
  font-weight: var(--ams-heading-font-weight); letter-spacing: -0.01em;
  color: var(--navy); margin-bottom: clamp(12px, 1.8vh, 18px);
  line-height: var(--ams-heading-2-line-height); text-wrap: balance;
}

/* Desktop: three equal columns — divs are the reliable grid items */
.info-three-col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  align-items: stretch;   /* equal-height columns so the divider bars match length */
}
.info-col-item {
  min-width: 0; /* prevent overflow inside grid track */
}
/* Subtle vertical divider between columns */
.info-col-item:not(:last-child) {
  border-right: 1px solid rgba(0,0,0,0.09);
  padding-right: clamp(14px, 2vw, 28px);
}
.info-col-item:not(:first-child) {
  padding-left: clamp(14px, 2vw, 28px);
}

/* Blue accent bar at the foot of the landing section — matches header height */
.landing-end-bar {
  background: var(--navy);
  height: var(--top);
  width: 100%;
}

/* Each content block */
.info-block {
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.info-block:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.info-block-title {
  font-size: 12px;
  font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text); opacity: 1; margin-bottom: 5px;
  line-height: 1.3;
}
.info-block-body {
  font-size: 13px; line-height: 1.60; color: var(--muted);
}
.info-block-body p { margin: 0 0 5px; }
.info-block-body p:last-child { margin-bottom: 0; }
.info-block-body ul {
  list-style: disc; padding-left: 15px;
  margin: 3px 0 5px;
}
.info-block-body ul:last-child { margin-bottom: 0; }
/* Disclaimer rendered as an Amsterdam Design System Alert (warning severity) */
.info-alert {
  margin-top: var(--ams-space-s) !important;
  background: var(--ams-color-background-default, #fff);
  border: var(--ams-border-width-m) solid var(--ams-color-feedback-warning);
  align-items: stretch;
}
html[lang="nl"] .info-alert.lang-nl,
html[lang="en"] .info-alert.lang-en { display: flex; }
.info-alert .ams-alert__severity-indicator {
  flex: none;
  display: flex; align-items: flex-start; justify-content: center;
  background: var(--ams-color-feedback-warning);
  color: #fff;
  padding: 6px 7px;
}
.info-alert .ams-alert__severity-indicator svg {
  width: 15px; height: 15px; display: block; fill: currentColor;
}
.info-alert .ams-alert__content {
  display: flex; flex-direction: column; gap: 1px;
  padding: 6px 10px;
}
.info-alert .ams-alert__heading {
  font-size: 11.5px; font-weight: 800; color: var(--text); letter-spacing: -0.01em;
}
.info-alert .ams-alert__content p {
  margin: 0; font-size: 11px; line-height: 1.4; color: var(--text);
}

/* Desktop: force-show all block bodies, strip accordion UI */
@media (min-width: 641px) {
  .info-col-item details > .info-block-body { display: block !important; }
  .info-col-item details > summary {
    list-style: none; pointer-events: none; cursor: default; display: block;
  }
  .info-col-item details > summary::marker,
  .info-col-item details > summary::-webkit-details-marker { display: none; }
  .info-col-item .info-block-chevron { display: none; }
  .info-col-item .info-block-title {
    font-size: var(--ams-heading-3-font-size); font-weight: var(--ams-heading-font-weight); color: var(--text);
    text-transform: none; letter-spacing: -0.01em; text-wrap: balance;
    opacity: 1; margin-bottom: 10px;
  }
  .info-col-item .info-block-body { font-size: 14px; line-height: 1.65; }
}

/* Mobile: accordion styling */
@media (max-width: 640px) {
  .info-section { padding: 0 0 8px; }
  .info-section-heading { padding: 24px clamp(16px,5vw,24px) 16px; margin-bottom: 0; font-size: 20px; }
  .info-three-col { grid-template-columns: 1fr; gap: 0; }
  .info-col-item { min-width: unset; }
  .info-col-item:not(:last-child) { border-right: none; padding-right: 0; }
  .info-col-item:not(:first-child) { padding-left: 0; }
  .info-block { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
  details.info-block > summary {
    list-style: none; cursor: pointer; user-select: none;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 15px clamp(16px,5vw,24px);
    font-size: 14px; font-weight: 600; color: var(--text);
    border-bottom: 1px solid var(--border);
  }
  details.info-block > summary::marker,
  details.info-block > summary::-webkit-details-marker { display: none; }
  details.info-block[open] > summary { border-bottom-color: transparent; }
  .info-block-chevron {
    flex-shrink: 0; color: var(--navy); opacity: 0.5;
    transition: transform 0.2s;
  }
  details.info-block[open] .info-block-chevron { transform: rotate(180deg); }
  .info-block-body {
    padding: 12px clamp(16px,5vw,24px) 16px;
    border-bottom: 1px solid var(--border);
  }
}


/* ── Contact strip — flex child of #map-contact-wrap ────────────────────── */
/* Mobile-only elements hidden on desktop; desktop inner always shown */
.cs-collapsed-summary { display: none; }
.cs-expanded-body { display: none; }

#map-contact-wrap > footer,
.contact-strip {
  width: 100%;
  height: auto;
  min-height: var(--banner-h);   /* same height as the "Heat Plan active" banner */
  background-color: #004699 !important; /* Amsterdam dark blue */
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  overflow: visible;
  position: relative;
  z-index: 10;
}

.contact-strip-inner {
  min-height: var(--banner-h);
  max-width: 100%;
  margin: 0 auto;
  padding: 6px 20px;
  display: flex;
  flex-wrap: nowrap;         /* keep all groups on one line… */
  justify-content: center;   /* …centered in the strip */
  align-items: center;
  gap: 6px 22px;
}
.cs-group {
  flex: 0 0 auto;            /* never shrink — JS picks the stage (inline /
                               stacked / compact) from measured intrinsic widths */
  min-width: 0;
  display: flex;
  flex-direction: row;       /* label inline with values */
  align-items: baseline;     /* label sits on the same baseline as the values */
  gap: 2px 10px;
}
/* Brand flows after the contacts and stays on the same line; the phone/email
   stack vertically before the line ever wraps. */
.cs-group--brand { align-items: center; flex-shrink: 0; }
.cs-group-label {
  flex-shrink: 0;
}
.cs-group-values {
  display: flex;
  flex-direction: row;       /* stage 1: phone + email side by side, one line */
  flex-wrap: nowrap;
  flex-shrink: 0;
  gap: 1px 14px;
  min-width: 0;
  width: auto;
}
/* Stage 2: once the all-inline row no longer fits, stack phone above email
   (label stays to the left). JS adds body.footer-stacked. Stage 3 (compact
   collapsible footer) kicks in before the text would reach the divider bars. */
body.footer-stacked .cs-group-values {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px 0;
}
body.footer-stacked .cs-group { align-items: center; }

.cs-label {
  font-size: 9px; font-weight: 700;
  line-height: 1;            /* flat box so label aligns with the values row */
  letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(255,255,255,0.50);
}
.cs-value {
  font-size: 12.5px; font-weight: 500;
  line-height: 1;            /* keep phone/email on the same line as the label */
  color: rgba(255,255,255,0.90);
  text-decoration: none; font-family: var(--font);
  transition: color 0.15s;
  min-width: 0;
  white-space: nowrap;
}
.cs-value:hover { color: #fff; text-decoration: underline; }
.cs-value--muted { color: rgba(255,255,255,0.42); font-size: 11.5px; font-weight: 400; }
.cs-div {
  width: 1px; background: rgba(255,255,255,0.16);
  align-self: center; flex-shrink: 0;
  height: 18px;
  margin: 0;
}
/* ── Compact (collapsible) footer ───────────────────────────────────────────
   Driven by body.footer-compact, which JS (setupFooterResponsive) toggles the
   moment the one-line desktop footer would no longer fit comfortably — so the
   text never crowds the divider bars. On phones it is effectively always on. */
body.footer-compact { --contact-h: 48px; }

/* Mobile contact — collapsible: allow the wrapper to grow */
body.footer-compact #map-contact-wrap {
  display: flex;
  flex-direction: column;
}
body.footer-compact #map-section { flex: 1; min-height: 0; }

body.footer-compact #map-contact-wrap > footer,
body.footer-compact .contact-strip {
  height: auto !important;
  overflow: visible !important;
  flex-shrink: 0;
}

body.footer-compact .contact-strip-inner {
  padding: 0;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  height: auto;
}
/* Collapsed summary row */
body.footer-compact .cs-collapsed-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(14px, 5vw, 20px);
  height: 48px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
  border-top: 1px solid rgba(255,255,255,0.12);
  transition: background 0.15s;
}
body.footer-compact .cs-collapsed-summary:hover,
body.footer-compact .cs-collapsed-summary:active { background: rgba(255,255,255,0.08); }
body.footer-compact .cs-collapsed-text {
  font-size: 12px; font-weight: 600;
  color: rgba(255,255,255,0.90);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1; min-width: 0;
  letter-spacing: -0.01em;
}
body.footer-compact .cs-collapsed-chevron {
  width: 18px; height: 18px; flex-shrink: 0; margin-left: 10px;
  color: rgba(255,255,255,0.65);
  transition: transform 0.22s cubic-bezier(0.4,0,0.2,1);
  background: rgba(255,255,255,0.10);
  border-radius: 50%;
  padding: 2px;
}
body.footer-compact .contact-strip.cs-expanded .cs-collapsed-chevron { transform: rotate(180deg); }
/* Expanded body — grid aligns phone numbers across both groups */
body.footer-compact .cs-expanded-body {
  display: none;
  padding: 12px clamp(14px, 5vw, 20px) 16px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
body.footer-compact .contact-strip.cs-expanded .cs-expanded-body { display: grid; grid-template-columns: auto 1fr; gap: 12px 14px; }
/* Groups become transparent to the grid so label + values align across rows */
body.footer-compact .cs-expanded-body .cs-group { display: contents; }
body.footer-compact .cs-expanded-body .cs-group-label {
  display: flex; flex-direction: column; gap: 0;
  align-self: center;
}
body.footer-compact .cs-expanded-body .cs-group-values {
  flex-direction: column; gap: 2px; align-items: flex-start;
  align-self: center;
}
body.footer-compact .cs-expanded-body .cs-div { display: none; }
body.footer-compact .cs-expanded-body .cs-group--brand { display: none; }
body.footer-compact .cs-expanded-body .cs-label { font-size: 9.5px; }
body.footer-compact .cs-expanded-body .cs-value  { font-size: 12px; }
/* Hide the one-line inner — only show collapsed summary + expanded body */
body.footer-compact .cs-desktop-inner { display: none !important; }