/*
Theme Name: Betonpompen
Theme URI: https://triggerz.eu
Description: Child-thema voor Betonpompenspecialist. Monochroom, fotografie en typografie. Alle inhoud via blokken bewerkbaar.
Author: Triggerz Design Studio
Template: generatepress
Version: 1.1.0
Text Domain: betonpompen
*/

@font-face {
	font-family: "Archivo";
	src: url("fonts/archivo-var-latin.woff2") format("woff2");
	font-weight: 400 800;
	font-stretch: 75% 100%;
	font-display: swap;
}

:root {
	--inkt: #111111;
	--antraciet: #39393b;
	--grijs: #707072;
	--steen: #9e9ea0;
	--lijn: #cacacb;
	--lijn-zacht: #e5e5e5;
	--wolk: #f5f5f5;
	--wit: #ffffff;
	--f: "Archivo", "Helvetica Neue", Arial, sans-serif;
	--wrap: 1320px;
	--gut: clamp(20px, 3.5vw, 48px);
	--sec: clamp(64px, 8vw, 120px);
}

/* ---------- Basis ---------- */
body {
	font-family: var(--f);
	font-size: 17px;
	line-height: 1.6;
	color: var(--inkt);
	background: var(--wit);
	-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--f); color: inherit; }
h1, h2, .bp-display {
	font-stretch: 75%;
	font-weight: 700;
	text-transform: uppercase;
	line-height: .9;
	letter-spacing: 0;
	margin-bottom: .35em;
}
h1 { font-size: clamp(3.4rem, 8.4vw, 7.5rem); }
h2 { font-size: clamp(2.4rem, 5vw, 4.5rem); }
h3 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); font-weight: 600; line-height: 1.2; margin-bottom: .3em; }
p { margin-bottom: 1em; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover, a:focus { color: var(--grijs); }
:focus-visible { outline: 2px solid var(--inkt); outline-offset: 3px; }
.bp-klein {
	font-size: .875rem;
	font-weight: 500;
	color: var(--grijs);
	margin-bottom: 1.2em;
}

/* ---------- Knoppen: zwarte pillen ---------- */
.wp-block-button__link,
.bp-pil {
	font-family: var(--f);
	font-size: 1rem;
	font-weight: 500;
	border-radius: 9999px;
	padding: .85em 1.6em;
	background: var(--inkt);
	color: var(--wit);
	border: 1.5px solid var(--inkt);
	text-decoration: none;
	transition: background .2s ease, color .2s ease;
}
.wp-block-button__link:hover, .wp-block-button__link:focus,
.bp-pil:hover, .bp-pil:focus { background: var(--antraciet); color: var(--wit); }
.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--inkt);
	border-color: var(--lijn);
}
.is-style-outline > .wp-block-button__link:hover { background: transparent; border-color: var(--inkt); color: var(--inkt); }
.bp-donker .wp-block-button__link { background: var(--wit); color: var(--inkt); border-color: var(--wit); }
.bp-donker .wp-block-button__link:hover { background: var(--lijn-zacht); }
.bp-donker .is-style-outline > .wp-block-button__link { background: transparent; color: var(--wit); border-color: var(--grijs); }
.bp-donker .is-style-outline > .wp-block-button__link:hover { border-color: var(--wit); }

/* ---------- Header ---------- */
.site-header {
	background: var(--wit);
	border-bottom: 1px solid var(--lijn-zacht);
	position: sticky;
	top: 0;
	z-index: 100;
}
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 0; } }
.inside-header { padding: 14px var(--gut); max-width: var(--wrap); }
.main-title { font-size: 1rem; line-height: 1; }
.main-title a {
	font-stretch: 75%;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 1.45rem;
	color: var(--inkt);
	text-decoration: none;
}
.main-navigation, .main-navigation ul ul { background: transparent; }
.main-navigation .main-nav ul li a {
	color: var(--inkt);
	font-size: .95rem;
	font-weight: 500;
	line-height: 56px;
	padding-left: 14px;
	padding-right: 14px;
}
.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li.current-menu-item > a { color: var(--grijs); background: transparent; }
.main-navigation .menu-toggle { color: var(--inkt); background: transparent; }
.menu-bar-items .bp-pil { margin-left: 12px; padding: .6em 1.2em; font-size: .95rem; white-space: nowrap; align-self: center; }
@media (max-width: 768px) {
	.menu-bar-items .bp-pil { padding: .55em 1em; }
	.main-navigation.toggled .main-nav > ul { background: var(--wit); border-top: 1px solid var(--lijn-zacht); }
}

/* ---------- Volle breedte op pagina's met blokken ---------- */
.full-width-content .site-content,
.full-width-content .inside-article,
.full-width-content .entry-content { padding: 0; margin: 0; max-width: none; }
.full-width-content .container.grid-container { max-width: none; }
.full-width-content .entry-header { display: none; }

.bp-sec {
	padding: var(--sec) var(--gut);
	margin: 0 !important;
}
.bp-sec > * { max-width: var(--wrap); margin-left: auto !important; margin-right: auto !important; }
.bp-wolk { background: var(--wolk); }
.bp-donker { background: var(--inkt); color: var(--wit); }
.bp-donker a:hover { color: var(--steen); }

/* Kolommen van WordPress netjes op het raster */
.bp-sec .wp-block-columns { gap: clamp(28px, 5vw, 80px); margin-bottom: 0; }

/* ---------- Foto's: zwart-wit, eigen formaat ---------- */
.bp-foto { margin: 0; }
.bp-foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) contrast(1.08);
}
.bp-foto figcaption, .bp-foto .wp-element-caption {
	font-size: .8rem;
	font-weight: 500;
	color: var(--grijs);
	margin-top: 10px;
	text-align: left;
}
.bp-foto.is-staand img { aspect-ratio: 4 / 5; }
.bp-foto.is-liggend img { aspect-ratio: 5 / 4; }

/* ---------- Hero ---------- */
.bp-hero { padding-top: clamp(40px, 6vw, 88px); }
.bp-hero .wp-block-columns { align-items: flex-end; }
.bp-hero .bp-lead { font-size: clamp(1.05rem, 1.35vw, 1.2rem); max-width: 32em; color: var(--antraciet); }
.bp-hero .wp-block-buttons { margin-top: 1.8em; gap: 10px; }

/* ---------- Statement ---------- */
.bp-statement p {
	font-size: clamp(1.7rem, 3.6vw, 3.1rem);
	line-height: 1.12;
	font-weight: 500;
	letter-spacing: -.01em;
	max-width: 22em;
	margin: 0;
}
.bp-statement p span, .bp-statement .bp-grijs { color: var(--steen); }

/* ---------- Lijsten met haarlijnen ---------- */
.bp-lijst {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--inkt);
}
.bp-lijst li {
	margin: 0;
	padding: 18px 0;
	border-bottom: 1px solid var(--lijn);
	font-size: 1.1rem;
	font-weight: 500;
}
.bp-lijst a {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 20px;
	text-decoration: none;
}
.bp-lijst a::after { content: "\2192"; transition: transform .2s ease; }
.bp-lijst a:hover::after { transform: translateX(4px); }
.bp-lijst a:hover { color: var(--inkt); text-decoration: underline; }
.bp-donker .bp-lijst { border-top-color: var(--wit); }
.bp-donker .bp-lijst li { border-bottom-color: var(--antraciet); }

/* ---------- Plaatsnamen ---------- */
.bp-plaatsen {
	list-style: none;
	margin: 0;
	padding: 0;
	font-stretch: 75%;
	font-weight: 700;
	text-transform: uppercase;
	font-size: clamp(1.9rem, 3.8vw, 3.4rem);
	line-height: 1.02;
}
.bp-plaatsen li { margin: 0; }
.bp-plaatsen a { text-decoration: none; }
.bp-plaatsen a:hover { color: var(--grijs); }

/* ---------- Google-score ---------- */
.bp-score {
	font-stretch: 75%;
	font-weight: 700;
	font-size: clamp(7rem, 17vw, 14rem);
	line-height: .8;
	margin: 0;
}

/* ---------- Telefoonnummer groot ---------- */
.bp-tel {
	font-stretch: 75%;
	font-weight: 700;
	font-size: clamp(2.4rem, 6vw, 5rem);
	line-height: 1;
	margin: .2em 0 .4em;
}
.bp-tel a { text-decoration: none; }

/* ---------- Footer (bewerkbaar patroon) ---------- */
.bp-footer {
	background: var(--wolk);
	border-top: 1px solid var(--lijn-zacht);
	padding: 64px var(--gut) 24px;
	font-size: .95rem;
}
.bp-footer > * { max-width: var(--wrap); margin-left: auto; margin-right: auto; }
.bp-footer h4 { font-size: 1rem; font-weight: 600; margin-bottom: 1em; }
.bp-footer ul { list-style: none; margin: 0; padding: 0; }
.bp-footer li { margin-bottom: .45em; }
.bp-footer a { text-decoration: none; color: var(--grijs); }
.bp-footer a:hover { color: var(--inkt); }
.bp-footer .bp-merk {
	font-stretch: 75%;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 2rem;
	line-height: .95;
	margin-bottom: .5em;
}
.bp-footer .bp-wettelijk {
	margin-top: 48px;
	padding-top: 20px;
	border-top: 1px solid var(--lijn);
	font-size: .8rem;
	color: var(--grijs);
}
.site-info { display: none; }

/* ---------- Mobiel ---------- */
@media (max-width: 781px) {
	.bp-hero .wp-block-columns { flex-direction: column-reverse; }
	.bp-foto.is-staand img { aspect-ratio: 4 / 3; }
}