/* Begraafplaatsen en Crematorium Almere – huisstijl
   Kleuren en lettertypes volgen de bestaande site: PT Sans voor koppen en navigatie, Arial voor lopende tekst. */

@font-face {
	font-family: "PT Sans";
	src: url("../fonts/pt-sans-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "PT Sans";
	src: url("../fonts/pt-sans-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

:root {
	--groen: #788e39;
	--groen-donker: #5f7229;
	--groen-diep: #4f5e22;
	--blauw: #2d367f;
	--grijs: #6e6e6d;
	--tekst: #3d3d3c;
	--licht: #f1f2e9;
	--lijn: #dfe2d2;
	--wit: #ffffff;
	--kop-font: "PT Sans", Arial, Helvetica, sans-serif;
	--tekst-font: Arial, Helvetica, sans-serif;
	--breedte: 1140px;
	--leesbreedte: 44rem;
	--ruimte: clamp(2.5rem, 5vw, 4rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	font-family: var(--tekst-font);
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--tekst);
	background: var(--wit);
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--blauw); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--groen-diep); }
:focus-visible { outline: 3px solid var(--blauw); outline-offset: 3px; }

h1, h2, h3, h4 {
	font-family: var(--kop-font);
	font-weight: 700;
	color: var(--blauw);
	line-height: 1.2;
	margin: 0 0 .6em;
}
h1 { font-size: clamp(1.9rem, 3.4vw, 2.5rem); }
h2 { font-size: clamp(1.45rem, 2.4vw, 1.75rem); }
h3 { font-size: 1.2rem; color: var(--grijs); margin-top: 1.6em; }

p, ul, ol { margin: 0 0 1em; }
ul, ol { padding-left: 1.3em; }
li { margin-bottom: .35em; }

.skiplink {
	position: absolute; left: 1rem; top: -4rem; z-index: 100;
	background: var(--blauw); color: var(--wit); padding: .6rem 1rem; border-radius: 3px;
	font-family: var(--kop-font); font-weight: 700;
}
.skiplink:focus { top: 1rem; color: var(--wit); }

/* ---------- Header ---------- */
.kop { background: var(--wit); border-bottom: 1px solid var(--lijn); position: relative; z-index: 20; }
.kop__binnen {
	max-width: var(--breedte); margin: 0 auto; padding: 1rem 20px;
	display: flex; align-items: center; justify-content: space-between; gap: 2rem;
}
.kop__logo { flex: 0 0 auto; }
.kop__logo img { width: 280px; }

.nav { font-family: var(--kop-font); }
.nav__knop { display: none; }
.nav__lijst { list-style: none; margin: 0; padding: 0; display: flex; gap: .25rem; }
.nav__lijst > li { position: relative; margin: 0; }
.nav__lijst a {
	display: block; padding: .6rem .8rem; color: var(--grijs);
	font-weight: 700; font-size: 1rem; text-decoration: none;
}
.nav__lijst > li > a { border-bottom: 3px solid transparent; }
.nav__lijst > li > a:hover,
.nav__lijst > li.is-actief > a { color: var(--blauw); border-bottom-color: var(--groen); }
.nav__lijst a[aria-current="page"] { color: var(--blauw); }

.sub {
	list-style: none; margin: 0; padding: .4rem 0;
	position: absolute; left: 0; top: 100%; min-width: 300px;
	background: var(--wit); border-top: 3px solid var(--groen);
	box-shadow: 0 8px 24px rgba(45, 54, 127, .12);
	display: none;
}
.sub li { margin: 0; }
.sub a { font-weight: 400; padding: .5rem 1.1rem; }
.sub a:hover, .sub a[aria-current="page"] { background: var(--licht); color: var(--blauw); }
.sub .sub__diep a { padding-left: 2.1rem; font-size: .95rem; }
.has-sub:hover > .sub, .has-sub:focus-within > .sub { display: block; }
.sub-knop { display: none; }

/* ---------- Hero ---------- */
.hero { background: var(--licht); }
.hero img { width: 100%; height: clamp(180px, 30vw, 420px); object-fit: cover; }
.hero--smal img { height: clamp(120px, 16vw, 220px); }

/* ---------- Inhoud ---------- */
.inhoud { max-width: var(--breedte); margin: 0 auto; padding: 0 20px var(--ruimte); }
.paginakop { padding: 1.75rem 0 .5rem; max-width: var(--leesbreedte); }
.kruimel { font-family: var(--kop-font); font-size: .95rem; color: var(--grijs); margin: 0 0 .75rem; }
.kruimel ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; }
.kruimel li { margin: 0; }
.kruimel li + li::before { content: "»"; margin: 0 .45rem; color: var(--groen); }
.kruimel a { color: var(--grijs); }

.lead { font-size: 1.2rem; line-height: 1.55; color: var(--tekst); }

.blok { max-width: var(--leesbreedte); margin-top: var(--ruimte); }
.blok:first-child, .paginakop + .blok { margin-top: 1rem; }
.blok--breed { max-width: none; }

.knoppen { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }
.knop {
	display: inline-block; font-family: var(--kop-font); font-weight: 700; font-size: 1rem;
	background: var(--groen-donker); color: var(--wit); text-decoration: none;
	padding: .7rem 1.4rem; border-radius: 3px; transition: background-color .15s;
}
.knop:hover { background: var(--groen-diep); color: var(--wit); }
.knop--download { background: var(--wit); color: var(--groen-diep); box-shadow: inset 0 0 0 2px var(--groen-donker); }
.knop--download:hover { background: var(--licht); color: var(--groen-diep); }
.knop__type { font-weight: 400; }

.galerij { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin: 1.5rem 0 0; max-width: var(--breedte); }
.galerij figure { margin: 0; border-radius: 4px; overflow: hidden; background: var(--lijn); aspect-ratio: 3 / 2; }
.galerij img { width: 100%; height: 100%; object-fit: cover; }
.galerij--een { grid-template-columns: 1fr; max-width: var(--leesbreedte); }
.galerij--een figure { aspect-ratio: 810 / 330; }
.blok .galerij { width: min(var(--breedte) - 40px, 100vw - 40px); max-width: none; }
.blok .galerij--een { width: auto; }
.beeld { margin: 1.5rem 0; border-radius: 4px; overflow: hidden; }

/* Uitklapvragen */
.vraag { border-bottom: 1px solid var(--lijn); }
.vraag:first-of-type { border-top: 1px solid var(--lijn); }
h3 + .vraag { border-top: 1px solid var(--lijn); }
.vraag summary {
	list-style: none; cursor: pointer; position: relative;
	font-family: var(--kop-font); font-weight: 700; font-size: 1.05rem; color: var(--blauw);
	padding: 1rem 2.5rem 1rem 0;
}
.vraag summary::-webkit-details-marker { display: none; }
.vraag summary::after {
	content: ""; position: absolute; right: .4rem; top: 1.35rem;
	width: .6rem; height: .6rem; border-right: 2px solid var(--groen-donker); border-bottom: 2px solid var(--groen-donker);
	transform: rotate(45deg); transition: transform .15s;
}
.vraag[open] summary::after { transform: rotate(-135deg); top: 1.6rem; }
.vraag__antwoord { padding: 0 0 1rem; }

/* Gegevensblok (adres, tijden) */
.gegevens { display: grid; grid-template-columns: max-content 1fr; gap: .6rem 1.75rem; margin: 0; padding: 1.25rem 0 0; border-top: 2px solid var(--groen); }
.gegevens dt { font-family: var(--kop-font); font-weight: 700; color: var(--grijs); }
.gegevens dd { margin: 0; }
.gegevens dd p { margin: 0; }
.notitie { color: var(--grijs); font-size: .95rem; }

.paneel { background: var(--licht); border-radius: 4px; padding: 1.5rem 1.75rem; }
.paneel h2, .paneel h3 { margin-top: 0; }

.twee { display: grid; grid-template-columns: 7fr 5fr; gap: 3.5rem; align-items: start; }
.twee > * { min-width: 0; }

/* Kaarten (onderdelen van een locatie) */
.kaarten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.kaart { display: flex; flex-direction: column; }
.kaart__beeld { display: block; border-radius: 4px; overflow: hidden; aspect-ratio: 810 / 330; background: var(--lijn); margin-bottom: 1rem; }
.kaart__beeld img { width: 100%; height: 100%; object-fit: cover; }
.kaart h3 { color: var(--blauw); margin: 0 0 .4rem; font-size: 1.35rem; }
.kaart p { flex: 1; }
.kaart .knop { align-self: flex-start; }

/* Homepage */
.welkom { max-width: var(--leesbreedte); padding-top: 2rem; }
.locatie { margin-top: var(--ruimte); background: var(--licht); border-radius: 4px; overflow: hidden; }
.locatie__foto img { width: 100%; aspect-ratio: 8 / 3; object-fit: cover; }
.locatie__body { display: grid; grid-template-columns: 5fr 7fr; gap: 3rem; padding: 2rem 2.25rem 2.25rem; }
.locatie__groepen { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; border-left: 2px solid var(--groen); padding-left: 2rem; }
.locatie__groepen h3 { margin-top: 0; }
.vinklijst { list-style: none; padding: 0; }
.vinklijst li { position: relative; padding-left: 1.6rem; }
.vinklijst li::before {
	content: ""; position: absolute; left: .2rem; top: .45em;
	width: .45rem; height: .8rem; border-right: 2px solid var(--groen-donker); border-bottom: 2px solid var(--groen-donker);
	transform: rotate(40deg);
}
.subnav { list-style: none; padding: 0; margin: 1.25rem 0 0; }
.subnav li { margin-bottom: .3rem; }

.melding {
	margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 2rem;
	border-left: 4px solid var(--blauw); background: var(--wit); box-shadow: inset 0 0 0 1px var(--lijn);
	padding: 1.1rem 1.5rem; border-radius: 0 4px 4px 0;
}
.melding p { margin: 0; }
.melding strong { font-family: var(--kop-font); color: var(--blauw); font-size: 1.1rem; }

/* Renovatie: planning */
.tijdlijn { list-style: none; margin: 0; padding: 0; }
.tijdlijn li { position: relative; margin: 0; padding: 0 0 1.25rem 1.75rem; }
.tijdlijn li::before {
	content: ""; position: absolute; z-index: 1; left: 0; top: .4rem;
	width: 12px; height: 12px; border-radius: 50%; background: var(--groen);
}
.tijdlijn li:not(:last-child)::after {
	content: ""; position: absolute; left: 5px; top: calc(.4rem + 6px); bottom: calc(-.4rem - 6px);
	width: 2px; background: var(--groen);
}
.tijdlijn__datum { display: block; font-family: var(--kop-font); font-weight: 700; color: var(--blauw); }
.tijdlijn__wat { display: block; color: var(--grijs); }

/* ---------- Footer ---------- */
.voet { background: var(--licht); color: var(--grijs); font-size: .98rem; }
.voet__binnen {
	max-width: var(--breedte); margin: 0 auto; padding: 3rem 20px 1.5rem;
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem;
}
.voet__titel { font-size: 1.05rem; color: var(--blauw); margin: 0 0 .6rem; }
.voet a { color: var(--grijs); }
.voet a:hover { color: var(--groen-diep); }
.voet__lijst { list-style: none; padding: 0; }
.voet__lijst li { margin-bottom: .3rem; }
.voet__onder { max-width: var(--breedte); margin: 0 auto; padding: 1.25rem 20px 2rem; border-top: 1px solid var(--lijn); font-size: .9rem; }

/* ---------- Responsief ---------- */
@media (max-width: 1000px) {
	.kop__logo img { width: 210px; }
	.nav__knop {
		display: inline-flex; align-items: center; gap: .6rem;
		font-family: var(--kop-font); font-weight: 700; font-size: 1rem; color: var(--grijs);
		background: none; border: 2px solid var(--lijn); border-radius: 3px; padding: .5rem .9rem; cursor: pointer;
	}
	.nav__knop::before {
		content: ""; width: 18px; height: 2px; background: currentColor;
		box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
	}
	.nav__knop[aria-expanded="true"]::before { display: none; }
	.nav__knop[aria-expanded="true"] { color: var(--blauw); }
	.nav__lijst {
		display: none; position: absolute; left: 0; right: 0; top: 100%;
		flex-direction: column; gap: 0; background: var(--licht);
		padding: .5rem 0 1rem; border-bottom: 3px solid var(--groen);
	}
	.nav.is-open .nav__lijst { display: flex; }
	.nav__lijst > li > a { border-bottom: 0; padding: .75rem 20px; }
	.nav__lijst > li.is-actief > a { color: var(--blauw); }
	.has-sub { display: grid; grid-template-columns: 1fr auto; }
	.sub-knop {
		display: block; background: none; border: 0; cursor: pointer; width: 3.25rem;
		position: relative; color: var(--grijs);
	}
	.sub-knop::after {
		content: ""; position: absolute; left: 50%; top: 45%; width: .55rem; height: .55rem;
		border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
		transform: translate(-50%, -50%) rotate(45deg); transition: transform .15s;
	}
	.sub-knop[aria-expanded="true"]::after { transform: translate(-50%, -20%) rotate(-135deg); }
	.sub {
		position: static; grid-column: 1 / -1; box-shadow: none; border-top: 0; min-width: 0;
		background: var(--licht); padding: 0 0 .5rem;
	}
	.has-sub:hover > .sub, .has-sub:focus-within > .sub { display: none; }
	.has-sub.is-open > .sub { display: block; }
	.sub a { padding: .55rem 20px .55rem 36px; }
	.sub .sub__diep a { padding-left: 52px; }
	.sub a:hover, .sub a[aria-current="page"] { background: var(--wit); }

	.twee, .locatie__body { grid-template-columns: 1fr; gap: 2rem; }
	.kaarten { grid-template-columns: 1fr 1fr; }
	.voet__binnen { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
	body { font-size: 1rem; }
	.kop__binnen { padding: .75rem 16px; gap: 1rem; }
	.kop__logo img { width: 170px; }
	.inhoud { padding: 0 16px var(--ruimte); }
	.kaarten, .locatie__groepen { grid-template-columns: 1fr; }
	.locatie__groepen { border-left: 0; padding-left: 0; border-top: 2px solid var(--groen); padding-top: 1.5rem; }
	.locatie__body { padding: 1.5rem 1.25rem; }
	.locatie__foto img { aspect-ratio: 3 / 2; }
	.gegevens { grid-template-columns: 1fr; gap: .15rem; }
	.gegevens dd { margin-bottom: .9rem; }
	.blok .galerij { width: auto; }
	.voet__binnen { grid-template-columns: 1fr; gap: 1.5rem; }
	.paneel { padding: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; }
}

@media print {
	.kop .nav, .hero, .voet__kolom:last-child, .skiplink { display: none; }
}

/* Aanvullingen */
.h3 { font-size: 1.2rem; }
.paneel .gegevens { border-top-color: var(--groen); }
.galerij--twee { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px) { .galerij--twee { grid-template-columns: 1fr; } }
.paneel > img { border-radius: 4px; margin-bottom: 1rem; }

/* Cookiemelding */
.cookiemelding {
	position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 50;
	max-width: 760px; margin: 0 auto;
	display: flex; align-items: center; gap: 1rem 1.5rem; flex-wrap: wrap;
	background: var(--wit); border-top: 4px solid var(--groen);
	box-shadow: 0 8px 32px rgba(45, 54, 127, .18); border-radius: 4px;
	padding: 1rem 1.25rem; font-size: .95rem;
}
.cookiemelding[hidden] { display: none; }
.cookiemelding p { margin: 0; flex: 1 1 320px; }
.cookiemelding__knop { border: 0; cursor: pointer; }
@media print { .cookiemelding { display: none; } }