/* Op de Mózik — kleine overlay bovenop de originele style.css.
   Alleen classNames die geen 1-op-1 WordPress-blokattribuut hebben. */

/* Origineel: elke .container heeft 12px padding links/rechts, óók
   wanneer al gecentreerd op 1140px breed — dat ontbrak volledig bij
   "align:wide" content (geen .container-klasse), met twee gevolgen: het
   logo/menu stond 12px dichter naar de rand dan de hero-tekst, en op
   mobiel (waar wide == 100% van het scherm) raakten tekst/afbeeldingen
   de randen van het scherm. Hier voor alle "wide"-content hersteld. */
.alignwide {
	padding-left: 12px;
	padding-right: 12px;
	box-sizing: border-box;
}

.wp-block-button.pv-btn-primary .wp-block-button__link,
.wp-block-button.pv-btn-outline-white .wp-block-button__link {
	border-radius: 30px;
	padding: 10px 30px;
	font-size: 15px;
	line-height: 1.5;
	transition: .3s all ease;
	text-decoration: none;
	display: inline-block;
}

.wp-block-button.pv-btn-primary {
	margin-top: 1.5rem;
}
.wp-block-button.pv-btn-primary .wp-block-button__link {
	background-color: #91c13c;
	color: #000;
	border: 1px solid #91c13c;
}
.wp-block-button.pv-btn-primary .wp-block-button__link:hover {
	background-color: #f38d61;
	border-color: #f28658;
	color: #000;
}

.wp-block-button.pv-btn-outline-white .wp-block-button__link {
	background-color: transparent;
	color: #fff;
	border: 1px solid #fff;
}
.wp-block-button.pv-btn-outline-white .wp-block-button__link:hover {
	background-color: #fff;
	color: #91c13c;
}

/* Site-logo blok geeft de "width"-instelling niet door als inline style
   op deze WP-versie — hier zelf afdwingen. Het logo is bewust groot
   (200px breed, ~163px hoog volgens het origineel) en overlapt de hero
   eronder gedeeltelijk — dat werkt alleen als de hero zelf hoog genoeg is
   (zie .hero .heading max-width hieronder). */
.wp-block-site-logo.logo {
	width: 200px;
	height: auto;
}
.wp-block-site-logo.logo img {
	width: 200px;
	height: auto;
}

/* De hero-heading kreeg de volle containerbreedte (i.p.v. de smalle
   col-lg-5/col-lg-6 uit het origineel), waardoor lange taglines op één
   regel pasten i.p.v. wrapten — dat maakte de hero merkbaar lager dan
   het origineel én liet het logo erover heen vallen. Breedte terug
   beperken herstelt zowel de wrap als de hoogte. */
.hero .row .heading:not(.text-center) {
	max-width: 550px;
}

/* Dienstenkaarten: CSS-grid i.p.v. Bootstrap row/col (opbouw vereenvoudigd
   voor een overzichtelijke Gutenberg-editor — minder geneste Group-blokken). */
.pv-service-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
}
@media (max-width: 991.98px) {
	.pv-service-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 575.98px) {
	.pv-service-grid {
		grid-template-columns: 1fr;
	}
}

/* Kaartfoto: brongfoto's hebben wisselende beeldverhoudingen, wat de
   kaarten in de rij liet "verspringen" — vaste hoogte + object-fit:cover
   houdt de rij netjes uitgelijnd, ongeacht de oorspronkelijke foto-ratio.
   width/height als HTML-attributen (i.p.v. enkel CSS) zodat de browser de
   ruimte meteen reserveert en er geen sprong is zodra de foto laadt. */
.service-card-img {
	overflow: hidden;
	margin: 0 0 30px;
}
.service-card-img img {
	width: 100%;
	height: 220px;
	object-fit: cover;
	aspect-ratio: 356 / 220;
	border: 10px solid #fff;
	box-shadow: 0 15px 30px -18px rgb(0 0 0 / 20%);
	transition: border-color .2s linear;
}
.service-card-img:hover img {
	border-color: #91c13c;
}

/* Sluitkruisje mobiel menu: de negatieve top-offset uit de originele CSS
   (afgestemd op de oude markup) duwde het kruisje nu deels buiten
   beeld/afgekapt — hier corrigeren zodat het volledig zichtbaar blijft. */
.site-mobile-menu-header {
	overflow: hidden;
	padding-top: 12px;
}
.site-mobile-menu-close {
	top: 0 !important;
	margin-top: 0 !important;
}

/* Dienstenblok: originele CSS had alleen padding-top, geen padding-bottom
   — de laatste rij kaarten liep daardoor strak tegen de onderrand van het
   grijze vlak aan. */
.service-section-1 {
	padding-bottom: 5rem;
}
@media (max-width: 991.98px) {
	.service-section-1 {
		padding-bottom: 3rem;
	}
}

/* Header-rij (logo / menu / aanmeld-knop): op mobiel valt de middelste
   navigatiekolom weg (d-none d-lg-block); zonder space-between bleven de
   logo- en knop-kolom dan links tegen elkaar aan geplakt i.p.v. logo
   links / knop rechts zoals in het origineel. */
.site-navigation.wp-block-columns {
	justify-content: space-between;
}

/* WP core's eigen .wp-block-columns{align-items:initial !important} wint
   altijd van de niet-!important .are-vertically-aligned-center-regel uit
   diezelfde stylesheet — daardoor werd de "verticaal centreren"-instelling
   nooit toegepast. Hier alsnog afdwingen. */
.wp-block-columns.are-vertically-aligned-center {
	align-items: center !important;
}
.wp-block-columns.are-vertically-aligned-top {
	align-items: flex-start !important;
}
.wp-block-columns.are-vertically-aligned-bottom {
	align-items: flex-end !important;
}

/* De site-brede blockGap staat op 0 (nodig om ongewenste marge tussen
   secties te voorkomen — zie hierboven), maar dat trok ook de ruimte
   tussen een afbeelding- en tekstkolom binnen één Columns-blok weg.
   Hier de kolom-tussenruimte specifiek terugzetten. */
.wp-block-columns:not(.site-navigation) {
	gap: 2.5rem;
}
@media (max-width: 781px) {
	.wp-block-columns:not(.site-navigation) {
		gap: 1.5rem;
	}
}

/* "Gemaakt door"-badge (provisualonline.nl), zelfde blauw/groen verloop
   als de wp-admin-branding elders in dit theme. Bewust NIET fixed —
   alleen zichtbaar wanneer de bezoeker daadwerkelijk onderaan de pagina
   bij de footer is, niet als vast element tijdens het scrollen. */
.site-sub-footer {
	position: relative;
}
.pv-credit-badge {
	position: absolute;
	right: 20px;
	bottom: 12px;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	background: linear-gradient(135deg, #0A6FDB, #159A48);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: "Inter", sans-serif;
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
	transition: transform 0.15s ease;
}
.pv-credit-badge:hover,
.pv-credit-badge:focus {
	transform: scale(1.08);
	color: #fff;
}
@media (max-width: 575.98px) {
	.pv-credit-badge {
		width: 26px;
		height: 26px;
		border-radius: 8px;
		font-size: 12px;
		right: 14px;
		bottom: 10px;
	}
}