/**
 * Hunebed Media - Portfolio, kaartweergave.
 *
 * Wordt alleen geladen als een shortcode kaart="ja" meekrijgt. De kleuren
 * komen uit dezelfde variabelen als de rest van de plugin, met een paar
 * extra voor het land en het water.
 */

.hunebedmedia_portfolio {
	--hunebedmedia_portfolio-kaart-hoogte: clamp(360px, 58vh, 620px);
	--hunebedmedia_portfolio-kaart-water: rgba(128, 128, 128, 0.07);
	--hunebedmedia_portfolio-kaart-land: rgba(128, 128, 128, 0.18);
	--hunebedmedia_portfolio-kaart-grens: rgba(128, 128, 128, 0.42);
	--hunebedmedia_portfolio-kaart-provincie: rgba(128, 128, 128, 0.3);
	--hunebedmedia_portfolio-kaart-bol: currentColor;
	--hunebedmedia_portfolio-kaart-boltekst: #fff;
	/* Eigen kleur voor de schakelaar raster/kaart bij hover; leeg = de
	   tekstkleur van het thema. */
	--hunebedmedia_portfolio-weergave-hover: inherit;
}

@supports (color: color-mix(in srgb, currentColor 50%, transparent)) {
	.hunebedmedia_portfolio {
		--hunebedmedia_portfolio-kaart-water: color-mix(in srgb, currentColor 4%, transparent);
		--hunebedmedia_portfolio-kaart-land: color-mix(in srgb, currentColor 11%, transparent);
		--hunebedmedia_portfolio-kaart-grens: color-mix(in srgb, currentColor 26%, transparent);
		--hunebedmedia_portfolio-kaart-provincie: color-mix(in srgb, currentColor 14%, transparent);
	}
}

/* ------------------------------------------------------------------ *
 * De schakelaar raster / kaart
 * ------------------------------------------------------------------ */

.hunebedmedia_portfolio .hunebedmedia_portfolio__weergave {
	display: inline-flex;
	padding: 3px;
	gap: 3px;
	border: 1px solid var(--hunebedmedia_portfolio-rand);
	border-radius: 999px;
	background: var(--hunebedmedia_portfolio-vlak);
}

.hunebedmedia_portfolio .hunebedmedia_portfolio__weergave-knop {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 36px;
	padding: 6px 14px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font-size: 0.85em;
	font-weight: 600;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	transition: background-color var(--hunebedmedia_portfolio-duur) var(--hunebedmedia_portfolio-easing);
}

/*
 * De tekstkleur hoort er expliciet bij: zonder dit kleurt het thema de tekst
 * bij hover wit, en dan lees je "Raster" en "Kaart" niet meer.
 */
.hunebedmedia_portfolio .hunebedmedia_portfolio__weergave-knop:hover,
.hunebedmedia_portfolio .hunebedmedia_portfolio__weergave-knop:focus {
	background: var(--hunebedmedia_portfolio-vlak-hover);
	color: var(--hunebedmedia_portfolio-weergave-hover, inherit);
}

.hunebedmedia_portfolio .hunebedmedia_portfolio__weergave-knop--actief {
	background: var(--hunebedmedia_portfolio-vlak-hover);
	box-shadow: inset 0 0 0 1px var(--hunebedmedia_portfolio-rand-sterk);
}

.hunebedmedia_portfolio__weergave-knop .hunebedmedia_portfolio__icoon {
	width: 15px;
	height: 15px;
}

/* ------------------------------------------------------------------ *
 * Het kaartvlak
 * ------------------------------------------------------------------ */

.hunebedmedia_portfolio__kaartvlak {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--hunebedmedia_portfolio-rand);
	border-radius: var(--hunebedmedia_portfolio-radius);
	background: var(--hunebedmedia_portfolio-kaart-water);
}

.hunebedmedia_portfolio__kaartvlak[hidden] {
	display: none;
}

.hunebedmedia_portfolio__kaartdoek {
	width: 100%;
	height: var(--hunebedmedia_portfolio-kaart-hoogte);
}

.hunebedmedia_portfolio__kaartvlak[aria-busy="true"] .hunebedmedia_portfolio__kaartdoek {
	opacity: 0.5;
}

.hunebedmedia_portfolio__kaartmelding {
	margin: 0;
	padding: 8px 14px;
	border-block-start: 1px solid var(--hunebedmedia_portfolio-rand);
	background: var(--hunebedmedia_portfolio-vlak);
	font-size: 0.85em;
	color: var(--hunebedmedia_portfolio-gedempt);
}

.hunebedmedia_portfolio__kaartmelding[hidden] {
	display: none;
}

/* ------------------------------------------------------------------ *
 * De eigen SVG-kaart
 * ------------------------------------------------------------------ */

.hunebedmedia_portfolio__svgkaart {
	display: block;
	width: 100%;
	height: 100%;
}

.hunebedmedia_portfolio__svgwater path {
	fill: var(--hunebedmedia_portfolio-kaart-water);
	stroke: var(--hunebedmedia_portfolio-kaart-provincie);
	stroke-width: 1px;
	vector-effect: non-scaling-stroke;
}

/* Provinciegrenzen: dunner en lichter dan een landsgrens, anders vallen ze
   net zo hard op en wordt de kaart onrustig. */
.hunebedmedia_portfolio__svgprovincie path {
	fill: none;
	stroke: var(--hunebedmedia_portfolio-kaart-provincie);
	stroke-width: 0.75px;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

.hunebedmedia_portfolio__svgland path {
	fill: var(--hunebedmedia_portfolio-kaart-land);
	stroke: var(--hunebedmedia_portfolio-kaart-grens);
	stroke-width: 1px;
	stroke-linejoin: round;
	/* Zonder dit zou de lijn met het kader meeschalen en bij inzoomen
	   dikker worden dan het land zelf. */
	vector-effect: non-scaling-stroke;
}

/* ------------------------------------------------------------------ *
 * De bolletjes, in beide motoren hetzelfde
 * ------------------------------------------------------------------ */

.hunebedmedia_portfolio__bol {
	cursor: pointer;
}

.hunebedmedia_portfolio__bol-vorm {
	fill: var(--hunebedmedia_portfolio-kaart-bol);
	fill-opacity: 0.86;
	stroke: #fff;
	stroke-width: 1.5px;
	vector-effect: non-scaling-stroke;
	transition: fill-opacity var(--hunebedmedia_portfolio-duur) var(--hunebedmedia_portfolio-easing);
}

.hunebedmedia_portfolio__bol:hover .hunebedmedia_portfolio__bol-vorm,
.hunebedmedia_portfolio__bol:focus-visible .hunebedmedia_portfolio__bol-vorm {
	fill-opacity: 1;
}

.hunebedmedia_portfolio__boltelling {
	fill: var(--hunebedmedia_portfolio-kaart-boltekst);
	font-weight: 700;
	text-anchor: middle;
	dominant-baseline: central;
	pointer-events: none;
}

/* Het cijfer bij MapLibre; bij de SVG-kaart is dit een <text> in de tekening. */
.hunebedmedia_portfolio span.hunebedmedia_portfolio__boltelling {
	color: var(--hunebedmedia_portfolio-kaart-boltekst);
}

/* Bij MapLibre is een bolletje een gewone knop in plaats van SVG. */
.hunebedmedia_portfolio .hunebedmedia_portfolio__bol--marker {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 2px solid #fff;
	border-radius: 50%;
	background: var(--hunebedmedia_portfolio-kaart-bol, #333);
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
	transition: transform var(--hunebedmedia_portfolio-duur) var(--hunebedmedia_portfolio-easing);
}

.hunebedmedia_portfolio .hunebedmedia_portfolio__bol--marker:hover,
.hunebedmedia_portfolio .hunebedmedia_portfolio__bol--marker:focus-visible {
	transform: scale(1.14);
}

/* ------------------------------------------------------------------ *
 * De popup met de projectkaart
 * ------------------------------------------------------------------ */

.hunebedmedia_portfolio__kaartpopup {
	position: absolute;
	inset-block-start: 12px;
	inset-inline-start: 12px;
	z-index: 5;
	display: flex;
	flex-direction: column;
	width: min(330px, calc(100% - 24px));
	/* Tegen de hoogte van het kaartvlak, niet van het hele blok: anders
	   schuift de popup over de regel met de meldingen eronder. */
	max-height: calc(var(--hunebedmedia_portfolio-kaart-hoogte) - 24px);
	border: 1px solid var(--hunebedmedia_portfolio-rand);
	border-radius: var(--hunebedmedia_portfolio-radius);
	background: Canvas;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}

.hunebedmedia_portfolio__kaartpopup[hidden] {
	display: none;
}

.hunebedmedia_portfolio__kaartpopup-kop {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 10px 10px 14px;
	border-block-end: 1px solid var(--hunebedmedia_portfolio-rand);
}

.hunebedmedia_portfolio__kaartpopup-titel {
	font-size: 0.95em;
	line-height: 1.3;
}

.hunebedmedia_portfolio .hunebedmedia_portfolio__kaartpopup-sluit {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	min-height: 32px;
	flex: none;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--hunebedmedia_portfolio-vlak);
	color: inherit;
	cursor: pointer;
}

.hunebedmedia_portfolio .hunebedmedia_portfolio__kaartpopup-sluit:hover,
.hunebedmedia_portfolio .hunebedmedia_portfolio__kaartpopup-sluit:focus {
	background: var(--hunebedmedia_portfolio-vlak-hover);
	color: inherit;
}

.hunebedmedia_portfolio__kaartpopup-inhoud {
	display: grid;
	gap: 14px;
	padding: 14px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

/* Op smalle schermen is een zwevend kaartje te krap: dan onderaan vastzetten. */
@media (max-width: 560px) {
	.hunebedmedia_portfolio__kaartpopup {
		inset-block-start: auto;
		inset-block-end: 0;
		inset-inline: 0;
		width: 100%;
		max-height: min(72vh, calc(var(--hunebedmedia_portfolio-kaart-hoogte) - 24px));
		border-inline: 0;
		border-block-end: 0;
		border-start-start-radius: var(--hunebedmedia_portfolio-radius);
		border-start-end-radius: var(--hunebedmedia_portfolio-radius);
		border-end-start-radius: 0;
		border-end-end-radius: 0;
	}
}

/* MapLibre zet zijn eigen lettertype; dat van het thema is hier beter. */
.hunebedmedia_portfolio__kaartdoek .maplibregl-ctrl-attrib {
	font-size: 11px;
}

/* ------------------------------------------------------------------ *
 * Zoomknoppen bij de eigen kaart
 * ------------------------------------------------------------------ */

.hunebedmedia_portfolio__kaartdoek {
	position: relative;
}

.hunebedmedia_portfolio__kaartknoppen {
	position: absolute;
	inset-block-start: 10px;
	inset-inline-end: 10px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.hunebedmedia_portfolio .hunebedmedia_portfolio__kaartknop {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	min-height: 34px;
	padding: 0;
	border: 1px solid var(--hunebedmedia_portfolio-rand);
	border-radius: var(--hunebedmedia_portfolio-radius-klein);
	background: Canvas;
	color: inherit;
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.hunebedmedia_portfolio .hunebedmedia_portfolio__kaartknop:hover,
.hunebedmedia_portfolio .hunebedmedia_portfolio__kaartknop:focus {
	background: var(--hunebedmedia_portfolio-vlak-hover);
	color: inherit;
}

.hunebedmedia_portfolio__svgkaart--sleept {
	cursor: grabbing;
}

.hunebedmedia_portfolio__kaartpopup-laden {
	margin: 0;
	font-size: 0.9em;
	color: var(--hunebedmedia_portfolio-gedempt);
}

/* Het onzichtbare, ruimere klikvlak rond een bolletje. */
.hunebedmedia_portfolio__bol-raakvlak {
	fill: transparent;
	stroke: none;
}

.hunebedmedia_portfolio__kaartmelding-link {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}