/* =========================================================
   FIXbrigade Map – Production (CSS-only)
   - map bepaalt hoogte
   - lijst even hoog (mag nooit hoogte bepalen)
   - lijst 2 kolommen + scroll (alleen binnen lijst)
   - pro styling (cards, hover, scrollbar)
   - REGIO kleuren + FEATURED/PICKED states (in dit bestand)
   ========================================================= */

/* Theme tokens fallback */
:root{
  --fixb-map-blue:  var(--fb-blue,  #078FDE);
  --fixb-map-green: var(--fb-green, #80E051);
  --fixb-map-grey:  var(--fb-grey,  #B1B4B6);

  --fixb-card-bg: rgba(255,255,255,0.46);
  --fixb-card-br: rgba(0,0,0,0.06);
  --fixb-card-shadow: 0 12px 30px rgba(0,0,0,0.06);
}

/* Gutenberg wrapper rond shortcode */
.grp-fixmap .fixb-map{
  width: 60%;
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
}

.grp-fixmap{
  padding-block: clamp(10px, 2vw, 20px);
}

/* =========================
   GRID LAYOUT
   ========================= */
.fixb-map{
  width: 100%;
  margin: 0;

  display: grid;
  grid-template-columns: 40% 60%;
  gap: 32px;

  /* kaart bepaalt hoogte; items rekken mee */
  align-items: stretch;

  /* CRUCIAAL: grid children mogen krimpen (voor scroll) */
  min-height: 0;
}

@media (max-width: 900px){
  .fixb-map{
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* =========================
   CARDS (lijst + map)
   ========================= */
.fixb-map__list,
.fixb-map__svgwrap{
  box-sizing: border-box;
  border-radius: 18px;
  background: var(--fixb-card-bg);
  backdrop-filter: blur(8px);
  border: 1px solid var(--fixb-card-br);
  box-shadow: var(--fixb-card-shadow);

  /* belangrijk voor grid/flex scroll gedrag */
  min-height: 0;
}

/* =========================
   LIST (links)
   ========================= */
.fixb-map__list{
  padding: 18px;
  display: flex;
  flex-direction: column;

  /* rounded corners netjes */
  overflow: hidden;

  /* CRUCIAAL:
     - lijst mag nooit de hoogte bepalen
     - scroll gebeurt IN deze card */
  overflow-y: auto;
  overflow-x: hidden;

  /* nodig zodat flex child (ul) echt kan krimpen */
  min-height: 0;
}

/* (alleen relevant als er een h3 bestaat) */
.fixb-map__list h3{
  margin: 0 0 12px 0;
  font-size: 0.6rem;
  line-height: 1.2;
  flex: 0 0 auto;
}

/* UL is nu alleen layout; geen eigen scroll meer */
.fixb-map__list ul{
  margin: 0;
  padding-left: 18px;

  /* flex: neem beschikbare ruimte, maar mag krimpen */
  flex: 1 1 auto;
  min-height: 0;

  /* 2 kolommen */
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 24px;
  row-gap: 6px;

  /* iets netter in smalle boxen */
  align-content: start;
}

@media (max-width: 900px){
  .fixb-map__list ul{
    grid-template-columns: 1fr;
  }
}

.fixb-map__list li{
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.3;
  padding: 6px 8px;
  border-radius: 10px;
  transition: background 140ms ease, transform 140ms ease;
  position: relative;
}

.fixb-map__list li:hover{
  background: rgba(255,255,255,0.55);
  transform: translateY(-1px);
}

/* Optionele nette scrollbar (WebKit) — nu op de LIST card */
.fixb-map__list::-webkit-scrollbar{ width: 10px; }
.fixb-map__list::-webkit-scrollbar-track{ background: transparent; }
.fixb-map__list::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,0.12);
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.0);
}

/* Links blijven netjes */
.fixb-map__list li a{
  display:block;
  color: inherit;
  text-decoration:none;
}

/* Focus in lijst */
.fixb-map__list li a:focus-visible{
  outline: 2px solid rgba(7,143,222,0.55);
  outline-offset: 2px;
  border-radius: 10px;
}

/* Actieve item in lijst */
.fixb-map__list li.is-active{
  background: rgba(7,143,222,0.12);
  box-shadow: inset 0 0 0 1px rgba(7,143,222,0.25);
}

.fixb-map__list li.is-active::before{
  content:"";
  position:absolute;
  left:-10px;
  top: 6px;
  bottom: 6px;
  width: 4px;
  border-radius: 999px;
  background: rgba(7,143,222,0.8);
}

/* =========================
   MAP (rechts)
   ========================= */
.fixb-map__svgwrap{
  overflow: hidden;
  display: flex;
  flex-direction: column;

  /* belangrijk: mag ook krimpen binnen grid */
  min-height: 0;
}

/* SVG responsive + geen inline gap */
.fixb-map__svgwrap svg{
  display: block;
  width: 100% !important;
  height: auto !important;
  max-width: 100%;

  /* anti “washed out”: nooit globale opacity/filter */
  opacity: 1 !important;
  filter: none !important;
}

/* =========================
   Gemeenten styling (basis)
   - we houden alles in map.css
   - map werkt met !important => wij ook
   ========================= */

/* 0) Zorg dat nergens een wash/opacity/filter actief is op shapes */
.fixb-map__svgwrap svg g.gemeente,
.fixb-map__svgwrap svg g.gemeente polygon,
.fixb-map__svgwrap svg g.gemeente path{
  opacity: 1 !important;
  filter: none !important;
}

/* 1) Baseline stroke: subtiel donker (minder “melkachtig” dan wit) */
.fixb-map__svgwrap svg g.gemeente polygon,
.fixb-map__svgwrap svg g.gemeente path{
  fill: var(--fixb-map-grey) !important;
  stroke: rgba(0,0,0,0.22) !important;
  stroke-width: 0.7 !important;
  paint-order: stroke fill !important;
  shape-rendering: geometricPrecision;
  transition: fill 160ms ease, stroke 160ms ease, stroke-width 160ms ease, filter 160ms ease;
}

/* =========================
   REGIO kleuren (alleen niet-featured / niet-picked)
   ========================= */

/* Noordwest */
.fixb-map__svgwrap svg g.gemeente:not(.is-featured):not(.is-picked)[data-regio="Noordwest"] polygon,
.fixb-map__svgwrap svg g.gemeente:not(.is-featured):not(.is-picked)[data-regio="Noordwest"] path{
  fill: #BFD9FF !important;
}

/* Zuidwest */
.fixb-map__svgwrap svg g.gemeente:not(.is-featured):not(.is-picked)[data-regio="Zuidwest"] polygon,
.fixb-map__svgwrap svg g.gemeente:not(.is-featured):not(.is-picked)[data-regio="Zuidwest"] path{
  fill: #BDEED3 !important;
}

/* Zuid */
.fixb-map__svgwrap svg g.gemeente:not(.is-featured):not(.is-picked)[data-regio="Zuid"] polygon,
.fixb-map__svgwrap svg g.gemeente:not(.is-featured):not(.is-picked)[data-regio="Zuid"] path{
  fill: #FFC8A8 !important;
}

/* Oost */
.fixb-map__svgwrap svg g.gemeente:not(.is-featured):not(.is-picked)[data-regio="Oost"] polygon,
.fixb-map__svgwrap svg g.gemeente:not(.is-featured):not(.is-picked)[data-regio="Oost"] path{
  fill: #D7C6FF !important;
}

/* Noord */
.fixb-map__svgwrap svg g.gemeente:not(.is-featured):not(.is-picked)[data-regio="Noord"] polygon,
.fixb-map__svgwrap svg g.gemeente:not(.is-featured):not(.is-picked)[data-regio="Noord"] path{
  fill: #CFE3EA !important;
}

/* Subtiele hover voor niet-featured (optioneel) */
.fixb-map__svgwrap svg g.gemeente:not(.is-featured):not(.is-picked):hover polygon,
.fixb-map__svgwrap svg g.gemeente:not(.is-featured):not(.is-picked):hover path{
  filter: brightness(0.97);
}

/* =========================
   FEATURED / PICKED
   - fill + stroke altijd consistent
   ========================= */

/* Featured (basis) */
.fixb-map__svgwrap svg g.gemeente.is-featured polygon,
.fixb-map__svgwrap svg g.gemeente.is-featured path{
  fill: var(--fixb-map-blue) !important;
  stroke: var(--fixb-map-blue) !important;
  stroke-width: 1.6 !important;
  cursor: pointer;
}

/* Hover alleen voor featured: groen (fill én stroke dezelfde kleur) */
.fixb-map__svgwrap svg g.gemeente.is-featured:hover polygon,
.fixb-map__svgwrap svg g.gemeente.is-featured:hover path{
  fill: var(--fixb-map-green) !important;
  stroke: var(--fixb-map-green) !important;
  stroke-width: 2.2 !important;
}

/* Actief (kaart sync) */
.fixb-map__svgwrap svg g.gemeente.is-featured.is-active polygon,
.fixb-map__svgwrap svg g.gemeente.is-featured.is-active path{
  fill: var(--fixb-map-green) !important;
  stroke: var(--fixb-map-green) !important;
}

/* Focus/active states: houd consistent */
.fixb-map__svgwrap svg g.gemeente.is-featured:focus,
.fixb-map__svgwrap svg g.gemeente.is-featured:focus-visible,
.fixb-map__svgwrap svg g.gemeente.is-featured:active{
  outline: none !important;
}

/* Safety net: als class soms op polygon/path zit */
.fixb-map__svgwrap svg polygon.is-featured,
.fixb-map__svgwrap svg path.is-featured{
  fill: var(--fixb-map-blue) !important;
  stroke: var(--fixb-map-blue) !important;
  stroke-width: 1.6 !important;
  cursor: pointer;
}
.fixb-map__svgwrap svg polygon.is-featured:hover,
.fixb-map__svgwrap svg path.is-featured:hover{
  fill: var(--fixb-map-green) !important;
  stroke: var(--fixb-map-green) !important;
  stroke-width: 2.2 !important;
}

/* Als je ooit ook .is-picked gebruikt (optioneel, harmless) */
.fixb-map__svgwrap svg g.gemeente.is-picked polygon,
.fixb-map__svgwrap svg g.gemeente.is-picked path{
  fill: var(--fixb-map-blue) !important;
  stroke: var(--fixb-map-blue) !important;
  stroke-width: 1.6 !important;
}

/* Kaart: hover/focus extra pro (bestaat al in je JS sync) */
.fixb-map__svgwrap svg g.gemeente.is-featured.is-focus polygon,
.fixb-map__svgwrap svg g.gemeente.is-featured.is-focus path{
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.18));
}

/* =========================================================
   Legenda (in de kaart linksboven)
   ========================================================= */

.fixb-map__svgwrap{
  position: relative;
}

/* Alleen positioneren als legenda echt IN svgwrap staat */
.fixb-map__svgwrap > .fixb-map__legend{
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 60;

  /* box */
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 14px;

  /* EXACT dezelfde “glass card” look als map + lijst */
  background: var(--fixb-card-bg);


  /* tekst */
  font-size: 0.6rem;
  line-height: 1.00;
}

/* Item: swatch + label onder elkaar */
.fixb-map__legend-item{
  display: grid;
  grid-template-columns: 14px 1fr;
  align-items: center;
  column-gap: 8px;
  white-space: nowrap;
}

/* Swatch blokje */
.fixb-map__legend-swatch{
  width: 10px;
  height: 10px;
  border-radius: 3px;
  border: 1px solid rgba(0,0,0,0.18);
}

/* Regio kleuren (matcht je map fills) */
.fixb-map__legend-swatch[data-regio="Noordwest"]{ background: #BFD9FF; }
.fixb-map__legend-swatch[data-regio="Zuidwest"]{  background: #BDEED3; }
.fixb-map__legend-swatch[data-regio="Zuid"]{      background: #FFC8A8; }
.fixb-map__legend-swatch[data-regio="Oost"]{      background: #D7C6FF; }
.fixb-map__legend-swatch[data-regio="Noord"]{     background: #CFE3EA; }

/* Scheidingslijntje */
.fixb-map__legend-sep{
  height: 1px;
  background: rgba(0,0,0,0.10);
  margin: 2px 0;
}

/* Fixbrigade actief swatch */
.fixb-map__legend-swatch[data-kind="featured"]{
  background: var(--fixb-map-blue);
  border-color: rgba(0,0,0,0.12);
}

/* Optioneel: als je legenda ooit klikbaar wil maken, cursor */
.fixb-map__legend-item{
  cursor: default;
}

/* Mobiel: iets compacter */
@media (max-width: 480px){
  .fixb-map__svgwrap > .fixb-map__legend{
    top: 10px;
    left: 10px;
    padding: 8px 10px;
    border-radius: 12px;
    font-size: 0.6rem;
  }
}