/* =========================================================================
   Pouchfabriek — sitebrede aanvullingen (los van de SCSS-build)
   Wordt globaal ingeladen via hooks/frontend_hooks.php (na 'rockwise').
   ========================================================================= */

/* Topbar-links zijn op desktop onderdeel van de aparte .top-bar.
   Hogere specificiteit dan ".header__menu ul { display:flex }" zodat ze op
   desktop echt verborgen blijven. */
.header__menu ul.header__menu-toplinks { display: none; }

/* =========================================================================
   Mobiel menu (uitschuifpaneel < 1200px)
   ========================================================================= */
@media (max-width: 1199.98px) {

	/* --- Paneel: juiste hoogte + eigen scroll ---------------------------- */
	.header__col {
		height: calc(100vh - 77px);
		height: calc(100dvh - 77px);
		max-height: calc(100dvh - 77px);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
	}
	.header__col .header__menu {
		padding: 14px 26px calc(40px + env(safe-area-inset-bottom, 0px));
	}

	/* --- Hoofditems: strakke rijen met dunne scheidingslijnen ------------ */
	.header__menu > ul { display: block; margin: 0; }
	.header__menu > ul > li {
		width: 100%;
		margin: 0;
		padding: 0;
		border-bottom: 1px solid rgba(255, 255, 255, .10);
	}
	.header__menu .main-menu-link {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 16px 2px;
		font-size: 1rem;
		letter-spacing: .04em;
		color: #fff;
	}
	.header__menu .main-menu-link:hover,
	.header__menu > ul > li.current-menu-item > .main-menu-link { color: #f27c00; }
	/* NB: de bestaande chevron bij items met submenu lijnt via space-between
	   rechts uit; we voegen er zelf géén toe om dubbele pijltjes te voorkomen. */

	/* Eventueel zichtbare submenu-items iets ingesprongen en zachter. */
	.header__menu .sub-menu { list-style: none; margin: 0; padding: 0; }
	.header__menu .sub-menu .sub-menu-link {
		display: block; padding: 12px 2px 12px 16px;
		font-size: .9rem; color: rgba(255, 255, 255, .78);
	}

	/* --- Actieknoppen: vol, gecentreerd, ruim ---------------------------- */
	.header__menu .d-flex.flex-column {
		gap: 12px;
		margin: 22px 0 6px;
	}
	.header__menu .request__quote-mobile {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		max-width: none;
		margin: 0;
		text-align: center;
	}

	/* --- Secundaire (topbar) links: compact tweekoloms-blok onderaan ----- */
	.header__menu ul.header__menu-toplinks {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 18px;
		list-style: none;
		margin: 20px 0 0;
		padding: 22px 2px 0;
		border-top: 1px solid rgba(255, 255, 255, .14);
	}
	.header__menu ul.header__menu-toplinks li {
		width: 100%;
		margin: 0;
		padding: 0;
		border: 0;
	}
	.header__menu ul.header__menu-toplinks a {
		display: block;
		padding: 8px 0;
		font-size: .82rem;
		font-weight: 500;
		letter-spacing: .02em;
		text-transform: none;
		color: rgba(255, 255, 255, .6);
		transition: color .2s ease;
	}
	.header__menu ul.header__menu-toplinks a:hover,
	.header__menu ul.header__menu-toplinks a:focus-visible { color: #f27c00; }
}