/*
 * Wat maar op een plek voorkomt: de hero, het gevulde blok, de oproep, de
 * agendabalk, de straatpagina, de documentenlijst, de groepen en de kaart.
 */

/* Hero */

.hero__kop {
	margin-bottom: var(--r4);
}

.hero__inleiding {
	color: var(--kleur-tekst-zacht);
	font-size: var(--maat-groot);
}

.hero__knoppen,
.oproep__knoppen,
.activiteit__acties {
	display: flex;
	flex-wrap: wrap;
	gap: var(--r3);
	margin-top: var(--r5);
}

/* Gevuld blok, voor de buurtpreventie-oproep */

.blok {
	display: grid;
	gap: var(--r4);
	padding: var(--r6);
	background: var(--kleur-primair);
	border-radius: var(--radius-groot);
	color: var(--kleur-op-primair);
}

.blok a:not(.knop) {
	color: inherit;
}

.blok .knop--primair {
	background: var(--kleur-op-primair);
	color: var(--kleur-primair-donker);
}

.blok .knop--primair:hover {
	background: var(--kleur-primair-licht);
	color: var(--kleur-primair-donker);
}

.blok__pictogram .pictogram {
	width: 2.5rem;
	height: 2.5rem;
	opacity: 0.9;
}

.blok__kop {
	margin-bottom: var(--r3);
}

@media (width >= 48rem) {
	.blok {
		grid-template-columns: auto 1fr;
		align-items: start;
		gap: var(--r5);
	}
}

/* Afsluitende oproep */

.oproep {
	max-width: var(--breedte-smal);
	text-align: center;
}

.oproep__knoppen {
	justify-content: center;
}

.oproep__tekst {
	color: var(--kleur-tekst-zacht);
	font-size: var(--maat-groot);
}

/* Agenda */

.agendabalk {
	display: flex;
	flex-wrap: wrap;
	gap: var(--r4);
	align-items: center;
	justify-content: space-between;
	margin-top: var(--r5);
}

.agendabalk__abonneren {
	display: flex;
	flex-wrap: wrap;
	gap: var(--r2) var(--r3);
	align-items: center;
	margin: 0;
}

.agendabalk__uitleg {
	color: var(--kleur-tekst-zacht);
	font-size: var(--maat-klein);
}

.feiten {
	display: grid;
	gap: var(--r3);
	margin-block: var(--r5);
	padding: var(--r4) var(--r5);
	background: var(--kleur-vlak);
	border: var(--randdikte) solid var(--kleur-rand);
	border-radius: var(--radius);
}

.feiten__rij {
	display: grid;
	gap: var(--r1);
}

.feiten dt {
	color: var(--kleur-tekst-zacht);
	font-size: var(--maat-klein);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.feiten dd {
	margin: 0;
	font-weight: 600;
}

@media (width >= 40rem) {
	.feiten__rij {
		grid-template-columns: 9rem 1fr;
		gap: var(--r4);
		align-items: baseline;
	}
}

/* Bericht */

.bericht__kop {
	margin-bottom: var(--r5);
}

.bericht__meta {
	color: var(--kleur-tekst-zacht);
	font-size: var(--maat-klein);
}

.bericht__beeld {
	margin: 0 0 var(--r5);
}

.bericht__beeld img {
	width: 100%;
	border-radius: var(--radius-groot);
}

.bericht__beeld figcaption {
	margin-top: var(--r2);
	color: var(--kleur-tekst-zacht);
	font-size: var(--maat-klein);
}

.bericht__straten {
	margin-top: var(--r6);
	padding-top: var(--r4);
	border-top: var(--randdikte) solid var(--kleur-rand);
	color: var(--kleur-tekst-zacht);
	font-size: var(--maat-klein);
	display: flex;
	align-items: center;
	gap: var(--r2);
}

.omliggend {
	display: flex;
	flex-wrap: wrap;
	gap: var(--r4);
	justify-content: space-between;
	margin-top: var(--r6);
	padding-top: var(--r5);
	border-top: var(--randdikte) solid var(--kleur-rand);
}

.omliggend a {
	display: inline-flex;
	align-items: center;
	min-height: var(--raakvlak);
}

/* Straatpagina */

.straatnieuws {
	margin-top: var(--r7);
	padding-top: var(--r6);
	border-top: var(--randdikte) solid var(--kleur-rand);
}

.straatnieuws .sectiekop__titel {
	margin-bottom: var(--r5);
}

/* Documenten */

.documentgroep + .documentgroep {
	margin-top: var(--r6);
}

.documentgroep__kop {
	padding-bottom: var(--r2);
	border-bottom: var(--randdikte) solid var(--kleur-rand);
}

.documentlijst {
	margin: 0;
	padding: 0;
	list-style: none;
}

.documentlijst a {
	display: flex;
	align-items: center;
	gap: var(--r3);
	min-height: var(--raakvlak);
	padding: var(--r3) var(--r2);
	border-bottom: var(--randdikte) solid var(--kleur-rand);
	color: var(--kleur-tekst);
	text-decoration: none;
}

.documentlijst a:hover {
	background: var(--kleur-primair-licht);
	color: var(--kleur-primair-donker);
}

.documentlijst__titel {
	flex: 1;
	font-weight: 600;
}

.documentlijst__kenmerk {
	color: var(--kleur-tekst-zacht);
	font-size: var(--maat-klein);
	white-space: nowrap;
}

/* Buurtpreventie */

.groepen,
.aanmelden {
	margin-top: var(--r7);
}

.groepen__lijst {
	margin: 0;
	padding: 0;
	list-style: none;
}

.groepen__lijst li {
	display: flex;
	flex-wrap: wrap;
	gap: var(--r2) var(--r4);
	align-items: baseline;
	padding-block: var(--r2);
	border-bottom: var(--randdikte) solid var(--kleur-rand);
}

.groepen__naam {
	display: inline-flex;
	align-items: center;
	min-height: var(--raakvlak);
	font-weight: 600;
}

.groepen__datum,
.groepen__waarschuwing {
	color: var(--kleur-tekst-zacht);
	font-size: var(--maat-klein);
}

.avg {
	margin-block: var(--r5);
	padding: var(--r5);
	background: var(--kleur-vlak);
	border: var(--randdikte) solid var(--kleur-rand);
	border-radius: var(--radius);
}

.avg__kop {
	margin-top: 0;
	font-size: var(--maat-h3);
}

.avg ul {
	padding-left: var(--r5);
}

.avg li + li {
	margin-top: var(--r2);
}

/* Contact */

.contactregel {
	display: flex;
	align-items: center;
	gap: var(--r2);
	font-size: var(--maat-groot);
}

/* Wijkkaart */

.wijkkaart {
	margin: var(--r6) 0;
	padding: var(--r5);
	background: var(--kleur-vlak);
	border: var(--randdikte) solid var(--kleur-rand);
	border-radius: var(--radius-groot);
	overflow-x: auto;
}

.wijkkaart svg {
	width: 100%;
	height: auto;
}

.wijkkaart a:hover [class*="camp"],
.wijkkaart a:focus [class*="camp"] {
	fill: var(--kleur-accent);
}

.kaart__bron {
	color: var(--kleur-tekst-zacht);
	font-size: var(--maat-klein);
}

/* Subpagina's onder een gewone pagina */

.subpaginas {
	margin-top: var(--r7);
	padding-top: var(--r5);
	border-top: var(--randdikte) solid var(--kleur-rand);
}

/* De wijkkaart, getekend op de werkelijke ligging van de straten. */

.wijkkaart__svg {
	display: block;
	color: var(--kleur-primair);
}

.kaart-label {
	font-family: var(--font-tekst);
	font-size: 15px;
	font-weight: 600;
	fill: var(--kleur-tekst);
	/* De halo houdt de naam leesbaar waar hij over een straat valt. */
	paint-order: stroke;
	stroke: var(--kleur-vlak);
	stroke-width: 4px;
	stroke-linejoin: round;
}

.kaart-baan-lijn {
	stroke: var(--kleur-accent);
}

.kaart-straat {
	cursor: pointer;
}

.kaart-straat:hover .kaart-camp-lijn,
.kaart-straat:focus-visible .kaart-camp-lijn,
.kaart-straat:hover .kaart-baan-lijn,
.kaart-straat:focus-visible .kaart-baan-lijn {
	stroke: var(--kleur-accent-donker);
	stroke-width: 13;
}

.kaart-straat:focus-visible {
	outline: 3px solid var(--kleur-focus);
	outline-offset: 4px;
}

.wijkkaart__bron {
	margin: var(--r3) 0 0;
	color: var(--kleur-tekst-zacht);
	font-size: var(--maat-klein);
}

/* De hero: tekst naast het kaartblad. */

.hero {
	display: grid;
	gap: var(--r5);
	padding-block: var(--r6) var(--r5);
}

@media (width >= 60rem) {
	.hero {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
		gap: var(--r6);
		align-items: center;
	}
}

.hero__tekst {
	max-width: var(--breedte-smal);
}

.hero__kaart {
	margin: 0;
}

/* Het blad ligt op het papier, met een kaderlijn eromheen zoals een kaartblad
   die heeft. */
.hero__blad {
	padding: var(--r3);
	background: var(--kleur-vlak);
	border: var(--randdikte) solid var(--kleur-kader);
	box-shadow: var(--schaduw-zacht);
}

.hero__blad svg {
	display: block;
	width: 100%;
	height: auto;
	color: var(--kleur-primair);
}

/* In de hero is de kaart te klein om de veldnamen te kunnen lezen. Ze weglaten
   is eerlijker dan ze onleesbaar afdrukken; op de kaartpagina staan ze wel. */
.hero__blad .kaart-label {
	display: none;
}

.hero__kaart figcaption {
	margin-top: var(--r2);
	color: var(--kleur-tekst-zacht);
	font-size: var(--maat-klein);
}

/* De negen percelen. */

.raster--percelen {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}

.perceel__link {
	display: grid;
	gap: var(--r1);
	height: 100%;
	min-height: var(--raakvlak);
	padding: var(--r3);
	background: var(--kleur-vlak);
	border: var(--randdikte) solid var(--kleur-kader);
	color: var(--kleur-tekst);
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.perceel__link:hover,
.perceel__link:focus-visible {
	background: var(--kleur-wash-groen);
	border-color: var(--kleur-primair);
	color: var(--kleur-tekst);
}

.perceel__label {
	color: var(--kleur-tekst-zacht);
	font-size: var(--maat-label);
	letter-spacing: var(--spatie-label);
	text-transform: uppercase;
}

.perceel__naam {
	font-family: var(--font-kop);
	font-size: var(--maat-h3);
	font-weight: 600;
	line-height: var(--regelhoogte-kop);
}

.perceel__regel {
	color: var(--kleur-tekst-zacht);
	font-size: var(--trap-3);
}

/* De Campsebaan is geen camp maar de weg ertussen, dus die krijgt de okerkleur
   die wegen op een kadastrale kaart hebben. */
.perceel--baan .perceel__link {
	background: var(--kleur-wash-oker);
	border-color: var(--kleur-oker);
}

.perceel--baan .perceel__link:hover,
.perceel--baan .perceel__link:focus-visible {
	background: var(--kleur-wash-oker);
	border-color: var(--kleur-accent);
}