/* ============================================================
   Werkgebied-check op de contactpagina: themes/lodewijk/contact.php
   ============================================================
   Alleen op /contact geladen (samen met Leaflet), daarom niet in shared.css: de rest van de site
   hoeft dit niet mee te slepen. Sinds v014.11.331 staan hier twee dingen: het raster van de
   paginakop (.lw-cw-kop: de tekst en het gegevensblok naast elkaar; alleen deze pagina heeft dat)
   en wat de check zelf nodig heeft (kaartvak, uitslag, legenda, de vestigingsmarker en de
   Leaflet-knoppen). De panelen eromheen zijn de gewone panelen van het thema (shared.css).
   Kleuren, maten en lettertypen komen uit de thematokens, dus de nachtstand en de merkkleur uit
   het beheer werken hier vanzelf door.
   ============================================================ */

/* Kop van de pagina: links de tekst, rechts één blok met alles over het bedrijf (adres, telefoon,
   openingstijden, bedrijfsgegevens). Twee kolommen op een breed scherm, onder elkaar op een
   smaller scherm. Sinds v014.11.334 één blok in plaats van twee, zonder knop (Theo). De rechterkolom
   is minstens 330 px: op 300 px (tussen 1041 en 1150 px schermbreedte) paste "Maandag t/m vrijdag"
   met de kloktijd ernaast net niet meer op één regel en zakte de tijd onder de dag. */
.lw-cw-kop {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(330px, 1fr);
  gap: var(--sp-5) var(--sp-5);
  align-items: start;
}

/* Het blok is een paneel in een paneel; de gewone afstand tussen twee panelen onder elkaar
   (.panel + .panel) hoort hier niet, het raster regelt de afstand. */
.lw-cw-kop > .panel {
  margin-top: 0;
}

@media (max-width: 1040px) {
  .lw-cw-kop {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Telefoon: het gegevensblok even breed als de kaarten in de andere panelen (Theo, 15 september
   2026). Die kaarten staan op de gewone binnenruimte van een paneel (--sp-4); dit blok staat in de
   ruimere kop (--sp-6) en springt het verschil naar buiten. Randen en hoeken blijven, net als bij die
   kaarten: helemaal van rand tot rand was te breed (Theo, dezelfde dag). */
@media (max-width: 680px) {
  .lw-cw-kop > .panel {
    margin-left: calc((var(--sp-6) - var(--sp-4)) * -1);
    margin-right: calc((var(--sp-6) - var(--sp-4)) * -1);
  }
}

.lw-cw__kop {
  font-size: 17px;
  line-height: 1.25;
  margin: 0 0 10px;
}

.lw-cw__regel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

/* Resultaatgebied (aria-live). Een gewoon blok, geen display:contents: dat laat sommige
   schermlezers de live-regio missen. */
.lw-cw__resultaat {
  display: block;
  flex: 1 1 220px;
  min-width: 0;
}

.lw-cw__locatie {
  flex: none;
}

.lw-cw__idle,
.lw-cw__bezig {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-2);
}

.lw-cw__bezig {
  font-family: var(--font-mono);
}

.lw-cw__uitslag {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--panel-radius);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink);
}

.lw-cw__uitslag--groen {
  background: var(--st-ok-bg);
}

.lw-cw__uitslag--oranje {
  background: var(--st-warn-bg);
}

.lw-cw__icoon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  color: #fff;
  font-size: 13px;
  flex: none;
}

.lw-cw__uitslag--groen .lw-cw__icoon {
  background: var(--st-ok);
}

.lw-cw__uitslag--oranje .lw-cw__icoon {
  background: var(--st-warn);
}

.lw-cw__fout {
  padding: 10px 12px;
  border: 1px dashed var(--border);
  border-radius: var(--panel-radius);
  background: var(--panel);
  color: var(--ink-2);
  font-size: 13.5px;
  line-height: 1.45;
}

/* De korte uitslag onder het adresveld van het formulier. */
.lw-cw__adresuitslag {
  display: block;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-3);
}

.lw-cw__adresuitslag:empty {
  display: none;
}

.lw-cw__adresuitslag--groen {
  color: var(--st-ok);
}

.lw-cw__adresuitslag--oranje {
  color: var(--st-warn);
}

.lw-cw__adresuitslag a {
  color: var(--link);
  text-decoration: underline;
}

/* ── De kaart ── */
.lw-cw__map {
  position: relative;
  min-height: 340px;
  border: 1px solid var(--border);
  border-radius: var(--panel-radius);
  background: var(--panel);
  overflow: hidden;
}

.lw-cw__leaflet {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.lw-cw__skelet {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: repeating-linear-gradient(135deg, var(--panel) 0 12px, var(--panel-2) 12px 24px);
  color: var(--ink-3);
  font: 500 11px/1.5 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
  padding: 24px;
  z-index: 1;
}

.lw-cw__legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  align-items: center;
  padding: 10px 2px 0;
  font: 500 11.5px/1.2 var(--font-mono);
  color: var(--ink-2);
}

.lw-cw__legenda-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.lw-cw__swatch {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  box-sizing: border-box;
  flex: none;
}

.lw-cw__swatch--kern {
  background: color-mix(in srgb, var(--accent) 34%, transparent);
  border: 1.5px solid var(--accent);
}

.lw-cw__swatch--ring {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1.5px solid var(--accent);
}

.lw-cw__swatch--vestiging {
  border-radius: 50%;
  background: var(--panel);
  border: 3px solid var(--accent);
}

.lw-cw__swatch--eiland {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1.5px dashed var(--accent);
}

.lw-cw__swatch--locatie {
  border-radius: 50%;
  background: var(--st-ok);
  border: 2px solid var(--panel);
  box-shadow: 0 0 0 1px var(--st-ok);
}

/* Leaflet binnen het paneel: grijze tegels, eigen knoppen en attributie in de stijl van het thema. */
.lw-cw .leaflet-tile-pane {
  filter: grayscale(1) brightness(1.03);
}

.lw-cw .leaflet-container {
  font-family: var(--font-sans);
  background: var(--panel-2);
}

.lw-cw .leaflet-control-attribution {
  font: 10px/1.4 var(--font-mono);
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  color: var(--ink-2);
  padding: 2px 6px;
}

.lw-cw .leaflet-control-attribution a {
  color: var(--link);
}

.lw-cw .leaflet-bar {
  border: 1px solid var(--border);
  box-shadow: var(--shadow-1);
}

/* Leaflet zet zelf wit met zwart; via de tokens volgen de zoomknoppen de nachtstand mee. */
.lw-cw .leaflet-bar a,
.lw-cw .leaflet-bar a:hover,
.lw-cw .leaflet-bar a:focus {
  background: var(--panel);
  color: var(--ink);
  border-bottom-color: var(--border);
  font-family: var(--font-sans);
}

.lw-cw .leaflet-bar a:hover,
.lw-cw .leaflet-bar a:focus {
  color: var(--link);
}

.lw-cw .leaflet-bar a.leaflet-disabled {
  background: var(--panel);
  color: var(--ink-3);
}

/* Vestigingsmarker: witte stip met twee pulserende ringen in de merkkleur. */
.lw-cw__pin {
  background: none;
  border: 0;
}

.lw-cw__pin-stip {
  position: absolute;
  left: 4px;
  top: 4px;
  width: 14px;
  height: 14px;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--panel);
  border: 3.5px solid var(--accent);
  box-shadow: 0 2px 6px rgba(22, 32, 46, .28);
}

.lw-cw__pin-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--accent);
  animation: lw-cw-puls 2.4s ease-out infinite;
}

.lw-cw__pin-ring--2 {
  animation-delay: -1.2s;
}

@keyframes lw-cw-puls {
  from { transform: scale(.7); opacity: .55; }
  to { transform: scale(3.2); opacity: 0; }
}

/* Tooltips van vestiging en resultaat: kaartje zonder pijl. */
.lw-cw .lw-cw__tip {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--panel-radius);
  padding: 6px 10px;
  box-shadow: var(--shadow-1);
  color: var(--ink);
  font: 600 12.5px/1.2 var(--font-sans);
  white-space: nowrap;
  opacity: 1;
}

.lw-cw .lw-cw__tip::before {
  display: none;
}

.lw-cw__tip-kop {
  display: block;
  font: 600 8.5px/1 var(--font-mono);
  letter-spacing: .13em;
  color: var(--link);
  text-transform: uppercase;
  margin-bottom: 3px;
}

/* Minder beweging: de pulserende ringen staan stil; de kaartanimaties zet het script uit
   (Leaflet-opties zoomAnimation/fadeAnimation). */
@media (prefers-reduced-motion: reduce) {
  .lw-cw .lw-cw__pin-ring,
  .lw-cw .lw-cw__pin-ring--2 {
    animation: none;
  }
}

/* Smal scherm: de kaart hoeft geen half scherm hoog te zijn. */
@media (max-width: 640px) {
  .lw-cw__map {
    min-height: 280px;
  }
}

/* ── Nachtstand: alleen de tegels, de rest volgt de tokens ── */
:root[data-resolved-theme="dark"] .lw-cw .leaflet-tile-pane {
  filter: grayscale(1) brightness(.72) contrast(1.05);
}

/* Vaste labels en dezelfde bewegende vestigingspin in de Google-kaart, ook op aanraking. */
.lw-cw__google-point { position: absolute; width: 22px; height: 22px; transform: translate(-50%, -50%); pointer-events: none; }
.lw-cw__google-label { position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%); white-space: nowrap; }