/* ==========================================================================
   FW ME TU Delft – thema-styling
   Kleuren en lettertypes komen uit theme.json (var(--wp--preset--…)).
   ========================================================================== */

:root {
	--fw-navy: var(--wp--preset--color--navy, #0C2340);
	--fw-primair: var(--wp--preset--color--primair, #00A6D6);
	--fw-secundair: var(--wp--preset--color--secundair, #00B8C8);
	--fw-link: var(--wp--preset--color--link, #00739A);
	--fw-zacht: var(--wp--preset--color--tekst-zacht, #4A5A70);
	--fw-lichtblauw: var(--wp--preset--color--lichtblauw, #F2F6F9);
	--fw-ijsblauw: var(--wp--preset--color--ijsblauw, #E0F6F8);
	--fw-rand: var(--wp--preset--color--rand, #D9E2EA);
	--fw-lijn: #E4EAF0;
	--fw-rood: var(--wp--preset--color--rood, #C8102E);
	--fw-heading: var(--wp--preset--font-family--heading, "Roboto Slab", Georgia, serif);
	--fw-body: var(--wp--preset--font-family--body, Roboto, Arial, sans-serif);

	/* Pictogrammen (lijniconen, gekleurd via currentColor) */
	--fw-i-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='17' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18M8 14h2M14 14h2M8 17h2'/%3E%3C/svg%3E");
	--fw-i-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l8 3v6c0 5-3.5 9-8 11-4.5-2-8-6-8-11V5z'/%3E%3Cpath d='M8.5 12l2.5 2.5 4.5-5'/%3E%3C/svg%3E");
	--fw-i-chat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3Cpath d='M8 9h8M8 13h5'/%3E%3C/svg%3E");
	--fw-i-lathe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 3v3M12 18v3M3 12h3M18 12h3'/%3E%3C/svg%3E");
	--fw-i-mill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6v4H9z'/%3E%3Cpath d='M12 7v6'/%3E%3Cpath d='M10 13h4l-1 4h-2z'/%3E%3Cpath d='M4 21h16'/%3E%3C/svg%3E");
	--fw-i-pen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21l4-1L19 8l-3-3L4 17z'/%3E%3Cpath d='M14 7l3 3'/%3E%3C/svg%3E");
	--fw-i-gear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2v3M12 19v3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M2 12h3M19 12h3M4.2 19.8l2.1-2.1M17.7 6.3l2.1-2.1'/%3E%3C/svg%3E");
	--fw-i-ruler: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8h20v8H2z'/%3E%3Cpath d='M6 8v3M10 8v4M14 8v3M18 8v4'/%3E%3C/svg%3E");
	--fw-i-cap: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9l10-5 10 5-10 5z'/%3E%3Cpath d='M6 11v5c0 1.5 3 3 6 3s6-1.5 6-3v-5'/%3E%3C/svg%3E");
	--fw-i-glasses: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 10h20'/%3E%3Cpath d='M3 10v3a3 3 0 0 0 3 3h2.5a3 3 0 0 0 3-3v-1h1v1a3 3 0 0 0 3 3H18a3 3 0 0 0 3-3v-3'/%3E%3C/svg%3E");
	--fw-i-boot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h5v9l7 3a3 3 0 0 1 2 3v1H4V3z'/%3E%3Cpath d='M4 19v2h16v-2'/%3E%3C/svg%3E");
	--fw-i-coat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3l4 3 4-3 4 3-2 5h-2v10H8V11H6L4 6z'/%3E%3Cpath d='M12 6v15'/%3E%3C/svg%3E");
	--fw-i-nofood: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 8h10l-1 12H8z'/%3E%3Cpath d='M12 8V3'/%3E%3Cpath d='M3 21L21 3'/%3E%3C/svg%3E");
	--fw-i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E");
	--fw-i-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* --- Basis ---------------------------------------------------------------- */

.wp-site-blocks > * + * {
	margin-block-start: 0;
}

.fw-main > *,
.fw-home-content > * {
	margin-block: 0;
}

a {
	text-underline-offset: 2px;
}

:where(a, button, summary):focus-visible {
	outline: 3px solid var(--fw-primair);
	outline-offset: 2px;
	border-radius: 4px;
}

.fw-eyebrow {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fw-link);
}

.fw-lead {
	font-size: 19px;
	line-height: 1.6;
}

.fw-muted {
	color: var(--fw-zacht);
}

.fw-button-dark .wp-block-button__link {
	background: var(--fw-navy);
	color: #FFFFFF;
}

.fw-button-dark .wp-block-button__link:hover {
	background: #14325A;
	color: #FFFFFF;
}

.wp-block-button.is-style-outline > .wp-block-button__link {
	border: 2px solid currentColor;
	padding: 12px 20px;
	background: transparent;
	color: var(--fw-navy);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--fw-navy);
	color: #FFFFFF;
}

/* --- Kopbalk -------------------------------------------------------------- */

.fw-header {
	position: relative;
	z-index: 20;
	padding-block: 12px;
	background: #FFFFFF;
	border-bottom: 1px solid var(--fw-rand);
}

.fw-header__inner {
	gap: 12px 16px;
	align-items: center;
}

.fw-brand {
	gap: 12px;
	align-items: center;
}

.fw-brand__text {
	gap: 2px;
}

.fw-brand .wp-block-site-title {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
}

.fw-brand .wp-block-site-title a {
	color: var(--fw-navy);
	text-decoration: none;
}

.fw-brand .wp-block-site-tagline {
	margin: 0;
	font-size: 13px;
	color: var(--fw-zacht);
}

.fw-mainnav {
	font-size: 15px;
	font-weight: 500;
}

/* Ruimte tussen de menu-items op desktop */
.fw-mainnav .wp-block-navigation__container {
	gap: 4px 22px;
}

.fw-brand .fw-brand__name {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
}

.fw-brand .fw-brand__name a {
	color: var(--fw-navy);
	text-decoration: none;
}

.fw-brand .fw-brand__sub {
	margin: 0;
	font-size: 13px;
	line-height: 1.3;
	color: var(--fw-zacht);
}

.fw-mainnav .wp-block-navigation-item__content {
	text-decoration: none;
}

.fw-mainnav > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	padding: 10px 8px;
}

.fw-mainnav .wp-block-navigation__submenu-container {
	min-width: 280px !important;
	padding: 8px !important;
	border: 1px solid var(--fw-rand) !important;
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(12, 35, 64, 0.14);
}

.fw-mainnav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 10px 12px;
	border-radius: 8px;
}

.fw-mainnav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var(--fw-lichtblauw);
}

.fw-mainnav .current-menu-item > .wp-block-navigation-item__content {
	font-weight: 700;
}

.fw-header__actions {
	gap: 16px;
	align-items: center;
}

.fw-lang {
	margin: 0;
	font-size: 14px;
	color: var(--fw-zacht);
}

.fw-lang a {
	text-decoration: none;
}

.fw-header__rooster .wp-block-button__link {
	padding: 12px 18px;
	font-size: 15px;
}

/* Mobiel menu (uitgeklapt paneel) */
.fw-mainnav .wp-block-navigation__responsive-container.is-menu-open {
	padding: 24px 16px 32px;
	background: #FFFFFF;
	color: var(--fw-navy);
}

.fw-mainnav .is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 48px;
}

.fw-mainnav .is-menu-open .wp-block-navigation__container {
	gap: 0 !important;
	width: 100%;
}

.fw-mainnav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
	width: 100%;
	padding: 6px 0 10px;
	border-bottom: 1px solid var(--fw-lijn);
	font-size: 18px;
	font-weight: 700;
}

.fw-mainnav .is-menu-open .wp-block-navigation__submenu-container {
	min-width: 0 !important;
	padding: 4px 0 0 12px !important;
	border: 0 !important;
	border-left: 3px solid var(--fw-primair) !important;
	border-radius: 0;
	box-shadow: none;
	font-size: 16px;
	font-weight: 400;
}

.fw-mainnav .wp-block-navigation__responsive-container-open {
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--fw-rand);
	border-radius: 8px;
}

@media (max-width: 599px) {
	.fw-lang {
		display: none;
	}

	.fw-header .fw-mainnav {
		order: 3;
	}

	.fw-header__actions {
		margin-left: auto;
	}

	.fw-brand .fw-brand__sub {
		display: none;
	}
}

/* --- Secties -------------------------------------------------------------- */

.fw-section {
	padding-block: 80px;
}

.fw-section--first {
	padding-top: 96px;
}

.fw-section--tint {
	background: var(--fw-lichtblauw);
}

.fw-intro {
	max-width: 720px;
	gap: 12px;
}

.fw-intro > * {
	margin: 0;
}

.fw-intro p:not(.fw-eyebrow) {
	font-size: 17px;
	color: var(--fw-zacht);
}

@media (max-width: 781px) {
	.fw-section,
	.fw-section--first {
		padding-block: 48px;
	}
}

/* --- Introductie (hero) --------------------------------------------------- */

.fw-hero {
	padding-block: 72px 136px;
	background: var(--fw-navy);
	color: #FFFFFF;
}

.fw-hero__inner {
	gap: 48px;
}

.fw-hero__text {
	flex: 1 1 520px;
	min-width: 0;
	gap: 20px;
}

.fw-hero__text > * {
	margin: 0;
}

.fw-hero .fw-eyebrow {
	color: var(--fw-secundair);
}

.fw-hero h1,
.fw-hero h2 {
	color: #FFFFFF;
}

.fw-hero h1 {
	font-size: clamp(36px, 4.6vw, 56px);
	line-height: 1.1;
}

.fw-hero .fw-lead {
	max-width: 620px;
	color: #D6E3EE;
}

.fw-hero .is-style-outline > .wp-block-button__link {
	color: #FFFFFF;
}

.fw-hero .is-style-outline > .wp-block-button__link:hover {
	background: #FFFFFF;
	color: var(--fw-navy);
}

.fw-hero__card {
	flex: 1 1 320px;
	min-width: 0;
	gap: 16px;
	padding: 28px;
	background: #14325A;
	border: 1px solid #24477A;
	border-radius: 16px;
}

.fw-hero__card > * {
	margin: 0;
}

.fw-hero__card h2 {
	font-size: 20px;
}

.fw-numbered {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: fw-num;
}

.fw-numbered li {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	line-height: 1.5;
	color: #E6EEF5;
	counter-increment: fw-num;
}

.fw-numbered li::before {
	content: counter(fw-num);
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--fw-primair);
	color: var(--fw-navy);
	font-size: 14px;
	font-weight: 700;
}

@media (max-width: 781px) {
	.fw-hero {
		padding-block: 40px 104px;
	}
}

/* --- Direct naar ---------------------------------------------------------- */

.fw-direct__panel {
	margin-top: -80px !important;
	padding: 32px;
	background: #FFFFFF;
	border-radius: 16px;
	box-shadow: 0 12px 40px rgba(12, 35, 64, 0.14);
}

.fw-direct__head {
	align-items: baseline;
	gap: 8px;
	margin-bottom: 20px;
}

.fw-direct__head > * {
	margin: 0;
}

.fw-direct__head h2 {
	font-size: 24px;
}

.fw-direct__head p {
	font-size: 14px;
	color: var(--fw-zacht);
}

.fw-tile {
	position: relative;
	gap: 10px;
	padding: 20px;
	background: #FFFFFF;
	border: 1px solid var(--fw-rand);
	border-radius: 12px;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.fw-tile--accent {
	background: #F2F8FB;
}

.fw-tile:hover {
	border-color: var(--fw-primair);
	box-shadow: 0 6px 20px rgba(12, 35, 64, 0.08);
}

.fw-tile > * {
	margin: 0;
}

.fw-tile__title {
	font-family: var(--fw-body);
	font-size: 17px;
	line-height: 1.3;
}

.fw-tile__title a {
	color: var(--fw-navy);
	text-decoration: none;
}

/* De hele tegel is klikbaar */
.fw-tile__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 12px;
}

.fw-tile__title a:focus-visible {
	outline: none;
}

.fw-tile:has(a:focus-visible) {
	outline: 3px solid var(--fw-primair);
	outline-offset: 2px;
}

.fw-tile p {
	font-size: 14px;
	line-height: 1.5;
	color: var(--fw-zacht);
}

.fw-tile .fw-tile__meta {
	margin-top: auto;
	font-size: 13px;
	font-weight: 700;
	color: var(--fw-link);
}

@media (max-width: 599px) {
	.fw-direct__panel {
		padding: 20px 16px;
	}

	.fw-tiles {
		gap: 10px !important;
	}

	/* Op een telefoon worden de tegels lijstregels */
	.fw-tile {
		display: grid !important;
		grid-template-columns: 40px 1fr;
		column-gap: 14px;
		row-gap: 2px;
		align-items: center;
		padding: 12px 14px;
	}

	.fw-tile .fw-icon {
		grid-row: 1 / span 2;
		width: 40px;
		height: 40px !important;
	}

	.fw-tile .fw-tile__meta {
		display: none;
	}
}

/* --- Pictogrammen --------------------------------------------------------- */

.fw-icon {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px !important;
	margin: 0;
	padding: 0;
	border-radius: 10px;
	background: var(--fw-primair);
	color: var(--fw-navy);
	box-sizing: border-box;
}

.fw-icon::before {
	content: "";
	width: 22px;
	height: 22px;
	background: currentColor;
	-webkit-mask: var(--fw-icon) center / contain no-repeat;
	mask: var(--fw-icon) center / contain no-repeat;
}

.fw-icon--soft {
	background: var(--fw-ijsblauw);
}

.fw-icon--round {
	width: 56px;
	height: 56px !important;
	border-radius: 50%;
	background: var(--fw-navy);
	color: #FFFFFF;
}

.fw-icon--round::before {
	width: 30px;
	height: 30px;
}

.fw-icon--forbidden {
	background: #FFFFFF;
	border: 3px solid var(--fw-rood);
	color: var(--fw-rood);
}

.fw-icon--forbidden::before {
	width: 26px;
	height: 26px;
}

.fw-icon--calendar { --fw-icon: var(--fw-i-calendar); }
.fw-icon--shield   { --fw-icon: var(--fw-i-shield); }
.fw-icon--chat     { --fw-icon: var(--fw-i-chat); }
.fw-icon--lathe    { --fw-icon: var(--fw-i-lathe); }
.fw-icon--mill     { --fw-icon: var(--fw-i-mill); }
.fw-icon--pen      { --fw-icon: var(--fw-i-pen); }
.fw-icon--gear     { --fw-icon: var(--fw-i-gear); }
.fw-icon--ruler    { --fw-icon: var(--fw-i-ruler); }
.fw-icon--cap      { --fw-icon: var(--fw-i-cap); }
.fw-icon--glasses  { --fw-icon: var(--fw-i-glasses); }
.fw-icon--boot     { --fw-icon: var(--fw-i-boot); }
.fw-icon--coat     { --fw-icon: var(--fw-i-coat); }
.fw-icon--nofood   { --fw-icon: var(--fw-i-nofood); }

/* --- Vier stappen --------------------------------------------------------- */

.fw-step {
	gap: 12px;
	padding-top: 20px;
	border-top: 3px solid var(--fw-primair);
}

.fw-step > * {
	margin: 0;
}

.fw-step__num {
	font-family: var(--fw-heading);
	font-size: 32px;
	font-weight: 700;
	line-height: 1;
	color: var(--fw-link);
}

.fw-step h3 {
	font-family: var(--fw-body);
	font-size: 19px;
}

.fw-step p:not(.fw-step__num):not(.fw-step__link) {
	font-size: 15px;
	color: var(--fw-zacht);
}

.fw-step__link a {
	font-size: 15px;
	font-weight: 700;
}

/* --- Twee kolommen (tekst + aside) ---------------------------------------- */

.fw-split {
	gap: 48px;
}

.fw-split__text {
	flex: 1 1 440px;
	min-width: 0;
	gap: 20px;
}

.fw-split__text > * {
	margin: 0;
}

.fw-split__aside {
	flex: 1 1 400px;
	min-width: 0;
}

.fw-checklist {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 0;
	list-style: none;
}

.fw-checklist li {
	position: relative;
	padding-left: 32px;
	line-height: 1.5;
}

.fw-checklist li::before {
	content: "";
	position: absolute;
	top: 3px;
	left: 0;
	width: 20px;
	height: 20px;
	background: var(--fw-link);
	-webkit-mask: var(--fw-i-check) center / contain no-repeat;
	mask: var(--fw-i-check) center / contain no-repeat;
}

.fw-ppe {
	gap: 14px;
	padding: 24px;
	background: #FFFFFF;
	border-radius: 12px;
}

.fw-ppe > * {
	margin: 0;
}

.fw-ppe .fw-ppe__title {
	font-size: 17px;
	font-weight: 700;
	color: var(--fw-navy);
}

.fw-ppe p {
	font-size: 14px;
	line-height: 1.5;
	color: var(--fw-zacht);
}

@media (max-width: 599px) {
	.fw-ppe {
		padding: 16px;
	}

	.fw-split__aside.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* --- Diensten ------------------------------------------------------------- */

.fw-service {
	gap: 16px;
	padding: 28px;
	border: 1px solid var(--fw-rand);
	border-radius: 14px;
}

.fw-service > * {
	margin: 0;
}

.fw-service details > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 44px;
	font-size: 20px;
	font-weight: 700;
	list-style: none;
	cursor: pointer;
}

.fw-service details > summary::-webkit-details-marker {
	display: none;
}

.fw-service details > summary::after {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	background: var(--fw-link);
	-webkit-mask: var(--fw-i-chevron) center / contain no-repeat;
	mask: var(--fw-i-chevron) center / contain no-repeat;
	transition: transform 0.2s;
}

.fw-service details[open] > summary::after {
	transform: rotate(180deg);
}

.fw-service details > p {
	margin: 4px 0 16px;
	font-size: 15px;
	color: var(--fw-zacht);
}

@media (min-width: 782px) {
	/* Op desktop staan de kaarten altijd open (alleen als het script draait) */
	.fw-js .fw-service details > summary {
		cursor: default;
		pointer-events: none;
	}

	.fw-js .fw-service details > summary::after {
		display: none;
	}
}

@media (max-width: 781px) {
	.fw-services {
		gap: 10px !important;
	}

	.fw-service {
		padding: 4px 16px;
		border-radius: 12px;
	}

	.fw-service .fw-icon {
		display: none;
	}

	.fw-service details > summary {
		min-height: 60px;
		font-size: 17px;
	}
}

.fw-linklist {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--fw-lijn);
}

.fw-linklist li {
	border-bottom: 1px solid var(--fw-lijn);
}

.fw-linklist a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-height: 44px;
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
	color: var(--fw-navy);
}

.fw-linklist a::after {
	content: "›";
	font-size: 18px;
	color: var(--fw-link);
}

.fw-linklist a:hover {
	color: var(--fw-link);
}

/* --- Kom langs ------------------------------------------------------------ */

.fw-map {
	margin: 0;
}

.fw-map img {
	width: 100%;
	height: auto;
	border-radius: 16px;
}

/* --- Footer --------------------------------------------------------------- */

.fw-footer {
	padding-block: 56px 32px;
	background: var(--fw-navy);
	color: #D6E3EE;
	font-size: 15px;
}

.fw-footer p {
	margin: 0;
}

.fw-footer a {
	color: #FFFFFF;
	text-decoration: none;
}

.fw-footer a:hover {
	color: #FFFFFF;
	text-decoration: underline;
}

.fw-footer__cols {
	gap: 40px;
}

.fw-footer__cols > * {
	flex: 1 1 180px;
	min-width: 0;
	gap: 10px;
}

.fw-footer__cols > :first-child {
	flex: 2 1 280px;
}

.fw-footer__title {
	font-family: var(--fw-heading);
	font-size: 20px;
	font-weight: 700;
	color: #FFFFFF;
}

.fw-footer__label {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--fw-secundair);
}

.fw-footer ul {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fw-footer__bottom {
	gap: 12px;
	margin-top: 40px !important;
	padding-top: 24px;
	border-top: 1px solid #24477A;
	font-size: 14px;
}

/* --- Subpagina's ---------------------------------------------------------- */

.fw-page-hero {
	padding-block: 40px 48px;
	background: var(--fw-navy);
	color: #FFFFFF;
}

.fw-page-hero__inner {
	gap: 16px;
}

.fw-page-hero__inner > * {
	margin: 0;
}

.fw-page-hero h1 {
	color: #FFFFFF;
}

.fw-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 14px;
	color: #B9CCDD;
}

.fw-breadcrumb a {
	color: #FFFFFF;
}

.fw-page-body {
	padding-block: 48px 80px;
}

.fw-with-sidebar {
	gap: 48px;
}

.fw-sidebar-col {
	flex: 1 1 240px;
	min-width: 0;
}

.fw-content {
	flex: 999 1 560px;
	min-width: 0;
}

.fw-content > :first-child {
	margin-top: 0;
}

.fw-sidebar {
	gap: 24px;
}

.fw-sidebar > * {
	margin: 0;
}

.fw-sidebar__label {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fw-zacht);
}

.fw-sidebar-nav,
.fw-sidebar-nav .wp-block-navigation__container {
	width: 100%;
	gap: 4px !important;
}

.fw-sidebar-nav .wp-block-navigation-item {
	width: 100%;
}

.fw-sidebar-nav .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 44px;
	padding: 0 14px;
	border-radius: 8px;
	font-size: 15px;
	text-decoration: none;
	box-sizing: border-box;
}

.fw-sidebar-nav .wp-block-navigation-item__content:hover {
	background: var(--fw-lichtblauw);
}

.fw-sidebar-nav .current-menu-item > .wp-block-navigation-item__content {
	background: #E5F6FB;
	font-weight: 700;
	box-shadow: inset 3px 0 0 var(--fw-primair);
}

.fw-note {
	gap: 8px;
	padding: 20px 24px;
	background: var(--fw-lichtblauw);
	border-radius: 12px;
}

.fw-note > * {
	margin: 0;
}

.fw-note p {
	font-size: 15px;
	line-height: 1.6;
	color: var(--fw-zacht);
}

.fw-note .fw-note__title {
	font-size: 16px;
	font-weight: 700;
	color: var(--fw-navy);
}

/* Huisregels-pagina */
.fw-chip {
	gap: 12px;
	align-items: center;
	padding: 12px 14px;
	border: 1px solid var(--fw-rand);
	border-radius: 12px;
}

.fw-chip > * {
	margin: 0;
}

.fw-chip p {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
}

.fw-chip .fw-icon--round {
	width: 44px;
	height: 44px !important;
}

.fw-chip .fw-icon--round::before {
	width: 24px;
	height: 24px;
}

.fw-rules {
	padding-left: 2em;
	border-top: 1px solid var(--fw-lijn);
}

.fw-rules li {
	padding: 12px 0 12px 8px;
	border-bottom: 1px solid var(--fw-lijn);
	line-height: 1.6;
}

.fw-rules li::marker {
	font-weight: 700;
	color: var(--fw-link);
}


/* ==========================================================================
   1.0.2 – rasters en kolommen robuust maken
   ========================================================================== */

/* Omhullende kolom van secties: gewone kolom zonder terugloop */
.fw-section > .alignwide.is-vertical {
	display: flex !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	align-items: stretch !important;
	height: auto !important;
}

/* Rasters: rijen zo hoog als de inhoud, nooit uitgerekt */
.fw-main .is-layout-grid {
	height: auto !important;
	min-height: 0 !important;
	grid-template-rows: none !important;
	grid-auto-rows: auto !important;
	align-content: start !important;
}

.fw-step,
.fw-service,
.fw-tile,
.fw-ppe {
	height: auto !important;
	min-height: 0 !important;
}

/* Vier stappen: vier naast elkaar zodra het past, anders twee of één */
.fw-section--first .is-layout-grid {
	grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)) !important;
}

/* Dienstenkaarten: elke kaart zo hoog als zijn eigen inhoud */
.fw-services.is-layout-grid {
	align-items: start !important;
}

/* Diensten op desktop ook zonder script zichtbaar (moderne browsers) */
@media (min-width: 782px) {
	.fw-service details::details-content {
		content-visibility: visible;
		display: block;
		height: auto;
	}
}

/* Openklappen blokkeren en pijltje verbergen alleen als het script draait */
@media (min-width: 782px) {
	html:not(.fw-js) .fw-service details > summary {
		cursor: pointer;
		pointer-events: auto;
	}
}

/* ==========================================================================
   1.2.0 – meebewegend zijmenu
   ========================================================================== */

.fw-context-nav {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.fw-context-nav > * {
	margin: 0;
}

.fw-sidebar-nav ul {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fw-sidebar-nav a {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 6px 14px;
	border-radius: 8px;
	font-size: 15px;
	line-height: 1.35;
	color: var(--fw-navy);
	text-decoration: none;
	box-sizing: border-box;
}

.fw-sidebar-nav a:hover {
	background: var(--fw-lichtblauw);
	color: var(--fw-navy);
}

.fw-sidebar-nav a[aria-current="page"] {
	background: #E5F6FB;
	font-weight: 700;
	box-shadow: inset 3px 0 0 var(--fw-primair);
}

/* In de editor: de plaatshouder rustig tonen */
.editor-styles-wrapper .fw-sidebar-auto {
	padding: 12px 14px;
	border: 1px dashed var(--fw-rand);
	border-radius: 8px;
	font-size: 14px;
	color: var(--fw-zacht);
}

/* Op telefoon en tablet: eerst de tekst, daarna "Meer in …" */
@media (max-width: 781px) {
	.fw-with-sidebar .fw-content {
		order: 1;
	}

	.fw-with-sidebar .fw-sidebar-col {
		order: 2;
		padding-top: 24px;
		border-top: 1px solid var(--fw-lijn);
	}
}

/* ==========================================================================
   1.3.0 – paginainhoud: tabellen, uitklapblokken, teamkaarten, nieuwe iconen
   ========================================================================== */

:root {
	--fw-i-printer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 3h16v4H4z'/%3E%3Cpath d='M12 7v5'/%3E%3Cpath d='M9 12h6l-1.5 3h-3z'/%3E%3Cpath d='M6 21h12M8 18h8'/%3E%3Cpath d='M4 7v14M20 7v14'/%3E%3C/svg%3E");
	--fw-i-laser: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 2h6v5H9z'/%3E%3Cpath d='M12 7v8'/%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M5 17l3 2M19 17l-3 2M12 15v2'/%3E%3C/svg%3E");
}

.fw-icon--printer { --fw-icon: var(--fw-i-printer); }
.fw-icon--laser   { --fw-icon: var(--fw-i-laser); }

/* Inhoud van subpagina's */
.fw-content > * + *,
.fw-page-body .wp-block-post-content > * + * {
	margin-block-start: 20px;
}

.fw-content h2,
.fw-page-body .wp-block-post-content h2 {
	margin-block-start: 40px;
	font-size: 22px;
}

.fw-content .fw-lead,
.fw-page-body .wp-block-post-content .fw-lead {
	color: var(--fw-navy);
}

/* Tabellen: rustig, met kopregel in lichtblauw en scrollbaar op mobiel */
.wp-block-post-content .wp-block-table {
	overflow-x: auto;
	margin-inline: 0;
}

.wp-block-post-content .wp-block-table table {
	min-width: 520px;
	border-collapse: collapse;
	font-size: 15px;
	line-height: 1.5;
}

.wp-block-post-content .wp-block-table table.has-fixed-layout {
	table-layout: auto;
}

.wp-block-post-content .wp-block-table th,
.wp-block-post-content .wp-block-table td {
	padding: 10px 14px;
	border: 0;
	border-bottom: 1px solid var(--fw-lijn);
	text-align: left;
	vertical-align: top;
}

.wp-block-post-content .wp-block-table thead {
	border: 0;
}

.wp-block-post-content .wp-block-table th {
	background: var(--fw-lichtblauw);
	font-weight: 700;
	color: var(--fw-navy);
}

/* Uitklapblokken in de inhoud */
.wp-block-post-content .wp-block-details {
	padding: 0 18px;
	border: 1px solid var(--fw-rand);
	border-radius: 12px;
}

.wp-block-post-content .wp-block-details > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 52px;
	font-weight: 700;
	list-style: none;
	cursor: pointer;
}

.wp-block-post-content .wp-block-details > summary::-webkit-details-marker {
	display: none;
}

.wp-block-post-content .wp-block-details > summary::after {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	background: var(--fw-link);
	-webkit-mask: var(--fw-i-chevron) center / contain no-repeat;
	mask: var(--fw-i-chevron) center / contain no-repeat;
	transition: transform 0.2s;
}

.wp-block-post-content .wp-block-details[open] > summary::after {
	transform: rotate(180deg);
}

.wp-block-post-content .wp-block-details[open] {
	padding-bottom: 18px;
}

.wp-block-post-content .wp-block-details > :not(summary) {
	margin-block-start: 12px;
}

/* Knoppen in de inhoud iets ruimer van de tekst */
.wp-block-post-content .wp-block-buttons {
	margin-block: 28px;
}

/* Teamkaarten */
.fw-team {
	gap: 16px !important;
}

.fw-person {
	gap: 6px;
	padding: 20px;
	border: 1px solid var(--fw-rand);
	border-radius: 12px;
}

.fw-person > * {
	margin: 0 !important;
}

.fw-person .fw-person__name {
	font-size: 17px;
	font-weight: 700;
	color: var(--fw-navy);
}

.fw-person .fw-person__role {
	font-size: 14px;
	font-weight: 500;
	color: var(--fw-link);
}

.fw-person p:not([class]) {
	margin-top: 6px !important;
	font-size: 14px;
	line-height: 1.55;
	color: var(--fw-zacht);
}

/* 1.3.1 – knoppen op subpagina's allemaal in de hoofdkleur */
.fw-page-body .wp-block-post-content .wp-block-button.is-style-outline > .wp-block-button__link {
	padding: 14px 22px;
	border: 0;
	background: var(--fw-primair);
	color: var(--fw-navy);
}

.fw-page-body .wp-block-post-content .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--fw-secundair);
	color: var(--fw-navy);
}

/* 1.3.3 – pictogrammen in een horizontale rij (zoals de huisregel-blokjes) niet laten inklappen */
.wp-block-spacer.fw-icon {
	flex: 0 0 auto !important;
	width: 44px !important;
	min-width: 44px;
	max-width: none;
}

.wp-block-spacer.fw-icon--round {
	width: 56px !important;
	min-width: 56px;
	height: 56px !important;
}

.fw-chip .wp-block-spacer.fw-icon--round {
	width: 44px !important;
	min-width: 44px;
	height: 44px !important;
}

.fw-icon::before {
	flex: none;
}

@media (max-width: 599px) {
	.fw-tile .wp-block-spacer.fw-icon {
		width: 40px !important;
		min-width: 40px;
		height: 40px !important;
	}
}

/* 1.3.4 – huisregel-blokjes: tekst binnen het blok houden */
.fw-chips.is-layout-grid {
	grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)) !important;
}

.fw-chip p {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: break-word;
	hyphens: auto;
}