/**
 * Opmaak van de publieke locatiepagina's. Ingetogen en gescoped op
 * .vbn-locaties, zodat het binnen de opmaak van het thema past zonder de rest
 * van de pagina te raken — zelfde aanpak als het aanmeldformulier.
 */
.vbn-locaties {
	max-width: 780px;
}

/* De detailpagina begint met een kaart over de volle breedte; die inperken tot
   leesbreedte zou hem juist onbruikbaar maken. */
.vbn-locaties.vbn-detail {
	max-width: none;
	/* Ruimte onder het laatste blok; anders begint de voet van het thema direct
	   onder de kaartjes met uitgiftepunten. */
	margin-bottom: 3rem;
}

/* Wat onder de kaart staat is leestekst: een smalle kolom, gecentreerd onder
   de brede kaartrij. Zelf centreren, niet op het thema rekenen: in een brede
   of links uitgelijnde inhoudskolom zou het anders tegen de linkerrand staan. */
.vbn-detail .vbn-blok {
	max-width: 780px;
	margin-right: auto;
	margin-left: auto;
}

.vbn-locaties h2 {
	margin: 0 0 0.5rem;
	font-size: 1.25rem;
}

.vbn-locaties .vbn-uitleg {
	margin: 0.35rem 0 0;
	font-size: 0.95rem;
	opacity: 0.8;
}


/* Zoekveld ------------------------------------------------------------- */

.vbn-locaties .vbn-zoekform label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.35rem;
}

.vbn-locaties .vbn-zoekrij {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.vbn-locaties input[type="text"] {
	flex: 1 1 14rem;
	box-sizing: border-box;
	min-height: 3rem;
	margin: 0;
	padding: 0.75rem 1.1rem;
	border: 1px solid #e2e8f0;
	border-radius: 999px;
	background: #fff;
	color: inherit;
	font-family: inherit;
	font-size: 1rem;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.vbn-locaties input[type="text"]:focus {
	outline: none;
	border-color: #ee7402;
	box-shadow: 0 0 0 3px rgba(238, 116, 2, 0.15);
}

.vbn-locaties .vbn-knop {
	display: inline-block;
	min-height: 3rem;
	padding: 0.75rem 1.75rem;
	border: 0;
	border-radius: 999px;
	background: #ee7402;
	color: #fff;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
}

.vbn-locaties .vbn-knop:hover,
.vbn-locaties .vbn-knop:focus {
	background: #d66700;
	color: #fff;
}

.vbn-locaties .vbn-knop-groot {
	margin-top: 1rem;
}

/* Antwoord ------------------------------------------------------------- */

.vbn-locaties .vbn-antwoord {
	margin-top: 1.5rem;
	padding: 1.25rem 1.5rem;
	border: 1px solid #e2e8f0;
	border-radius: 1rem;
	background: #fff;
}

.vbn-locaties .vbn-antwoord-kop {
	margin: 0;
	font-size: 0.95rem;
	opacity: 0.8;
}

.vbn-locaties .vbn-naam {
	margin: 0.25rem 0 1rem;
	font-size: 1.5rem;
}

.vbn-locaties .vbn-antwoord-regel {
	margin: 0;
	font-weight: 600;
}

/* Uitkomstpagina: de kop is de paginatitel van het thema, dus hier begint het
   met de uitleg. Het zoekveld staat eronder om het opnieuw te proberen. */
.vbn-locaties.vbn-zoekresultaat .vbn-zoekform {
	margin-top: 1.5rem;
}

/* De volledige lijst eronder is breder dan de leestekst en staat daarom los. */
.vbn-zoekuitkomst {
	margin-top: 2.5rem;
}

.vbn-zoekuitkomst > h2 {
	margin: 0 0 1rem;
	font-size: 1.25rem;
}

/* De uitslag van de postcodecontrole is hét antwoord op de vraag erboven; als
   losse regel tekst op wit heeft die evenveel gewicht als een bijschrift. */
.vbn-locaties .vbn-uitslag {
	max-width: 34rem;
	margin-top: 1.25rem;
	padding: 1.25rem 1.5rem;
	border-radius: 1rem;
	background: #fcf3f1;
}

.vbn-locaties .vbn-uitslag-knop {
	margin: 1rem 0 0;
}

/* Een postcodeveld is zes tekens; over de halve inhoudsbreedte uitrekken maakt
   er een zoekbalk van. */
.vbn-locaties .vbn-checkform .vbn-zoekrij input[type="text"] {
	flex: 0 0 auto;
	width: 10rem;
}

/* Lijsten -------------------------------------------------------------- */

.vbn-locaties .vbn-lijst,
.vbn-locaties .vbn-contact {
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
}

.vbn-locaties .vbn-lijst li,
.vbn-locaties .vbn-contact li {
	margin: 0 0 0.75rem;
}

.vbn-locaties .vbn-adres {
	display: block;
	font-size: 0.95rem;
	opacity: 0.8;
}

.vbn-locaties .vbn-blok {
	margin-top: 2rem;
}

/* De provincies staan naast elkaar, de plaatsen bínnen een provincie onder
   elkaar — zoals op de huidige site.

   De verdeling over de kolommen gebeurt in PHP, niet hier: de browser kan een
   lange provincie alleen doormidden hakken (kolommenstroom) of elke rij zo hoog
   maken als het langste blok erin (raster). Wij weten vooraf hoeveel regels
   elke provincie heeft en kunnen ze dus zo verdelen dat de kolommen ongeveer
   even lang worden. */
.vbn-overzicht {
	display: flex;
	gap: 2rem;
	align-items: flex-start;
}

.vbn-overzicht .vbn-kolom {
	flex: 1 1 0;
	min-width: 0;
}

.vbn-overzicht .vbn-blok:first-child {
	margin-top: 0;
}

/* Onder elkaar op een smal scherm. De verdeling loopt op alfabet dóór de
   kolommen heen, dus gestapeld klopt de volgorde nog steeds. */
@media (max-width: 760px) {
	.vbn-overzicht {
		display: block;
	}
}

.vbn-locaties .vbn-plaatsen {
	margin: 0.5rem 0 0;
	padding: 0;
	list-style: none;
}

.vbn-locaties .vbn-plaatsen li {
	margin: 0 0 0.25rem;
}

/* Een plaats die bij meer dan één voedselbank hoort (in de huidige gegevens
   alleen Elst). In de lijst is dat een gewone regel, niet van de andere te
   onderscheiden; de keuze verschijnt als popup midden in beeld.

   Zonder JavaScript: de popup staat verborgen tot hij het doel van de URL is.
   De regel linkt ernaartoe, het kruisje en de achtergrond linken terug naar de
   regel — dus na sluiten sta je weer waar je was. */
.vbn-locaties .vbn-keuze {
	display: none;
}

.vbn-locaties .vbn-keuze:target {
	display: block;
	position: fixed;
	z-index: 1000;
	inset: 0;
}

.vbn-locaties .vbn-keuze-achtergrond {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
}

.vbn-locaties .vbn-keuze-venster {
	position: relative;
	max-width: 26rem;
	/* Iets boven het midden: dat leest rustiger dan exact gecentreerd. */
	margin: 15vh auto 0;
	padding: 1.75rem 2rem;
	border-radius: 1rem;
	background: #fff;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

.vbn-locaties .vbn-keuze-kruis {
	position: absolute;
	top: 0.5rem;
	right: 0.9rem;
	color: #505050;
	font-size: 1.75rem;
	line-height: 1;
	text-decoration: none;
}

.vbn-locaties .vbn-keuze-kruis:hover {
	color: #ee7402;
}

.vbn-locaties .vbn-keuze-vraag {
	margin: 0 0 1rem;
	padding-right: 1.5rem;
	font-weight: 600;
}

.vbn-locaties .vbn-keuze-venster ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vbn-locaties .vbn-keuze-venster li {
	margin: 0 0 0.6rem;
}

.vbn-locaties .vbn-keuze-venster li:last-child {
	margin-bottom: 0;
}

@media (max-width: 480px) {
	.vbn-locaties .vbn-keuze-venster {
		margin: 10vh 1rem 0;
	}
}

/* Kaart met contactkaartje --------------------------------------------- */

/* Een eigen stapelcontext voor de kaartrij. Leaflet en het contactkaartje
   rekenen met z-indexen tot 1001; zonder deze grens schuiven ze bij het scrollen
   over een vastgezette kop van het thema heen. */
.vbn-locaties .vbn-kop {
	isolation: isolate;
}

.vbn-locaties .vbn-kaart {
	/* 450px, gemeten: de kaart is 912 bij 450 op de huidige site. */
	height: 450px;
	border-radius: 1.5rem;
	/* Zonder dit steken de tegels door de afgeronde hoeken heen. */
	overflow: hidden;
}

/* Kleuren en maten zijn afgemeten aan een detailpagina van de huidige site
   (na omzetting van Display P3 naar sRGB, anders meet je de kleuren mis). */
.vbn-locaties .vbn-visitekaartje {
	/* 30px binnenmarge, gemeten. */
	padding: 1.875rem;
	border-radius: 1.5rem;
	background: #fcf3f1;
	color: #505050;
	font-size: 1.125rem;
	/* Eigen regelhoogte: die van het thema (1,7) maakt van elke contactregel een
	   eigen alinea, en dan lijkt er een witregel tussen te staan. */
	line-height: 1.4;
}

.vbn-locaties .vbn-visitekaartje-naam {
	margin: 0 0 1.5rem;
	color: #ee7402;
	/* Op de echte pagina is deze kop 36px, maar die is gemeten aan "Voedselbank
	   Aalsmeer" — twee woorden. Onze langste naam telt 44 tekens, en bij 36px
	   loopt die over drie regels; het kaartje wordt dan 420 hoog in een kaart van
	   450 en zit klem. Bij 32px past elke van de 181 namen op hoogstens twee
	   regels en komt het kaartje op ~350, precies waar het echte staat. */
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.15;
	/* "Naarden/Bussum/Hilversumse" is één woord van 26 tekens en past op geen
	   enkele regelbreedte; zonder afbreken loopt het het kaartje uit. */
	overflow-wrap: break-word;
	hyphens: auto;
}

/* De links in het kaartje volgen de kop, niet de linkkleur van het thema. */
.vbn-locaties .vbn-visitekaartje a {
	color: #ee7402;
	text-decoration: underline;
}

.vbn-locaties .vbn-visitekaartje a:hover,
.vbn-locaties .vbn-visitekaartje a:focus {
	color: #b45802;
}

.vbn-locaties .vbn-visitekaartje .vbn-contact {
	margin: 0;
}

.vbn-locaties .vbn-visitekaartje .vbn-contact li {
	display: flex;
	align-items: flex-start;
	gap: 0.9rem;
	/* Lange e-mailadressen en webadressen mogen het kaartje niet uitlopen. */
	overflow-wrap: break-word;
	min-width: 0;
}

/* De regelafstanden in de huidige kaart zijn níét gelijk, en dat is geen ruis in
   de meting: van bovenkant tot bovenkant is het 37,5 tussen adres en telefoon,
   47,5 tussen telefoon en e-mail, en 27 tussen e-mail en website. De regel zelf
   is 25,2 hoog (18px bij regelhoogte 1,4); wat overblijft is de marge eronder. */
.vbn-locaties .vbn-visitekaartje .vbn-r-adres {
	margin-bottom: 12px;
}

.vbn-locaties .vbn-visitekaartje .vbn-r-telefoon {
	margin-bottom: 22px;
}

/* Ruimer dan de gemeten 27: die twee regels stonden daar wel erg op elkaar. */
.vbn-locaties .vbn-visitekaartje .vbn-r-email {
	margin-bottom: 10px;
}

.vbn-locaties .vbn-visitekaartje .vbn-contact li:last-child {
	margin-bottom: 0;
}

.vbn-locaties .vbn-visitekaartje .vbn-contact a {
	overflow-wrap: break-word;
}

.vbn-locaties .vbn-visitekaartje .vbn-contact li:last-child {
	margin-bottom: 0;
}

.vbn-locaties .vbn-icoon {
	flex: 0 0 auto;
	margin-top: 0.25rem;
	color: #ee7402;
}

/* Dubbele speld: beide harten op dezelfde plek, in de volgorde waarin ze in de
   opmaak staan (oranje onder, wit erop). Leaflet geeft een divIcon standaard een
   witte achtergrond met rand. */
.vbn-speld-dubbel {
	background: none;
	border: 0;
}

.vbn-speld-dubbel img {
	position: absolute;
	top: 0;
	left: 0;
}

/* Legenda linksonder in de kaart: welk hart wat is. Linksonder omdat het
   contactkaartje vanaf tabletbreedte de rechterkant van de kaart afdekt. */
.vbn-legenda {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	padding: 0.5rem 0.75rem;
	border-radius: 0.75rem;
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
	color: #505050;
	font-size: 0.85rem;
	line-height: 1.2;
}

.vbn-legenda-regel {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

/* Beide markers in een vlakje van 26 bij 26. Het oranje hart vult zijn hele
   vlak van 40 bij 52 en kan dus op halve grootte. Het witte hart is een klein
   hart middenin dat vlak (x 8 tot 33, y 15 tot 38); op halve grootte blijft
   daar te weinig van over. Dat staat daarom op 88% (35 bij 46; het hart zelf
   22 breed en 20 hoog), uitgesneden rond het hart met twee pixels speling
   voor de schaduwrand, en verticaal gecentreerd op de regel tekst ernaast. */
.vbn-legenda-beeld {
	position: relative;
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	overflow: hidden;
}

/* Met .vbn-legenda ervoor: Elementor zet `.elementor img { max-width: 100%;
   height: auto }` en laadt na ons. Bij gelijk gewicht wint die, en dan wordt
   het witte hart tot de breedte van zijn vlakje (26px) ingekrompen. */
.vbn-legenda .vbn-legenda-beeld img {
	position: absolute;
	max-width: none;
}

.vbn-legenda .vbn-legenda-voedselbank img {
	top: 0;
	left: 3px;
	width: 20px;
	height: 26px;
}

/* Wit op een witte legenda: zonder schaduwrand is alleen de vork te zien. */
.vbn-legenda .vbn-legenda-uitgiftepunt img {
	filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.55));
	top: -9px;
	left: -5px;
	width: 35px;
	height: 46px;
}

/* Vanaf tabletbreedte ligt het kaartje over de rechterrand van de kaart heen en
   steekt het er voorbij, zoals op de huidige site: daar beslaat de kaart 76% van
   de inhoudsbreedte en het kaartje 37,5%, tegen de rechterrand aan. Ze
   overlappen dus ruim een tiende van de breedte.

   Leaflet legt zijn eigen lagen tot z-index 800 en de bediening tot 1000; het
   kaartje moet daarboven. */
@media (min-width: 900px) {
	/* De kaartrij breekt uit de inhoudskolom, de rest niet.

	   De kaart is op de huidige site 912 breed bij 76%, dus een inhoudsbreedte
	   van 1200. Waar dit blok geplaatst wordt is de kolom vaak smaller — op de
	   dev-site 790 — en dan wordt de kaart 600 en dekt het contactkaartje er een
	   te groot deel van af. Wat onder de kaart staat blijft bewust op de
	   smallere inhoudskolom, net als bij de rest van de site: de kaart is de
	   brede kop, de rest is leestekst.

	   Verschuiven met een marge en niet met transform: transform maakt een eigen
	   stapelcontext, en het contactkaartje moet met z-index 1001 boven de
	   bediening van Leaflet uit kunnen komen.

	   Werkt zolang de kolom zelf gecentreerd staat. Knipt een omliggend blok met
	   overflow: hidden, dan valt dit terug op de kolombreedte — niet mooi, maar
	   ook niet stuk. */
	.vbn-locaties .vbn-kop {
		width: min(1200px, 100vw - 3rem);
		margin-left: calc(50% - min(600px, 50vw - 1.5rem));
	}

	.vbn-locaties .vbn-kop {
		position: relative;
	}

	.vbn-locaties .vbn-kaart {
		width: 76%;
	}

	/* Verticaal gecentreerd, en daarin wijken we bewust af van de huidige site:
	   die zet het kaartje 18px onder de bovenrand. Daar staat één kaartje met
	   één naamlengte; hier zijn het er 181, en de naam loopt over één tot drie
	   regels. Dat geeft hoogtes van 338 tot 427 binnen een kaart van 450 — met
	   een vaste bovenmarge zou de ruimte eronder van 94px naar 5px lopen en
	   lijkt het kaartje eruit te vallen. Gecentreerd verdeelt diezelfde variatie
	   zich over twee kanten. Geen enkel kaartje is hoger dan de kaart, dus
	   uitsteken kan niet. */
	.vbn-locaties .vbn-visitekaartje {
		position: absolute;
		z-index: 1001;
		top: 50%;
		right: 0;
		width: 37.5%;
		transform: translateY(-50%);
	}
}

@media (max-width: 899px) {
	.vbn-locaties .vbn-visitekaartje {
		margin-top: 1rem;
	}
}

@media (max-width: 600px) {
	.vbn-locaties .vbn-kaart {
		height: 300px;
	}

	.vbn-locaties .vbn-visitekaartje-naam {
		font-size: 1.6rem;
	}
}


/* Onder de kaart -------------------------------------------------------- */

/* De postcodecontrole zonder eigen vlak: een vraag met één veld vult geen
   kaart, en een te groot vlak met het veld helemaal rechts viel uit balans.
   Kop, veld en uitslag staan onder elkaar op de linkerrand. De uitslag is
   één regel met de knop ernaast, niet nog een vlak. Staat het antwoord vast,
   dan vervangt het het formulier (zie detail.php). */
.vbn-locaties .vbn-controle h2 {
	margin: 0;
	color: #ee7402;
	font-size: 1.5rem;
	font-weight: 700;
}

.vbn-locaties .vbn-controle .vbn-checkform {
	margin-top: 0.75rem;
}

.vbn-locaties .vbn-controle .vbn-uitslag {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.5rem;
	max-width: none;
	margin: 1.25rem 0 0;
	padding: 0;
	border-radius: 0;
	background: none;
}

.vbn-locaties .vbn-controle .vbn-uitslag-knop {
	margin: 0;
}

.vbn-locaties .vbn-opnieuw {
	margin: 0.75rem 0 0;
	font-size: 0.95rem;
}

.vbn-locaties .vbn-opnieuw a {
	color: #ee7402;
}

.vbn-locaties .vbn-uitgiftepunten {
	display: grid;
	/* Hoogstens drie naast elkaar, en minstens 15rem breed: op een smaller
	   scherm worden het er vanzelf twee of één. */
	grid-template-columns: repeat(auto-fill, minmax(max(15rem, (100% - 2rem) / 3), 1fr));
	gap: 1rem;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
}

.vbn-locaties .vbn-uitgiftepunten li {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 1.25rem 1.5rem;
	border-radius: 1rem;
	background: #f8f8f8;
}

.vbn-locaties .vbn-up-naam {
	margin-bottom: 0.25rem;
}