/*
Theme Name: Uenk Bouwsloop
Theme URI: https://uenk-bouwsloop.nl
Version: 1.1.5
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);
}

/* 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);
}

/* 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;
	}
}