/*
Theme Name: van Nunen Tuinen
Theme URI: https://vannunentuinen.nl
Author: Grip op Online
Author URI: https://gripoponline.nl
Description: Block theme voor van Nunen Tuinen — bestrating, tuinaanleg en tuinonderhoud in Son en Breugel. Gebouwd naar het Claude Design, volledig native Gutenberg.
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.0
Version: 1.0.6
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: van-nunen-tuinen
Tags: block-theme, full-site-editing, business, one-column
*/

/* ============================================================
   Alles wat theme.json niet kan. Bewust klein gehouden.
   ============================================================ */

/* ---- Sticky header ---------------------------------------- */
.vnt-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgba(255, 255, 255, 0.9);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--wp--preset--color--rand);
}

.vnt-header .wp-block-site-logo img {
	height: 58px;
	width: auto;
	mix-blend-mode: multiply;
}

/* Actieve nav-pagina krijgt het amber streepje uit het ontwerp */
.vnt-header .wp-block-navigation-item {
	position: relative;
}

.vnt-header .wp-block-navigation-item > a {
	padding: 10px 14px;
	border-radius: 999px;
	display: inline-block;
	transition: background 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.vnt-header .wp-block-navigation-item > a:hover {
	background: var(--wp--preset--color--mint);
}

.vnt-header .current-menu-item > a::after,
.vnt-header .current_page_item > a::after {
	content: "";
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 2px;
	height: 3px;
	border-radius: 999px;
	background: var(--wp--preset--color--amber);
}

/* ---- Telefoonknop in de header ---------------------------- */
.vnt-tel .wp-block-button__link {
	background: var(--wp--preset--color--groen);
	color: #fff;
	font-weight: 700;
	font-size: 16px;
	padding: 12px 22px;
}

.vnt-tel .wp-block-button__link:hover,
.vnt-tel .wp-block-button__link:focus {
	background: var(--wp--preset--color--groen-hover);
	color: #fff;
}

/* ---- Ghost-knop op donkere achtergrond -------------------- */
.vnt-btn-ghost .wp-block-button__link {
	background-color: transparent !important;
	color: #fff !important;
}

.vnt-btn-ghost .wp-block-button__link:hover,
.vnt-btn-ghost .wp-block-button__link:focus {
	background-color: rgba(255, 255, 255, 0.1) !important;
	color: #fff !important;
}

/* ---- Eyebrow / kicker ------------------------------------- */
.vnt-eyebrow {
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 13px;
	font-weight: 700;
	color: var(--wp--preset--color--teal);
}

/* ---- Chips / pills ---------------------------------------- */
.vnt-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.vnt-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	border: 1px solid var(--wp--preset--color--rand);
	border-radius: 999px;
	padding: 9px 18px;
	font-size: 15px;
	font-weight: 600;
	color: var(--wp--preset--color--groen-donker);
	margin: 0;
}

.vnt-chip--mint {
	background: var(--wp--preset--color--mint);
	border-color: transparent;
	padding: 8px 16px;
}

/* ---- Kaarten ---------------------------------------------- */
.vnt-card {
	background: #fff;
	border: 1px solid var(--wp--preset--color--rand);
	border-radius: 24px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(4, 69, 108, 0.08);
	transition: box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.vnt-card:hover {
	box-shadow: 0 10px 28px rgba(4, 69, 108, 0.1);
	transform: translateY(-2px);
}

.vnt-card .wp-block-image,
.vnt-card figure {
	margin: 0;
}

.vnt-card .wp-block-image img {
	width: 100%;
	height: 190px;
	object-fit: cover;
	display: block;
}

/* ---- Stapnummer ------------------------------------------- */
.vnt-step-number {
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: var(--wp--preset--color--amber);
	color: var(--wp--preset--color--groen-donker);
	font-weight: 800;
	font-size: 19px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
}

/* ---- Reviews ---------------------------------------------- */
.vnt-review {
	background: #fff;
	border: 1px solid var(--wp--preset--color--rand);
	border-radius: 24px;
	padding: 28px;
	margin: 0;
}

.vnt-stars {
	color: var(--wp--preset--color--amber);
	letter-spacing: 2px;
	font-size: 18px;
	line-height: 1;
	margin: 0 0 14px;
}

/* ---- Werk-mozaïek ----------------------------------------- */
.vnt-mosaic {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: 220px;
	gap: 20px;
}

.vnt-mosaic > figure,
.vnt-mosaic > .wp-block-image {
	margin: 0;
	border-radius: 24px;
	overflow: hidden;
	height: 100%;
}

.vnt-mosaic > figure:first-child,
.vnt-mosaic > .wp-block-image:first-child {
	grid-column: span 2;
	grid-row: span 2;
}

.vnt-mosaic img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ---- Media met vaste hoogte in splits --------------------- */
.vnt-media img {
	width: 100%;
	object-fit: cover;
	display: block;
	border-radius: 24px;
}

.vnt-media--tall img { height: 380px; }
.vnt-media--wide img { height: 340px; }
.vnt-media--portrait img { height: 420px; }
.vnt-media--map img { height: 240px; }

/* ---- Vinkjeslijst ----------------------------------------- */
.vnt-checks {
	list-style: none;
	padding: 0;
	margin: 0 0 28px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.vnt-checks li {
	position: relative;
	padding-left: 30px;
	font-size: 17px;
	color: var(--wp--preset--color--ink);
	line-height: 1.5;
}

.vnt-checks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	width: 18px;
	height: 18px;
	background: no-repeat center/18px 18px
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232E6B2E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* ---- Statblokken ------------------------------------------ */
.vnt-stat {
	background: var(--wp--preset--color--mint);
	border-radius: 16px;
	padding: 24px;
}

.vnt-stat__value {
	font-size: 32px;
	font-weight: 800;
	color: var(--wp--preset--color--groen-donker);
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin: 0;
}

.vnt-stat__label {
	font-size: 15px;
	color: var(--wp--preset--color--body);
	margin: 4px 0 0;
}

/* ---- Contactregel ----------------------------------------- */
.vnt-contactline__icon {
	width: 44px;
	height: 44px;
	flex: 0 0 auto;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--wp--preset--color--rand);
	display: flex;
	align-items: center;
	justify-content: center;
}

.vnt-contactline__icon::before {
	content: "";
	width: 19px;
	height: 19px;
	background: no-repeat center/19px 19px;
}

.vnt-icon--tel::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232E6B2E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}

.vnt-icon--mail::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232E6B2E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E");
}

.vnt-icon--pin::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232E6B2E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

.vnt-contactline__label {
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--teal);
	margin: 0 0 4px;
}

.vnt-contactline__value {
	font-size: 21px;
	font-weight: 700;
	margin: 0;
}

/* ---- Formulierkaart --------------------------------------- */
.vnt-formcard {
	background: #fff;
	border: 1px solid var(--wp--preset--color--rand);
	border-radius: 24px;
	box-shadow: 0 24px 60px rgba(4, 69, 108, 0.14);
	padding: 32px;
}

/* Binnenmarge en rand meerekenen in de breedte, anders steken de velden
   rechts uit de kaart. */
.vnt-formcard,
.vnt-formcard *,
.vnt-formcard *::before,
.vnt-formcard *::after {
	box-sizing: border-box;
}

.vnt-formcard input[type="text"],
.vnt-formcard input[type="tel"],
.vnt-formcard input[type="email"],
.vnt-formcard textarea,
.vnt-formcard select {
	width: 100%;
	border: 1px solid var(--wp--preset--color--rand);
	border-radius: 16px;
	padding: 13px 16px;
	font-size: 16px;
	font-family: inherit;
	color: var(--wp--preset--color--ink);
	outline: none;
	background: #fff;
}

.vnt-formcard input:focus,
.vnt-formcard textarea:focus,
.vnt-formcard select:focus {
	border-color: #9CCD9C;
	box-shadow: 0 0 0 4px rgba(156, 205, 156, 0.45);
}

.vnt-formcard label {
	font-size: 14px;
	font-weight: 700;
	color: var(--wp--preset--color--groen-donker);
	display: block;
	margin-bottom: 7px;
}

.vnt-formcard input[type="radio"] {
	width: 18px;
	height: 18px;
	accent-color: var(--wp--preset--color--groen);
	margin: 0;
}

/* De verzendknop is dezelfde knop als elders op de site. De waarden hieronder
   komen één op één uit elements.button in theme.json — wijzig je die, wijzig
   dan ook dit blok, anders lopen ze uiteen. Het enige verschil is de breedte:
   in een formulierkaart staat een knop over de volle breedte beter. */
.vnt-formcard input[type="submit"],
.vnt-formcard button[type="submit"],
.vnt-formcard .forminator-button-submit {
	display: block;
	width: 100%;
	box-sizing: border-box;
	appearance: none;
	-webkit-appearance: none;
	background: var(--wp--preset--color--amber);
	color: var(--wp--preset--color--groen-donker);
	border: 0;
	border-radius: 999px;
	padding: 16px 28px;
	font-family: inherit;
	font-size: 17px;
	font-weight: 800;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.vnt-formcard input[type="submit"]:hover,
.vnt-formcard button[type="submit"]:hover,
.vnt-formcard .forminator-button-submit:hover,
.vnt-formcard input[type="submit"]:focus,
.vnt-formcard button[type="submit"]:focus,
.vnt-formcard .forminator-button-submit:focus {
	background: var(--wp--preset--color--amber-hover);
	color: var(--wp--preset--color--groen-donker);
}

/* Forminator zet de knop tijdens het verzenden op "loading". */
.vnt-formcard .forminator-button-submit[disabled],
.vnt-formcard .forminator-button-submit.forminator-button-onload {
	opacity: 0.7;
	cursor: progress;
}

/* ---- Zwevende offerteknop --------------------------------- */
.vnt-float {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 60;
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-end;
}

.vnt-float .wp-block-button__link {
	box-shadow: 0 10px 28px rgba(4, 69, 108, 0.1);
	padding: 15px 24px;
	font-size: 16px;
	transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.vnt-float .wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 24px 60px rgba(4, 69, 108, 0.14);
}

/* De zwevende knop is overbodig op de contactpagina zelf */
.page-contact .vnt-float,
.vnt-no-float .vnt-float {
	display: none;
}

/* ---- Footer ----------------------------------------------- */
.vnt-footer {
	background: #fff;
	border-top: 1px solid var(--wp--preset--color--rand);
}

.vnt-footer .wp-block-site-logo img {
	height: 66px;
	width: auto;
	mix-blend-mode: multiply;
}

.vnt-footer__heading {
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--teal);
	margin: 0 0 16px;
}

/* ---- Entree-animatie -------------------------------------- */
@keyframes vnt-rise {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: none; }
}

.vnt-rise {
	animation: vnt-rise 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@media (prefers-reduced-motion: reduce) {
	.vnt-rise { animation: none; }
	.vnt-card:hover,
	.vnt-float .wp-block-button__link:hover { transform: none; }
}

/* ============================================================
   Breakpoints — exact de twee uit het ontwerp
   ============================================================ */

/* ---- Hero: foto's vullen de hoogte van de offertekaart ----
   Alleen op desktop. De linkerkolom is even hoog als de kaart ernaast, maar de
   tekst vult die hoogte niet. De twee foto's gaan daarom onder elkaar staan en
   groeien mee tot precies de onderrand van de kaart. Geen vaste hoogtes: wordt
   het formulier langer of korter, dan schuift de onderkant gewoon mee.
   Onder 1041px verandert er niets — daar staat de kaart onder de tekst. */
@media (min-width: 1041px) {
	.vnt-hero-copy {
		display: flex;
		flex-direction: column;
	}

	.vnt-hero-media {
		flex: 1 1 auto;
		flex-direction: column !important;
		gap: 20px;
		min-height: 360px;
	}

	.vnt-hero-media > .wp-block-column {
		flex: 1 1 0 !important;
		display: flex;
		min-width: 0;
		min-height: 0;
	}

	.vnt-hero-media .wp-block-image {
		display: flex;
		flex: 1 1 auto;
		margin: 0;
		min-height: 0;
	}

	/* Beeldverhouding staat inline (168/118) en moet hier wijken, anders kan de
	   foto niet meegroeien. Ronding en schaduw staan ook inline. */
	.vnt-hero-media .wp-block-image img {
		width: 100%;
		height: 100%;
		aspect-ratio: auto !important;
		object-fit: cover;
	}
}

@media (max-width: 1040px) {
	.vnt-mosaic {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: 200px;
	}
	.vnt-mosaic > figure:first-child,
	.vnt-mosaic > .wp-block-image:first-child {
		grid-column: auto;
		grid-row: auto;
	}
	.vnt-media--tall img,
	.vnt-media--portrait img { height: 320px; }
}

@media (max-width: 720px) {
	.vnt-mosaic {
		grid-template-columns: minmax(0, 1fr);
	}
	.vnt-section {
		padding-top: 56px !important;
		padding-bottom: 56px !important;
	}
	.vnt-float {
		left: 16px;
		right: 16px;
		bottom: 16px;
		flex-direction: row !important;
		align-items: stretch !important;
		justify-content: stretch !important;
	}
	.vnt-float .wp-block-button {
		flex: 1 1 0 !important;
		width: auto !important;
	}
	.vnt-float .wp-block-button__link {
		display: block;
		width: 100%;
		text-align: center;
		padding-left: 12px;
		padding-right: 12px;
		font-size: 15px;
	}
	.vnt-header .wp-block-site-logo img { height: 46px; }
	.vnt-media--tall img,
	.vnt-media--wide img,
	.vnt-media--portrait img { height: 260px; }
}

/* Geen horizontale overflow, waar dan ook */
html, body { overflow-x: hidden; }


/* ---------------------------------------------------------------------------
   Forminator in de offertekaart

   Het formulier staat op stijl "Basisstijlen": Forminator laat dan zijn eigen
   opmaak weg en erft die van het thema. Wat hieronder staat, zijn de plekken
   die het thema niet dekt — vooral het uploadveld, dat Forminator zelf tekent.
   --------------------------------------------------------------------------- */

.vnt-formcard .forminator-field {
  margin-bottom: 18px;
}

.vnt-formcard .forminator-required {
  color: var(--wp--preset--color--groen);
  margin-left: 2px;
}

.vnt-formcard .forminator-radio,
.vnt-formcard .forminator-radio-label {
  cursor: pointer;
}

/* De verzendknop staat hierboven, bij de andere knoppen van de kaart. */

/* Forminator zet de knop in een eigen rij; die mag geen extra ruimte pakken. */
.vnt-formcard .forminator-row-last {
  margin-top: 4px;
}

/* Sleepvlak voor de foto's. */
.vnt-formcard .forminator-multi-upload {
  border: 2px dashed var(--wp--preset--color--rand);
  border-radius: 16px;
  background: var(--wp--preset--color--wash);
  padding: 26px 18px;
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.vnt-formcard .forminator-multi-upload:hover,
.vnt-formcard .forminator-multi-upload.forminator-dragover {
  border-color: var(--wp--preset--color--groen);
  background: var(--wp--preset--color--mint);
}

.vnt-formcard .forminator-multi-upload-message {
  color: var(--wp--preset--color--body);
  font-size: 15px;
  line-height: 1.5;
}

.vnt-formcard .forminator-multi-upload-message a {
  color: var(--wp--preset--color--groen);
  font-weight: 700;
}

.vnt-formcard .forminator-icon-upload {
  color: var(--wp--preset--color--groen);
}

.vnt-formcard .forminator-uploaded-files {
  margin-top: 12px;
  font-size: 15px;
}

/* Hulptekst onder een veld. */
.vnt-formcard .forminator-description {
  margin-top: 6px;
  color: var(--wp--preset--color--muted);
  font-size: 14px;
  line-height: 1.5;
}

/* Bedankboodschap na verzenden: zelfde rust als de rest van de kaart. */
.vnt-formcard .forminator-response-message {
  border: 0;
  background: var(--wp--preset--color--mint);
  border-radius: 16px;
  padding: 22px 20px;
  color: var(--wp--preset--color--groen-donker);
  font-size: 16px;
  line-height: 1.6;
}

/* Foutmeldingen leesbaar houden op de lichte kaart. */
.vnt-formcard .forminator-error-message {
  color: #C0392B;
  font-size: 14px;
}

.vnt-formcard .forminator-has_error .forminator-input,
.vnt-formcard .forminator-has_error .forminator-textarea {
  border-color: #C0392B;
}

/* De "Formulier bewerken"-link ziet alleen een ingelogde beheerder. */
.vnt-formcard .forminator-edit-module {
  font-size: 13px;
}