/* SmartHub 2026 - mobiele navigatie
 *
 * In alle 13 conceptpagina's verdwijnt het menu onder 980px zonder vervanger.
 * Dit is de voorlopige invulling: een knop die het menu opent en een paneel dat
 * eroverheen schuift. Zodra het echte off-canvas-ontwerp er is, vervangt dat
 * dit bestand; de opbouw in de header-template blijft gelijk.
 *
 * Boven 980px hoort hier niets zichtbaar te zijn - de knop stond eerder wél in
 * het grid en duwde logo en menu uit het midden.
 */

.sh-sectie .menu-knop {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	align-self: center;
}

.sh-sectie .menu-knop span {
	display: block;
	width: 24px;
	height: 2px;
	margin: 0 auto;
	border-radius: 2px;
	background: var(--ink);
	transition: transform .2s ease, opacity .2s ease;
}

.sh-sectie .menu-knop[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.sh-sectie .menu-knop[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}

.sh-sectie .menu-knop[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

.sh-sectie .mobiel-paneel {
	display: none;
}

@media (max-width: 980px) {

	.sh-sectie .menu-knop {
		display: flex;
	}

	/* logo links, knop rechts; het hoofdmenu is hier al verborgen */
	.sh-sectie .wrap.nav {
		grid-template-columns: auto auto;
		justify-content: space-between;
	}

	/* de 'Word lid'-knop verhuist naar het paneel, anders staat de balk te vol */
	.sh-sectie header .wrap.nav > .btn {
		display: none;
	}

	.sh-sectie .mobiel-paneel {
		display: block;
		position: fixed;
		inset: 88px 0 0;
		z-index: 90;
		overflow-y: auto;
		padding: 28px;
		background: var(--papier);
		border-top: 1px solid var(--lijn);
	}

	.sh-sectie .mobiel-paneel[hidden] {
		display: none;
	}

	.sh-sectie .mobiel-paneel ul {
		list-style: none;
		margin: 0 0 24px;
		padding: 0;
	}

	.sh-sectie .mobiel-paneel li {
		border-bottom: 1px solid var(--lijn);
	}

	.sh-sectie .mobiel-paneel a {
		display: block;
		padding: 14px 0;
		font-weight: 800;
		font-size: 1.05rem;
		text-decoration: none;
		color: var(--ink);
	}

	.sh-sectie .mobiel-paneel .sub-menu {
		margin: 0 0 0 16px;
	}

	.sh-sectie .mobiel-paneel .sub-menu a {
		font-weight: 600;
		font-size: .95rem;
		color: var(--steen);
	}

	.sh-sectie .mobiel-paneel > .btn {
		display: inline-flex;
	}
}

/* --- Mobiele header: logo en menuknop op één regel ------------------------
 *
 * Onder 980px verbergt base.css alleen `ul.hoofd`, niet de <nav> eromheen.
 * Die bleef als leeg rasteritem in het grid staan, waardoor de balk drie
 * items telde in twee kolommen: het derde item - de menuknop - viel naar een
 * tweede regel en kwam over de hero te liggen. Bijkomend gevolg was dat de
 * header hoger werd dan 88px, terwijl het mobiele paneel wel op `inset: 88px`
 * staat; dat sloot dus ook niet meer aan.
 */
@media (max-width: 980px) {

	.sh-sectie header .wrap.nav > nav {
		display: none;
	}
}

/* --- Mobiel paneel: Talent-item, uitlijning en inlogknop ------------------
 *
 * Drie dingen gingen hier mis.
 *
 * 1. Het menu-item Talent draagt in WordPress de klasse `mega`. De opmaak van
 *    het desktop-megamenu hangt aan diezelfde klassenaam (.sh-sectie .mega:
 *    absoluut gepositioneerd, opacity 0, visibility hidden). In het mobiele
 *    paneel sloeg die regel dus ook toe: Talent en de vier levensfases eronder
 *    waren onzichtbaar, en het absoluut gepositioneerde item trok de lijst
 *    breder dan het scherm.
 *
 * 2. De inlogknop kreeg `padding: 14px 0` van de algemene paneelregel voor
 *    links (0,1,1 wint van .btn met 0,1,0). Zonder horizontale padding liep de
 *    tekst uit de pil.
 *
 * 3. Door 1 liepen de scheidingslijnen door tot voorbij de rechterrand.
 */
@media (max-width: 980px) {

	.sh-sectie .mobiel-paneel li.mega {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		background: none;
		box-shadow: none;
		border-bottom: 1px solid var(--lijn);
		transition: none;
	}

	/* De inlogknop is een knop, geen menuregel: eigen padding en breedte terug. */
	.sh-sectie .mobiel-paneel a.btn {
		display: inline-flex;
		width: auto;
		padding: 15px 30px;
	}
}

@media (max-width: 980px) {

	/* De algemene paneelregel voor links (0,2,1) zet color:var(--ink) en wint
	   daarmee van .btn-roze (0,1,0). Op de roze pil hoort de tekst wit. */
	.sh-sectie .mobiel-paneel a.btn-roze {
		color: #fff;
	}
}

/* --- Paneel onder de header, ook met adminbalk ----------------------------
 *
 * Het paneel staat op position:fixed met top:88px, gerekend vanaf de viewport.
 * Voor een uitgelogde bezoeker klopt dat precies met de hoogte van de header,
 * maar WordPress duwt de pagina met een adminbalk 32px omlaag (46px op smalle
 * schermen). Het paneel begon dan 32px te hoog en dekte de onderste helft van
 * de header af - inclusief de sluitknop, waardoor het menu niet meer dicht kon.
 */
body.admin-bar .sh-sectie .mobiel-paneel {
	top: 120px;
}

@media screen and (max-width: 782px) {

	body.admin-bar .sh-sectie .mobiel-paneel {
		top: 134px;
	}
}

/* --- Submenu's ingeklapt --------------------------------------------------
 *
 * De levensfases onder Talent staan standaard dicht; de knop ernaast klapt ze
 * open. De knop wordt door mobiel-menu.js toegevoegd, zodat de template van
 * het header-element ongemoeid blijft.
 */
@media (max-width: 980px) {

	.sh-sectie .mobiel-paneel .heeft-sub {
		position: relative;
	}

	.sh-sectie .mobiel-paneel .sub-menu {
		display: none;
	}

	.sh-sectie .mobiel-paneel .sub-open > .sub-menu {
		display: block;
		padding-bottom: 6px;
	}

	.sh-sectie .mobiel-paneel .sub-knop {
		position: absolute;
		right: 0;
		top: 4px;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		background: none;
		cursor: pointer;
		display: grid;
		place-items: center;
	}

	.sh-sectie .mobiel-paneel .sub-knop::before {
		content: "";
		width: 10px;
		height: 10px;
		border-right: 2.5px solid var(--ink);
		border-bottom: 2.5px solid var(--ink);
		transform: rotate(45deg) translate(-2px, -2px);
		transition: transform .2s ease;
	}

	.sh-sectie .mobiel-paneel .sub-open > .sub-knop::before {
		transform: rotate(225deg) translate(-2px, -2px);
	}
}

/* Beter dan vaste getallen: WordPress zet zelf de hoogte van de adminbalk in
   deze variabele (32px, 46px op smalle schermen, afwezig als je uitgelogd
   bent). Daarmee klopt de bovenkant van het paneel in alle drie de gevallen. */
.sh-sectie .mobiel-paneel {
	top: calc(88px + var(--wp-admin--admin-bar--height, 0px));
}

body.admin-bar .sh-sectie .mobiel-paneel {
	top: calc(88px + var(--wp-admin--admin-bar--height, 32px));
}

@media screen and (max-width: 782px) {

	body.admin-bar .sh-sectie .mobiel-paneel {
		top: calc(88px + var(--wp-admin--admin-bar--height, 46px));
	}
}

/* Het item met submenu moet zelf het positioneringsanker zijn; de regel voor
   li.mega hierboven zet position:static en die is even specifiek, dus deze
   moet met dezelfde kracht (li + klasse) terugduwen. */
@media (max-width: 980px) {

	.sh-sectie .mobiel-paneel li.heeft-sub {
		position: relative;
	}
}

/* Het menu bevat een zoek-item van Avada (fusion-main-menu-search). In de
   desktopbalk is dat het vergrootglas; in het paneel rendert het als een lege
   regel van 29px mét onderrand, wat als een dubbele streep leest. */
@media (max-width: 980px) {

	.sh-sectie .mobiel-paneel .fusion-main-menu-search {
		display: none;
	}
}