/* ==========================================================================
   VLV theme styles
   Loaded on the front-end and inside the block editor.
   Colours / fonts / spacing come from theme.json presets.
   ========================================================================== */

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Sections on the landing pages sit flush against each other. */
.wp-site-blocks:has(.vlv-landing) > * + *,
.vlv-landing > * + *,
.vlv-landing .wp-block-post-content > * + *,
.editor-styles-wrapper .is-root-container > .alignfull + .alignfull {
	margin-block-start: 0;
}

a {
	text-decoration: none;
}

h1, h2, h3, h4 {
	text-wrap: balance;
}

/* --------------------------------------------------------------------------
   Paragraph styles
   -------------------------------------------------------------------------- */

.is-style-eyebrow {
	font-size: 12px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: .2em;
	text-transform: uppercase;
}
.is-style-eyebrow:not(.has-text-color) {
	color: var(--wp--preset--color--primary);
}

.is-style-badge {
	display: block;
	width: fit-content;
	padding: 9px 14px;
	font-size: 11px;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: .2em;
	text-transform: uppercase;
}
.is-style-badge:not(.has-background) {
	background: var(--wp--preset--color--primary);
}
.is-style-badge:not(.has-text-color) {
	color: var(--wp--preset--color--white);
}

.is-style-chip {
	margin: 0;
	padding: 12px 18px;
	border: 1px solid var(--wp--preset--color--grey-light);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	color: var(--wp--preset--color--ink);
}
.has-ink-background-color .is-style-chip {
	border-color: #4a4a48;
	color: var(--wp--preset--color--grey-light);
}

.is-style-stat {
	font-size: 26px;
	font-weight: 900;
	line-height: 1;
}
.is-style-stat:not(.has-text-color) {
	color: var(--wp--preset--color--ink);
}

.is-style-caption {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.45;
}

.is-style-arrow-link {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
}
.is-style-arrow-link a {
	text-decoration: none;
}

.is-style-step {
	flex: none;
	width: 32px;
	font-size: 20px;
	font-weight: 900;
	line-height: 1.1;
}
.is-style-step:not(.has-text-color) {
	color: var(--wp--preset--color--primary);
}

/* --------------------------------------------------------------------------
   Group styles
   -------------------------------------------------------------------------- */

/* Dark hero with the diagonal red band from the VLV brand. */
.is-style-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.is-style-hero::before {
	content: "";
	position: absolute;
	z-index: -1;
	left: 0;
	right: -20%;
	top: 100%;
	/* Must be >= width * sin(14deg) or the band's lower edge shows on wide screens. */
	height: max(400px, 50vw);
	background: var(--wp--preset--color--primary);
	opacity: .15;
	transform: rotate(-14deg);
	transform-origin: top left;
	pointer-events: none;
}

.is-style-card:where(:not(.has-background)) {
	background: var(--wp--preset--color--white);
}
.is-style-card:where(:not([style*="padding"])) {
	padding: 32px 30px;
}

.is-style-accent-bar {
	position: relative;
	padding-left: 26px;
}
.is-style-accent-bar::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 6px;
	height: 56px;
	background: var(--wp--preset--color--primary);
}

.is-style-bullet-line {
	border-left: 3px solid var(--wp--preset--color--primary);
	padding-left: 16px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.55;
}

.is-style-divided > * {
	margin-block: 0 !important;
	padding-block: 18px;
}
.is-style-divided > * + * {
	border-top: 2px solid var(--wp--preset--color--line);
}
.has-surface-background-color .is-style-divided > * + * {
	border-top-color: var(--wp--preset--color--border);
}
.is-style-divided > * > * {
	margin-block: 0;
}
.is-style-divided > * > * + * {
	margin-block-start: 6px;
}

.is-style-choice,
.is-style-choice-featured {
	position: relative;
	padding: 30px 26px;
	border: 1px solid var(--wp--preset--color--border);
}
.is-style-choice-featured {
	padding: 29px 25px;
	border: 2px solid var(--wp--preset--color--primary);
}
.is-style-choice > *,
.is-style-choice-featured > * {
	margin-block: 0;
}
.is-style-choice > * + *,
.is-style-choice-featured > * + * {
	margin-block-start: 12px;
}
.is-style-choice-featured > .vlv-flag {
	position: absolute;
	top: -13px;
	left: 25px;
	margin: 0;
	padding: 8px 12px;
	font-size: 10.5px;
	letter-spacing: .14em;
	line-height: 1;
}
.is-style-choice-featured > .vlv-flag + * {
	margin-block-start: 0;
}
.vlv-card-list {
	padding-top: 12px;
	border-top: 1px solid var(--wp--preset--color--line);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.7;
	color: var(--wp--preset--color--ink);
}

/* --------------------------------------------------------------------------
   Helpers used by the landing page sections
   -------------------------------------------------------------------------- */

.vlv-measure {
	max-width: 520px;
}

.vlv-stats-grid {
	max-width: 560px;
}
.vlv-stats-grid > * {
	padding: 18px 20px;
}
.vlv-stats-grid > * > * {
	margin-block: 0;
}
.vlv-stats-grid > * > * + * {
	margin-block-start: 6px;
}
.vlv-stats-grid .is-style-caption {
	font-size: 12px;
	line-height: 1.4;
}

.vlv-cert-strip {
	border-top: 1px solid var(--wp--preset--color--line-dark);
}
.vlv-cert-strip .vlv-cert {
	font-size: 17px;
	font-weight: 900;
	line-height: 1;
}
.vlv-push-right {
	margin-left: auto !important;
}

.vlv-tight > * {
	margin-block: 0;
}
.vlv-tight > * + * {
	margin-block-start: 6px;
}

/* Photo cards: images fill their column. */
.vlv-landing .wp-block-image img,
.editor-styles-wrapper .vlv-photo img {
	width: 100%;
	display: block;
}
.vlv-photo--full img {
	min-height: 240px;
}

.vlv-phone {
	font-size: 15px;
	font-weight: 800;
	line-height: 1;
}
.vlv-tagline {
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
}

/* --------------------------------------------------------------------------
   Header & footer
   -------------------------------------------------------------------------- */

/*
 * Sticky header. --vlv-header-h must match the header's height (min-height of
 * .vlv-header below); it is used so in-page links (#offerte) land below the header.
 */
:root {
	--vlv-header-h: 80px;
	--vlv-adminbar-h: var(--wp-admin--admin-bar--height, 0px);
}
html {
	scroll-padding-top: calc(var(--vlv-header-h) + var(--vlv-adminbar-h));
}
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}
.vlv-sticky-header {
	position: sticky;
	top: var(--vlv-adminbar-h);
	z-index: 100;
}
/* Below 600px WordPress no longer keeps the admin bar fixed. */
@media (max-width: 600px) {
	:root {
		--vlv-adminbar-h: 0px;
	}
}

/*
 * The form card sits at the top of the hero; offset the jump by the hero's top
 * padding so the page lands exactly as it looks on first load (label keeps its space).
 */
#offerte {
	scroll-margin-top: var(--wp--preset--spacing--60);
}

.vlv-header {
	box-sizing: border-box;
	min-height: 80px;
	border-bottom: 1px solid var(--wp--preset--color--line-dark);
}
.vlv-header .wp-block-site-logo img,
.vlv-footer .wp-block-site-logo img {
	height: auto;
}
.vlv-header a,
.vlv-footer a {
	color: inherit;
}
.vlv-header .wp-block-button__link {
	font-size: 13.5px;
	padding: 14px 20px;
}

/* --------------------------------------------------------------------------
   Map with regional offices
   -------------------------------------------------------------------------- */

.vlv-map {
	position: relative;
	height: 180px;
	max-width: 100%;
	overflow: hidden;
}
.vlv-map__canvas {
	position: absolute;
	top: 0;
	left: 50%;
	height: 100%;
	aspect-ratio: 3305 / 1580;
	max-width: 100%;
	transform: translateX(-50%);
	background: url("../images/kaart-vlaanderen.png") center / 100% 100% no-repeat;
}
.vlv-pin {
	position: absolute;
	transform: translate(-50%, -100%);
	display: flex;
	flex-direction: column;
	align-items: center;
}
.vlv-pin::before {
	content: "";
	display: block;
	width: 44px;
	height: 23px;
	background: var(--wp--preset--color--primary) url("../images/logo-vlv-white.png") center / 28px auto no-repeat;
}
.vlv-pin::after {
	content: "";
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 7px solid var(--wp--preset--color--primary);
}

/* --------------------------------------------------------------------------
   Aanvraagformulier
   -------------------------------------------------------------------------- */

.vlv-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
}
.vlv-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
.vlv-form__field {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}
.vlv-form__field label,
.vlv-form__field legend {
	display: block;
	margin-bottom: 7px;
	padding: 0;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--grey);
}
.vlv-form__req {
	color: var(--wp--preset--color--primary);
}
.vlv-form input[type="text"],
.vlv-form input[type="email"],
.vlv-form input[type="tel"],
.vlv-form textarea {
	box-sizing: border-box;
	width: 100%;
	height: 46px;
	padding: 0 12px;
	border: 1px solid var(--wp--preset--color--grey-light);
	border-radius: 0;
	background: var(--wp--preset--color--white);
	font: 400 15px/1.4 var(--wp--preset--font-family--raleway);
	color: var(--wp--preset--color--ink);
}
.vlv-form textarea {
	height: 80px;
	padding: 10px 12px;
	resize: vertical;
}
.vlv-form input:focus,
.vlv-form textarea:focus {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: -1px;
	border-color: var(--wp--preset--color--ink);
}
.vlv-form__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}
.vlv-form__chip {
	position: relative;
	margin: 0 !important;
	cursor: pointer;
	text-transform: none !important;
	letter-spacing: 0 !important;
}
.vlv-form__chip input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}
.vlv-form__chip span {
	display: block;
	padding: 9px 12px;
	border: 1px solid var(--wp--preset--color--grey-light);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1;
	color: var(--wp--preset--color--ink);
	transition: background-color .15s, color .15s, border-color .15s;
}
.vlv-form__chip:hover span {
	border-color: var(--wp--preset--color--ink);
}
.vlv-form__chip input:checked + span {
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}
.vlv-form__chip input:focus-visible + span {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}
.vlv-form__submit {
	display: block;
	width: 100%;
	margin-top: 6px;
	padding: 19px !important;
	border: 0;
	cursor: pointer;
	font-family: inherit;
	font-size: 16px !important;
	text-align: center;
}
.vlv-form__hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.vlv-form__notice {
	padding: 14px 16px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
}
.vlv-form__notice--ok {
	background: #eaf6ec;
	color: #1e5b2b;
	border-left: 4px solid #2e8540;
}
.vlv-form__notice--error {
	background: #fdecee;
	color: var(--wp--preset--color--primary-dark);
	border-left: 4px solid var(--wp--preset--color--primary);
}
.vlv-form-note {
	text-align: center;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 781px) {
	:root {
		--vlv-header-h: 64px;
	}
	.vlv-header {
		min-height: 64px;
	}
	.vlv-hide-mobile {
		display: none !important;
	}
	.vlv-header .wp-block-site-logo img {
		width: 80px !important;
	}
	.vlv-header .wp-block-button__link {
		padding: 12px 16px;
		font-size: 13px;
	}
	.vlv-push-right {
		margin-left: 0 !important;
	}
	.vlv-photo--full img {
		aspect-ratio: 16 / 9 !important;
	}
}

@media (max-width: 480px) {
	.vlv-form__row {
		grid-template-columns: 1fr;
	}
	.is-style-card:where(:not([style*="padding"])) {
		padding: 24px 20px;
	}
}

/* Groups with a background get default padding from core; the stat grid handles its own. */
.wp-block-group.vlv-stats-grid {
	padding: 0;
}

/* --------------------------------------------------------------------------
   Startpagina: schermvullende keuze eindklant / installateur
   -------------------------------------------------------------------------- */

.vlv-home {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	padding: 0 !important;
}
.admin-bar .vlv-home {
	min-height: calc(100svh - 32px);
}

/* Logo + prompt float over the top of both halves. */
.vlv-home__intro {
	position: absolute !important;
	z-index: 3;
	top: 0;
	left: 0;
	right: 0;
	margin: 0 !important;
	padding: 28px clamp(20px, 4vw, 56px);
	justify-content: space-between;
	background: linear-gradient(to bottom, rgba(29, 29, 27, .85), rgba(29, 29, 27, 0));
	pointer-events: none;
}
.vlv-home__prompt {
	margin: 0;
	font-size: clamp(16px, 1.4vw, 19px);
	font-weight: 700;
	line-height: 1.3;
}

.vlv-split {
	flex: 1;
	align-items: stretch !important;
	margin: 0 !important;
}

.vlv-choice {
	position: relative;
	isolation: isolate;
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	margin: 0 !important;
	padding: 140px clamp(24px, 5vw, 72px) clamp(48px, 8vh, 96px);
	overflow: hidden;
	cursor: pointer;
	box-shadow: inset 0 0 0 var(--wp--preset--color--primary);
	transition: flex-grow .45s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease;
}
.vlv-choice > * {
	max-width: 520px;
	transition: opacity .35s ease;
}
.vlv-choice > * + * {
	margin-block-start: 22px;
}

/* Dark overlay for legibility; turns red-tinted on hover. */
.vlv-choice::before,
.vlv-choice::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	transition: opacity .45s ease;
	pointer-events: none;
}
.vlv-choice::before {
	background: linear-gradient(to top, rgba(29, 29, 27, .95) 10%, rgba(29, 29, 27, .72) 55%, rgba(29, 29, 27, .6));
}
.vlv-choice::after {
	background: linear-gradient(to top, rgba(175, 24, 43, .92) 5%, rgba(217, 37, 51, .55) 60%, rgba(29, 29, 27, .35));
	opacity: 0;
}

.vlv-choice .is-style-chip {
	border-color: rgba(255, 255, 255, .35);
	color: var(--wp--preset--color--white);
	font-size: 12.5px;
	padding: 9px 12px;
}
.vlv-choice .wp-block-heading {
	margin-block-start: 18px;
}

/* The CTA link stretches over the whole half, so the entire side is clickable. */
.vlv-choice__cta .wp-block-button__link {
	background: transparent;
	border: 2px solid var(--wp--preset--color--white);
	padding: 18px 26px;
	font-size: 15px;
	transition: background-color .3s, color .3s, border-color .3s;
}
.vlv-choice .wp-block-buttons,
.vlv-choice .wp-block-button {
	position: static;
}
.vlv-choice__cta .wp-block-button__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* "of" badge on the dividing line. */
.vlv-or {
	position: absolute;
	z-index: 4;
	left: 50%;
	top: 50%;
	width: 64px;
	height: 64px;
	margin: 0 !important;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	font-size: 14px;
	font-weight: 900;
	letter-spacing: .12em;
	text-transform: uppercase;
	transform: translate(-50%, -50%);
	box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
	pointer-events: none;
	transition: left .45s cubic-bezier(.2, .7, .2, 1);
}

/* Hover / keyboard focus states (only on devices that can hover). */
@media (hover: hover) and (min-width: 782px) {
	.vlv-split:has(.vlv-choice:hover) .vlv-choice:hover,
	.vlv-split:has(.vlv-choice:focus-within) .vlv-choice:focus-within {
		flex-grow: 1.35;
	}
	.vlv-choice:hover::after,
	.vlv-choice:focus-within::after {
		opacity: 1;
	}
	.vlv-choice:hover,
	.vlv-choice:focus-within {
		box-shadow: inset 0 -8px 0 var(--wp--preset--color--primary);
	}
	.vlv-choice:hover .vlv-choice__cta .wp-block-button__link,
	.vlv-choice:focus-within .vlv-choice__cta .wp-block-button__link {
		background: var(--wp--preset--color--white);
		border-color: var(--wp--preset--color--white);
		color: var(--wp--preset--color--primary);
	}
	.vlv-split:has(.vlv-choice:hover) .vlv-choice:not(:hover) > * {
		opacity: .45;
	}
	.vlv-split:has(.vlv-choice:hover) .vlv-choice:not(:hover)::before {
		background: rgba(29, 29, 27, .9);
	}
	/* Keep the "of" badge on the dividing line while the halves resize. */
	.vlv-home:has(.vlv-choice--eindklanten:hover) .vlv-or {
		left: 57.4%;
	}
	.vlv-home:has(.vlv-choice--installateurs:hover) .vlv-or {
		left: 42.6%;
	}
}
.vlv-choice:has(:focus-visible) {
	outline: 3px solid var(--wp--preset--color--white);
	outline-offset: -6px;
}
.vlv-choice__cta .wp-block-button__link:focus-visible {
	outline: 0;
}

@media (max-width: 781px) {
	.vlv-split {
		flex-direction: column;
	}
	.vlv-choice {
		flex: 1 1 auto;
		min-height: 60svh;
		padding: 120px 24px 48px;
	}
	.vlv-choice--installateurs {
		padding-top: 72px;
	}
	.vlv-home__prompt {
		display: none;
	}
	.vlv-or {
		display: none !important;
	}
}