/* Veldboom – thema-interacties (AW-module). Alleen wat Elementor niet native kan. */

/* Hello Elementor zet antialiased font-smoothing op body: dat maakt Commuters Sans op macOS dunner dan op live.
   Live gebruikt de standaard rendering. */
body {
	-webkit-font-smoothing: auto;
	-moz-osx-font-smoothing: auto;
}

/* Commuters Sans (Typekit) heeft alleen 300 en 600: strong/b relatief "bolder" valt anders terug op 300. */
.elementor strong,
.elementor b {
	font-weight: 600;
}

/* ---------- Header ---------- */
.admin-bar .vb-header {
	top: 32px !important;
}

@media (max-width: 782px) {
	.admin-bar .vb-header {
		top: 46px !important;
	}
}

@media (max-width: 1024px) {
	.vb-header {
		background-color: var(--e-global-color-primary);
	}
}

.vb-logo-large,
.vb-header-login,
.vb-header-divider {
	transition: transform 0.5s ease-out;
}

.vb-menu-toggle .elementor-widget-container,
.vb-menu-toggle {
	transition: background-color 0.4s;
}

@media (min-width: 1025px) {
	body.vb-scrolled .vb-logo-large {
		transform: translateX(-110%);
	}

	body.vb-scrolled .vb-header-login,
	body.vb-scrolled .vb-header-divider {
		transform: translateY(-200px);
	}

	body.vb-scrolled .vb-menu-toggle {
		background-color: var(--e-global-color-primary);
	}
}

/* ---------- Pijl-knoppen: tekst vet + pijl schuift uit (zoals de oude .btn) ---------- */
.vb-arrow-btn .elementor-button-content-wrapper {
	align-items: center;
}

.vb-arrow-btn .elementor-button-icon {
	display: inline-flex;
	justify-content: flex-end;
	width: 27px;
	overflow: hidden;
	transition: width 0.4s, margin 0.4s;
}

.vb-arrow-btn .elementor-button-icon svg {
	flex: 0 0 35px;
	width: 35px !important;
	height: auto !important;
	margin: 0 !important;
}

/* Alle knoppen (ook zonder pijl, bijv. de telefoonknop): tekst vet bij hover, zoals de oude .btn op live. */
.elementor-widget-button .elementor-button-text {
	transition: font-weight 0.2s;
}

.vb-arrow-btn .elementor-button:hover .elementor-button-icon,
.vb-arrow-btn .elementor-button:focus-visible .elementor-button-icon {
	width: 35px;
	margin-right: -8px;
}

.elementor-widget-button .elementor-button:hover .elementor-button-text,
.elementor-widget-button .elementor-button:focus-visible .elementor-button-text {
	font-weight: 600;
}

/* ---------- Pijl-lijsten (snelnavigatie hero, Services) ---------- */
/* Elementor zet de tekst-inspringing als padding op het icoon; content-box houdt de pijl 30px breed. */
.vb-arrow-list .elementor-icon-list-icon {
	display: inline-flex;
	justify-content: flex-end;
	box-sizing: content-box;
	width: 30px;
	overflow: hidden;
	transition: width 0.4s, margin 0.4s;
}

.vb-arrow-list .elementor-icon-list-icon svg {
	flex: 0 0 38px;
	width: 38px !important;
	height: auto !important;
	margin: 0 !important;
}

.vb-arrow-list .elementor-icon-list-text {
	transition: font-weight 0.2s;
}

.vb-arrow-list .elementor-icon-list-item > a:hover .elementor-icon-list-icon,
.vb-arrow-list .elementor-icon-list-item > a:focus-visible .elementor-icon-list-icon {
	width: 38px;
	margin-inline-end: -8px;
}

.vb-arrow-list--bold .elementor-icon-list-item > a:hover .elementor-icon-list-text,
.vb-arrow-list--bold .elementor-icon-list-item > a:focus-visible .elementor-icon-list-text {
	font-weight: 600;
}

/* ---------- Hero: slider-teller + vorige/volgende ---------- */
.vb-hero-controls__inner {
	display: flex;
	align-items: flex-end;
	gap: 24px;
	color: var(--e-global-color-primary);
	line-height: 1;
}

.vb-hero-controls__fraction {
	display: inline-flex;
	align-items: flex-end;
	font-size: 13.6px;
}

.vb-hero-controls__current {
	margin-bottom: 5px;
	font-size: 17px;
	font-weight: 600;
}

.vb-hero-controls__buttons {
	display: inline-flex;
	gap: 14px;
	align-items: center;
	padding-bottom: 6px;
}

.vb-hero-controls .vb-hero-controls__btn {
	/* niet de globale (groene) knopstijl van de kit overnemen */
	display: inline-flex;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--e-global-color-primary);
	cursor: pointer;
	transition: transform 0.4s, color 0.4s;
}

.vb-hero-controls__btn svg {
	width: 38px;
	height: auto;
}

.vb-hero-controls .vb-hero-controls__btn:hover,
.vb-hero-controls .vb-hero-controls__btn:focus-visible {
	color: #000;
	background: transparent;
}

.vb-hero-controls .vb-hero-controls__btn--next:hover {
	transform: translateX(10px);
}

.vb-hero-controls .vb-hero-controls__btn--prev:hover {
	transform: translateX(-10px);
}

/* ---------- Actueel-carrousel: pijlen alleen op desktop (zoals live, d-none d-lg-block) ---------- */

/* ---------- Footer: links onderstrepen bij hover ---------- */
.vb-footer-links a:hover .elementor-icon-list-text,
.vb-footer-links a:focus-visible .elementor-icon-list-text,
.vb-footer-links .elementor-item:hover,
.vb-footer-links .elementor-item:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------- Popup-menu ---------- */
/* Pijltje: dun (oude iconfont), rechts uitgelijnd; draait naar rechts als het submenu open is. */
.vb-popup-nav .elementor-item,
.vb-popup-nav .elementor-sub-item {
	justify-content: space-between;
}

.vb-popup-nav .sub-arrow i,
.vb-popup-nav .sub-arrow svg {
	display: none;
}

.vb-popup-nav .sub-arrow::before {
	content: "";
	display: block;
	width: 17px;
	height: 9px;
	background-color: currentColor;
	-webkit-mask: url("/wp-content/uploads/2026/10/vb-chevron-down.svg?v=2") center / contain no-repeat;
	mask: url("/wp-content/uploads/2026/10/vb-chevron-down.svg?v=2") center / contain no-repeat;
	transition: transform 0.5s;
}

/* Alleen draaien als het submenu echt open is (na klik), niet bij hover (.highlighted van SmartMenus). */
.vb-popup-nav .vb-open > a .sub-arrow::before {
	transform: rotate(-90deg);
}

@media (max-width: 1024px) {
	.vb-popup-nav .elementor-item.highlighted .sub-arrow::before {
		transform: rotate(-90deg);
	}
}

/* Desktop: submenu alleen op klik, bovenaan in de rechterkolom (zelfde hoogte voor alle items). */
@media (min-width: 1025px) {
	.vb-popup-nav,
	.vb-popup-nav .elementor-widget-container,
	.vb-popup-nav .elementor-nav-menu--main,
	.vb-popup-nav .elementor-nav-menu--main > ul,
	.vb-popup-nav .elementor-nav-menu--main > ul > li {
		position: static !important;
	}

	.vb-popup-nav .elementor-nav-menu--main .sub-menu {
		display: none !important;
		position: absolute !important;
		top: 10px !important; /* eerste subitem op hoogte van de tekst van het eerste hoofditem */
		left: calc(100% + 15px) !important;
		width: 520px !important;
		min-width: 0 !important;
		max-width: none !important;
		margin: 0 !important;
		border: 0 !important;
		box-shadow: none !important;
		background: transparent !important;
	}

	.vb-popup-nav .elementor-nav-menu--main li.vb-open > .sub-menu {
		display: block !important;
	}

	.vb-popup-nav .elementor-nav-menu--main li.vb-open > a {
		color: var(--e-global-color-secondary) !important;
	}
}

/* ---------- Taalkeuze [awcf_vb_language] ---------- */
.vb-lang {
	position: relative;
	color: #fff;
}

.vb-lang .vb-lang__toggle {
	display: inline-flex;
	gap: 10px;
	align-items: center;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: #fff;
	font: inherit;
	text-transform: uppercase;
	cursor: pointer;
	transition: color 0.4s;
}

.vb-lang .vb-lang__toggle:hover,
.vb-lang .vb-lang__toggle:focus,
.vb-lang .vb-lang__toggle:focus-visible,
.vb-lang .vb-lang__toggle:active {
	background: transparent;
	color: var(--e-global-color-secondary);
}

.vb-lang__chevron {
	width: 9px;
	height: 5px;
	background-color: currentColor;
	-webkit-mask: url("/wp-content/uploads/2026/10/vb-chevron-down.svg?v=2") center / contain no-repeat;
	mask: url("/wp-content/uploads/2026/10/vb-chevron-down.svg?v=2") center / contain no-repeat;
	transition: transform 0.4s;
}

.vb-lang__toggle:hover .vb-lang__chevron {
	transform: rotate(-90deg);
}

.vb-lang__toggle[aria-expanded="true"] .vb-lang__chevron {
	transform: rotate(-180deg);
}

.vb-lang__list {
	position: absolute;
	left: 30px;
	z-index: 2;
	margin: 0;
	padding: 5px 20px;
	list-style: none;
	background-color: #fff;
	text-transform: uppercase;
}

.vb-lang__list a {
	color: var(--e-global-color-primary);
}

/* ---------- Menuknop header: exact 90x90 (mobiel 50x50), icoon gecentreerd, hover zoals oude thema ---------- */
.vb-menu-toggle .elementor-icon-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 90px;
	line-height: 0;
}

.vb-menu-toggle .elementor-icon {
	display: flex;
}

.vb-menu-toggle svg {
	overflow: visible;
}

.vb-menu-toggle svg rect {
	transition: transform 0.5s;
}

.vb-menu-toggle:hover svg rect:nth-child(1),
.vb-menu-toggle:hover svg rect:nth-child(3) {
	transform: translateX(4px);
}

.vb-menu-toggle:hover svg rect:nth-child(2) {
	transform: translateX(-4px);
}

@media (max-width: 767px) {
	.vb-menu-toggle .elementor-icon-wrapper {
		height: 50px;
	}
}

/* ---------- Actueel-kaart: beeld zoomt in, titel krijgt underline ---------- */
.vb-post-card .elementor-widget-image {
	overflow: hidden;
	border-radius: 6px;
}

.vb-post-card .elementor-widget-image img {
	transition: transform 0.4s;
}

.vb-post-card:hover .elementor-widget-image img {
	transform: scale(1.1);
}

.vb-post-card:hover h3 a {
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 2px;
}

/* Actueel-carrousel: "vorige" pas tonen na een klik op "volgende" (zoals live). */
.vb-actueel-carousel .elementor-swiper-button {
	/* translate i.p.v. transform: Elementor positioneert de pijlen zelf met transform (translateY(-50%)). */
	transition: opacity 0.4s, translate 0.4s;
}

.vb-actueel-carousel .elementor-swiper-button.swiper-button-disabled {
	opacity: 0;
	pointer-events: none;
}

.vb-actueel-carousel .elementor-swiper-button-next:hover {
	translate: 10px 0;
}

.vb-actueel-carousel .elementor-swiper-button-prev:hover {
	translate: -10px 0;
}

/* Actueel: slider loopt rechts door tot de rand van het scherm (zoals live: overflow-visible slider in een sectie
   met overflow hidden), zodat de kaarten even breed blijven als op de oude site. */
.vb-actueel-carousel .swiper {
	overflow: visible;
}

.vb-actueel-carousel .elementor-swiper-button.swiper-button-disabled {
	visibility: hidden;
}

/* overflow: clip i.p.v. hidden: bij focus op een slide mag de sectie niet horizontaal "wegscrollen". */
.vb-actueel {
	overflow: clip !important;
}

/* ---------- Header: donkere variant op pagina's zonder hero (zoals live: body.blog / .archive) ---------- */
@media (min-width: 1025px) {
	body.blog .vb-header-login .elementor-icon-list-text,
	body.archive .vb-header-login .elementor-icon-list-text,
	body.vb-header-dark .vb-header-login .elementor-icon-list-text {
		color: var(--e-global-color-primary) !important;
	}

	body.blog .vb-header-login svg,
	body.archive .vb-header-login svg,
	body.vb-header-dark .vb-header-login svg,
	body.blog .vb-menu-toggle svg,
	body.archive .vb-menu-toggle svg,
	body.vb-header-dark .vb-menu-toggle svg {
		fill: var(--e-global-color-primary) !important;
		color: var(--e-global-color-primary) !important;
	}

	body.blog .vb-header-divider,
	body.archive .vb-header-divider,
	body.vb-header-dark .vb-header-divider {
		background-color: rgba(23, 43, 60, 0.7) !important;
	}

	body.blog.vb-scrolled .vb-menu-toggle svg,
	body.archive.vb-scrolled .vb-menu-toggle svg,
	body.vb-header-dark.vb-scrolled .vb-menu-toggle svg {
		fill: #fff !important;
		color: #fff !important;
	}
}

/* ---------- Actueel-overzicht: categoriefilter (Elementor Taxonomy Filter) in de stijl van live ---------- */
.vb-filter .e-filter {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0 30px;
	justify-content: stretch;
}

@media (max-width: 767px) {
	.vb-filter .e-filter {
		grid-template-columns: minmax(0, 1fr);
	}
}

.vb-filter .e-filter .e-filter-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	margin: 12px 0 0;
	padding: 5px 0;
	border: 0;
	border-bottom: 2px solid rgba(23, 43, 60, 0.2);
	border-radius: 0;
	background: transparent;
	color: var(--e-global-color-primary);
	font-family: var(--e-global-typography-accent-font-family), sans-serif;
	font-size: 17px;
	font-style: italic;
	font-weight: 300;
	line-height: 2;
	text-align: left;
	transition: border-color 0.5s;
}

.vb-filter .e-filter .e-filter-item::after {
	content: "";
	flex: 0 0 auto;
	width: 27px;
	height: 10px;
	background-color: currentColor;
	-webkit-mask: url("/wp-content/uploads/2026/10/vb-arrow-right.svg") right center / 35px auto no-repeat;
	mask: url("/wp-content/uploads/2026/10/vb-arrow-right.svg") right center / 35px auto no-repeat;
	transition: width 0.4s;
}

.vb-filter .e-filter .e-filter-item:hover,
.vb-filter .e-filter .e-filter-item:focus-visible {
	border-bottom-color: rgba(23, 43, 60, 0.4);
	background: transparent;
	color: var(--e-global-color-primary);
}

.vb-filter .e-filter .e-filter-item:hover::after,
.vb-filter .e-filter .e-filter-item:focus-visible::after {
	width: 35px;
}

.vb-filter .e-filter .e-filter-item[aria-pressed="true"] {
	border-bottom-color: var(--e-global-color-primary);
}

/* ---------- Actueel-overzicht: paginering "1 2" gecentreerd ---------- */
.vb-post-grid .elementor-pagination {
	margin-top: 40px;
	text-align: center;
	font-size: 17px;
}

.vb-post-grid .elementor-pagination .page-numbers {
	margin: 0 10px;
	color: var(--e-global-color-primary);
}

.vb-post-grid .elementor-pagination .page-numbers.current {
	font-weight: 600;
}

.vb-post-grid .elementor-pagination a.page-numbers:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Kaartbeeld: de link om de afbeelding is inline-block → beeld vult anders niet de volle kaartbreedte. */
.vb-post-card .elementor-widget-image a {
	display: block;
}

/* Filteritems vullen hun kolom (Elementor geeft ze een eigen breedte/flex). */
.vb-filter .e-filter .e-filter-item {
	flex: none;
	min-width: 0;
	max-width: none;
}

/* ---------- Bericht: galerij (Elementor Image Carousel met ACF-galerij) zoals live ---------- */
.vb-gallery-section {
	overflow: clip;
}

.vb-gallery .swiper {
	overflow: visible;
}

.vb-gallery .swiper-slide-image {
	width: 100%;
	height: auto;
	aspect-ratio: 873 / 524;
	object-fit: cover;
	border-radius: 0;
}

/* Pijlen onder de slider, rechts in de container (slider = 2/3 van de container → right: -50%). */
.vb-gallery .elementor-swiper-button {
	top: auto !important;
	bottom: -70px !important;
	height: auto !important;
	width: auto !important;
	color: var(--e-global-color-primary);
	transition: opacity 0.4s, translate 0.4s;
}

.vb-gallery .elementor-swiper-button svg {
	width: 38px;
	height: auto;
	fill: currentColor;
}

.vb-gallery .elementor-swiper-button-next {
	right: -50% !important;
	left: auto !important;
}

.vb-gallery .elementor-swiper-button-prev {
	right: calc(-50% + 52px) !important;
	left: auto !important;
}

.vb-gallery .elementor-swiper-button-next:hover {
	translate: 10px 0;
}

.vb-gallery .elementor-swiper-button-prev:hover {
	translate: -10px 0;
}

.vb-gallery .elementor-swiper-button.swiper-button-disabled {
	opacity: 0;
	visibility: hidden;
}

@media (max-width: 767px) {
	.vb-gallery .elementor-swiper-button-next {
		right: 0 !important;
	}

	.vb-gallery .elementor-swiper-button-prev {
		right: 52px !important;
	}
}

/* ---------- Bericht: tekst (strong = 600, tussenkoppen zoals live) ---------- */
/* Live: 17px onder alinea's en lijsten (Hello Elementor zet 0.9rem op p en 0 op ul/ol). */
.vb-post-content p,
.vb-post-content ul,
.vb-post-content ol {
	margin-bottom: 17px;
}

.vb-post-content p:last-child,
.vb-post-content ul:last-child,
.vb-post-content ol:last-child {
	margin-bottom: 0;
}

.vb-post-content a {
	text-decoration: underline;
}

/* ---------- Actueel-blok (template "Sectie – Actueel") op donkere achtergrond: class vb-actueel--dark op de wrapper ---------- */
.vb-actueel--dark h2.elementor-heading-title,
.vb-actueel--dark h3.elementor-heading-title,
.vb-actueel--dark h3.elementor-heading-title a {
	color: #fff !important;
}

.vb-actueel--dark .vb-post-card {
	border-color: rgba(255, 255, 255, 0.2) !important;
}

.vb-actueel--dark .vb-arrow-btn--plain .elementor-button {
	color: #fff !important;
}

.vb-actueel--dark .vb-arrow-btn--plain .elementor-button svg {
	fill: #fff !important;
}

.vb-actueel--dark .vb-arrow-btn:not(.vb-arrow-btn--plain) .elementor-button {
	background-color: #fff !important;
	color: var(--e-global-color-primary) !important;
}

.vb-actueel--dark .vb-arrow-btn:not(.vb-arrow-btn--plain) .elementor-button svg {
	fill: var(--e-global-color-primary) !important;
}

.vb-actueel--dark .vb-actueel-carousel .elementor-swiper-button {
	color: #fff !important;
}

.vb-actueel--dark .vb-actueel-carousel .elementor-swiper-button svg {
	fill: #fff !important;
}

/* ---------- Projectkaart (Loop – Project kaart): zoom + titels omhoog + "Lees meer" bij hover, zoals live ---------- */
.vb-project-card {
	isolation: isolate;
}

.vb-project-card__img,
.vb-project-card__img img {
	height: 100% !important;
}

.vb-project-card__img img {
	width: 100%;
	transition: transform 0.4s;
}

.vb-project-card__titles {
	transition: transform 0.4s;
}

.vb-project-card__more {
	opacity: 0;
	transition: opacity 0.3s;
}

.vb-project-card:hover .vb-project-card__img img {
	transform: scale(1.25);
}

.vb-project-card:hover .vb-project-card__titles {
	transform: translateY(-35px);
}

.vb-project-card:hover .vb-project-card__more {
	opacity: 1;
}

/* ---------- Teamlid (Loop – Teamlid): foto 100:65, bij hover wisselt naar de 2e foto (ACF "2e afbeelding") ---------- */
.vb-team-card__media {
	position: relative;
}

.vb-team-card__img img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 100 / 65;
	object-fit: cover;
}

.vb-team-card__img--hover {
	z-index: 1;
	opacity: 0;
	transition: opacity 0.4s;
}

.vb-team-card:hover .vb-team-card__img--hover {
	opacity: 1;
}

/* ---------- Partnerkaart: witte pijl-link ---------- */
.vb-arrow-btn--white .elementor-button svg {
	fill: #fff !important;
}

.vb-partner-card {
	height: 100%;
}

/* ---------- Contactformulier (Elementor Form): 2 kolommen, bericht vult de rechterkolom (zoals live) ---------- */
@media (min-width: 768px) {
	.vb-contact-form .elementor-form-fields-wrapper {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 30px;
		row-gap: 17px;
		margin: 0 !important;
	}

	.vb-contact-form .elementor-form-fields-wrapper > .elementor-field-group {
		grid-column: 1;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.vb-contact-form .elementor-form-fields-wrapper > .elementor-field-type-textarea {
		grid-column: 2;
		grid-row: 1 / span 3;
	}

	.vb-contact-form .elementor-form-fields-wrapper > .elementor-field-type-submit {
		grid-column: 1 / span 2;
		margin-top: 51px !important;
	}

	.vb-contact-form .elementor-field-type-textarea textarea {
		height: 100%;
	}
}

.vb-contact-form .elementor-field-textual::placeholder {
	color: var(--e-global-color-primary);
	opacity: 1;
}

.vb-contact-form .elementor-field-textual:focus {
	box-shadow: none;
	outline: none;
	border-bottom-color: #000 !important;
}

/* Velden: alleen een lijn eronder, transparant (zoals live). */
.vb-contact-form .elementor-field-textual {
	padding: 2px 0 !important;
	border: 0 !important;
	border-bottom: 2px solid var(--e-global-color-primary) !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: var(--e-global-color-primary);
	font-family: var(--e-global-typography-text-font-family), sans-serif;
	font-size: 17px;
	font-weight: 300;
	line-height: 2;
}

.vb-contact-form .elementor-field-type-textarea textarea {
	resize: vertical;
}

.vb-contact-form .elementor-message {
	margin-top: 17px;
	color: var(--e-global-color-primary);
}

/* Formulierknop: zelfde pijl + hover als de overige pijl-knoppen. */
.vb-contact-form .elementor-button .elementor-button-icon {
	display: inline-flex;
	justify-content: flex-end;
	width: 27px;
	overflow: hidden;
	transition: width 0.4s, margin 0.4s;
}

.vb-contact-form .elementor-button .elementor-button-icon svg {
	flex: 0 0 35px;
	width: 35px !important;
	height: auto !important;
	margin: 0 !important;
	fill: currentColor;
}

.vb-contact-form .elementor-button:hover .elementor-button-icon,
.vb-contact-form .elementor-button:focus-visible .elementor-button-icon {
	width: 35px;
	margin-right: -8px;
}

.vb-contact-form .elementor-button:hover .elementor-button-text,
.vb-contact-form .elementor-button:focus-visible .elementor-button-text {
	font-weight: 600;
}

/* Projecten: a single project keeps half width (like live col-lg-6) */
@media (min-width: 768px) {
	.vb-projecten-carousel .swiper-wrapper:not(:has(.swiper-slide ~ .swiper-slide)) > .swiper-slide { max-width: calc(50% - 15px); }
}

/* Carousels: no arrows when everything fits (Elementor then never initialises Swiper) */
.elementor-element.vb-actueel-carousel:not(:has(.swiper-initialized)) .elementor-swiper-button { display: none; }

/* Project: kenmerken met link onderstreept (zoals live) */
.vb-attr-value a {
	color: inherit;
	text-decoration: underline;
}

/* Galerij: link + afbeelding als blok, anders telt de regelhoogte mee in de slide */
.vb-gallery .swiper-slide a,
.vb-gallery .swiper-slide-image {
	display: block;
}

/* Quote in de inhoud (oude thema-HTML <blockquote>): gecentreerd, hoofdletters, vet, zoals live */
.vb-post-content blockquote {
	margin: 51px 0;
	padding: 0;
	border: 0;
	text-align: center;
	text-transform: uppercase;
	font-weight: 700;
}

.vb-post-content blockquote p {
	margin: 0;
}

/* ---------- Zakelijke verhuur: overzicht ---------- */
/* Onder de uitgelichte afbeelding alleen de eerste 3 foto's uit de galerij, liggend (2:1) zoals het ontwerp. */
.vb-rent-thumbs .gallery-item:nth-child(n+4) {
	display: none;
}

.vb-rent-thumbs .gallery {
	margin: 0;
}

.vb-rent-thumbs .gallery-item {
	margin-bottom: 0 !important;
}

.vb-rent-thumbs .gallery-item img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 2 / 1;
	object-fit: cover;
}

/* Gelinkte uitgelichte afbeelding vult de kolom (Elementor maakt de link inline-block → img 100% van de link) */
.vb-rent-item .elementor-widget-image a {
	display: block;
}

/* ---------- Mobiel (feedback 2026-10-06) ---------- */
/* Lange (samengestelde) woorden in koppen: afbreken op de &shy; uit de module (functions.php); als laatste vangnet
   breekt een woord dat nog steeds te lang is af i.p.v. buiten de container te vallen (gaf horizontale scrollbalk). */
.elementor-heading-title {
	overflow-wrap: break-word;
}

/* Lopende tekst: lange URL's (privacy/cookies, LinkedIn-links in berichten) breken af i.p.v. de pagina te verbreden. */
.elementor-widget-text-editor,
.elementor-widget-theme-post-content {
	overflow-wrap: anywhere;
}

@media (max-width: 767px) {
	/* Loop-sliders (Actueel/Projecten/Partners): geen vorige/volgende-pijlen, swipen volstaat. */
	.elementor-element.vb-actueel-carousel .elementor-swiper-button {
		display: none;
	}

	/* Footer-onderbalk: Privacy / Cookies / Gedragscode onder elkaar. */
	.vb-footer-copy .elementor-nav-menu--main .elementor-nav-menu {
		flex-direction: column;
		align-items: flex-start;
	}

	.vb-footer-copy .elementor-nav-menu--main .elementor-nav-menu > li {
		margin: 0 !important;
	}

	.vb-footer-copy .elementor-nav-menu--main .elementor-item {
		margin: 0 !important; /* Elementor zet de horizontale tussenruimte als margin-left op de links */
		padding-top: 0;
		padding-bottom: 0;
	}
}

/* Popup-menu (mobiel/tablet, dropdown-variant): subitems kleiner en zonder hoofdletters. */
@media (max-width: 1024px) {
	/* .elementor + .elementor-element: zwaarder dan Elementors eigen .elementor-8316 .elementor-element-4020c0b-regel. */
	.elementor .elementor-element.vb-popup-nav .elementor-nav-menu--dropdown .sub-menu a.elementor-sub-item {
		padding-top: 6px;
		padding-bottom: 6px;
		font-size: var(--e-global-typography-text-font-size);
		line-height: 1.6;
		text-transform: none;
	}
}

/* ---------- Breadcrumbs (Yoast via Elementor-widget) in de bericht-hero ---------- */
.vb-breadcrumbs a:hover,
.vb-breadcrumbs a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.vb-breadcrumbs .breadcrumbs__divider {
	margin: 0 4px;
}

/* Kaart-subregel (bijv. adres op de bedrijfsruimte-kaart) op de donkere variant van het Actueel-blok. */
.vb-actueel--dark .vb-card-meta .elementor-heading-title {
	color: rgba(255, 255, 255, 0.8) !important;
}