/*
 * Megamenu's in de header (Functies, Voor wie, Over Timebutler).
 *
 * Gebouwd op de core-navigatie: elk menu is een navigation-submenu met de klasse tb-mega, de
 * omschrijving komt uit het veld "description" van de link. Ontwerp: Figma, frame "Megamenu
 * voorstel A (23-10-2026)". Iconen zijn Lucide (assets/icons), via mask-image zodat ze de
 * tekstkleur volgen; welk icoon bij welke link hoort staat onderaan, op href.
 *
 * Desktop (vanaf 1200px): paneel onder de menubalk. Daaronder gebruikt de header het overlay-
 * menu (zie secties.css); daar zijn het eenvoudige uitklaplijsten zonder iconen en omschrijving.
 */

/* ---------- Desktop ---------- */
@media (min-width: 1200px) {
	/* Het paneel lijnt uit op de header, niet op het menu-item. */
	header .tb-hoofdmenu,
	header .tb-hoofdmenu .wp-block-navigation__responsive-container:not(.is-menu-open),
	header .tb-hoofdmenu .wp-block-navigation__responsive-container-content,
	header .tb-hoofdmenu .wp-block-navigation__container:not(.wp-block-navigation__submenu-container),
	header .tb-mega {
		position: static !important;
	}

	/* Vijf items plus logo, inloggen en CTA op een regel: kleine tussenruimte, de items
	   hebben zelf padding. */
	header .tb-hoofdmenu .wp-block-navigation__container:not(.wp-block-navigation__submenu-container) {
		gap: 0.25rem !important;
	}

	/* Besluit eigenaar 26-10-2026: de balk is 80px (padding 1.125rem in patterns/header.php,
	   logo 172px) en de items staan in medium, zodat de navigatie meer aanwezigheid heeft. */
	header .tb-hoofdmenu .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		font-weight: var(--wp--custom--font-weight--medium);
		padding: 0.5rem 0.75rem;
		white-space: nowrap;
	}

	header .tb-knop-klein .wp-block-button__link {
		white-space: nowrap;
	}

	header .alignfull > .wp-block-group {
		position: relative;
	}

	header .tb-mega > .wp-block-navigation-item__content {
		border-radius: var(--wp--custom--radius--md);
		padding: 0.5rem 1.75rem 0.5rem 0.75rem !important;
		transition: background-color 150ms ease;
	}

	header .tb-mega:is(:hover, :focus-within) > .wp-block-navigation-item__content {
		background: var(--wp--preset--color--teal-100);
	}

	/* Het pijltje staat binnen het gekleurde vlak van het item. */
	header .tb-mega {
		align-items: center;
	}

	header .tb-mega > .wp-block-navigation__submenu-icon {
		margin-left: -1.5rem !important;
		position: relative;
		width: 1.25rem;
		z-index: 1;
	}

	header .tb-mega .wp-block-navigation__submenu-icon svg {
		transition: transform 150ms ease;
	}

	header .tb-mega:is(:hover, :focus-within) > .wp-block-navigation__submenu-icon svg {
		transform: rotate(180deg);
	}

	/* Het paneel. top: 100% plus een onzichtbare brug (::before), zodat de muis van het item
	   naar het paneel kan zonder dat het sluit. */
	header .tb-hoofdmenu .tb-mega > .wp-block-navigation__submenu-container {
		background: var(--wp--preset--color--wit);
		border: 1px solid var(--wp--preset--color--rand) !important;
		border-radius: var(--wp--custom--radius--lg);
		box-shadow: var(--wp--preset--shadow--lg);
		gap: 0.25rem var(--wp--preset--spacing--40);
		left: 50% !important;
		margin-top: 0.5rem;
		position: absolute !important;
		padding: var(--wp--preset--spacing--50);
		top: 100% !important;
		transform: translateX(-50%);
	}

	header .tb-hoofdmenu .tb-mega > .wp-block-navigation__submenu-container::before {
		content: "";
		height: 0.75rem;
		inset: -0.75rem 0 auto;
		position: absolute;
	}

	header .tb-mega:is(:hover, :focus-within) > .wp-block-navigation__submenu-container {
		display: grid !important;
	}

	/* Een item: icoonvlak, titel, omschrijving. */
	header .tb-mega .wp-block-navigation__submenu-container > .wp-block-navigation-item:not(.tb-mega__extra) > .wp-block-navigation-item__content {
		border-radius: var(--wp--custom--radius--md);
		display: grid;
		gap: 0 var(--wp--preset--spacing--30);
		grid-template-columns: 2.25rem 1fr;
		padding: 0.625rem 0.75rem !important;
		position: relative;
		transition: background-color 150ms ease;
	}

	header .tb-mega .wp-block-navigation__submenu-container > .wp-block-navigation-item:not(.tb-mega__extra) > .wp-block-navigation-item__content:is(:hover, :focus-visible) {
		background: var(--wp--preset--color--teal-100);
	}

	/* Icoonvlak (::before) met het icoon erin (::after). */
	header .tb-mega .wp-block-navigation-item:not(.tb-mega__extra) > .wp-block-navigation-item__content::before {
		background: var(--wp--preset--color--teal-100);
		border-radius: var(--wp--custom--radius--md);
		content: "";
		grid-row: 1 / span 2;
		height: 2.25rem;
		width: 2.25rem;
	}

	header .tb-mega .wp-block-navigation-item:not(.tb-mega__extra) > .wp-block-navigation-item__content:is(:hover, :focus-visible)::before {
		background: var(--wp--preset--color--wit);
	}

	header .tb-mega .wp-block-navigation-item:not(.tb-mega__extra) > .wp-block-navigation-item__content::after {
		background: var(--wp--preset--color--ink-700);
		content: "";
		height: 1.25rem;
		left: calc(0.75rem + 0.5rem);
		-webkit-mask: var(--tb-icoon) center / contain no-repeat;
		mask: var(--tb-icoon) center / contain no-repeat;
		position: absolute;
		top: calc(0.625rem + 0.5rem);
		width: 1.25rem;
	}

	/* Titel op base (gelijk aan de menu-items), omschrijving op sm. Besluit eigenaar 26-10-2026:
	   14/13 was de ondergrens van wat gangbaar is (15 tot 16 / 13 tot 14) en oogde ijl. */
	header .tb-mega .wp-block-navigation__submenu-container .wp-block-navigation-item__label {
		color: var(--wp--preset--color--ink-700);
		font-size: var(--wp--preset--font-size--base);
		font-weight: var(--wp--custom--font-weight--semibold);
		line-height: 1.4;
	}

	header .tb-mega .wp-block-navigation__submenu-container .wp-block-navigation-item__description {
		color: var(--wp--preset--color--tekst-zacht);
		display: block;
		font-size: var(--wp--preset--font-size--sm);
		line-height: 1.4;
	}

	/* Losse tekstlinks onderaan ("Ook handig", België, alle sectoren). */
	header .tb-mega .tb-mega__extra > .wp-block-navigation-item__content {
		color: var(--wp--preset--color--teal-700);
		font-size: var(--wp--preset--font-size--sm);
		font-weight: var(--wp--custom--font-weight--medium);
		padding: 0.25rem 0 !important;
	}

	header .tb-mega .wp-block-navigation__submenu-container .tb-mega__extra .wp-block-navigation-item__label {
		color: var(--wp--preset--color--teal-700);
		font-weight: var(--wp--custom--font-weight--medium);
	}

	header .tb-mega .tb-mega__extra > .wp-block-navigation-item__content:hover {
		text-decoration: underline;
	}

	/* Functies: drie groepen in kolommen, daaronder "Ook handig" in twee rijen van vier
	   (label plus zeven links). Raster van 24 kolommen: een groep beslaat er 8, een link 6. */
	header .tb-mega--functies > .wp-block-navigation__submenu-container {
		column-gap: 0;
		grid-template-columns: repeat(24, minmax(0, 1fr));
		width: min(65rem, calc(100vw - 4rem)) !important;
	}

	header .tb-mega--functies .wp-block-navigation-item:not(.tb-mega__extra) {
		grid-column: span 8;
	}

	header .tb-mega--functies .wp-block-navigation-item:nth-child(1) { grid-area: 2 / 1 / 3 / 9; }
	header .tb-mega--functies .wp-block-navigation-item:nth-child(2) { grid-area: 3 / 1 / 4 / 9; }
	header .tb-mega--functies .wp-block-navigation-item:nth-child(3) { grid-area: 4 / 1 / 5 / 9; }
	header .tb-mega--functies .wp-block-navigation-item:nth-child(4) { grid-area: 2 / 9 / 3 / 17; }
	header .tb-mega--functies .wp-block-navigation-item:nth-child(5) { grid-area: 3 / 9 / 4 / 17; }
	header .tb-mega--functies .wp-block-navigation-item:nth-child(6) { grid-area: 2 / 17 / 3 / 25; }
	header .tb-mega--functies .wp-block-navigation-item:nth-child(7) { grid-area: 3 / 17 / 4 / 25; }

	/* Groepskoppen: geen hoofdletters met letterafstand (DESIGN.md, typografie). */
	header .tb-mega--functies > .wp-block-navigation__submenu-container > li:nth-child(1)::before,
	header .tb-mega--functies > .wp-block-navigation__submenu-container > li:nth-child(4)::before,
	header .tb-mega--functies > .wp-block-navigation__submenu-container > li:nth-child(6)::before {
		color: var(--wp--preset--color--tekst-zacht);
		display: block;
		font-size: var(--wp--preset--font-size--xs);
		font-weight: var(--wp--custom--font-weight--semibold);
		padding: 0 0.75rem 0.25rem;
	}

	header .tb-mega--functies > .wp-block-navigation__submenu-container > li:nth-child(1)::before { content: "Plannen"; }
	header .tb-mega--functies > .wp-block-navigation__submenu-container > li:nth-child(4)::before { content: "Uren"; }
	header .tb-mega--functies > .wp-block-navigation__submenu-container > li:nth-child(6)::before { content: "Afwezigheid"; }

	header .tb-mega--functies > .wp-block-navigation__submenu-container > li {
		position: relative;
	}

	header .tb-mega--functies > .wp-block-navigation__submenu-container > li:is(:nth-child(1), :nth-child(4), :nth-child(6)) {
		align-items: stretch;
		flex-direction: column;
	}

	/* Groepskoppen staan in het item zelf, boven de link, zodat de hover-achtergrond van de link
	   er niet overheen valt. De eerste rij van het raster is leeg. */
	header .tb-mega--functies > .wp-block-navigation__submenu-container {
		grid-template-rows: 0 auto auto auto;
	}

	/* Ook handig: een lijn erboven, label in de eerste cel. */
	header .tb-mega--functies .tb-mega__extra {
		margin-top: var(--wp--preset--spacing--30);
		padding-top: var(--wp--preset--spacing--30);
	}

	header .tb-mega--functies .tb-mega__extra:nth-child(8) { grid-area: 5 / 7 / 6 / 13; }
	header .tb-mega--functies .tb-mega__extra:nth-child(9) { grid-area: 5 / 13 / 6 / 19; }
	header .tb-mega--functies .tb-mega__extra:nth-child(10) { grid-area: 5 / 19 / 6 / 25; }
	header .tb-mega--functies .tb-mega__extra:nth-child(11) { grid-area: 6 / 1 / 7 / 7; }
	header .tb-mega--functies .tb-mega__extra:nth-child(12) { grid-area: 6 / 7 / 7 / 13; }
	header .tb-mega--functies .tb-mega__extra:nth-child(13) { grid-area: 6 / 13 / 7 / 19; }
	header .tb-mega--functies .tb-mega__extra:nth-child(14) { grid-area: 6 / 19 / 7 / 25; }

	header .tb-mega--functies .tb-mega__extra:nth-child(n + 11) {
		margin-top: 0;
		padding-top: 0;
	}

	header .tb-mega--functies .tb-mega__extra > .wp-block-navigation-item__content {
		padding: 0.25rem 0.75rem !important;
	}

	header .tb-mega--functies > .wp-block-navigation__submenu-container::after {
		align-self: start;
		border-top: 1px solid var(--wp--preset--color--rand);
		content: "";
		grid-area: 5 / 1 / 6 / 25;
		margin: var(--wp--preset--spacing--30) 0.75rem 0;
		position: relative;
		z-index: 1;
	}

	header .tb-mega--functies .tb-mega__extra:nth-child(8)::before {
		color: var(--wp--preset--color--tekst-zacht);
		content: "Ook handig";
		font-size: var(--wp--preset--font-size--xs);
		font-weight: var(--wp--custom--font-weight--semibold);
		left: -100%;
		padding: calc(var(--wp--preset--spacing--30) + 0.35rem) 0 0;
		position: absolute;
		top: 0;
		width: 100%;
	}

	/* Voor wie: tien sectoren in twee kolommen, daaronder België en alle sectoren. */
	header .tb-mega--sectoren > .wp-block-navigation__submenu-container {
		grid-auto-flow: column;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: repeat(5, auto) auto;
		width: min(48rem, calc(100vw - 4rem)) !important;
	}

	header .tb-mega--sectoren .tb-mega__extra {
		border-top: 1px solid var(--wp--preset--color--rand);
		grid-row: 6;
		margin-top: var(--wp--preset--spacing--30);
		padding-top: var(--wp--preset--spacing--30);
	}

	header .tb-mega--sectoren .tb-mega__extra:nth-child(11) {
		grid-column: 1;
		padding-left: 0.75rem;
	}

	header .tb-mega--sectoren .tb-mega__alle {
		grid-column: 2;
		padding-right: 0.75rem;
		text-align: right;
	}

	header .tb-mega--sectoren .tb-mega__alle .wp-block-navigation-item__label::after {
		content: " \2192";
	}

	/* Over Timebutler: klein paneel onder het item zelf. */
	header .tb-mega--over {
		position: relative !important;
	}

	header .tb-mega--over > .wp-block-navigation__submenu-container {
		grid-template-columns: 1fr;
		width: 24rem !important;
	}
}

/* ---------- Overlay (onder 1200px): uitklaplijsten ---------- */
/* Een rij per hoofditem, links uitgelijnd, met een lijn eronder. Een megamenu klapt open via
   het pijltje (assets/js/menu.js zet tb-open); zonder script staat alles open. */
header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: stretch !important;
	gap: 0 !important;
	width: 100%;
}

header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
	align-items: center !important;
	border-bottom: 1px solid var(--wp--preset--color--rand);
	display: flex;
	flex-direction: row !important;
	flex-wrap: wrap;
	justify-content: space-between;
	padding-block: 0.875rem;
	width: 100%;
}

header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--ink-700);
	font-size: var(--wp--preset--font-size--md);
	font-weight: var(--wp--custom--font-weight--semibold);
}

header .wp-block-navigation__responsive-container.is-menu-open .tb-mega > .wp-block-navigation__submenu-icon {
	align-items: center;
	display: flex !important;
	height: 2.75rem;
	justify-content: center;
	margin: -0.75rem -0.75rem -0.75rem 0;
	padding: 0 !important;
	width: 2.75rem;
}

header .wp-block-navigation__responsive-container.is-menu-open .tb-mega > .wp-block-navigation__submenu-icon svg {
	height: 1rem;
	transition: transform 150ms ease;
	width: 1rem;
}

.tb-js header .wp-block-navigation__responsive-container.is-menu-open .tb-mega:not(.tb-open) > .wp-block-navigation__submenu-container {
	display: none !important;
}

header .wp-block-navigation__responsive-container.is-menu-open .tb-mega.tb-open > .wp-block-navigation__submenu-icon svg {
	transform: rotate(180deg);
}

header .wp-block-navigation__responsive-container.is-menu-open .tb-mega:not(.tb-open) > .wp-block-navigation__submenu-icon svg {
	transform: none;
}

header .wp-block-navigation__responsive-container.is-menu-open .tb-mega > .wp-block-navigation__submenu-container {
	align-items: flex-start !important;
	flex-basis: 100% !important;
	text-align: left;
	background: var(--wp--preset--color--teal-100) !important;
	border-radius: var(--wp--custom--radius--md);
	gap: 0 !important;
	margin-top: 0.75rem;
	padding: 0.5rem 1rem !important;
	width: 100%;
}

header .wp-block-navigation__responsive-container.is-menu-open .tb-mega .wp-block-navigation__submenu-container .wp-block-navigation-item {
	align-items: flex-start !important;
	width: 100%;
}

header .wp-block-navigation__responsive-container.is-menu-open .tb-mega .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: var(--wp--preset--color--ink-700);
	padding-inline: 0 !important;
	font-size: var(--wp--preset--font-size--base);
	padding-block: 0.625rem !important;
}

header .wp-block-navigation__responsive-container.is-menu-open .tb-mega .wp-block-navigation-item__description,
header .wp-block-navigation__responsive-container.is-menu-open .tb-mega .tb-mega__extra:not(.tb-mega__alle) {
	display: none !important;
}

/* Groepskoppen ook in de uitklaplijst. */
header .wp-block-navigation__responsive-container.is-menu-open .tb-mega--functies .wp-block-navigation__submenu-container > li:is(:nth-child(1), :nth-child(4), :nth-child(6)) {
	align-items: flex-start !important;
	flex-direction: column;
}

header .wp-block-navigation__responsive-container.is-menu-open .tb-mega--functies .wp-block-navigation__submenu-container > li:is(:nth-child(1), :nth-child(4), :nth-child(6))::before {
	color: var(--wp--preset--color--tekst-zacht);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: var(--wp--custom--font-weight--semibold);
	padding-top: 0.75rem;
}

header .wp-block-navigation__responsive-container.is-menu-open .tb-mega--functies .wp-block-navigation__submenu-container > li:nth-child(1)::before { content: "Plannen"; }
header .wp-block-navigation__responsive-container.is-menu-open .tb-mega--functies .wp-block-navigation__submenu-container > li:nth-child(4)::before { content: "Uren"; }
header .wp-block-navigation__responsive-container.is-menu-open .tb-mega--functies .wp-block-navigation__submenu-container > li:nth-child(6)::before { content: "Afwezigheid"; }

/* CTA onderaan het overlaymenu; op desktop staat de knop al rechts in de header. */
header .tb-menu-cta {
	display: none !important;
}

header .wp-block-navigation__responsive-container.is-menu-open .tb-menu-cta {
	border-bottom: 0 !important;
	display: flex !important;
	padding-top: var(--wp--preset--spacing--50) !important;
}

header .wp-block-navigation__responsive-container.is-menu-open .tb-menu-cta > .wp-block-navigation-item__content {
	background: var(--wp--preset--color--teal-700);
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--preset--color--wit) !important;
	font-size: var(--wp--preset--font-size--base) !important;
	justify-content: center;
	padding: 0.875rem 1rem !important;
	text-align: center;
	width: 100%;
}

/* ---------- Iconen per link ---------- */
header .tb-mega a[href="/rooster-maken/"] { --tb-icoon: url(../icons/calendar-days.svg); }
header .tb-mega a[href="/personeelsplanning/"] { --tb-icoon: url(../icons/users.svg); }
header .tb-mega a[href="/medewerker-app/"] { --tb-icoon: url(../icons/smartphone.svg); }
header .tb-mega a[href="/urenregistratie/"] { --tb-icoon: url(../icons/clock.svg); }
header .tb-mega a[href="/digitale-prikklok/"] { --tb-icoon: url(../icons/punch-clock.svg); }
header .tb-mega a[href="/verlofregistratie/"] { --tb-icoon: url(../icons/plane.svg); }
header .tb-mega a[href="/verzuimregistratie/"] { --tb-icoon: url(../icons/heart-pulse.svg); }
header .tb-mega a[href="/voor-wie/horeca/"] { --tb-icoon: url(../icons/utensils.svg); }
header .tb-mega a[href="/voor-wie/zorg/"] { --tb-icoon: url(../icons/heart-pulse.svg); }
header .tb-mega a[href="/voor-wie/schoonmaak/"] { --tb-icoon: url(../icons/sparkles.svg); }
header .tb-mega a[href="/voor-wie/bouw/"] { --tb-icoon: url(../icons/hard-hat.svg); }
header .tb-mega a[href="/voor-wie/zakelijke-dienstverlening/"] { --tb-icoon: url(../icons/briefcase.svg); }
header .tb-mega a[href="/voor-wie/logistiek/"] { --tb-icoon: url(../icons/warehouse.svg); }
header .tb-mega a[href="/voor-wie/retail/"] { --tb-icoon: url(../icons/shopping-bag.svg); }
header .tb-mega a[href="/voor-wie/sport-en-recreatie/"] { --tb-icoon: url(../icons/trophy.svg); }
header .tb-mega a[href="/voor-wie/groothandel/"] { --tb-icoon: url(../icons/store.svg); }
header .tb-mega a[href="/voor-wie/agrarische-sector/"] { --tb-icoon: url(../icons/tractor.svg); }
header .tb-mega a[href="/over-ons/"] { --tb-icoon: url(../icons/building-2.svg); }
header .tb-mega a[href="/onze-missie/"] { --tb-icoon: url(../icons/target.svg); }
header .tb-mega a[href="/blog/"] { --tb-icoon: url(../icons/book-open.svg); }
header .tb-mega a[href="/kennisbank/"] { --tb-icoon: url(../icons/circle-help.svg); }

@media (prefers-reduced-motion: reduce) {
	header .tb-mega *,
	header .tb-mega *::before {
		transition: none !important;
	}
}