/*
 * Theme Name: Yooker Theme
 * Description: Yooker Theme
 * Template: Impreza
 * Version: 1.0
 * Author:	Yooker
 * Theme URI: https://yooker.nl
 * Author URI: https://yooker.nl
*/

@import url('responsive.css');

:root {
	--subtle-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.20);
}

/* Headings */
.heading-1 { font-family: var(--h1-font-family); font-size: var(--h1-font-size); line-height: var(--h1-line-height); font-weight: var(--h1-font-weight); text-transform: var(--h1-text-transform); font-style: var(--h1-font-style); letter-spacing: var(--h1-letter-spacing); margin-bottom: var(--h1-margin-bottom); }
.heading-2 { font-family: var(--h2-font-family); font-size: var(--h2-font-size); line-height: var(--h2-line-height); font-weight: var(--h2-font-weight); text-transform: var(--h2-text-transform); font-style: var(--h2-font-style); letter-spacing: var(--h2-letter-spacing); margin-bottom: var(--h2-margin-bottom); }
.heading-3 { font-family: var(--h3-font-family); font-size: var(--h3-font-size); line-height: var(--h3-line-height); font-weight: var(--h3-font-weight); text-transform: var(--h3-text-transform); font-style: var(--h3-font-style); letter-spacing: var(--h3-letter-spacing); margin-bottom: var(--h3-margin-bottom); }
.heading-4 { font-family: var(--h4-font-family); font-size: var(--h4-font-size); line-height: var(--h4-line-height); font-weight: var(--h4-font-weight); text-transform: var(--h4-text-transform); font-style: var(--h4-font-style); letter-spacing: var(--h4-letter-spacing); margin-bottom: var(--h4-margin-bottom); }
.heading-5 { font-family: var(--h5-font-family); font-size: var(--h5-font-size); line-height: var(--h5-line-height); font-weight: var(--h5-font-weight); text-transform: var(--h5-text-transform); font-style: var(--h5-font-style); letter-spacing: var(--h5-letter-spacing); margin-bottom: var(--h5-margin-bottom); }
.heading-6 { font-family: var(--h6-font-family); font-size: var(--h6-font-size); line-height: var(--h6-line-height); font-weight: var(--h6-font-weight); text-transform: var(--h6-text-transform); font-style: var(--h6-font-style); letter-spacing: var(--h6-letter-spacing); margin-bottom: var(--h6-margin-bottom); }

/* Separators */
.w-separator.size_small { height: 1rem !important; }
.w-separator.size_medium { height: 2rem !important; }
.w-separator.size_large { height: 4rem !important; }
.w-separator.size_huge { height: 8rem !important; }

/* - Algemeen - */
.no-click { pointer-events: none; } /* Clickthrough */
.overflow-slider .owl-stage-outer { overflow: visible; } /* Overflowing slider */
.logo-main i { color: var(--color-content-primary);} /* Logo main color */
.logo-secondary i { color: var(--color-content-secondary); } /* Logo secondary color */
.contain-img img { object-fit: contain; }
.maintain-width { min-width: max-content; }
.text-tflw-green {color: var(--color-content-tflw-green); }

.box-shadow-xs { box-shadow: 0 2px 4px 0 rgba(16, 24, 40, 0.08); }
.box-shadow-s { box-shadow: 0 2px 4px 0 rgba(16, 24, 40, 0.10), 0 2px 2px 0 rgba(16, 24, 40, 0.06); }
.box-shadow-m { box-shadow: 0 4px 8px -2px rgba(16, 24, 40, 0.10), 0 2px 4px -2px rgba(16, 24, 40, 0.06); }
.box-shadow-l { box-shadow: 0 4px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03); }
.box-shadow-xl { box-shadow: 0 20px 24px -4px rgba(16, 24, 40, 0.08), 0 8px 8px -4px rgba(16, 24, 40, 0.03); }
.box-shadow-2xl { box-shadow: 0 24px 48px -12px rgba(16, 24, 40, 0.18); }
.box-shadow-3xl { box-shadow: 0 32px 64px -12px rgba(16, 24, 40, 0.14); }

/* Scrollbar */
body::-webkit-scrollbar { width: 1em; }
body::-webkit-scrollbar-track { background: #fff; }
body::-webkit-scrollbar-thumb { background-color: var(--color-content-primary); }

/* Gforms */
.gform_required_legend { display: none; }

/* Cookie Banner */
.seopress-user-consent {
	font-size: 1rem !important;
	padding: 0.75rem !important;
	background: #f7f7f7 !important;
	border-right: 0 !important;
}
.seopress-user-consent p a:first-child {
	content: '';
    background-image: url('/wp-content/uploads/2022/01/yooker-cookies.png');
    width: 32px;
    height: 32px;
    display: inline-block;
    background-size: cover;
    margin-bottom: -11px;
    margin-right: 13px;
}
.seopress-user-consent #seopress-user-consent-accept{
	background: var(--color-content-primary);
    color: #fff;
    padding: 0.5rem 2rem;
    margin-top: 5px;
    font-size: 13px;
    font-weight: 600;
	margin-left: 50px !important;
	border: none;
	cursor: pointer;
	transition: all ease .3s;
}
.seopress-user-consent #seopress-user-consent-close {
	background: none;
    border: none;
    font-size: 13px;
    padding: 3px 20px;
    margin-top: 5px;
    font-weight: 600;
    color: #000;
	transition: all ease .3s;
}
.seopress-user-consent #seopress-user-consent-close:hover {
	border: none;
	background: none;
	color: red;
	transition: all ease .3s;
}
.seopress-user-consent p a:nth-child(2) { text-decoration:underline; }
.seopress-user-consent p { padding-bottom: 0 !important; }

/* Header */
/* Navigation link underline */
.no-touch .w-nav.type_desktop .hover_underline .w-nav-anchor.level_1 .w-nav-title:after { background-color: var(--color-content-tflw-green); }

/* Footer */
.l-footer { padding: 1rem; }
.l-footer > .l-section:nth-child(1) {
    border-top: 1px solid #EEE;
    border-left: 1px solid #EEE;
    border-right: 1px solid #EEE;
    border-top-left-radius: var(--site-border-radius);
    border-top-right-radius: var(--site-border-radius);
}
.l-footer > .l-section:nth-child(2) {
    border-bottom: 1px solid #EEE;
    border-left: 1px solid #EEE;
    border-right: 1px solid #EEE;
    border-bottom-left-radius: var(--site-border-radius);
    border-bottom-right-radius: var(--site-border-radius);
}
.menu-footer-snelmenu-container li { margin-bottom: 1rem; }
.menu-footer-snelmenu-container li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.menu-footer-snelmenu-container li a::after {
    font-family: 'fontawesome';
    content: '\f061';
    color: var(--color-content-tflw-dark-green);
}
footer .linkedin-column .w-btn.us-btn-style_6:hover { color: #fff !important; }
footer #contact-info a { color: #5F5E5E !important }
footer #contact-info a:hover { color: var(--color-footer-link) !important }

/* Text button icon */
.w-btn.us-btn-style_6 {
    display: flex;
    align-items: center;

    i {
        background: var(--color-content-tflw-light-green);
        color: var(--color-content-tflw-dark-green);
        transition: background .2s ease, color .2s ease;
        padding: 1em;
        aspect-ratio: 1;
        width: inherit !important;
    }
}
.w-btn.us-btn-style_6:hover {
    i {
        background: var(--color-content-tflw-dark-green);
        color: var(--color-content-tflw-light-green);
    }
}
.w-btn.us-btn-style_6.icon_atleft i { margin-right: 1rem; }
.w-btn.us-btn-style_6.icon_atright i { margin-left: 1rem; }
.w-btn-wrapper.align_right .w-btn.us-btn-style_6 { justify-self: flex-end; }
.w-btn-wrapper.align_center .w-btn.us-btn-style_6 { justify-self: center; }
.w-btn.us-btn-style_6.text_none i { margin-right: none !important; }

/* Custom button styling 7 (carousel) */
.w-btn.us-btn-style_7 {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Section subtitle */
.section-subtitle {
    color: var(--color-content-secondary);
    font-weight: 500;
    line-height: 20px;
}

/* Achtergrond grid patroon */
body.achtergrond-patroon { position: relative; }
body.achtergrond-patroon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
    background-image: url('/wp-content/uploads/2026/07/tfloow-background-pattern.png');
    background-repeat: repeat;
    background-size: 1920px 1080px;
    background-attachment: local;
    opacity: 1;
    z-index: 0;
}

/* Carousel button styling */
.owl-carousel.navstyle_7 .owl-nav .owl-prev,
.owl-carousel.navstyle_7 .owl-nav .owl-next {
    aspect-ratio: 1;
}
.owl-carousel.navstyle_7 .owl-nav .owl-prev { transform: translateX(-50%); }
.owl-carousel.navstyle_7 .owl-nav .owl-next { transform: translateX(50%); }

/* Teamlid overlay */
.w-grid-item.teamlid .teamlid-overlay {
	z-index: 2;
	overflow: hidden;

	background: linear-gradient(
		180deg,
		transparent 25%,
		rgba(0, 0, 0, 0.8) 100%
	) !important;
}
.w-grid-item.teamlid .teamlid-overlay::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: rgba(0, 0, 0, 0.35);
	opacity: 0;
	transition: opacity 350ms ease;
}
.w-grid-item.teamlid .teamlid-overlay > * { z-index: 1; }
.w-grid-item.teamlid .teamlid-heading {
	position: absolute;
	top: calc(100% - 32px);
	right: 32px;
	left: 32px;

	transform: translateY(-100%);

	transition:
		top 450ms ease,
		transform 450ms ease;
}
.w-grid-item.teamlid:hover .teamlid-heading {
	top: 32px;
	transform: translateY(0);
}
.w-grid-item.teamlid .korte_introductie {
	position: absolute;
	right: 32px;
	bottom: 32px;
	left: 32px;

	max-height: 0;
	overflow: hidden;

	opacity: 0;
	transform: translateY(16px);

	transition:
		max-height 450ms ease,
		opacity 250ms ease,
		transform 350ms ease;
}
.w-grid-item.teamlid:hover .korte_introductie {
	max-height: 200px;
	opacity: 1;
	transform: translateY(0);
}
.w-grid-item.teamlid:hover .teamlid-overlay::before { opacity: 1; }
.w-grid-item.teamlid .korte_introductie p { margin: 0; }

/* Vacatures */
.w-grid-item.vacature .vacature-info .w-post-elm i {
    color: var(--color-content-tflw-light-green);
    font-size: 12px;
    margin-right: 0.5em;
}
.single-vacature .vacature-info .w-post-elm i {
    color: var(--color-content-tflw-dark-green);
    font-size: 12px;
    margin-right: 0.5em;
}


/* Custom pijlers shortcode */
.aanbod-pijlers {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	align-items: center;
}
.aanbod-pijlers__item {
	border: 1px solid #e8e8e8;
	background: #fff;
}
.aanbod-pijlers__item + .aanbod-pijlers__item { margin-top: 12px; }
.aanbod-pijlers__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 28px;
	border: 0;
	background: transparent;
	text-align: left;
	cursor: pointer;
}
.aanbod-pijlers__heading {
	display: flex;
	flex-direction: column;
	gap: 5px;
}
.aanbod-pijlers__title {
	font-size: 26px;
	line-height: 1.2;
    font-size: 32px;
    color: var(--color-content-heading);
}
.aanbod-pijlers__subtitle {
	font-size: 14px;
    color: #5C7300;
    font-weight: 500;
}
.aanbod-pijlers__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
    aspect-ratio: 1;
	background: #f1f1f1;
	font-size: 22px;
}
.aanbod-pijlers__content { padding: 0 28px 28px; }
.aanbod-pijlers__text { margin-bottom: 1rem; }
.aanbod-pijlers__visual {
	position: relative;
	min-height: 480px;
	overflow: hidden;
    aspect-ratio: 1;
}
.aanbod-pijlers__image,
.aanbod-pijlers__image--empty {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.2s ease;
}
.aanbod-pijlers__image.is-changing { opacity: 0; }
.aanbod-pijlers__image--empty { background: #ddd; }
.aanbod-pijlers__visual::after {
	content: "";
	position: absolute;
	inset: 35% 0 0;
	background: linear-gradient(
		to bottom,
		transparent,
		rgba(0, 0, 0, 0.8)
	);
}
.aanbod-pijlers__overlay {
	position: absolute;
	z-index: 1;
	right: 28px;
	bottom: 28px;
	left: 28px;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 30px;
	color: #fff;
}
.aanbod-pijlers__featured-title {
	max-width: 330px;
	margin: 0;
	color: #fff !important;
    font-size: 24px;
}
.aanbod-pijlers__featured-link .w-btn-label { color: #fff !important; }

@media (max-width: 900px) {
	.aanbod-pijlers { gap: 1.5rem; }
	.aanbod-pijlers__visual { min-height: 400px; }
	.aanbod-pijlers__text { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) {
	.aanbod-pijlers {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
	.aanbod-pijlers__title { font-size: 26px; }
	.aanbod-pijlers__visual { display: none; }
}

/* Footer tekst */
.verbindende-schakel {
	width: 100%;
    font-size: clamp(6.9vw, 100%, 133px);
    line-height: 1;
	white-space: nowrap;
}
section:has(.verbindende-schakel)::after{
    position: absolute;
    inset: 0;
    content: '';
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.95) 0%, transparent 100%);
    z-index: 2;
    pointer-events: none;
}
@media screen and (max-width: 600px) {
    .verbindende-schakel { font-size: clamp(6.2vw, 100%, 133px); }
}

/* Homepagina - Case/Projecten sectie */
/* Eerste case: alleen 01 tonen */
.case-list-homepage .wpb_wrapper > .w-grid:nth-child(1 of .w-grid) :is(.case-02, .case-03) { display: none; }
/* Tweede case: alleen 02 tonen */
.case-list-homepage .wpb_wrapper > .w-grid:nth-child(2 of .w-grid) :is(.case-01, .case-03) { display: none; }
/* Derde case: alleen 03 tonen */
.case-list-homepage .wpb_wrapper > .w-grid:nth-child(3 of .w-grid) :is(.case-01, .case-02) { display: none; }

/* Case grid-weergave */
.w-grid-item.us_portfolio .korte_omschrijving > p {
	display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

/* =========================================================
   T-FLooW doelgroepblokken
   ========================================================= */
.tf-doelgroepen {
	display: grid;
	grid-template-columns:
		minmax(260px, 1.2fr)
		minmax(240px, 1fr)
		minmax(220px, 0.8fr);
	gap: clamp(12px, 1.5vw, 24px);
	align-items: start;
	width: 100%;
}
/* Verspringende desktopopstelling */
.tf-doelgroep-1 { margin-top: 70px; }
.tf-doelgroep-2 { margin-top: 20px; }
.tf-doelgroep-3 { margin-top: 120px; }
.tf-doelgroep {
	position: relative;
	display: block;
	overflow: hidden;
	width: 100%;
	min-width: 0;
	color: #fff;
	text-decoration: none;
	background-color: #222;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: 2px;
	isolation: isolate;
}

/* Verschillende formaten zoals in het ontwerp */
.tf-doelgroep-1 { aspect-ratio: 1 / 1; }
.tf-doelgroep-2 { aspect-ratio: 1 / 1; }
.tf-doelgroep-3 { aspect-ratio: 1 / 1; }
.tf-doelgroep {
	position: relative;
	overflow: hidden;
	color: #fff;
	background-color: #222;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	isolation: isolate;
}
.tf-doelgroep-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0) 30%,
		rgba(0, 0, 0, 0.82) 100%
	);
}
.tf-doelgroep-overlay::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: rgba(0, 0, 0, 0.2);
	opacity: 0;
	transition: opacity 350ms ease;
}
.tf-doelgroep-overlay > * { z-index: 1; }
.tf-doelgroep-content {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 2rem;
	z-index: 1;
	color: #fff;
}
.tf-doelgroep-heading {
	margin: 0;
	color: #fff !important;
	font-size: clamp(20px, 2vw, 30px);
	line-height: 1.15;
	transition: transform 400ms ease;
}
.tf-doelgroep-tekst {
	max-height: 0;
	margin-top: 0;
	overflow: hidden;
	color: #fff !important;
	font-size: clamp(14px, 1.1vw, 16px);
	line-height: 1.6;
	opacity: 0;
	transform: translateY(10px);
	transition:
		max-height 450ms ease,
		margin-top 400ms ease,
		opacity 250ms ease,
		transform 400ms ease;
}
.tf-doelgroep-tekst,
.tf-doelgroep-tekst p {
	color: #fff !important;
}
.tf-doelgroep-tekst p { margin: 0; }
.tf-doelgroep:hover .tf-doelgroep-tekst,
.tf-doelgroep:focus-within .tf-doelgroep-tekst {
	max-height: 180px;
	margin-top: 8px;
	opacity: 1;
	transform: translateY(0);
}
.tf-doelgroep:hover .tf-doelgroep-overlay::before,
.tf-doelgroep:focus-within .tf-doelgroep-overlay::before {
	opacity: 1;
}
.tf-doelgroep-button {
	position: absolute !important;
	right: 2rem;
	bottom: 2rem;
	z-index: 2;
	display: flex !important;
	align-items: center;
	justify-content: center;
	margin: 0 !important;
	transition: transform 300ms ease;
}
/* =========================================================
   Desktop-hover
   ========================================================= */
@media (min-width: 1025px) {
	.tf-doelgroep:hover .tf-doelgroep-heading,
	.tf-doelgroep:focus-within .tf-doelgroep-heading {
		transform: translateY(-6px);
	}
	.tf-doelgroep:hover .tf-doelgroep-tekst,
	.tf-doelgroep:focus-within .tf-doelgroep-tekst {
		transform: translateY(-6px);
	}
}
/* =========================================================
   Tablet
   Content blijft aan de onderkant staan
   ========================================================= */
@media (max-width: 1024px) {
	.tf-doelgroep-heading { font-size: clamp(20px, 3vw, 28px); }
	.tf-doelgroep-button {
		right: 24px;
		bottom: 24px;
	}
}
/* =========================================================
   Mobiel
   ========================================================= */
@media (max-width: 600px) {
	.tf-doelgroepen { grid-template-columns: 1fr; }
	.tf-doelgroep-heading { font-size: 22px; }
	.tf-doelgroep-tekst {
		font-size: 14px;
		line-height: 1.5;
	}
	.tf-doelgroep-button {
		right: 20px;
		bottom: 20px;
	} 
	.tf-doelgroep-1,
	.tf-doelgroep-2,
	.tf-doelgroep-3 {
		margin-top: 0;
	}
}