/*
Theme Name:   Hello Elementor Child
Theme URI:    https://zuuvr.test
Description:  Child theme van Hello Elementor voor Zuuvr. Bevat projectspecifieke
              code die voorheen als losse WPCode-snippets draaide, zodat alles
              netjes onder versiebeheer en in de themabestanden staat.
Author:       Zuuvr
Template:     hello-elementor
Version:      1.0.0
Text Domain:  hello-elementor-child
*/

/*
 * Designbasis-standaard (taak 6): 1rem = 15px i.p.v. de browserstandaard
 * 16px. Zo reken je elke bestaande px-waarde om naar rem door te delen
 * door 15 (bv. 45px H1 -> 3rem). Zie Zuuvr-designbasis-audit.md voor de
 * volledige omrekentabel van de huidige typografiewaarden.
 */
html {
	font-size: 15px;
}

/*
 * Mega menu: header groeit mee bij het openen (taak 5).
 */
:root {
	--header-height-mega-menu: 80px;
}

.elementor-sticky--active.elementor-sticky--active {
	transition: min-height var(--duration-normal, 300ms) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)), transform 0.35s;
}

/*
 * Elementor's sticky maakt een onzichtbare kopie van de header als
 * plaatshouder (.elementor-sticky__spacer). Het off-canvas-script in de
 * header opent élk off-canvas op de pagina, dus ook dat in de kopie -- en
 * dat legt zich dan bovenop het echte, met een leeg mega menu (Elementor's
 * menu-script draait niet op de kopie). De kopie mag dus nooit tonen.
 */
.elementor-sticky__spacer .e-off-canvas {
	display: none !important;
}

/*
 * Enkel op desktop (vanaf 1025px, zie de breakpoint-uitleg verderop): daar
 * klapt het mega menu ín de header open en moet de header dus meegroeien. Op
 * tablet en mobiel is het menu een toggle/off-canvas -- de header moet daar
 * gewoon zijn normale hoogte houden, anders springt hij open bij het
 * aantikken van het hamburgermenu.
 */
@media (min-width: 1025px) {
	.elementor-sticky--active.header-menu-open {
		--header-height-mega-menu: max(60vh, 500px);
	}

	.elementor-sticky--active:has(.e-n-menu-title:hover ~ .e-n-menu-content, .e-n-menu-content:hover) {
		--header-height-mega-menu: max(60vh, 500px);
	}
}

/*
 * Mega menu: het pijltje naast een menu-item is enkel zichtbaar bij hover
 * over dát item (titel of open paneel). De ruimte blijft altijd
 * gereserveerd -- enkel opacity verandert, geen display/width -- zodat de
 * menu-items niet verspringen. Ook zichtbaar bij toetsenbordfocus en zolang
 * het item open staat (aria-expanded), anders verdwijnt het pijltje voor
 * wie met Tab navigeert. Enkel desktop: op tablet/mobiel is het pijltje de
 * knop om een submenu te openen en moet het dus altijd zichtbaar blijven.
 */
@media (min-width: 1025px) {
	.e-n-menu-item .e-n-menu-dropdown-icon {
		opacity: 0;
		transition: opacity var(--duration-normal, 300ms) ease;
		/*
		 * Het pijltje telt niet mee voor de breedte van het menu-item: een
		 * negatieve marge van exact zijn eigen breedte + tussenruimte laat
		 * het in de rechter-padding van het item vallen. Zo staan alle
		 * items (met en zonder mega menu) op dezelfde onderlinge afstand.
		 * Past zolang de horizontale title-padding (standaard 1rem) minstens
		 * zo breed is als pijltje + gap (nu 10px + 5px).
		 */
		margin-inline-end: calc(-1 * (var(--n-menu-dropdown-indicator-size, var(--n-menu-title-font-size)) + var(--n-menu-dropdown-icon-gap, 5px)));
	}

	.e-n-menu-item:hover .e-n-menu-dropdown-icon,
	.e-n-menu-item:focus-within .e-n-menu-dropdown-icon,
	.e-n-menu-item .e-n-menu-dropdown-icon[aria-expanded="true"] {
		opacity: 1;
	}
}

/*
 * [partner_cards] -- enkel de kale structuur (grid + logo-verhouding). Kleur,
 * typografie en spacing horen in Elementor thuis, niet hier; de klassen
 * hieronder zijn er om op te haken.
 */
.zuuvr-partner-cards {
	display: grid;
	grid-template-columns: repeat(var(--zuuvr-partner-cards-columns, 4), minmax(0, 1fr));
	gap: var(--zuuvr-partner-cards-gap, 2rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 1024px) {
	.zuuvr-partner-cards {
		grid-template-columns: repeat(min(var(--zuuvr-partner-cards-columns, 4), 2), minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.zuuvr-partner-cards {
		grid-template-columns: minmax(0, 1fr);
	}
}

.zuuvr-partner-card__link,
.zuuvr-partner-card {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	height: 100%;
}

.zuuvr-partner-card__link {
	color: inherit;
	text-decoration: none;
}

.zuuvr-partner-card__logo img {
	display: block;
	width: 100%;
	height: auto;
}

.text-accent {
	color: var(--e-global-color-accent, #78C3A7);
}

/*
 * .hide-on-tablet / .hide-on-mobile / .hide-on-desktop -- verbergen een
 * element op precies één van de drie breakpoints, nooit op de andere twee.
 * Grenzen komen exact overeen met Elementor's eigen breakpoints (Site
 * Settings -> Layout -> Breakpoints: tablet vanaf 768px, desktop vanaf
 * 1025px) -- dus mobiel = tot 767px, tablet = 768px t/m 1024px, desktop =
 * vanaf 1025px.
 */
@media (max-width: 767px) {
	.hide-on-mobile {
		display: none !important;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.hide-on-tablet {
		display: none !important;
	}
}

@media (min-width: 1025px) {
	.hide-on-desktop {
		display: none !important;
	}
}

/*
 * Scrollbar in de huisstijl: dunne, afgeronde thumb in de accentkleur
 * (#78C3A7, zie .text-accent hierboven) i.p.v. de grijze browserstandaard.
 * Zowel Firefox (scrollbar-width/-color) als Chrome/Safari/Edge
 * (::-webkit-scrollbar) worden gedekt -- dat zijn twee volledig aparte
 * specificaties, geen enkele property dekt beide.
 */
:root {
	--scrollbar-thumb-hover: #5DA38A; /* iets donkerder dan de accentkleur */
}

html {
	scrollbar-width: thin;
	scrollbar-color: var(--e-global-color-accent, #78C3A7) transparent;
}

::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background-color: var(--e-global-color-accent, #78C3A7);
	border-radius: 6px; /* zelfde afronding als de knopstijl, zie designbasis-audit */
	border: 2px solid transparent;
	background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
	background-color: var(--scrollbar-thumb-hover);
}

::-webkit-scrollbar-corner {
	background: transparent;
}
/*
 * Hover-kaarten op de homepage (.zuuvr-hover-cards).
 *
 * De klasse staat op de GRID-container; elke kaart daarin krijgt zijn
 * styling automatisch. Zo hoeft er per kaart niets meer ingesteld te
 * worden en werkt een nieuw toegevoegde kaart meteen mee.
 *
 * Verwachte structuur (zoals Elementor die rendert):
 *   .zuuvr-hover-cards            grid-container  <- enige klasse die je zet
 *     > .e-con                    de kaart (link-container)
 *         > .e-con                de fotolaag (achtergrondafbeelding)
 *         > .elementor-widget-heading
 *         > .elementor-widget-text-editor
 *
 * Let op: binnen een kaart wordt ELKE container-in-container als fotolaag
 * behandeld. Een tweede container in een kaart zou dus ook absoluut over
 * de kaart gelegd worden -- gebruik daar widgets voor, geen containers.
 */

/*
 * De stops van het overlay-gradient als animeerbare waarden registreren;
 * een gewone background-image-wissel laat zich niet vloeiend overgangen.
 */
@property --overlay-stop-1 {
	syntax: '<percentage>';
	inherits: true;
	initial-value: 60%;
}

@property --overlay-stop-2 {
	syntax: '<percentage>';
	inherits: true;
	initial-value: 100%;
}

/*
 * De kaart zelf. --justify-content is Elementor's eigen variabele, zodat
 * de tekst onderaan uitlijnt zonder dat je dat per kaart hoeft te zetten
 * (en zodat een expliciete instelling in Elementor deze nog steeds wint).
 */
.zuuvr-hover-cards > .e-con {
	position: relative;
	overflow: hidden;
	aspect-ratio: 1;
	--justify-content: flex-end;
	--overlay-opacity: 0.7;
}

/* De zoomende fotolaag. */
.zuuvr-hover-cards > .e-con > .e-con {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-size: cover;
	background-position: center;
	transition: transform 0.6s ease;
}

.zuuvr-hover-cards > .e-con:hover > .e-con {
	transform: scale(1.1);
}

/*
 * Het verloop over de foto. Dit is Elementor's Background Overlay-pseudo
 * (.e-con::before), die normaal alleen verschijnt als je per container een
 * overlay instelt: content is daar `var(--background-overlay)` en dus leeg.
 * Door hier zelf content te zetten verschijnt de overlay op elke kaart,
 * zonder dat je er in Elementor iets voor hoeft aan te zetten. Positie en
 * afmeting (absolute, inset 0) komen al uit Elementor's eigen regel.
 *
 * !important is hier noodzakelijk, niet luiheid. Heeft een kaart in
 * Elementor wel een Background Overlay ingesteld, dan zet Elementor zelf
 * een background-image op dezelfde pseudo via een selector met drie
 * klassen (.elementor-805 .elementor-element.elementor-element-xxx::before).
 * Die weegt zwaarder dan elke selector die vanaf de grid-klasse vertrekt,
 * en zou hier het VASTE verloop terugzetten -- waardoor de stops niet meer
 * bewegen en de overlay dus niet meer opengroeit. Met !important wint deze
 * regel altijd, of de overlay per kaart nu ingesteld staat of niet.
 */
.zuuvr-hover-cards > .e-con::before {
	content: "";
	z-index: 1;
	mix-blend-mode: normal;
	background-image: linear-gradient(
			180deg,
			var(--e-global-color-0ead0a5) var(--overlay-stop-1),
			var(--e-global-color-primary) var(--overlay-stop-2)
	) !important;
	transition: --overlay-stop-1 0.6s ease, --overlay-stop-2 0.6s ease;
}

/* Bij hover groeit het verloop uit tot een volvlakke zwarte laag. */
.zuuvr-hover-cards > .e-con:hover::before {
	--overlay-stop-1: 0%;
	--overlay-stop-2: 0%;
}

/* Beide tekstwidgets boven de foto en de overlay houden. */
.zuuvr-hover-cards > .e-con > .elementor-widget-heading,
.zuuvr-hover-cards > .e-con > .elementor-widget-text-editor {
	position: relative;
	z-index: 2;
}

/*
 * De beschrijvingstekst start dichtgeklapt op nul hoogte, verstopt achter
 * de titel. grid-template-rows van 0fr naar 1fr is de enige manier om naar
 * de natuurlijke hoogte te animeren zonder een vaste hoogte te kennen.
 */
.zuuvr-hover-cards > .e-con > .elementor-widget-text-editor {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transition: grid-template-rows 0.6s ease, opacity 0.6s ease;
}

.zuuvr-hover-cards > .e-con > .elementor-widget-text-editor > * {
	overflow: hidden;
	min-height: 0;
	margin: 0;
}

/*
 * Bij hover klapt hij open -- de titel wordt vanzelf omhoog geduwd door de
 * flex-kolom die onderaan uitlijnt, geen handmatige transform nodig.
 */
.zuuvr-hover-cards > .e-con:hover > .elementor-widget-text-editor {
	grid-template-rows: 1fr;
	opacity: 1;
}

/*
 * Op tablet en mobiel bestaat geen betrouwbare :hover-status, dus de
 * beschrijvingstekst moet daar altijd zichtbaar staan i.p.v. enkel bij
 * hover (dat blijft desktop-only gedrag). Grens (1024px) komt overeen met
 * Elementor's eigen breakpoints: alles onder 1025px is tablet of mobiel.
 */
@media (max-width: 1024px) {
	.zuuvr-hover-cards > .e-con > .elementor-widget-text-editor {
		grid-template-rows: 1fr;
		opacity: 1;
	}

	/*
	 * Overlay krijgt hier ook de volle (hover-eind)staat, zodat de nu
	 * altijd-zichtbare tekst leesbaar blijft tegen de achtergrondfoto.
	 */
	.zuuvr-hover-cards > .e-con::before {
		--overlay-stop-1: 0%;
		--overlay-stop-2: 0%;
	}
}

/*
 * Tags/labels van een blogpost als pills (bv. de <span>DEKK</span>
 * <span>WAAS</span>... uit de tags-widget op het single-post-template).
 *
 * Zet de klasse .zuuvr-tag-pills op de widget zelf (Advanced -> CSS
 * Classes in Elementor) i.p.v. te haken op de auto-gegenereerde
 * .elementor-element-xxxxxxx-klasse: die ID verschilt per widget-kopie en
 * is dus niet betrouwbaar om op te bouwen.
 */
.zuuvr-tag-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.zuuvr-tag-pills span {
	display: inline-flex;
	align-items: center;
	padding: 0.35em 1em;
	border-radius: 999px;
	background-color: var(--e-global-color-accent, #78C3A7);
	color: var(--e-global-color-primary, #1a1a1a);
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
}