/*
Theme Name: Uenk Bouwsloop
Theme URI: https://uenk-bouwsloop.nl
Version: 1.1.12
Description: Child theme voor Uenk Bouw en Sloop Holding B.V. Bevat de huisstijl, de zelf gehoste fonts en de opmaakklassen die op de Beaver Builder rijen en kolommen gezet worden.
Author: Kluin Online
template: bb-theme
*/

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/barlow-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/barlow-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/barlow-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/barlow-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/barlow-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/barlow-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/poppins-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/poppins-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/poppins-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/poppins-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/poppins-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/poppins-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------------
   Huisstijl
   ------------------------------------------------------------------ */

:root {
	--uenk-dark: #16191b;
	--uenk-darker: #0f1112;
	--uenk-green: #2f9e4b;
	--uenk-green-hover: #3fbb5d;
	--uenk-bg: #f4f5f3;
	--uenk-heading: 'Poppins', system-ui, sans-serif;
	--uenk-body: 'Barlow', system-ui, sans-serif;
}

body {
	background: var(--uenk-bg);
	font-family: var(--uenk-body);
	color: var(--uenk-dark);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--uenk-heading);
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

a {
	color: var(--uenk-green);
}

a:hover,
a:focus {
	color: var(--uenk-green-hover);
}

/* De focusring van de browser is standaard blauw. Hier in het groen, en alleen
   wanneer de browser hem echt nodig vindt, dus bij toetsenbordnavigatie. De
   elementen staan er los in omdat bb-theme een a:focus regel meebrengt die
   anders wint van een kale :focus-visible. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--uenk-green);
	outline-offset: 3px;
	border-radius: 3px;
}

a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible) {
	outline: none;
}

.uenk-header .uabb-creative-menu .menu > li > a:focus-visible,
.uabb-menu-overlay .menu > li > a:focus-visible {
	outline-offset: -2px;
}

/* Ook de flits bij aanraken op mobiel in de huisstijl. */
html {
	-webkit-tap-highlight-color: rgba(47, 158, 75, 0.2);
}

/* ------------------------------------------------------------------
   Opmaakklassen voor Beaver Builder rijen, kolommen en modules.
   Zet de klasse in de moduleinstellingen onder Geavanceerd > HTML > Class.
   ------------------------------------------------------------------ */

/* Groen kapitaallabel boven een kop. */
.uenk-label p,
.uenk-label h3 {
	margin: 0;
	font-family: var(--uenk-heading);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--uenk-green);
}

/* Afbeelding of video die de kaartbreedte vult op een vaste hoogte.
   De hoogte staat op !important omdat zowel het thema als de fotomodule
   zelf een height: auto op de afbeelding zetten. */
.uenk-media .fl-photo,
.uenk-media .fl-photo-content,
.uenk-media .fl-video,
.uenk-media .fl-video-wrapper {
	width: 100%;
}

.uenk-media .fl-photo-img,
.uenk-media video,
.uenk-media .mejs-container,
.uenk-media .mejs-overlay,
.uenk-media .mejs-mediaelement {
	display: block;
	width: 100%;
	height: 300px !important;
	object-fit: cover;
}

.uenk-media-sm .fl-photo-img,
.uenk-media-sm video {
	height: 260px !important;
}

/* Productfoto's van dakpannen: de hele pan moet in beeld blijven, dus passend
   in plaats van vullend, op een neutrale ondergrond. */
.uenk-media-fit .fl-photo-img {
	height: 300px !important;
	object-fit: contain;
	background: var(--uenk-bg);
	padding: 14px;
	box-sizing: border-box;
}

/* De videomodule houdt met een padding-bottom een 16:9 verhouding aan. In een
   kaart willen we dezelfde vaste hoogte als bij de foto's, dus die padding weg. */
.uenk-media .fl-video,
.uenk-media .wp-video,
.uenk-media .mejs-container,
.uenk-media .mejs-mediaelement,
.uenk-media .mejs-layers {
	height: 300px !important;
	max-height: 300px;
	padding: 0 !important;
	background: var(--uenk-darker);
}

.uenk-media .mejs-controls,
.uenk-media .mejs-overlay-play,
.uenk-media .mejs-poster {
	display: none !important;
}

/* Kapitaallabel binnen de groene openingstijdenbalk. */
.uenk-hours-label {
	font-family: var(--uenk-heading);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.8);
	margin-right: 28px;
}

.uenk-hours-sep {
	display: inline-block;
	width: 28px;
}

/* Kaarten. Beaver Builder zet de achtergrond en de afronding op .fl-col-content,
   dus daar horen ook de afronding van de foto en het zweefeffect thuis. Op de
   kolom zelf zou de schaduw een rechthoek om de afgeronde kaart heen tekenen. */
.uenk-card .fl-col-content {
	overflow: hidden;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.uenk-card:hover .fl-col-content {
	transform: translateY(-4px);
	box-shadow: 0 16px 32px rgba(22, 25, 27, 0.18);
}

/* Kaart zonder foto: de naam in het midden, op de hoogte van de andere kaarten.
   Beaver Builder zet met drie klassen justify-content op de kolomgroep, dus
   hier een tandje specifieker. */
.fl-col-group-equal-height .uenk-card.uenk-card-text .fl-col-content {
	justify-content: center;
}

/* Tussenruimte tussen kaartkolommen. Beaver Builder zet de achtergrond op
   .fl-col-content, dus padding op .fl-col wordt een echte gap. Zet deze klasse
   op de rij en houd de rijpadding links en rechts op 18 in plaats van 32. */
.uenk-grid .fl-col {
	padding-left: 14px;
	padding-right: 14px;
}

@media (max-width: 768px) {
	.uenk-grid .fl-col {
		padding-left: 0;
		padding-right: 0;
	}

	.uenk-grid .fl-col:not(:last-child) {
		margin-bottom: 28px;
	}
}

/* Kolommen met een dunne scheidingslijn ertussen. */
.uenk-divided .fl-col:not(:first-child) {
	border-left: 1px solid rgba(22, 25, 27, 0.12);
}

.uenk-divided-light .fl-col:not(:first-child) {
	border-left: 1px solid rgba(255, 255, 255, 0.12);
}

/* Grote nummers 01 / 02 / 03 boven een USP. */
.uenk-number p {
	margin: 0;
	font-family: var(--uenk-heading);
	font-size: 15px;
	font-weight: 600;
	color: var(--uenk-green);
}

/* Uitgelicht blok binnen een witte kaart, bijvoorbeeld de navigatiewaarschuwing.
   De padding staat hier en niet in de moduleinstellingen, omdat Beaver Builder
   die op een binnenelement zet waardoor de achtergrond er strak omheen valt. */
.uenk-notice {
	background: var(--uenk-bg);
	border-radius: 10px;
	padding: 20px 22px;
}

@media (max-width: 768px) {
	.uenk-notice {
		padding: 18px;
	}
}

/* Regels met label links en waarde rechts, zoals de openingstijden. */
.uenk-hours .uenk-row {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	padding-bottom: 14px;
	margin-bottom: 14px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	font-size: 18px;
}

.uenk-hours .uenk-row:last-child {
	padding-bottom: 0;
	margin-bottom: 0;
	border-bottom: 0;
}

.uenk-hours .uenk-row span:first-child {
	color: rgba(255, 255, 255, 0.75);
}

.uenk-hours .uenk-row span:last-child {
	font-weight: 500;
	color: #ffffff;
}

.uenk-hours .uenk-closed span:last-child {
	color: rgba(255, 255, 255, 0.5);
}

/* Kaart in de OpenStreetMap module vult de hoogte van de kolom. */
.uenk-map iframe {
	display: block;
	width: 100%;
	min-height: 560px;
	border: 0;
	border-radius: 16px;
}

/* ------------------------------------------------------------------
   Header en footer uit Beaver Themer
   ------------------------------------------------------------------ */

.uenk-header {
	backdrop-filter: blur(8px);
}

/* Boven de tabletbreedte staat het volledige logo met tekst in de header. Dat is
   hoger dan het beeldmerk, dus de rij krijgt daar minder lucht om de header
   rond de 95px te houden. */
@media (min-width: 993px) {
	.uenk-header > .fl-row-content-wrap {
		padding-top: 8px;
		padding-bottom: 8px;
	}
}

/* Boven de tabletbreedte staat het volledige logo met tekst in de header. Dat is
   hoger dan het beeldmerk, dus de rij krijgt daar minder lucht om de header
   rond de 100px te houden. */
@media (min-width: 993px) {
	.uenk-header > .fl-row-content-wrap {
		padding-top: 8px;
		padding-bottom: 8px;
	}
}

/* De actieve pagina krijgt een groen vlak. De Advanced Menu module heeft
   daar geen instelling voor, de rest van de menukleuren staat wel gewoon
   in de moduleinstellingen. */
.uenk-header .uabb-creative-menu .menu > li.current-menu-item > a,
.uenk-header .uabb-creative-menu .menu > li.current_page_item > a {
	color: #ffffff;
	background: rgba(47, 158, 75, 0.16);
}

.uenk-header .uabb-menu-overlay .menu > li.current-menu-item > a {
	background: none;
}

/* Vanaf de tabletbreedte klapt het menu in tot de overlay. De header moet dan
   op een rij blijven staan: logo links, dan de telefoonknop en de hamburger. */
@media (max-width: 992px) {
	.uenk-header .fl-col-group {
		display: flex;
		align-items: center;
		gap: 12px;
	}

	/* Beaver Builder zet margin: 0 auto op gestapelde kolommen. In een flexrij
	   verdeelt de browser die vrije ruimte, waardoor de knop naar het midden
	   schuift in plaats van tegen de hamburger aan. */
	.uenk-header .fl-col {
		flex: 0 0 auto;
		width: auto;
		max-width: none;
		margin: 0;
		clear: none;
	}

	/* Het logo houdt links, de knop en de hamburger schuiven naar rechts. */
	.uenk-header .fl-col:nth-child(1) {
		order: 1;
		margin-right: auto;
	}

	.uenk-header .fl-col:nth-child(3) {
		order: 2;
	}

	.uenk-header .fl-col:nth-child(2) {
		order: 3;
	}

	.uenk-header .fl-module {
		margin-bottom: 0;
	}

	.uenk-header .fl-button-wrap {
		text-align: right;
	}

	/* De hamburger van Ultimate Addons is standaard erg zwaar: drie balken van
	   een vijfde van de hoogte. Hier dunner en met afgeronde uiteinden. */
	.uenk-header .uabb-hamburger-menu-top,
	.uenk-header .uabb-hamburger-menu-middle,
	.uenk-header .uabb-hamburger-menu-bottom {
		height: 4px;
		rx: 2px;
	}

	.uenk-header .uabb-hamburger-menu-top {
		y: 7px;
	}

	.uenk-header .uabb-hamburger-menu-middle {
		y: 23px;
	}

	.uenk-header .uabb-hamburger-menu-bottom {
		y: 39px;
	}
}

/* Op kleine schermen is er geen ruimte voor het volledige telefoonnummer. */
@media (max-width: 480px) {
	.uenk-header .fl-button {
		font-size: 14px !important;
		padding-left: 14px !important;
		padding-right: 14px !important;
	}
}

/* De footerkolommen krijgen lucht zodra ze onder elkaar komen te staan. */
@media (max-width: 768px) {
	.uenk-footer .fl-col:not(:last-child) {
		margin-bottom: 32px;
	}
}

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

@media (max-width: 992px) {
	.uenk-divided .fl-col:not(:first-child),
	.uenk-divided-light .fl-col:not(:first-child) {
		border-left: 0;
	}

	.uenk-map iframe {
		min-height: 380px;
	}

	.uenk-media .fl-photo-img,
	.uenk-media video {
		height: 220px !important;
	}

	.uenk-media-fit .fl-photo-img {
		height: 260px !important;
	}

	.uenk-hours-label {
		display: block;
		margin: 0 0 6px;
	}

	/* Zonder de ruimte ernaast lopen de twee openingstijden aan elkaar vast,
	   dus daar breken we de regel. */
	.uenk-hours-sep {
		display: block;
		width: 0;
		height: 0;
	}
}

/* Meldingen-plugin: regel bij de openingstijden en de popup. */
:root {
	--csm-accent: var(--uenk-green);
}

.csm-tijden-melding {
	display: block;
	font-weight: 600;
}

.uenk-hours-notice {
	margin-bottom: 24px;
	padding: 12px 16px;
	border-radius: 8px;
	background: rgba(47, 158, 75, 0.18);
	color: #ffffff;
}

.uenk-hours-notice:empty {
	display: none;
}

footer .fl-rich-text .csm-tijden-melding {
	color: rgba(255, 255, 255, 0.8) !important;
}

/* Beeldmerken uit het logo in de footer, zoals op het reclamebord: de onderbalk
   groen, de merkjes wit en transparant over het zwart en groen heen, rechts
   deels buiten beeld. */
footer[data-type="footer"] {
	position: relative;
	overflow: hidden;
}

footer[data-type="footer"]::after {
	content: '';
	position: absolute;
	right: -90px;
	bottom: -60px;
	width: 400px;
	height: 583px;
	background: url('beeldmerk-wit.svg') no-repeat center / contain;
	opacity: 0.09;
	pointer-events: none;
}

footer[data-type="footer"] > .fl-row:last-of-type > .fl-row-content-wrap {
	background-color: var(--uenk-green);
	padding-top: 28px;
	padding-bottom: 28px;
}

footer[data-type="footer"] > .fl-row:last-of-type .fl-col-content {
	border-top: 0;
	padding-top: 0;
}

footer[data-type="footer"] > .fl-row:last-of-type .fl-rich-text,
footer[data-type="footer"] > .fl-row:last-of-type .fl-rich-text p {
	color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 767px) {
	footer[data-type="footer"]::after {
		right: -60px;
		bottom: -30px;
		width: 240px;
		height: 350px;
	}
}

/* Dezelfde beeldmerken in de hero van de contactpagina, die als enige geen foto
   heeft. Ze hangen aan de eerste rij en lopen door over de rij eronder, die
   dezelfde donkere kleur heeft. Het beeld is binnen het blok naar boven
   verschoven, zodat het blok zelf niet in de header steekt. De pagina wordt
   horizontaal bijgesneden zodat het rechter merkje geen zijwaartse scroll
   veroorzaakt. */
.fl-page-content {
	overflow-x: clip;
}

.fl-row.uenk-hero-merk {
	position: relative;
	z-index: 1;
}

.uenk-hero-merk .fl-row-content-wrap::after {
	content: '';
	position: absolute;
	right: -90px;
	top: 0;
	width: 400px;
	height: 523px;
	background: url('beeldmerk-wit.svg') no-repeat 0 -60px / 400px 583px;
	opacity: 0.09;
	pointer-events: none;
}

@media (max-width: 767px) {
	.uenk-hero-merk .fl-row-content-wrap::after {
		right: -60px;
		width: 240px;
		height: 320px;
		background-position: 0 -30px;
		background-size: 240px 350px;
	}
}