/*
Theme Name: Van Tellingen Zink- en Gootwerk
Theme URI: https://vantellingenzinkengootwerk.nl
Author: Designut
Author URI: https://designut.nl
Description: Blokthema voor Van Tellingen Zink- en Gootwerk. Pagina's maakt u aan met de patronen onder "Van Tellingen – pagina's"; teksten en foto's zijn daarna direct in de editor aan te passen.
Requires at least: 7.0
Tested up to: 7.0
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vantellingen
*/

/* ==========================================================================
   Ontwerp overgenomen van de statische site (V2/css/style.css).
   Palet: wit, blauw en grijs/antraciet (zinkkleur). Kleuren komen uit
   theme.json, zodat een wijziging daar overal doorwerkt.
   ========================================================================== */

:root {
	--ink-950: var(--wp--preset--color--ink-950);
	--ink-900: var(--wp--preset--color--ink-900);
	--ink-800: var(--wp--preset--color--ink-800);
	--ink-700: #5b636d;
	--ink: var(--wp--preset--color--ink);
	--body: var(--wp--preset--color--body);
	--muted: var(--wp--preset--color--muted);
	--line: var(--wp--preset--color--line);
	--paper: var(--wp--preset--color--paper);
	--paper-2: #e9edef;
	--white: var(--wp--preset--color--white);

	--blue: var(--wp--preset--color--blue);
	--blue-deep: var(--wp--preset--color--blue-deep);
	--blue-soft: var(--wp--preset--color--blue-soft);

	--zinc: #9aa3a9;
	--zinc-light: #c8cdd0;

	--radius: 16px;
	--radius-s: 10px;
	--shadow-s: 0 1px 2px rgba(29, 34, 39, 0.06), 0 2px 8px rgba(29, 34, 39, 0.05);
	--shadow-m: 0 2px 6px rgba(29, 34, 39, 0.07), 0 12px 32px rgba(29, 34, 39, 0.1);

	--container: 1180px;
	--pad: 24px;
	--header-offset: 120px;
}

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

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

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

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		transition: none !important;
		animation: none !important;
	}
}

body {
	margin: 0;
	-webkit-font-smoothing: antialiased;
}

/* Template-onderdelen sluiten naadloos op elkaar aan */
.wp-site-blocks > * {
	margin-block: 0;
}

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

h1,
h2,
h3 {
	font-weight: 700;
	color: var(--ink);
	line-height: 1.15;
	margin: 0 0 0.5em;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

h1 {
	font-size: clamp(2.1rem, 4.6vw, 3.6rem);
	line-height: 1.08;
}

h2 {
	font-size: clamp(1.6rem, 3vw, 2.35rem);
}

h3 {
	font-size: 1.08rem;
}

/* Accentwoord in een kop: selecteer het woord en maak het cursief */
h1 em,
h2 em,
h3 em {
	font-style: italic;
	color: var(--blue);
}

p {
	margin: 0 0 1em;
}

a {
	color: var(--blue);
	text-decoration: none;
}

a:hover {
	color: var(--blue-deep);
}

:focus-visible {
	outline: 3px solid var(--blue);
	outline-offset: 2px;
	border-radius: 4px;
}

[id] {
	scroll-margin-top: var(--header-offset);
}

.container {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--pad);
}

/* Lijsten zonder opsommingstekens (topbalk, contactgegevens) */
.topbar__usps,
.offerte__contact,
.footer-contact {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Iconen als CSS-masker: kleuren mee met background-color */
.topbar__usps li::before,
.topbar__tel a::before,
.offerte__contact li::before,
.footer-contact li::before,
.waarom-tile::before {
	content: "";
	flex: none;
	background-color: var(--blue);
	-webkit-mask: var(--vt-mask) center / contain no-repeat;
	mask: var(--vt-mask) center / contain no-repeat;
}

/* Sectie-eyebrow: klein kopje met streepje ervoor */
.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--blue);
	margin: 0 0 14px;
}

.eyebrow::before {
	content: "";
	width: 26px;
	height: 2px;
	background: var(--blue);
	border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Knoppen — pilvorm met pijl-chip. Zonder stijl is een knop blauw;
   in de editor zijn "Wit omlijnd", "Antraciet" en "Omlijnd" te kiezen.
   -------------------------------------------------------------------------- */

.wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px 10px 24px;
	border-radius: 999px;
	border: 1px solid transparent;
	background: var(--blue);
	color: #fff;
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.wp-block-button__link::after {
	content: "";
	flex: none;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.18) url("assets/icons/white/arrow-up-right.svg") center / 13px no-repeat;
}

.wp-block-button__link:hover,
.wp-block-button__link:focus {
	background: var(--blue-deep);
	color: #fff;
}

.wp-block-button.is-style-vt-ghost .wp-block-button__link {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.45);
	color: #fff;
}

.wp-block-button.is-style-vt-ghost .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: #fff;
}

.wp-block-button.is-style-vt-ghost .wp-block-button__link::after {
	background-color: rgba(255, 255, 255, 0.14);
}

.wp-block-button.has-chip-phone .wp-block-button__link::after {
	background-image: url("assets/icons/white/phone.svg");
}

.wp-block-button.is-style-vt-ink .wp-block-button__link {
	background: var(--ink-900);
}

.wp-block-button.is-style-vt-ink .wp-block-button__link:hover {
	background: var(--ink-700);
}

.wp-block-button.is-style-vt-outline .wp-block-button__link {
	background: transparent;
	border-color: var(--zinc-light);
	color: var(--ink);
	padding: 10px 22px;
}

.wp-block-button.is-style-vt-outline .wp-block-button__link:hover {
	border-color: var(--blue);
	color: var(--blue-deep);
}

.wp-block-button.is-style-vt-outline .wp-block-button__link::after {
	display: none;
}

/* --------------------------------------------------------------------------
   Topbar
   -------------------------------------------------------------------------- */

.topbar {
	background: var(--ink-950);
	color: var(--zinc-light);
	font-size: 0.82rem;
}

.topbar .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	min-height: 42px;
	padding-block: 6px;
}

.topbar__usps {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 26px;
}

.topbar__usps li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.topbar__usps li::before {
	width: 15px;
	height: 15px;
	--vt-mask: url("assets/icons/check-circle.svg");
}

.topbar__tel {
	margin: 0;
}

.topbar__tel a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #fff;
	font-weight: 500;
	white-space: nowrap;
}

.topbar__tel a::before {
	width: 15px;
	height: 15px;
	--vt-mask: url("assets/icons/phone.svg");
}

.topbar__tel a:hover {
	color: var(--blue);
}

/* --------------------------------------------------------------------------
   Header — wit, zodat het logo goed uitkomt
   -------------------------------------------------------------------------- */

.site-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--line);
}

.site-header .container {
	display: flex;
	align-items: center;
	gap: 28px;
	min-height: 84px;
}

.brand {
	flex: none;
	margin: 0;
}

.brand img {
	height: 70px;
	width: auto;
}

.brand a,
.footer-brand__logo a {
	display: block;
}

.site-nav {
	margin-left: auto;
}

.site-nav .wp-block-navigation__container {
	gap: 30px;
}

/* Menu-item als gewoon blok met een inline link: zelfde hoogte en
   onderstreping als op de statische site */
.site-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item {
	display: block;
}

.site-nav.wp-block-navigation .wp-block-navigation-item__content {
	display: inline;
	color: var(--ink);
	font-size: 0.93rem;
	font-weight: 500;
	padding: 6px 0;
	border-bottom: 2px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.site-nav .wp-block-navigation-item__content:hover,
.site-nav .current-menu-item > .wp-block-navigation-item__content {
	color: var(--blue-deep);
	border-bottom-color: var(--blue);
}

.header-actions {
	flex: none;
}

/* Hamburger- en sluitknop: zelfde vierkantje met rand */
.site-nav .wp-block-navigation__responsive-container-open,
.site-nav .wp-block-navigation__responsive-container-close {
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--white);
	color: var(--ink);
}

/* Uitgeklapt mobiel menu: wit paneel direct onder de header, zoals op de
   statische site (in plaats van WordPress' schermvullende laag) */
.site-nav:has(.is-menu-open) {
	position: static;
}

.site-header:has(.is-menu-open) {
	backdrop-filter: none;
}

.site-nav .wp-block-navigation__responsive-container.is-menu-open {
	position: absolute;
	top: 100%;
	right: 0;
	bottom: auto;
	left: 0;
	height: auto;
	padding: 10px var(--pad) 18px;
	background: var(--white);
	border-bottom: 1px solid var(--line);
	box-shadow: var(--shadow-m);
	overflow: visible;
	animation: none;
}

.site-header .site-nav .is-menu-open .wp-block-navigation__responsive-dialog,
.site-header .site-nav .is-menu-open .wp-block-navigation__responsive-container-content {
	position: static;
	margin: 0;
	padding: 0;
}

.site-header .site-nav .is-menu-open .wp-block-navigation__responsive-container-content,
.site-header .site-nav .is-menu-open .wp-block-navigation__container {
	align-items: stretch;
	gap: 0;
	width: 100%;
}

/* Sluitknop op de plek van de hamburger */
.site-header .site-nav:has(.is-menu-open) .wp-block-navigation__responsive-container-open {
	visibility: hidden;
}

.site-header .site-nav .is-menu-open .wp-block-navigation__responsive-container-close {
	display: flex;
	position: absolute;
	top: -64px;
	right: 52px;
}

.site-header .site-nav .is-menu-open .wp-block-navigation-item {
	display: block;
	width: 100%;
	text-align: left;
	border-bottom: 1px solid var(--line);
}

.site-header .site-nav .is-menu-open .wp-block-navigation-item:last-child {
	border-bottom: 0;
}

.site-header .site-nav .is-menu-open .wp-block-navigation-item__content {
	display: block;
	padding: 13px 4px;
	font-size: 1rem;
	border-bottom: 0;
}

/* --------------------------------------------------------------------------
   Hero — één vaste bannerfoto (Cover-blok; foto wisselen via de editor)
   -------------------------------------------------------------------------- */

.wp-block-cover.hero {
	padding: 96px 0;
	color: #fff;
}

.hero .wp-block-cover__inner-container {
	width: 100%;
	margin: 0;
}

.hero__inner {
	max-width: 640px;
}

.hero__kicker {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--zinc-light);
	margin: 0 0 18px;
}

.hero__kicker::before {
	content: "";
	width: 26px;
	height: 2px;
	background: var(--blue);
}

.hero h1 {
	color: #fff;
	margin-bottom: 18px;
}

.hero p {
	font-size: 1.05rem;
	font-weight: 300;
	color: rgba(255, 255, 255, 0.85);
	max-width: 46ch;
	margin-bottom: 30px;
}

/* --------------------------------------------------------------------------
   Diensten — zes rustige vakken, alleen de kopjes; de hele kaart is klikbaar
   -------------------------------------------------------------------------- */

.diensten {
	background: var(--paper);
	padding: 72px 0 84px;
}

.diensten__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}

.dienst-card {
	position: relative;
	display: flex;
	align-items: center;
	gap: 18px;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 26px 24px;
	box-shadow: var(--shadow-s);
	color: var(--ink);
	transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

/* Icoonvlak */
.dienst-card::before {
	content: "";
	flex: none;
	width: 56px;
	height: 56px;
	border-radius: 14px;
	background: var(--vt-icon) center / 28px no-repeat var(--blue-soft);
}

/* Pijl rechts */
.dienst-card::after {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	background-color: var(--zinc);
	-webkit-mask: url("assets/icons/arrow-right.svg") center / contain no-repeat;
	mask: url("assets/icons/arrow-right.svg") center / contain no-repeat;
	transition: background-color 0.18s ease, transform 0.18s ease;
}

.dienst-card:hover {
	border-color: var(--blue);
	box-shadow: var(--shadow-m);
	transform: translateY(-2px);
}

.dienst-card:hover::after {
	background-color: var(--blue);
	transform: translateX(3px);
}

.dienst-card h3 {
	margin: 0;
	flex: 1;
}

.dienst-card h3 a {
	color: inherit;
}

/* De link in de kop beslaat de hele kaart */
.dienst-card h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.dienst-card h3 a:focus-visible {
	outline: none;
}

.dienst-card:has(a:focus-visible) {
	outline: 3px solid var(--blue);
	outline-offset: 2px;
}

.is-icon-zinken-dakgoten { --vt-icon: url("assets/icons/blue-deep/dienst-zinken-dakgoten.svg"); }
.is-icon-hemelwaterafvoer { --vt-icon: url("assets/icons/blue-deep/dienst-hemelwaterafvoer.svg"); }
.is-icon-bakgoten { --vt-icon: url("assets/icons/blue-deep/dienst-bakgoten.svg"); }
.is-icon-gootconstructies { --vt-icon: url("assets/icons/blue-deep/dienst-gootconstructies.svg"); }
.is-icon-speciaal-maatwerk { --vt-icon: url("assets/icons/blue-deep/dienst-speciaal-maatwerk.svg"); }
.is-icon-document { --vt-icon: url("assets/icons/blue-deep/document.svg"); }

/* Zesde vak: offerte-CTA in knopblauw */
.dienst-card--cta {
	background: var(--blue);
	border-color: var(--blue);
	color: #fff;
}

.dienst-card--cta h3 {
	color: #fff;
}

.dienst-card--cta::before {
	background-color: rgba(255, 255, 255, 0.18);
}

.dienst-card--cta.is-icon-document {
	--vt-icon: url("assets/icons/white/document.svg");
}

.dienst-card--cta::after,
.dienst-card--cta:hover::after {
	background-color: #fff;
}

.dienst-card--cta:hover {
	background: var(--blue-deep);
	border-color: var(--blue-deep);
}

.diensten__more {
	margin: 26px 4px 0;
	font-size: 0.92rem;
}

.diensten__more a {
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   Waarom kiezen voor ons — donker vlak
   -------------------------------------------------------------------------- */

.waarom {
	background: var(--ink-900);
	color: var(--zinc-light);
	padding: 92px 0;
}

.waarom .container {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: 56px;
	align-items: center;
}

.waarom h2 {
	color: #fff;
}

.waarom__intro p {
	font-weight: 300;
	color: rgba(255, 255, 255, 0.78);
	max-width: 44ch;
	margin-bottom: 28px;
}

/* Eyebrow neemt de dunne tekststijl van de intro over (zoals op de
   statische site), maar blijft blauw */
.waarom__intro .eyebrow {
	color: var(--blue);
}

.waarom__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.waarom-tile {
	background: var(--ink-800);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: var(--radius);
	padding: 24px 22px;
}

/* 26px icoon + 20,5px ruimte = zelfde tegelhoogte als op de statische site */
.waarom-tile::before {
	display: block;
	width: 26px;
	height: 26px;
	margin-bottom: 20.5px;
}

.is-icon-shield-check { --vt-mask: url("assets/icons/shield-check.svg"); }
.is-icon-question { --vt-mask: url("assets/icons/question.svg"); }
.is-icon-briefcase { --vt-mask: url("assets/icons/briefcase.svg"); }
.is-icon-medal { --vt-mask: url("assets/icons/medal.svg"); }

.waarom-tile h3 {
	color: #fff;
	font-size: 1rem;
	margin-bottom: 6px;
}

.waarom-tile p {
	font-size: 0.88rem;
	font-weight: 300;
	color: rgba(255, 255, 255, 0.66);
	margin: 0;
}

/* --------------------------------------------------------------------------
   Projecten — foto's met dienstnaam, gelinkt naar de dienstenpagina
   -------------------------------------------------------------------------- */

.projecten {
	padding: 92px 0;
	background: var(--white);
}

.projecten__head {
	margin-bottom: 36px;
}

.projecten__head h2 {
	margin-bottom: 0;
}

.projecten__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}

/* Marges gelijk aan de statische site (standaardmarges van <figure>) */
.wp-block-image.project-card {
	position: relative;
	margin: 16px 40px;
	border-radius: var(--radius);
	overflow: hidden;
	border: 1px solid var(--line);
	background: var(--paper);
}

.project-card a {
	display: block;
}

.project-card img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 0.35s ease;
}

.project-card:hover img {
	transform: scale(1.025);
}

.project-card:has(a:focus-visible) {
	outline: 3px solid var(--blue);
	outline-offset: 2px;
}

.project-card a:focus-visible {
	outline: none;
}

.project-card .wp-element-caption {
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 12px;
	margin: 0;
	background: rgba(255, 255, 255, 0.94);
	border-radius: var(--radius-s);
	padding: 10px 16px;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--ink);
	text-align: left;
	pointer-events: none; /* klik valt door naar de link van de foto */
}

/* --------------------------------------------------------------------------
   Offerte aanvragen
   -------------------------------------------------------------------------- */

.offerte {
	background: var(--paper);
	padding: 92px 0;
}

.offerte .container {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: 56px;
	align-items: start;
}

.offerte__intro {
	position: sticky;
	top: calc(116px + var(--wp-admin--admin-bar--height, 0px));
}

.offerte__intro p {
	max-width: 42ch;
}

.offerte__contact {
	margin: 28px 0 0;
	display: grid;
	gap: 14px;
	font-size: 0.94rem;
}

.offerte__contact li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	color: var(--ink);
	font-weight: 600;
}

.offerte__contact li::before,
.footer-contact li::before {
	width: 18px;
	height: 18px;
	margin-top: 3px;
}

.offerte__contact li:nth-child(1),
.footer-contact li:nth-child(1) { --vt-mask: url("assets/icons/phone.svg"); }
.offerte__contact li:nth-child(2),
.footer-contact li:nth-child(2) { --vt-mask: url("assets/icons/mail.svg"); }
.offerte__contact li:nth-child(3),
.footer-contact li:nth-child(3) { --vt-mask: url("assets/icons/pin.svg"); }
.offerte__contact li:nth-child(4),
.footer-contact li:nth-child(4) { --vt-mask: url("assets/icons/clock.svg"); }

.offerte__contact a {
	color: var(--ink);
}

.offerte__contact a:hover {
	color: var(--blue-deep);
}

.form-card {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-s);
	padding: 34px 32px 36px;
}

.form-card__placeholder {
	margin: 0;
	padding: 24px;
	border: 1.5px dashed var(--zinc-light);
	border-radius: var(--radius-s);
	background: var(--paper);
	color: var(--muted);
	font-size: 0.92rem;
}

/* --------------------------------------------------------------------------
   Offerteformulier (Forminator, vormgeving "Geen") — zelfde opmaak als het
   formulier op de statische site
   -------------------------------------------------------------------------- */

.form-card .forminator-ui.forminator-custom-form {
	margin: 0;
	font-family: inherit;
}

/* Voortgang: "Stap 1 van 2" met een smalle blauwe balk */
.form-card .forminator-pagination-progress {
	margin-bottom: 26px;
}

.form-card .forminator-progress-label {
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--muted);
	margin-bottom: 8px;
}

.form-card .forminator-progress-bar {
	height: 5px;
	border-radius: 5px;
	background: var(--paper-2);
	overflow: hidden;
}

.form-card .forminator-progress-bar span {
	display: block;
	height: 100%;
	border-radius: 5px;
	background: var(--blue);
	transition: width 0.25s ease;
}

/* Rijen, kolommen en labels */
.form-card .forminator-ui.forminator-custom-form .forminator-row {
	display: flex;
	gap: 14px;
	margin: 0 0 18px;
}

.form-card .forminator-ui.forminator-custom-form .forminator-col {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	padding: 0;
}

.form-card .forminator-label {
	display: block;
	font-size: 0.86rem;
	font-weight: 600;
	color: var(--ink);
	margin-bottom: 7px;
}

.form-card .forminator-required {
	display: none;
}

.form-card .forminator-input,
.form-card .forminator-select--field,
.form-card .forminator-textarea {
	display: block;
	width: 100%;
	font-family: inherit;
	font-size: 0.95rem;
	line-height: normal;
	color: var(--ink);
	background-color: var(--white);
	border: 1px solid var(--zinc-light);
	border-radius: var(--radius-s);
	padding: 12px 14px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-card .forminator-select--field {
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23717981' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 40px;
}

.form-card .forminator-textarea {
	min-height: 110px;
	resize: vertical;
}

.form-card .forminator-input:focus,
.form-card .forminator-select--field:focus,
.form-card .forminator-textarea:focus {
	outline: none;
	border-color: var(--blue);
	box-shadow: 0 0 0 3px var(--blue-soft);
}

.form-card .forminator-description {
	display: block;
	margin-top: 6px;
	font-size: 0.76rem;
	color: var(--muted);
}

/* Foutmeldingen */
.form-card .forminator-has_error .forminator-input,
.form-card .forminator-has_error .forminator-select--field,
.form-card .forminator-has_error .forminator-textarea {
	border-color: #b3261e;
}

.form-card .forminator-error-message {
	display: block;
	margin-top: 5px;
	font-size: 0.8rem;
	color: #b3261e;
}

/* Foto-upload: gestippeld vak; het bestandsveld ligt er onzichtbaar
   overheen, zodat klikken én slepen werken */
.form-card .forminator-multi-upload {
	position: relative;
	border: 1.5px dashed var(--zinc-light);
	border-radius: var(--radius-s);
	background: var(--paper);
	padding: 22px 18px;
	text-align: center;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.form-card .forminator-multi-upload:hover,
.form-card .forminator-multi-upload:focus-within {
	border-color: var(--blue);
	background: var(--blue-soft);
}

.form-card .forminator-multi-upload::before {
	content: "";
	display: block;
	width: 26px;
	height: 26px;
	margin: 0 auto;
	background-color: var(--blue);
	-webkit-mask: url("assets/icons/photo.svg") center / contain no-repeat;
	mask: url("assets/icons/photo.svg") center / contain no-repeat;
}

.form-card .forminator-multi-upload::after {
	content: "Klik om foto's te kiezen of sleep ze hierheen";
	display: block;
	margin-top: 8px;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--blue-deep);
}

.form-card .forminator-multi-upload input[type="file"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.form-card .forminator-uploaded-files {
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 8px;
	font-size: 0.85rem;
}

.form-card .forminator-uploaded-files:empty {
	display: none;
}

/* Knoppen: zelfde pilvorm met pijl-chip als de rest van de site */
.form-card .forminator-pagination-footer {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 26px;
}

.form-card .forminator-button {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px 10px 24px;
	border: 0; /* zoals op de statische site: formulierknoppen zonder rand */
	border-radius: 999px;
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.2;
	color: #fff;
	cursor: pointer;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.form-card .forminator-button::after {
	content: "";
	flex: none;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.18) url("assets/icons/white/arrow-right-small.svg") center / 13px no-repeat;
}

.form-card .forminator-button-next {
	background: var(--ink-900);
}

.form-card .forminator-button-next:hover {
	background: var(--ink-700);
}

.form-card .forminator-button-submit {
	background: var(--blue);
}

.form-card .forminator-button-submit::after {
	background-image: url("assets/icons/white/arrow-up-right.svg");
}

.form-card .forminator-button-submit:hover {
	background: var(--blue-deep);
}

.form-card .forminator-button-back {
	background: transparent;
	color: var(--ink);
	padding: 10px 22px;
}

.form-card .forminator-button-back::after {
	display: none;
}

.form-card .forminator-button-back:hover {
	border-color: var(--blue);
	color: var(--blue-deep);
}

.form-card .form-note {
	margin: 0;
	font-size: 0.78rem;
	color: var(--muted);
}

/* Bedankt-melding na verzenden */
.form-card .forminator-response-message.forminator-success {
	text-align: center;
	padding: 36px 10px;
}

.form-card .forminator-response-message.forminator-success::before {
	content: "";
	display: block;
	width: 52px;
	height: 52px;
	margin: 0 auto 16px;
	background-color: var(--blue);
	-webkit-mask: url("assets/icons/success.svg") center / contain no-repeat;
	mask: url("assets/icons/success.svg") center / contain no-repeat;
}

.form-card .forminator-response-message h3 {
	font-size: 1.25rem;
}

.form-card .forminator-response-message p {
	max-width: 38ch;
	margin-inline: auto;
}

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

.site-footer {
	background: var(--ink-950);
	color: var(--zinc-light);
	padding: 72px 0 0;
	font-size: 0.92rem;
}

.footer-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	gap: 44px;
	padding-bottom: 56px;
}

.wp-block-image.footer-brand__logo {
	display: inline-block;
	background: #fff;
	border-radius: 14px;
	padding: 14px 18px;
	margin: 0 0 18px;
}

.footer-brand__logo img {
	height: 64px;
	width: auto;
}

.footer-brand p {
	font-weight: 300;
	color: rgba(255, 255, 255, 0.6);
	max-width: 30ch;
	font-size: 0.88rem;
}

.site-footer h3 {
	color: #fff;
	font-size: 0.95rem;
	margin-bottom: 18px;
}

.footer-contact {
	display: grid;
	gap: 11px;
}

.footer-contact li {
	display: flex;
	gap: 11px;
	align-items: flex-start;
}

.footer-contact li::before {
	width: 16px;
	height: 16px;
	margin-top: 4px;
}

.footer-contact a {
	color: var(--zinc-light);
	overflow-wrap: anywhere;
	transition: color 0.15s ease;
}

.footer-contact a:hover {
	color: var(--blue);
}

.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.09);
	padding: 20px 0;
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.45);
}

.footer-bottom .container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px;
}

.footer-bottom p {
	margin: 0;
}

/* --------------------------------------------------------------------------
   Subpagina's (diensten / over ons)
   -------------------------------------------------------------------------- */

.page-hero {
	background: var(--ink-900);
	color: #fff;
	padding: 72px 0;
}

/* Kopje boven de titel: zelfde (dunne) weergave als op de statische site */
.page-hero .eyebrow {
	font-weight: 300;
	margin: 14px 0 0;
	max-width: 56ch;
}

.page-hero h1 {
	color: #fff;
	font-size: clamp(1.9rem, 3.6vw, 2.8rem);
	margin-bottom: 0;
}

.page-body {
	padding: 76px 0;
}

/* Introtekst bovenaan het witte deel, als eerste 'rij' boven de dienst-blokken */
.page-intro {
	margin: 0;
	padding-bottom: 30px;
	border-bottom: 1px solid var(--line);
	font-size: 1.08rem;
	color: var(--ink);
	text-wrap: pretty;
}

.page-intro + .dienst-blok {
	padding-top: 36px;
}

.page-body .wp-block-buttons {
	margin-top: 24px;
}

.dienst-blok {
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: 22px;
	padding: 30px 0;
	border-bottom: 1px solid var(--line);
}

.dienst-blok:last-of-type {
	border-bottom: 0;
}

/* Icoonvlak links (zelfde icoon als op de homepage) */
.dienst-blok::before {
	content: "";
	width: 64px;
	height: 64px;
	border-radius: 14px;
	background: var(--vt-icon) center / 28px no-repeat var(--blue-soft);
}

.dienst-blok h2 {
	font-size: 1.3rem;
	margin-bottom: 8px;
}

.dienst-blok p {
	margin-bottom: 0;
	max-width: 64ch;
}

/* Fotogalerij per dienst: 5 / 3 / 2 kolommen, foto's 4:3 bijgesneden.
   Een klik opent de foto groot, met vorige/volgende (WordPress-lightbox). */
.wp-block-gallery.has-nested-images.dienst-fotos {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 12px;
	margin: 22px 0 0;
}

.wp-block-gallery.has-nested-images.dienst-fotos figure.wp-block-image:not(#individual-image) {
	width: auto;
	margin: 0;
}

.wp-block-gallery.has-nested-images.is-cropped.dienst-fotos figure.wp-block-image:not(#individual-image) img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius-s);
	border: 1px solid var(--line);
	background: var(--paper);
	transition: border-color 0.18s ease, opacity 0.18s ease;
}

.dienst-fotos figure.wp-block-image:hover img {
	border-color: var(--blue) !important;
	opacity: 0.9;
}

/* Lightbox: donkere achtergrond zoals op de statische site */
.wp-lightbox-overlay .scrim {
	background-color: rgb(24, 28, 32) !important;
	opacity: 0.94 !important;
}

.wp-lightbox-overlay button {
	color: #fff !important;
}

.wp-lightbox-overlay button svg {
	fill: #fff;
}

.over-grid {
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	gap: 52px;
	align-items: center;
}

.wp-block-image.over-grid__foto {
	margin: 0;
	height: 100%;
}

.over-grid__foto img {
	border-radius: var(--radius);
	border: 1px solid var(--line);
	width: 100%;
	height: 100%;
	object-fit: cover;
	min-height: 320px;
}

.page-cta {
	background: var(--paper);
	padding: 64px 0;
}

.page-cta .container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.page-cta h2 {
	margin: 0;
	font-size: 1.5rem;
}

.page-cta .wp-block-buttons {
	margin: 0;
}

/* --------------------------------------------------------------------------
   Responsive — zelfde breekpunten als de statische site
   -------------------------------------------------------------------------- */

@media (max-width: 1020px) {
	.diensten__grid,
	.projecten__grid {
		grid-template-columns: 1fr 1fr;
	}

	.wp-block-gallery.has-nested-images.dienst-fotos {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.waarom .container,
	.offerte .container {
		grid-template-columns: 1fr;
		gap: 44px;
	}

	.offerte__intro {
		position: static;
	}

	.footer-grid {
		grid-template-columns: 1fr 1fr;
	}

	.site-nav.wp-block-navigation .wp-block-navigation-item__content {
		font-size: 0.88rem;
	}

	.site-nav .wp-block-navigation__container {
		gap: 20px;
	}
}

@media (max-width: 840px) {
	/* WordPress schakelt het menu standaard pas onder 600px om; hier al op 840px */
	.site-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.site-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	/* Specifieker dan WordPress' eigen "body .is-layout-flex { display: flex }" */
	.site-header .header-actions {
		display: none;
	}

	/* Hamburger op dezelfde plek als op de statische site */
	.site-header .site-nav {
		margin-right: 28px;
	}

	.wp-block-cover.hero {
		min-height: 540px !important;
		padding: 72px 0;
	}

	.topbar .container,
	.topbar__usps {
		justify-content: center;
	}

	.topbar__usps li:nth-child(n + 2) {
		display: none;
	}
}

@media (max-width: 620px) {
	.topbar__usps {
		display: none; /* alleen het telefoonnummer, gecentreerd */
	}

	.diensten__grid,
	.projecten__grid,
	.waarom__grid,
	.footer-grid {
		grid-template-columns: 1fr;
	}

	.brand img {
		height: 54px;
	}

	.site-header .container {
		min-height: 72px;
	}

	/* Header is hier 72px hoog: sluitknop mee omhoog */
	.site-header .site-nav .is-menu-open .wp-block-navigation__responsive-container-close {
		top: -58px;
	}

	.form-card {
		padding: 26px 20px 28px;
	}

	/* Velden naast elkaar worden onder elkaar gezet */
	.form-card .forminator-ui.forminator-custom-form .forminator-row {
		flex-direction: column;
	}

	.form-card .forminator-pagination-footer {
		flex-direction: column-reverse;
		align-items: stretch;
	}

	.form-card .forminator-button {
		justify-content: space-between;
	}

	.hero__actions .wp-block-button {
		width: 100%;
	}

	.hero__actions .wp-block-button__link {
		width: 100%;
		justify-content: space-between;
	}

	.dienst-blok {
		grid-template-columns: 1fr;
	}

	.wp-block-gallery.has-nested-images.dienst-fotos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.over-grid {
		grid-template-columns: 1fr;
	}
}