/*
Theme Name: PF Hoogovens
Theme URI: https://www.pfhoogovens.nl
Description: Pensioenfonds Hoogovens WordPress theme
Author: Viface-IT
Version: 2.0
Text Domain: pfhoogovens
*/

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

* {
	margin: 0;
}

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

body {
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
	display: block;
	max-width: 100%;
}

input, button, textarea, select {
	font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
	overflow-wrap: break-word;
}

ul, ol {
	list-style: none;
	padding: 0;
}

a {
	color: inherit;
}

button {
	background: none;
	border: none;
	cursor: pointer;
}

.titillium-web-extralight {
	font-family: "Titillium Web", sans-serif;
	font-weight: 200;
	font-style: normal;
}

.titillium-web-light {
	font-family: "Titillium Web", sans-serif;
	font-weight: 300;
	font-style: normal;
}

.titillium-web-regular {
	font-family: "Titillium Web", sans-serif;
	font-weight: 400;
	font-style: normal;
}

.titillium-web-semibold {
	font-family: "Titillium Web", sans-serif;
	font-weight: 600;
	font-style: normal;
}

.titillium-web-bold {
	font-family: "Titillium Web", sans-serif;
	font-weight: 700;
	font-style: normal;
}

.titillium-web-black {
	font-family: "Titillium Web", sans-serif;
	font-weight: 900;
	font-style: normal;
}

.titillium-web-extralight-italic {
	font-family: "Titillium Web", sans-serif;
	font-weight: 200;
	font-style: italic;
}

.titillium-web-light-italic {
	font-family: "Titillium Web", sans-serif;
	font-weight: 300;
	font-style: italic;
}

.titillium-web-regular-italic {
	font-family: "Titillium Web", sans-serif;
	font-weight: 400;
	font-style: italic;
}

.titillium-web-semibold-italic {
	font-family: "Titillium Web", sans-serif;
	font-weight: 600;
	font-style: italic;
}

.titillium-web-bold-italic {
	font-family: "Titillium Web", sans-serif;
	font-weight: 700;
	font-style: italic;
}

:root {
	--c-hoogovens-primary1:		#123a7d;
	--c-hoogovens-primary2:		#ec6502;
	--c-hoogovens-secondary1:	#385a92;

	--c-blue-1:		#c6d0e0;
	--c-blue-2:		#e7ebf2;
	--c-blue-3:		#f0f3f7;

	--c-green-1:	#ade1c2;
	--c-green-2:	#d6f0e0;
	--c-green-3:	#eaf7ef;

	--c-yellow-1:	#f6e9a7;
	--c-yellow-2:	#faf4d3;
	--c-yellow-3:	#fdf9e9;

	--c-orange-1:	#f9cdae;
	--c-orange-2:	#fce6d6;
	--c-orange-3:	#fef3eb;

	--c-white:		#ffffff;
	--c-red:		#d41111;

  	--fill-body:			var(--c-blue-3);
  	--fill-text:			var(--c-hoogovens-primary1);
  	--fill-header:			var(--c-white);
  	--fill-btn:				var(--c-hoogovens-primary1);
  	--fill-bottom-lines: 	color-mix(in srgb, var(--c-white) 70%, transparent);

  	--size-icon: 1.6rem;
  	--fill-icon: var(--c-hoogovens-primary1);

  	--pad-hor: 4.8rem;
  	--pad-hor-small: 3.2rem;
  	--pad-vert: 2rem;

  	--max-width: 124rem;

  	--radius: 0.8rem;
}

html {
    font-size: 62.5%;
    overflow-x: hidden;
    overflow-y: scroll; /* always a scrollbar: no horizontal shift between pages */
}

body {
	font-family: "Titillium Web", sans-serif;
  	font-weight: 400;
  	font-size: 1.6rem;
  	font-style: normal;
  	color: var(--fill-text);
	background-color: var(--fill-body);
	background: linear-gradient(to bottom, var(--c-blue-2) 32rem, var(--fill-body) 32rem);
}

a {
	text-decoration: none;
	color: var(--c-hoogovens-primary1);
}

hr {
	height: 0.1rem;
	background-color: var(--c-blue-2);
	border: none;
}

.btn {
	--size-icon: 3.2rem;
	--fill-icon: var(--c-white);

	display: inline-flex;
	align-items: center;
	padding: 0.3rem;
	border-radius: 2rem;
	background-color: var(--fill-btn);
	color: var(--c-white);

	span:first-child {
		margin-left: 1.4rem;
		padding-bottom: 0.2rem;
	}

	& .icon {
		margin-right: 0.4rem;
		mask-size: 2.4rem;
		mask-position: center;
		mask-repeat: no-repeat;
	}
}

h1 {
	color: var(--c-hoogovens-primary2);
	font-size: 3.2rem;
	font-weight: 600;
}

.content-page { font-size: 1.7rem; }

.main-content {
	& > h1 {
		padding-bottom: 1.6rem;
		border-bottom: 0.1rem solid var(--c-blue-2);
		line-height: 1.2;
	}

	& h2 { font-size: 2.4rem; font-weight: 700; line-height: 1.25; }
	& h3 { font-size: 2rem; font-weight: 700; line-height: 1.3; }
	& h4 { font-size: 1.8rem; font-weight: 600; line-height: 1.3; }

	& .is-style-intro { font-size: 2rem; font-weight: 300; }

	& p a, & li a {
		text-decoration: underline;
		text-underline-offset: 0.2em;

		&:hover { color: var(--c-hoogovens-primary2); }
	}
}

.post-date {
	display: inline-block;
	padding: 0.2rem 1rem;
	border-radius: 1.2rem;
	background-color: var(--c-orange-2);
	font-size: 1.2rem;
	font-weight: 700;
	text-transform: uppercase;

	.main-content > & { margin-bottom: 0.8rem; }
}

.post-title {
	color: var(--c-hoogovens-primary2);

	.post-date + & { margin-top: 0; }

	& a { color: inherit; }
}

.icon {
	display: block;
	background-color: var(--fill-icon);
	width: var(--size-icon);
	height: var(--size-icon);
	border-radius: calc(var(--size-icon) * 0.5);
	flex-shrink: 0;
	mask-size: var(--size-icon);

	&.looking-glass { mask-image: url("img/looking-glass.svg"); }
	&.chevron-down { mask-image: url("img/chevron-down.svg"); }
	&.chevron-up { mask-image: url("img/chevron-up.svg"); }
	&.chevron-right { mask-image: url("img/chevron-right.svg"); }
	&.chevron-bullit-right { mask-image: url("img/chevron-bullit-right.svg"); }
	&.home { mask-image: url("img/home.svg"); }
	&.download { mask-image: url("img/download.svg"); }
	&.upload { mask-image: url("img/upload.svg"); }
	&.close { mask-image: url("img/close.svg"); }
	&.file-pdf { mask-image: url("img/file-pdf.svg"); }
	&.file-word { mask-image: url("img/file-word.svg"); }
	&.file-excel { mask-image: url("img/file-excel.svg"); }
	&.file-text { mask-image: url("img/file-text.svg"); }

	&.hamburger {
		width: var(--size-icon);
		height: 0.2rem;
		border-radius: 0;
		background-color: var(--fill-icon);
		box-shadow: 0 -0.5rem var(--fill-icon), 0 0.5rem var(--fill-icon);
	}
}

.bottom-lines {
	position: relative;

	& > * {
		position: relative;
		z-index: 1;
	}

	&::after {
		content: '';
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		height: 4rem;
		background-image: repeating-linear-gradient(
	    	-68deg,
	    	transparent,
	    	var(--fill-bottom-lines) 0.1rem,
	    	var(--fill-bottom-lines) 0.2rem,
	    	transparent 0.3rem,
	    	transparent 0.8rem
		);
	}
}

header {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr auto;
	background-color: var(--fill-header);

	& a.logo {
		display: inline-block;
		height: clamp(3.8rem, 9.05vw - 4.9rem, 5.6rem);
		transform: translateY(1.2rem);

		img { height: 100%; }
	}

	& ul {
		display: flex;
		align-items: center;

		& a, & button.search {
			display: flex;
			align-items: center;
			gap: 0.4rem;
			text-wrap: nowrap;
			transition: background-color 0.2s ease-out, color 0.2s ease-out;

			&:hover { background-color: var(--c-blue-2); }
		}
	}

	& .top-navigation {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap-reverse;
		max-width: var(--max-width);
		width: 100%;
		margin-inline: auto;
		padding-inline: var(--pad-hor);

		& nav { margin-left: auto; }

		& ul {
			align-items: stretch;
			border-bottom: 0.1rem solid var(--c-blue-2);

			& li { display: flex; }

			& a, & button.search {
				flex-grow: 1;
				padding: 0.8rem 1.6rem 0.9rem;
				color: inherit;

				&.active {
					background-color: var(--c-hoogovens-primary1);
					color: var(--c-white);

					&:hover { background-color: var(--c-hoogovens-secondary1); }
				}

				&.search {
					--size-icon: 2rem;

					background-color: var(--c-blue-2);

					&:hover { background-color: var(--c-blue-1); }

					& .icon { transform: translateY(0.15rem); }
				}

				&.my-pension {
					--fill-icon: var(--c-white);

					background-color: var(--c-hoogovens-primary2);
					color: var(--c-white);

					&:hover { background-color: color-mix(in srgb, var(--c-hoogovens-primary2), black 12%); }
				}
			}
		}

		& .desktop-search {
			position: relative;

			& .search-panel {
				position: absolute;
				top: 100%;
				right: 0;
				z-index: 2;
				display: flex;
				gap: 0.8rem;
				width: 40rem;
				padding: 1.2rem;
				background-color: var(--c-white);
				box-shadow: rgba(0, 0, 0, 0.24) 0px 4px 12px;
				visibility: hidden;
				opacity: 0;
				transform: translateY(-0.4rem);
				transition: opacity 0.12s ease-out, transform 0.12s ease-out, visibility 0s linear 0.12s;
			}

			&.is-open .search-panel {
				visibility: visible;
				opacity: 1;
				transform: none;
				transition-delay: 0s;
			}

			& input {
				flex-grow: 1;
				min-width: 0;
				padding: 0.6rem 1rem;
				border: 0.1rem solid var(--c-blue-1);
				border-radius: 0.4rem;
				color: var(--c-hoogovens-primary1);
				transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out;

				&:focus {
					outline: 0.2rem solid transparent;
					border-color: var(--c-hoogovens-secondary1);
					box-shadow: 0 0 0 0.4rem color-mix(in srgb, var(--c-hoogovens-secondary1) 18%, transparent);
				}
			}

			& .btn {
				transition: background-color 0.3s ease-out;

				&:hover, &:focus-visible { --fill-btn: var(--c-hoogovens-primary2); }
			}
		}

		& .mobile-actions {
			display: none;
		}
	}

	& .main-navigation {
		max-width: var(--max-width);
		width: 100%;
		margin-inline: auto;
		padding-inline: var(--pad-hor);

		& a {
			padding: 0.6rem 1.6rem 0.7rem;
			border-radius: 0.4rem;
		}

		& a:not([href]) { cursor: pointer; }

		& .current-menu-item > a,
		& .current-menu-ancestor > a {
			background-color: var(--c-blue-2);

			&:hover { background-color: var(--c-blue-1); }
		}

		& .menu-item-has-children > a {
			padding-right: 1.2rem;

			&::after {
				content: '';
				width: 1.6rem;
				height: 1.6rem;
				background-color: var(--fill-icon);
				mask-image: url("img/chevron-down.svg");
				mask-size: 1.6rem;
			}
		}

		& ul {
			justify-content: center;
			margin-block: 0.8rem 2.4rem;

			& li { position: relative; }

			& .sub-menu {
				position: absolute;
				top: 100%;
				left: 0;
				z-index: 1;
				margin: 0;
				flex-direction: column;
				align-items: flex-start;
				background-color: var(--c-white);
				padding-block: 1.6rem;
				box-shadow: rgba(0, 0, 0, 0.24) 0px 4px 12px;

				visibility: hidden;
				opacity: 0;
				transform: translateY(-0.4rem);
				transition: opacity 0.12s ease-out, transform 0.12s ease-out, visibility 0s linear 0.12s;

				li:hover & {
					visibility: visible;
					opacity: 1;
					transform: none;
					transition-delay: 0s;
				}

				& li { width: 100%; }

				& a {
					border-radius: 0;
					padding: 0.6rem 2.4rem 0.7rem 1.6rem;

					&::before {
						content: '';
						flex-shrink: 0;
						width: 1.6rem;
						height: 1.6rem;
						background-color: var(--fill-icon);
						mask-image: url("img/chevron-right.svg");
						mask-size: 1.6rem;
					}
				}
			}
		}
	}
}

.bulkhead {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--c-blue-1);
	height: clamp(28rem, 41vw, 48rem);
	overflow: hidden;

	& img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	> div {
		position: absolute;
		max-width: var(--max-width);
		width: 100%;
		padding-inline: var(--pad-hor);

		h1 {
			display: block;
			max-width: 12ch;
			margin-inline: var(--pad-hor);
			color: var(--c-hoogovens-primary1);
			text-wrap: balance;
			font-size: clamp(2.4rem, 3vw + 0.4rem, 4.8rem);
			line-height: 1.15;
		}
	}

	/* Banner styles (homepage field "Stijl bannertekst"): a coloured box behind the text for photos where it is hard to read */
	&:is(.is-oranje, .is-lichtblauw, .is-donkerblauw) > div h1 {
		width: fit-content;
		max-width: calc(12ch + 4.8rem);
		padding: 1.6rem 2.4rem;
		border-radius: 0.4rem;
	}

	&.is-oranje > div h1 { background-color: color-mix(in srgb, var(--c-hoogovens-primary2) 80%, transparent); color: var(--c-white); }
	&.is-lichtblauw > div h1 { background-color: color-mix(in srgb, var(--c-blue-1) 80%, transparent); color: var(--c-hoogovens-primary1); }
	&.is-donkerblauw > div h1 { background-color: color-mix(in srgb, var(--c-hoogovens-primary1) 80%, transparent); color: var(--c-white); }
}

main {
	position: relative;
	max-width: var(--max-width);
	margin: 0 auto;
	padding-inline: var(--pad-hor);

	& .breadcrumb {
		display: flex;
		align-items: center;
		gap: 0.8rem;
		padding-block: 2.4rem;
		font-size: 1.4rem;

		a { text-decoration: underline; }
	}

	& .three-tiles {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 1.6rem;
		margin-top: -4rem;
	}

	/* Tile images (block option, same position for all tiles) */
	& .three-tiles .tile-image {
		grid-area: image;
		width: 8rem;
		height: 8rem;
		object-fit: contain;
	}

	& .three-tiles.image-boven .tile-image { align-self: center; margin-bottom: 1.6rem; }

	/* Linksonder: image and button on the last row, vertically centred on each other */
	& .three-tiles.image-linksonder .tile.has-image {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-rows: auto 1fr auto;
		grid-template-areas: "title title" "subtitle subtitle" "image button";
		column-gap: 1.6rem;

		& .title { grid-area: title; }
		& .subtitle { grid-area: subtitle; align-self: start; }
		& .tile-image { align-self: center; }
		& .btn { grid-area: button; align-self: center; justify-self: end; margin-top: 0; }
	}

	& .tile-grid {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1.6rem;

		& .tile { text-align: center; }
		& .tile .title { margin-bottom: 2.4rem; }
		& .tile .btn { align-self: center; }
	}

	& .banner {
		--fill-btn: var(--c-hoogovens-primary2);

		display: block;

		& .btn {
			transform-origin: left center;
			transition: transform 0.2s ease-out;
		}

		&:hover .btn, &:focus-visible .btn { transform: scale(1.06); }

		margin-block: 4.8rem;
		border-radius: 0.4rem;
		background-color: var(--c-hoogovens-secondary1);
		background-size: cover;
		background-position: center;
		aspect-ratio: 2.5 / 1;
		padding: var(--pad-hor);

		> div {
			margin-bottom: var(--pad-vert);
			color: var(--c-white);
			text-wrap: balance;
			font-size: 4rem;
			font-weight: 600;
			line-height: 4.8rem;
		}
	}

	& .content-page {
		display: grid;
		grid-template-columns: repeat(12, minmax(0, 1fr));
		grid-gap: 1.6rem;
		background-color: var(--c-white);
		border-radius: 0.4rem;

		& .main-content { grid-column: 1 / 10; }
		& .sidebar { grid-column: 10 / 13; }
	}

	& .main-content {
		padding: var(--pad-hor);
		border-right: 0.1rem solid var(--c-blue-2);

		> * { margin-block: var(--pad-vert); }
		> *:first-child { margin-top: 0; }
		> *:last-child { margin-bottom: 0; }

		& ul, & ol {
			list-style: revert;
			padding-left: 2.4rem;
		}

		& img {
			display: block;
			width: 100%;
			height: auto;
			border-radius: var(--radius);
		}
	}
}

footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3.2rem;
	max-width: var(--max-width);
	padding-inline: var(--pad-hor);
	margin: 4.8rem auto 6.4rem;

	& a.logo {
		display: inline-block;
		height: 5.6rem;

		img { height: 100%; }
	}

	& nav {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 1.2rem 2.4rem;
		text-align: center;

		& :is(a, span) { white-space: nowrap; }
	}
}

.tile {
	display: flex;
	flex-direction: column;
	background-color: var(--c-white);
	border-radius: 0.4rem;
	padding: var(--pad-hor-small);
	transform: scale(1);
	transition: transform 0.2s ease-out;

	& .title {
		font-size: 2.8rem;
		font-weight: 600;
		line-height: 3.6rem;
		padding-bottom: 0.8rem;
	}

	/* The line belongs to the subtitle: no subtitle, no line */
	& .subtitle {
		font-size: 2rem;
		font-weight: 300;
		padding-block: 1.2rem;
		border-top: 0.1rem solid var(--c-blue-2);
	}

	& .btn { margin-top: auto; }

	&:hover, &:focus-within {
		transform: scale(1.06);
		box-shadow: rgba(0, 0, 0, 0.04) 0px 4px 8px, rgba(0, 0, 0, 0.08) 0px 4px 8px;
		z-index: 1;
	}
}

.sidebar {
	display: flex;
	flex-direction: column;
	gap: 3.2rem;
	padding: var(--pad-hor) 2.4rem var(--pad-hor) 0.8rem;
}

.widget-title {
	margin-bottom: 0.8rem;
	padding-inline: 1.2rem;
	font-size: 1.4rem;
	font-weight: 700;
	text-transform: uppercase;
}

.widget_nav_menu .menu,
.widget_recent_entries ul {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;

	& a {
		display: block;
		padding: 0.6rem 1.2rem;
		border-radius: 0.4rem;
		transition: background-color 0.2s ease-out;

		&:hover { background-color: var(--c-blue-3); }
	}

	& .current-menu-item > a,
	& a[aria-current="page"] { background-color: var(--c-blue-2); }
}

.btn.is-icon-only .icon {
	margin: 0;
	padding: 0;
	mask-size: var(--size-icon);
}

/* Sidebar widget card (pfh/widget-kaart). Standaard: transparent with a border; Donkerblauw: the vacancy widget of the design;
   Lichtblauw (is-style-blauw), Groen, Geel, Oranje: light background with dark blue text. Buttons as on the tiles. */
.widget-kaart {
	/* Button background at 80% until hover (then the full dark blue of the :hover rule) */
	--fill-btn: color-mix(in srgb, var(--c-blue-2) 80%, transparent);
	--fill-bottom-lines: var(--c-blue-2);
	--line-title: var(--c-blue-2);

	display: flex;
	flex-direction: column;
	padding: 2.4rem;
	border-radius: var(--radius);
	overflow: hidden;
	color: var(--c-hoogovens-primary1);

	&:not(.is-style-donkerblauw, .is-style-blauw, .is-style-groen, .is-style-geel, .is-style-oranje) { border: 0.1rem solid var(--c-blue-2); }


	& img.widget-kaart__image {
		align-self: center;
		width: 8rem;
		height: 8rem;
		margin-bottom: 1.6rem;
		border-radius: 0;
		object-fit: contain;
	}

	& .widget-kaart__label {
		font-size: 1.2rem;
		font-weight: 700;
		text-transform: uppercase;
	}

	& .widget-kaart__title {
		margin: 0.4rem 0 1.2rem;
		font-size: 1.8rem;
		font-weight: 600;
		line-height: 1.3;
	}

	&.has-text-align-center { text-align: center; }

	/* Line between title and text only when there is text */
	&.has-text .widget-kaart__title {
		padding-bottom: 1.2rem;
		border-bottom: 0.1rem solid var(--line-title);
	}

	/* .btn sets a white chevron itself; here it follows the button text */
	& .btn {
		--fill-icon: var(--c-hoogovens-primary1);

		align-self: center;
		margin-top: 0.4rem;
		color: var(--c-hoogovens-primary1);
		transition: background-color 0.3s ease-out, color 0.3s ease-out;
	}

	/* Button position (has-button-*). With lines or as a round icon the button sits on the lines, half over them
	   (vacancy widget of the design) */
	&.has-button-left .btn { align-self: flex-start; }
	&.has-button-right .btn { align-self: flex-end; }

	&:is(.bottom-lines, .has-icon-button) {
		padding-bottom: 7.2rem;

		& .btn {
			position: absolute;
			bottom: 2.1rem;
			z-index: 1;
		}

		&.has-button-left .btn { left: 1.6rem; }
		&.has-button-center .btn { left: 50%; translate: -50% 0; }
		&.has-button-right .btn { right: 1.6rem; }
	}

	&:hover .btn, &:focus-visible .btn {
		--fill-btn: var(--c-hoogovens-primary1);
		--fill-icon: var(--c-white);

		color: var(--c-white);
	}

	&:is(.is-style-blauw, .is-style-groen, .is-style-geel, .is-style-oranje) {
		--fill-btn: color-mix(in srgb, var(--style-01) 80%, transparent);
		--fill-bottom-lines: color-mix(in srgb, var(--c-white) 70%, transparent);
		--line-title: var(--style-01);

		background-color: var(--style-02);
	}

	&.is-style-donkerblauw {
		--fill-btn: color-mix(in srgb, var(--c-hoogovens-primary1) 80%, transparent);
		--fill-bottom-lines: color-mix(in srgb, var(--c-white) 70%, transparent);
		--line-title: color-mix(in srgb, var(--c-white) 30%, transparent);

		background-color: var(--c-hoogovens-secondary1);
		color: var(--c-white);

		& .btn { --fill-icon: var(--c-white); color: var(--c-white); }
	}
}

.select {
	--size-icon: 1.6rem;

	position: relative;

	& select {
		width: 100%;
		padding: 0.8rem 4rem 0.8rem 1.2rem;
		appearance: none;
		border: 0.1rem solid var(--c-blue-1);
		border-radius: 0.4rem;
		background-color: var(--c-white);
		color: var(--c-hoogovens-primary1);
		cursor: pointer;
		transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out;

		&:hover { border-color: var(--c-hoogovens-secondary1); }

		&:focus {
			outline: 0.2rem solid transparent;
			border-color: var(--c-hoogovens-secondary1);
			box-shadow: 0 0 0 0.4rem color-mix(in srgb, var(--c-hoogovens-secondary1) 18%, transparent);
		}
	}

	&::after {
		content: '';
		position: absolute;
		top: 50%;
		right: 1.2rem;
		width: var(--size-icon);
		height: var(--size-icon);
		background-color: var(--fill-icon);
		mask-image: url("img/chevron-right-bold.svg");
		mask-size: var(--size-icon);
		transform: translateY(-50%) rotate(90deg);
		pointer-events: none;
	}
}

main .content-page.faq-page {
	& .faq-themes {
		grid-column: 1 / 4;
		padding: var(--pad-hor) 0.8rem var(--pad-hor) 2.4rem;
		border-right: 0.1rem solid var(--c-blue-2);

		& .current-menu-item > a {
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 0.8rem;

			&::after {
				content: '';
				flex-shrink: 0;
				width: 1.6rem;
				height: 1.6rem;
				background-color: var(--fill-icon);
				mask-image: url("img/check.svg");
				mask-size: 1.6rem;
			}
		}
	}

	& .faq-theme-select { display: none; }

	& .main-content {
		grid-column: 4 / 13;
		border-right: none;
	}
}

main .content-page.no-sidebar .main-content {
	grid-column: 1 / -1;
	border-right: none;
}

main .content-page.no-sidebar.is-narrow {
	max-width: 88rem;
	margin-inline: auto;
}

.main-content > .post-navigation { margin-top: 4.8rem; }

.post-navigation .nav-links {
	display: flex;
	justify-content: center;
	gap: 0.8rem;

	& a {
		--size-icon: 1.6rem;

		display: flex;
		align-items: center;
		gap: 0.4rem;
		padding: 0.4rem 1.4rem;
		border-radius: 2rem;
		background-color: var(--c-blue-2);
		font-size: 1.4rem;
		text-decoration: none;
		transition: background-color 0.2s ease-out;

		&:hover { background-color: var(--c-blue-1); }
	}

	& .nav-previous a::before,
	& .nav-next a::after {
		content: '';
		width: var(--size-icon);
		height: var(--size-icon);
		background-color: var(--fill-icon);
		mask-image: url("img/chevron-right-bold.svg");
		mask-size: var(--size-icon);
		transform: translateY(0.1rem);
	}

	& .nav-previous a::before { transform: translateY(0.1rem) rotate(180deg); }
}

main .archive-page {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	align-items: start;
	gap: 1.6rem;

	& .archive-list {
		display: flex;
		flex-direction: column;
		gap: 1.6rem;
		grid-column: 1 / -1;
	}

	&.has-sidebar .archive-list { grid-column: 1 / 10; }

	& .sidebar {
		grid-column: 10 / 13;
		padding: 2.4rem 1.6rem;
		border-radius: 0.4rem;
		background-color: var(--c-white);
	}
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem;
	margin-top: 1.6rem;

	& .page-numbers {
		--size-icon: 1.6rem;

		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 3.2rem;
		height: 3.2rem;
		padding-inline: 0.8rem;
		border-radius: 0.4rem;
		font-size: 1.5rem;
		transition: background-color 0.2s ease-out;
	}

	& a.page-numbers:hover { background-color: var(--c-blue-2); }

	& .current {
		background-color: var(--c-hoogovens-primary1);
		color: var(--c-white);
	}

	& .prev::before,
	& .next::before {
		content: '';
		width: var(--size-icon);
		height: var(--size-icon);
		background-color: var(--fill-icon);
		mask-image: url("img/chevron-right-bold.svg");
		mask-size: var(--size-icon);
	}

	& .prev::before { transform: rotate(180deg); }
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Block pfh/nieuws: news cards stacked or side by side (is-naast; stacked on mobile, see max-width 767px) */
.wp-block-pfh-nieuws {
	display: flex;
	flex-direction: column;
	gap: 1.6rem;

	&.is-naast {
		flex-direction: row;

		& > * { flex: 1 1 0; }

		/* Text grows, so the buttons line up */
		& .news-card > p:not(.post-date) { flex-grow: 1; }
	}
}

main .home-news {
	display: grid;
	grid-template-columns: 2fr 1fr;
	align-items: start;
	gap: 1.6rem;
	margin-block: 4.8rem;

	& .home-news__list {
		display: flex;
		flex-direction: column;
		gap: 1.6rem;
	}
}

:is(.tile, .news-card) {
	/* Text always visible (no expanding on hover): dark blue on light blue, white on dark blue on hover */
	& .btn {
		--fill-btn: var(--c-blue-2);
		--fill-icon: var(--c-hoogovens-primary1);

		align-self: flex-end;
		color: var(--c-hoogovens-primary1);
		transition: background-color 0.15s ease-out, color 0.15s ease-out;

		& .icon {
			margin-right: 0;
			mask-size: var(--size-icon);
		}
	}

	&:hover .btn, &:focus-within .btn {
		--fill-btn: var(--c-hoogovens-primary1);
		--fill-icon: var(--c-white);

		color: var(--c-white);
	}
}

.news-card {
	--fill-btn: var(--c-blue-2);

	display: flex;
	flex-direction: column;
	padding: 2.4rem;
	border-radius: 0.4rem;
	background-color: var(--c-white);

	& .post-date { align-self: flex-start; }

	& .post-title {
		margin: 0.8rem 0 1.2rem;
		padding-bottom: 1.2rem;
		border-bottom: 0.1rem solid var(--c-blue-2);
		font-size: 2rem;
		line-height: 1.3;
	}

	& .btn { margin-top: 1.2rem; }
}

.main-content {
	--style-01: transparent;
	--style-02: transparent;
	--style-03: transparent;
}

.is-style-blauw {
	--style-01: var(--c-blue-1);
	--style-02: var(--c-blue-2);
	--style-03: var(--c-blue-3);
}

.is-style-groen {
	--style-01: var(--c-green-1);
	--style-02: var(--c-green-2);
	--style-03: var(--c-green-3);
}

.is-style-geel {
	--style-01: var(--c-yellow-1);
	--style-02: var(--c-yellow-2);
	--style-03: var(--c-yellow-3);
}

.is-style-oranje {
	--style-01: var(--c-orange-1);
	--style-02: var(--c-orange-2);
	--style-03: var(--c-orange-3);
}

.has-text-align-right { text-align: right; }

.main-content > :is([class*="wp-block-"], form) { margin-block: 3.2rem; }

/* Heading options (core/heading, editor/block-options.js), wherever the heading is. Margin above and below each
   1–3 (normal = 2, no class); :not() keeps the normal margin above the block margin rule. */
.wp-block-heading {
	&:not(.has-margin-top-1, .has-margin-top-3) { margin-top: 3.2rem; }
	&.has-margin-top-1 { margin-top: 1.6rem; }
	&.has-margin-top-3 { margin-top: 4.8rem; }

	&:not(.has-margin-bottom-1, .has-margin-bottom-3) { margin-bottom: 2.4rem; }
	&.has-margin-bottom-1 { margin-bottom: 1.2rem; }
	&.has-margin-bottom-3 { margin-bottom: 3.6rem; }

	&.has-primary2-color { color: var(--c-hoogovens-primary2); }
}

/* The heading alone sets the space above and below it: its neighbours lose the margin on that side, so margins do
   not collapse into a larger one (the only :has() in the theme, see docs/kitchen-sink.md). The same for separators.
   Not between two of them: there both keep their margins (the larger one wins). */
:is(main, .main-content) > :not(.wp-block-heading, .wp-block-separator):has(+ :is(.wp-block-heading, .wp-block-separator)) { margin-bottom: 0; }
:is(main, .main-content) > :is(.wp-block-heading, .wp-block-separator) + :not(.wp-block-heading, .wp-block-separator) { margin-top: 0; }

/* Separator (core/separator): always a light blue line (no styles); margin above and below 1–3 like headings, but
   the same above and below and large (3) by default (no class). hr. beats the core editor CSS (border-top 2px). */
hr.wp-block-separator {
	height: 0.1rem;
	border: none;
	background-color: var(--c-blue-1);

	&:not(.has-margin-top-1, .has-margin-top-2) { margin-top: 4.8rem; }
	&.has-margin-top-1 { margin-top: 1.6rem; }
	&.has-margin-top-2 { margin-top: 3.2rem; }

	&:not(.has-margin-bottom-1, .has-margin-bottom-2) { margin-bottom: 4.8rem; }
	&.has-margin-bottom-1 { margin-bottom: 1.6rem; }
	&.has-margin-bottom-2 { margin-bottom: 3.2rem; }
}

/* Size groter/grootst per level (after the .main-content heading sizes) */
h2.is-size-groter { font-size: 2.8rem; }
h2.is-size-grootst { font-size: 3.2rem; }
h3.is-size-groter { font-size: 2.2rem; }
h3.is-size-grootst { font-size: 2.4rem; }
h4.is-size-groter { font-size: 2rem; }
h4.is-size-grootst { font-size: 2.2rem; }

.wp-block-group:is(.is-style-blauw, .is-style-groen, .is-style-geel, .is-style-oranje) {
	padding: 2.4rem;
	border-radius: var(--radius);
	background-color: var(--style-02);

	& > * + * { margin-top: 1.2rem; }
}

/* Core layout (Rij, Stapel, Raster, Kolommen) and core blocks without kitchen-sink design: rules taken from WordPress
   core, which is not loaded (wp-block-library, global-styles). */
.is-layout-flex {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2.4rem;
}

.is-layout-grid {
	display: grid;
	gap: 2.4rem;
}

:is(.is-layout-flex, .is-layout-grid) > * { margin: 0; }

.wp-block-columns {
	flex-wrap: nowrap;
	align-items: normal;

	&.are-vertically-aligned-top { align-items: flex-start; }
	&.are-vertically-aligned-center { align-items: center; }
	&.are-vertically-aligned-bottom { align-items: flex-end; }
}

.wp-block-column {
	flex: 1 1 0;
	min-width: 0;
	overflow-wrap: break-word;

	&[style*="flex-basis"] { flex-grow: 0; }
	&.is-vertically-aligned-top { align-self: flex-start; }
	&.is-vertically-aligned-center { align-self: center; }
	&.is-vertically-aligned-bottom { align-self: flex-end; }
	&.is-vertically-aligned-stretch { align-self: stretch; }
}

.wp-block-embed {
	& iframe {
		display: block;
		width: 100%;
		height: 100%;
	}

	&.wp-embed-aspect-21-9 .wp-block-embed__wrapper { aspect-ratio: 21 / 9; }
	&.wp-embed-aspect-16-9 .wp-block-embed__wrapper { aspect-ratio: 16 / 9; }
	&.wp-embed-aspect-4-3 .wp-block-embed__wrapper { aspect-ratio: 4 / 3; }
	&.wp-embed-aspect-1-1 .wp-block-embed__wrapper { aspect-ratio: 1; }
	&.wp-embed-aspect-9-16 .wp-block-embed__wrapper { aspect-ratio: 9 / 16; }
}

.wp-block-video video {
	width: 100%;
	height: auto;
}

.wp-block-image.is-style-lijnen,
.wp-block-pfh-stappen.has-image-lines .wp-block-pfh-stappen__image,
.wp-block-pfh-lijst.has-lines {
	position: relative;
	overflow: hidden;

	&::after {
		content: '';
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		height: 4rem;
		background-image: repeating-linear-gradient(
			-68deg,
			transparent,
			var(--fill-bottom-lines) 0.1rem,
			var(--fill-bottom-lines) 0.2rem,
			transparent 0.3rem,
			transparent 0.8rem
		);
	}
}

.wp-block-image.is-style-lijnen {
	border-radius: var(--radius);
}

.wp-block-pfh-download {
	--size-icon: 2.4rem;

	display: flex;
	align-items: center;
	gap: 1.6rem;
	padding: 1.6rem 2.4rem;
	border-radius: var(--radius);
	background-color: var(--style-02);
	transition: background-color 0.2s ease-out;

	&:hover { background-color: var(--style-01); }

	& .icon { border-radius: 0; }

	& span:last-child { overflow-wrap: anywhere; }

	&:not(.is-style-blauw, .is-style-groen, .is-style-geel, .is-style-oranje) { padding-inline: 0; }
}

/* Documents overview (archive-document.php): compact download blocks with less space in between */
.document-list {
	display: flex;
	flex-direction: column;
	gap: 0.8rem;

	& .wp-block-pfh-download {
		--size-icon: 3rem;

		margin: 0;
		padding: 1rem 1.6rem;
	}
}

/* Search results (search.php): search field with the current term, then per result label, title and summary */
.search-form {
	display: flex;
	gap: 0.8rem;
	max-width: 60rem;

	& input {
		flex-grow: 1;
		min-width: 0;
		padding: 0.6rem 1rem;
		border: 0.1rem solid var(--c-blue-1);
		border-radius: 0.4rem;
		color: var(--c-hoogovens-primary1);

		&:focus {
			outline: 0.2rem solid transparent;
			border-color: var(--c-hoogovens-secondary1);
			box-shadow: 0 0 0 0.4rem color-mix(in srgb, var(--c-hoogovens-secondary1) 18%, transparent);
		}
	}
}

.search-count { color: var(--c-hoogovens-secondary1); }

.search-result {
	display: block;
	padding-block: 2rem;
	border-bottom: 0.1rem solid var(--c-blue-2);

	& .post-title {
		margin: 0.8rem 0 0.4rem;
		font-size: 2rem;
		line-height: 1.3;
	}

	&:hover .post-title { text-decoration: underline; }

	/* Search term in the summary: a light background */
	& mark {
		background-color: var(--c-yellow-2);
		color: inherit;
	}
}

.wp-block-pfh-stappen {
	display: grid;
	grid-template-columns: 2fr 1fr;
	border-radius: var(--radius);
	overflow: hidden;
	background-color: var(--style-02);

	&.is-image-left {
		grid-template-columns: 1fr 2fr;

		& .wp-block-pfh-stappen__image { order: -1; }
	}

	& .wp-block-pfh-stappen__content {
		padding: 3.2rem;

		& h2 {
			font-size: 2.2rem;
			margin-bottom: 1.6rem;
		}
	}

	& .wp-block-pfh-stappen__content ol {
		list-style: none;
		padding: 0;
		counter-reset: stap;

		& li {
			position: relative;
			padding-left: 3.6rem;
			counter-increment: stap;

			& + li { margin-top: 1.6rem; }

			&::before {
				content: counter(stap);
				position: absolute;
				top: 0.1rem;
				left: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 2.4rem;
				height: 2.4rem;
				border-radius: 50%;
				background-color: var(--c-hoogovens-primary1);
				color: var(--c-white);
				font-size: 1.3rem;
				font-weight: 600;
			}

			& h3 { font-size: inherit; font-weight: 700; line-height: inherit; }
		}
	}

	&:not(.is-style-blauw, .is-style-groen, .is-style-geel, .is-style-oranje) .wp-block-pfh-stappen__content { padding: 0 3.2rem 0 0; }
	&.is-image-left:not(.is-style-blauw, .is-style-groen, .is-style-geel, .is-style-oranje) .wp-block-pfh-stappen__content { padding: 0 0 0 3.2rem; }

	&.has-step-line .wp-block-pfh-stappen__content li:not(:last-child)::after {
		content: '';
		position: absolute;
		top: 2.9rem;
		bottom: -1.3rem;
		left: 1.1rem;
		width: 0.2rem;
		background-color: var(--c-hoogovens-primary1);
	}

	& .wp-block-pfh-stappen__image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: 0;
	}
}

.wp-block-pfh-lijst {
	--fill-bottom-lines: var(--style-02);

	&.has-lines > * {
		position: relative;
		z-index: 1;
	}

	border-radius: var(--radius);
	overflow: hidden;
	background-color: var(--style-03);

	&.has-lines { padding-bottom: 4rem; }

	& .wp-block-pfh-lijst__title {
		padding: 1.6rem 2.4rem;
		background-color: var(--style-01);
		font-size: 1.6rem;
		font-weight: 700;
		text-transform: uppercase;
	}

	& .wp-block-pfh-lijst__group {
		padding: 1.2rem 2.4rem;

		&:nth-child(odd) { background-color: var(--style-02); }

		& h4 {
			margin-bottom: 0.6rem;
			font-size: 1.4rem;
			font-weight: 700;
		}
	}

	&:not(.is-style-blauw, .is-style-groen, .is-style-geel, .is-style-oranje) {
		padding-bottom: 0;

		&::after { display: none; }

		& .wp-block-pfh-lijst__title,
		& .wp-block-pfh-lijst__group { padding-inline: 0; }
	}
}

.wp-block-quote {
	padding-left: 1.6rem;
	border-left: 0.3rem solid var(--style-01);
	font-style: italic;

	&:not(.is-style-blauw, .is-style-groen, .is-style-geel, .is-style-oranje) { border-left-color: var(--c-blue-2); }
}

.wp-block-details {
	--size-icon: 2rem;

	border-radius: 0.4rem;
	background-color: var(--style-02);
	interpolate-size: allow-keywords;

	&::details-content {
		block-size: 0;
		overflow: clip;
		transition: block-size 0.3s ease-out, content-visibility 0.3s allow-discrete;
	}

	&[open]::details-content { block-size: auto; }

	& summary {
		display: flex;
		align-items: center;
		gap: 0.8rem;
		padding: 0.8rem 1.2rem;
		list-style: none;
		cursor: pointer;

		&::-webkit-details-marker { display: none; }

		&::before {
			content: '';
			flex-shrink: 0;
			width: var(--size-icon);
			height: var(--size-icon);
			background-color: var(--fill-icon);
			mask-image: url("img/chevron-right-bold.svg");
			mask-size: var(--size-icon);
			transition: transform 0.2s ease-out;
		}
	}

	&[open] summary::before { transform: rotate(90deg); }

	& > :not(summary) { padding: 0 1.6rem 1.6rem 4rem; }

	&:not(.is-style-blauw, .is-style-groen, .is-style-geel, .is-style-oranje) {
		& summary { padding-inline: 0; }
		& > :not(summary) { padding: 0 0 1.6rem 2.8rem; }
	}
}

.wp-block-details.is-style-plus {
	border-bottom: 0.1rem solid var(--c-blue-2);
	border-radius: 0;
	background-color: transparent;

	& summary {
		align-items: flex-start;
		padding: 1.6rem 0;
		font-size: 2rem;
		font-weight: 700;
		line-height: 1.3;

		&::before {
			content: '+';
			width: 2rem;
			background-color: transparent;
			mask-image: none;
			font-weight: 400;
			line-height: 1.3;
			transition: none;
		}
	}

	&[open] summary::before {
		content: '\2212';
		transform: none;
	}

	& > :not(summary) { padding: 0 0 2rem 2.8rem; }
}

.main-content > .is-style-plus { margin-block: 0; }

.main-content > :not(.is-style-plus) + .is-style-plus {
	margin-top: 3.2rem;
	border-top: 0.1rem solid var(--c-blue-2);
}

.main-content > h1 + .wp-block-details.is-style-plus {
	margin-top: 0.8rem;
	border-top: none;
}

.wp-block-table {
	overflow-x: auto;
	border-radius: var(--radius);

	& table {
		width: 100%;
		border-collapse: collapse;
	}

	& th, & td {
		padding: 1.2rem 1.6rem;
		text-align: left;
		vertical-align: top;
	}

	& th {
		font-size: 1.4rem;
		font-weight: 700;
		background-color: var(--style-01);
	}

	&.has-italic-header th { font-style: italic; }

	&:not(.is-style-blauw, .is-style-groen, .is-style-geel, .is-style-oranje) {
		& tr { border-bottom: 0.1rem solid var(--c-blue-2); }
		& th:first-child, & td:first-child { padding-left: 0; }
		& th:last-child, & td:last-child { padding-right: 0; }
	}

	& tbody tr { background-color: var(--style-02); }
	& tbody tr:nth-child(even) { background-color: var(--style-03); }

	& th,
	& .has-text-align-right { white-space: nowrap; }

	& .has-text-align-right { text-align: right; }
}

.wp-block-pfh-p123 {
	--size-icon: 1.6rem;

	display: flex;
	flex-direction: column;
	gap: 1.6rem;

	& details {
		interpolate-size: allow-keywords;

		&::details-content {
			block-size: 0;
			overflow: clip;
			transition: block-size 0.3s ease-out, content-visibility 0.3s allow-discrete;
		}

		&[open]::details-content { block-size: auto; }
	}

	& summary {
		display: flex;
		align-items: center;
		gap: 0.8rem;
		list-style: none;
		cursor: pointer;
		transition: background-color 0.2s ease-out;

		&::-webkit-details-marker { display: none; }

		&::before {
			content: '';
			flex-shrink: 0;
			width: var(--size-icon);
			height: var(--size-icon);
			background-color: var(--fill-icon);
			mask-image: url("img/chevron-right-bold.svg");
			mask-size: var(--size-icon);
			transition: transform 0.2s ease-out;
		}
	}

	& details[open] > summary::before { transform: rotate(90deg); }

	& .wp-block-pfh-p123__category {
		& > summary {
			--fill-icon: var(--c-white);

			padding: 1.6rem 2.4rem;
			border-radius: var(--radius);
			background-color: var(--c-hoogovens-primary2);
			color: var(--c-white);
			font-size: 1.8rem;
			font-weight: 700;
			line-height: 1.3;
			text-transform: uppercase;

			&:hover { background-color: color-mix(in srgb, var(--c-hoogovens-primary2), black 12%); }
		}

		&[open] > summary { border-radius: var(--radius) var(--radius) 0 0; }
	}

	& .wp-block-pfh-p123__items {
		border: 0.1rem solid var(--c-hoogovens-primary2);
		border-top: none;
		border-radius: 0 0 var(--radius) var(--radius);
	}

	& .wp-block-pfh-p123__item {
		display: grid;
		grid-template-columns: 8rem minmax(0, 1fr);
		align-items: start;
		gap: 1.6rem 2.4rem;
		padding: 3.2rem;

		& + .wp-block-pfh-p123__item { border-top: 0.1rem solid var(--c-orange-1); }
	}

	& .wp-block-pfh-p123__image {
		grid-row: span 2;
		width: 8rem;
		height: 8rem;
		margin-bottom: 0.8rem;
		border-radius: 0;
	}

	& .wp-block-pfh-p123__title {
		grid-column: 2;
		font-size: 2.2rem;
		line-height: 1.3;
	}

	& .wp-block-pfh-p123__laag1 { grid-column: 2; }

	& .wp-block-pfh-p123__laag1,
	& .wp-block-pfh-p123__content {
		& :is(p, ul, ol, table, blockquote, div) + :is(p, ul, ol, table, blockquote, div) { margin-top: 1.2rem; }
	}

	& :is(.wp-block-pfh-p123__laag2, .wp-block-pfh-p123__laag3) {
		grid-column: 1 / -1;

		& > summary {
			padding: 0.8rem 1.6rem;
			border-radius: var(--radius);
			background-color: var(--c-blue-2);

			&:hover { background-color: var(--c-blue-1); }
		}

		&[open] > summary { font-weight: 600; }

		& > .wp-block-pfh-p123__content { padding: 1.6rem 1.6rem 0.8rem 4rem; }
	}

	& .wp-block-pfh-p123__laag2 { margin-top: 0.8rem; }
	& .wp-block-pfh-p123__laag3 { margin-top: 2.4rem; }

	& blockquote {
		padding-left: 1.6rem;
		border-left: 0.3rem solid color-mix(in srgb, var(--c-hoogovens-secondary1) 50%, transparent);
		font-style: italic;
	}

	& table {
		width: 100%;
		border-collapse: collapse;
	}

	& th, & td {
		padding: 0.8rem 1.6rem 0.8rem 0;
		border-bottom: 0.1rem solid var(--c-blue-1);
		text-align: left;
		vertical-align: top;
	}

	& th {
		font-size: 1.4rem;
		font-weight: 700;
	}

	& .wp-block-pfh-p123__laag3 ul {
		display: flex;
		flex-direction: column;
		gap: 0.6rem;
		padding: 0;
		list-style: none;

		& a, & summary {
			display: flex;
			align-items: center;
			gap: 0.8rem;
			padding: 0.6rem 1.2rem;
			border-radius: 0.4rem;
			text-decoration: none;
		}

		& a {
			background-color: var(--c-blue-2);
			transition: background-color 0.2s ease-out;

			&::before {
				content: '';
				flex-shrink: 0;
				width: var(--size-icon);
				height: var(--size-icon);
				background-color: var(--fill-icon);
				mask-image: url("img/download.svg");
				mask-size: var(--size-icon);
			}

			&:hover {
				background-color: var(--c-blue-1);
				color: var(--c-hoogovens-primary1);
			}
		}

		& summary {
			background-color: var(--c-blue-3);

			&:hover { background-color: var(--c-blue-1); }
		}

		& details > ul {
			margin-top: 0.6rem;
			padding-left: 2.4rem;
		}
	}
}

.pfh-form {
	&.has-kader {
		padding: 3.2rem;
		border: 0.1rem solid var(--c-blue-1);
		border-radius: var(--radius);
	}

	& .pfh-form__field {
		display: grid;
		grid-template-columns: 14rem 1fr;
		gap: 0.4rem 1.6rem;
		margin-bottom: 1.6rem;

		& label { padding-top: 0.6rem; }

		& .pfh-form__error,
		& .pfh-form__help { grid-column: 2; }
	}

	& input:not([type="radio"], [type="checkbox"]), & textarea {
		width: 100%;
		padding: 0.6rem 1rem;
		border: 0.1rem solid var(--c-blue-1);
		border-radius: 0.4rem;
		color: var(--c-hoogovens-primary1);

		&.is-short { max-width: 20rem; }

		transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out;

		&:focus {
			outline: 0.2rem solid transparent;
			border-color: var(--c-hoogovens-secondary1);
			box-shadow: 0 0 0 0.4rem color-mix(in srgb, var(--c-hoogovens-secondary1) 18%, transparent);
		}
	}

	& .pfh-file__drop {
		--size-icon: 2.4rem;

		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.8rem;
		padding: 2.4rem;
		border: 0.2rem dashed var(--c-blue-1);
		border-radius: var(--radius);
		background-color: var(--c-blue-3);
		text-align: center;
		cursor: pointer;
		transition: background-color 0.15s ease-out, border-color 0.15s ease-out, box-shadow 0.15s ease-out;

		& > span { pointer-events: none; }

		& strong {
			text-decoration: underline;
			text-underline-offset: 0.2em;
		}

		& .pfh-file__release { display: none; }

		&.is-dragover {
			& .pfh-file__text { display: none; }
			& .pfh-file__release { display: inline; font-weight: 600; }
		}

		&:hover,
		&.is-dragover {
			border-color: var(--c-hoogovens-secondary1);
			background-color: var(--c-blue-2);
		}

		&:focus-within {
			border-color: var(--c-hoogovens-secondary1);
			box-shadow: 0 0 0 0.4rem color-mix(in srgb, var(--c-hoogovens-secondary1) 18%, transparent);
		}
	}

	& .pfh-form__field label.pfh-file__drop { padding-top: 2.4rem; }

	& .pfh-file__drop + .pfh-form__help {
		margin-top: 0.8rem;
		font-size: 1.5rem;
	}

	& .pfh-file__list {
		display: flex;
		flex-direction: column;
		gap: 0.8rem;
		margin-top: 1.2rem;
		padding: 0;
		list-style: none;

		&:empty { display: none; }

		& li {
			display: flex;
			align-items: center;
			gap: 1.2rem;
			padding: 0.4rem 0.4rem 0.4rem 1.2rem;
			border-radius: 0.4rem;
			background-color: var(--c-blue-3);
			font-size: 1.5rem;
		}

		& .pfh-file__name {
			flex: 1;
			min-width: 0;
			overflow-wrap: anywhere;
		}

		& .pfh-file__size {
			flex-shrink: 0;
			color: var(--c-hoogovens-secondary1);
			font-size: 1.4rem;
		}

		& button {
			--size-icon: 1.6rem;

			display: flex;
			padding: 0.8rem;
			border-radius: 50%;
			transition: background-color 0.15s ease-out;

			&:hover, &:focus-visible { background-color: var(--c-blue-1); }
		}
	}

	& .has-error input {
		border-color: var(--c-red);

		&:focus { box-shadow: 0 0 0 0.4rem color-mix(in srgb, var(--c-red) 15%, transparent); }
	}

	& .pfh-form__error {
		color: var(--c-red);
		font-size: 1.4rem;
		font-style: italic;
	}

	& .pfh-form__help { font-size: 1.4rem; }

	& fieldset {
		min-width: 0;
		padding: 0;
		border: none;
	}

	& .pfh-form__choices {
		display: block;

		& legend {
			float: left;
			width: 14rem;
			margin-right: 1.6rem;
			padding: 0;
		}
	}

	& .pfh-form__options {
		display: flex;
		flex-direction: column;
		gap: 0.8rem;
		grid-column: 2;

		& label {
			display: flex;
			align-items: flex-start;
			gap: 1rem;
			padding: 0;
			cursor: pointer;
		}

		& label.is-disabled {
			cursor: default;
			opacity: 0.5;
		}
	}

	& input[type="radio"],
	& input[type="checkbox"] {
		flex-shrink: 0;
		width: 2rem;
		height: 2rem;
		margin-top: 0.2rem;
		appearance: none;
		border: 0.1rem solid var(--c-blue-1);
		border-radius: 0.4rem;
		background-color: var(--c-white);
		background-position: center;
		background-repeat: no-repeat;
		cursor: pointer;
		transition: background-color 0.15s ease-out, border-color 0.15s ease-out, box-shadow 0.15s ease-out;

		&:hover:not(:disabled) { border-color: var(--c-hoogovens-secondary1); }

		&:focus-visible {
			outline: 0.2rem solid transparent;
			border-color: var(--c-hoogovens-secondary1);
			box-shadow: 0 0 0 0.4rem color-mix(in srgb, var(--c-hoogovens-secondary1) 18%, transparent);
		}

		&:checked {
			border-color: var(--c-hoogovens-primary1);
			background-color: var(--c-hoogovens-primary1);
		}
	}

	& input[type="checkbox"]:checked {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.5 10.5l3.5 3.5 7.5-8' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
		background-size: 1.6rem;
	}

	& input[type="radio"] {
		border-radius: 50%;

		&:checked { box-shadow: inset 0 0 0 0.4rem var(--c-white); }

		&:checked:focus-visible {
			box-shadow: inset 0 0 0 0.4rem var(--c-white), 0 0 0 0.4rem color-mix(in srgb, var(--c-hoogovens-secondary1) 18%, transparent);
		}
	}

	& .pfh-form__actions {
		display: flex;
		justify-content: flex-end;

		& .btn {
			transition: background-color 0.3s ease-out;

			&:hover, &:focus-visible { --fill-btn: var(--c-hoogovens-primary2); }
		}
	}
}

@media (max-width: 960px) {
	.wp-block-pfh-stappen,
	.wp-block-pfh-stappen.is-image-left {
		grid-template-columns: 1fr;

		&:not(.is-style-blauw, .is-style-groen, .is-style-geel, .is-style-oranje) .wp-block-pfh-stappen__content { padding: 2.4rem 0 0; }

		& .wp-block-pfh-stappen__image {
			order: -1;
			max-height: 24rem;
		}
	}

	.pfh-form {
		&.has-kader { padding: 2rem; }

		& .pfh-form__field {
			grid-template-columns: 1fr;

			& label { padding-top: 0; }

			& .pfh-form__error,
			& .pfh-form__help { grid-column: 1; }
		}

		& .pfh-form__choices legend {
			float: none;
			width: auto;
			margin: 0 0 0.8rem;
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.pfh-file__drop,
	.pfh-file__list button { transition: none; }

	.tile { transition: none; }

	:is(.tile, .news-card) {
		& .btn,
		& .btn span:first-child { transition: none; }
	}

	.wp-block-details {
		&::details-content,
		& summary::before { transition: none; }
	}

	.wp-block-pfh-p123 {
		& details::details-content,
		& summary,
		& summary::before,
		& a { transition: none; }
	}

	header .main-navigation .sub-menu,
	main .banner .btn { transition: none; }
}

@media (min-width: 1366px) {
	main .content-page {
		& .main-content { grid-column: 1 / 9; }
		& .sidebar { grid-column: 9 / 13; }
	}

	main .archive-page.has-sidebar {
		& .archive-list { grid-column: 1 / 9; }
		& .sidebar { grid-column: 9 / 13; }
	}
}

@media (min-width: 961px) and (max-width: 1147px) {
	header .top-navigation {
		& .search-label {
			position: absolute;
			width: 1px;
			height: 1px;
			overflow: hidden;
			clip-path: inset(50%);
			white-space: nowrap;
		}

		& .my-pension .icon { display: none; }
	}
}

@media (max-width: 960px) {
	:root {
		--pad-hor: 2.4rem;
		--pad-hor-small: 2rem;
	}

	header {
		& a.logo {
			height: auto;
			transform: none;
		}

		& .top-navigation {
			position: relative;
			flex-wrap: wrap;
			align-items: center;
			padding: 0;
			row-gap: 0.8rem;

			& > a.logo {
				display: flex;
				align-items: center;
				order: 1;
				flex: 1 1 0%;
				min-width: 0;
				max-width: clamp(24rem, 30vw + 12rem, 40rem);
				margin-block: 0.8rem;
				margin-left: 1.2rem;

				img {
					width: 100%;
					height: auto;
				}
			}

			& > nav {
				flex-basis: 100%;
				margin-left: 0;
			}

			& ul {
				width: 100%;
				border-bottom: none;

				& li {
					flex: 1 1 auto;
				}

				& a {
					justify-content: center;
					padding: clamp(1rem, 1.4vw + 0.5rem, 1.6rem) clamp(0rem, 2vw, 1.6rem);
					font-size: clamp(1.2rem, 1.4vw + 0.55rem, 1.8rem);
					text-wrap: nowrap;
					text-align: center;

					& .icon { display: none; }
				}
			}

			& .mobile-hidden {
				display: none;
			}

			& .mobile-actions {
				order: 1;
				flex-shrink: 0;
				display: flex;
				align-items: center;
				gap: 0.8rem;
				margin-block: 0.8rem;
				margin-right: 1.2rem;
			}

			& .mobile-search {
				display: flex;
				align-items: center;

				& input {
					position: absolute;
					right: 8.8rem;
					bottom: 0.6rem;
					left: calc(100% - 8.8rem);
					z-index: 1;
					height: calc(clamp(24rem, 30vw + 12rem, 40rem) / 7.14 + 0.4rem);
					padding-block: 0.6rem;
					padding-inline: 0;
					border: none;
					border-bottom: 0.1rem solid var(--c-blue-1);
					background-color: var(--c-white);
					opacity: 0;
					visibility: hidden;
					transition: left 0.2s ease-out, opacity 0.2s ease-out, padding-inline 0.2s ease-out, visibility 0s linear 0.2s;

					&:focus {
						outline: 0.2rem solid transparent;
						border-bottom-color: var(--c-hoogovens-secondary1);
					}
				}

				&.is-open input {
					left: 1.2rem;
					padding-inline: 0.8rem;
					opacity: 1;
					visibility: visible;
					transition-delay: 0s;
				}
			}

			& .search-toggle {
				--size-icon: 2rem;

				display: flex;
				padding: 0.8rem;
			}

			& .menu-toggle {
				display: flex;
				padding: 0.8rem;
			}
		}

		& .main-navigation {
			max-width: none;
			width: 100%;
			margin-inline: 0;
			padding-inline: var(--pad-hor);

			& > ul {
				display: none;
				flex-direction: column;
				align-items: stretch;
				margin-block: 0 1.6rem;
			}

			&.is-open > ul {
				display: flex;
			}

			& ul {
				flex-wrap: wrap;
				justify-content: flex-start;
			}

			& .menu-item-has-children > a::after { transition: transform 0.2s ease-out; }

			& .menu-item-has-children > a,
			& .menu-item-has-children > a:hover { background-color: transparent; }
			& .menu-item-has-children.is-open > a::after { transform: rotate(180deg); }

			& ul .sub-menu {
				position: static;
				display: none;
				flex-basis: 100%;
				padding: 0 0 0.8rem 1.6rem;
				box-shadow: none;
				background-color: transparent;
				visibility: visible;
				opacity: 1;
				transform: none;
				transition: none;
			}

			& li.is-open > .sub-menu { display: flex; }

			& ul .sub-menu a {
				text-wrap: wrap;
				white-space: normal;

				&::before { display: none; }
			}
		}
	}

	main {
		padding-inline: 1.2rem;

		& .three-tiles { margin-top: 1.6rem; }

		& .tile .title { font-size: 2.4rem; }

		& .tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

		& .banner {
			aspect-ratio: auto;

			> div {
				font-size: 2.8rem;
				line-height: 3.4rem;
			}
		}

		& .content-page {
			grid-template-columns: minmax(0, 1fr);

			& .main-content {
				grid-column: 1 / -1;
				border-right: none;
			}

			& .sidebar {
				grid-column: 1 / -1;
				padding: 0 var(--pad-hor) var(--pad-hor);
			}
		}

		& .content-page.faq-page {
			& .faq-themes { display: none; }

			& .faq-theme-select {
				display: block;
				padding: var(--pad-hor) var(--pad-hor) 0;

				& label {
					display: block;
					margin-bottom: 0.6rem;
					font-size: 1.4rem;
					font-weight: 700;
					text-transform: uppercase;
				}
			}

			& .main-content { grid-column: 1 / -1; }
		}

		& .archive-page {
			&.has-sidebar .archive-list { grid-column: 1 / -1; }
			& .sidebar { grid-column: 1 / -1; }
		}
	}

	.sidebar :is(.widget_nav_menu, .is-hidden-mobile) { display: none; }

	footer { gap: 2.4rem; }
}

@media (max-width: 767px) {
	.wp-block-pfh-nieuws.is-naast { flex-direction: column; }

	/* Columns stack; !important beats the inline flex-basis of a column with a set width (as in core). */
	.wp-block-columns:not(.is-not-stacked-on-mobile) {
		flex-wrap: wrap;

		& > .wp-block-column { flex-basis: 100% !important; }
	}

	.bulkhead img {
		object-fit: cover;
		object-position: 70% center;
	}

	main .three-tiles { grid-template-columns: 1fr; }

	main .home-news { grid-template-columns: 1fr; }

	.bulkhead > div h1 {
		width: fit-content;
		max-width: calc(12ch + 2.4rem);
		margin-inline: 0;
		padding: 0.8rem 1.2rem;
		border-radius: 0.4rem;
		background-color: color-mix(in srgb, var(--c-white) 75%, transparent);
	}

	.bulkhead:is(.is-oranje, .is-lichtblauw, .is-donkerblauw) > div h1 { padding: 0.8rem 1.2rem; }
	.bulkhead.is-oranje > div h1 { background-color: color-mix(in srgb, var(--c-hoogovens-primary2) 80%, transparent); }
	.bulkhead.is-lichtblauw > div h1 { background-color: color-mix(in srgb, var(--c-blue-1) 80%, transparent); }
	.bulkhead.is-donkerblauw > div h1 { background-color: color-mix(in srgb, var(--c-hoogovens-primary1) 80%, transparent); }

	.wp-block-pfh-p123 {
		margin-inline: -1.2rem;

		& .wp-block-pfh-p123__category > summary { padding: 1.2rem 1.6rem; font-size: 1.6rem; }

		& .wp-block-pfh-p123__item {
			grid-template-columns: 4.8rem minmax(0, 1fr);
			gap: 1.2rem 1.6rem;
			padding: 2rem 1.6rem;
		}

		& .wp-block-pfh-p123__image { width: 4.8rem; height: 4.8rem; margin-bottom: 0; }

		& .wp-block-pfh-p123__title { font-size: 2rem; }

		& :is(.wp-block-pfh-p123__laag2, .wp-block-pfh-p123__laag3) > .wp-block-pfh-p123__content { padding: 1.2rem 0 0.8rem; }
	}
}

@media (max-width: 480px) {
	main .tile-grid {
		grid-template-columns: 1fr;

		& .tile {
			display: grid;
			grid-template-columns: minmax(0, 1fr) auto;
			align-items: center;
			gap: 0 1.6rem;
			padding-block: 1.6rem;
			text-align: start;
		}

		& .tile .subtitle { grid-column: 1 / -1; grid-row: 2; border: none; }

		& .tile .title {
			margin: 0;
			padding: 0;
			border: none;
		}

		& .tile .btn {
			margin-top: 0;

			& span:first-child { display: none; }
		}
	}
}