/*
 * Main theme styles.
 *
 * Every .css file in assets/css/ is auto-enqueued on the front-end by
 * Theme::autoEnqueueStyles() (handle: theme-<filename>, version = filemtime).
 *
 * Colors, typography, buttons, fields, header and layouts are configured in
 * Impreza (Theme Options, Header Builder, Reusable Blocks) — see
 * `wp vanzonsbeek setup`. This file only holds what Impreza has no setting for.
 */

/* Hero photo with an offset brand-blue frame */
.vzb-hero-img {
	position: relative;
	margin: 0 18px 18px 0;
}
.vzb-hero-img::before {
	content: '';
	position: absolute;
	inset: 18px -18px -18px 18px;
	border: 2px solid var(--color-alt-content-primary);
}
.vzb-hero-img img {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* Check list (Wat wij doen on the home page) */
.vzb-checks ul {
	margin: 0;
	list-style: none;
}
.vzb-checks li {
	position: relative;
	margin: 0 0 10px;
	padding-left: 32px;
}
.vzb-checks li::before {
	content: '';
	position: absolute;
	left: 3px;
	top: 0.3em;
	width: 7px;
	height: 12px;
	border: solid var(--color-alt-content-primary);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* Material cards: whole card is a link */
.vzb-material {
	transition: box-shadow .2s ease, transform .2s ease;
}
.vzb-material:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 32px rgba(21, 26, 30, .08);
}

/* Google Maps embed on the contact page (Raw HTML element, class "vzb-map") */
.vzb-map iframe {
	display: block;
	width: 100%;
	height: 440px;
	border: 0;
	border-radius: 2px;
	filter: grayscale(1);
}
@media (max-width: 600px) {
	.vzb-map iframe { height: 320px; }
}

/* Copyright bar: no paragraph gap */
.footer-bottom p {
	margin: 0;
}

/* Key figures on "Wat wij doen" (Text Block, class "vzb-stats") */
.vzb-stats .wpb_wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 48px;
}
.vzb-stats p {
	margin: 0;
	font-size: 15px;
	color: var(--color-content-faded);
}
.vzb-stats strong {
	display: block;
	font-family: var(--h1-font-family);
	font-size: 38px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--color-content-heading);
}

/* Header phone button: keep icon and number on one line */
.l-header .w-btn {
	white-space: nowrap;
}

/* Existing logo (dark on a white background) on the light footer */
.vzb-logo-blend img {
	mix-blend-mode: multiply;
}