/* =========================================================================
   px-mobile-menu — Mobile menu (trigger bar + slide-over panel + 3 levels)
   Figma: closed 286:4477, expanded 290:6590, drilled 292:6685
   ========================================================================= */

.px-mobile-menu {
	font-family: var(--Font-Family-Primary);
	color: var(--Zwart);
}

/* Kill the mobile browser's grey/blue tap-highlight flash on every tappable
   control (fix 152759). State colours are handled by :hover/:active/aria. */
.px-mobile-menu__toggle,
.px-mobile-menu__close,
.px-mobile-menu__row,
.px-mobile-menu__sub-link,
.px-mobile-menu__drill-link,
.px-mobile-menu__back,
.px-mobile-menu__cta {
	-webkit-tap-highlight-color: transparent;
}

/* Hide on viewports >= breakpoint (default 1200px; override in frontend.css.php).
   Het mobiele menu neemt het over op tablet en kleiner; de desktop-pill toont
   pas vanaf 1200px (feedback #168). Houd dit in sync met de max-width grens in
   px-desktop-menu/css/frontend.css (1199px). */
@media (min-width: 1200px) {
	.px-mobile-menu {
		display: none;
	}
}

/* ---------- Trigger bar (visible state) ---------- */

.px-mobile-menu__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--D1);
	background: var(--Wit);
	border-radius: 5px;
	padding: 0 var(--D125);
	height: var(--Mobile-Header-H);
	box-shadow: var(--px-shadow-subtle);
	margin: var(--Mobile-Header-Inset);
}

.px-mobile-menu--sticky .px-mobile-menu__bar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
}

.px-mobile-menu__logo {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	text-decoration: none;
	color: inherit;
}

.px-mobile-menu__logo-img {
	display: block;
	width: 107px;
	height: auto;
	max-height: 30px;
	object-fit: contain;
}

.px-mobile-menu__bar-right {
	display: inline-flex;
	align-items: center;
	gap: var(--D125);
}

.px-mobile-menu__current {
	font-size: 12px;
	font-weight: var(--px-weight-semibold);
	color: var(--Zwart);
	line-height: 1;
}

.px-mobile-menu__toggle,
.px-mobile-menu__close {
	background: none;
	border: 0;
	padding: 6px;
	margin: -6px;
	cursor: pointer;
	color: var(--Zwart);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.px-mobile-menu__toggle:focus-visible,
.px-mobile-menu__close:focus-visible {
	outline: 2px solid var(--Zwart);
	outline-offset: 2px;
	border-radius: 3px;
}

.px-mobile-menu__hamburger svg {
	width: 22px;
	height: 16px;
	display: block;
}

.px-mobile-menu__close-icon {
	display: none;
}

.px-mobile-menu__close-icon svg {
	width: 17px;
	height: 17px;
	display: block;
}

/* ---------- Overlay (slide-out) ---------- */

.px-mobile-menu__overlay {
	position: fixed;
	inset: 0;
	z-index: 200;
	/* Figma 442:18985 (Mob menu open): dark teal backdrop, horizontal --Teal-100 → --Teal-130 */
	background: linear-gradient(to right, var(--Teal-100) 0%, var(--Teal-130) 100%);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	/* Open/dichtklappen (152852): de backdrop faden in en uit. JS houdt het
	   [hidden]-attribuut even vast tot de uitfade klaar is, zodat ook het sluiten
	   meeanimeert (display:none kan niet getransitioneerd worden). */
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--px-duration-normal) var(--px-ease-out);
}

.px-mobile-menu__overlay[hidden] {
	display: none;
}

.px-mobile-menu.is-open .px-mobile-menu__overlay {
	opacity: 1;
	pointer-events: auto;
}

/* ---------- Panel ---------- */

.px-mobile-menu__panel {
	background: var(--Wit);
	margin: 15px;
	border-radius: 5px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: var(--px-shadow-card);
	/* Paneel valt licht omlaag en schaalt in bij openen (152852). */
	transform: translateY(-12px) scale(0.985);
	transform-origin: top center;
	opacity: 0;
	transition: transform var(--px-duration-normal) var(--px-ease-out),
				opacity var(--px-duration-normal) var(--px-ease-out);
}

.px-mobile-menu.is-open .px-mobile-menu__panel {
	transform: none;
	opacity: 1;
}

.px-mobile-menu__panel-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--D1);
	background: var(--Wit);
	padding: 0 var(--D125);
	height: 50px;
	border-bottom: 1px solid transparent;
}

.px-mobile-menu__panel-bar .px-mobile-menu__close-icon {
	display: inline-flex;
}

/* ---------- Nav list ---------- */

.px-mobile-menu__nav {
	display: block;
}

.px-mobile-menu__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.px-mobile-menu__item {
	margin: 0;
}

/* Common row (top-level button or link) */
.px-mobile-menu__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--D1);
	width: 100%;
	min-height: 50px;
	padding: 0 var(--D125);
	background: var(--Warm-Off-White);
	border: 0;
	text-align: left;
	font-family: inherit;
	cursor: pointer;
	color: var(--Zwart);
	text-decoration: none;
	transition: background-color var(--px-duration-fast) var(--px-ease-out),
				color var(--px-duration-fast) var(--px-ease-out);
}

.px-mobile-menu__row:hover,
.px-mobile-menu__row:focus-visible {
	background: var(--Wit);
}

/* Tap (touch press): settle to the final colour instantly so the browser's
   tap-highlight + eased background don't flash a light-blue intermediate. */
.px-mobile-menu__row:active {
	transition: none;
}

.px-mobile-menu__label {
	font-size: 16px;
	font-weight: var(--px-weight-semibold);
	line-height: 1.2;
}

/* Current page */
.px-mobile-menu__item.is-current > .px-mobile-menu__row .px-mobile-menu__label {
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
}

/* Chevron */
.px-mobile-menu__chevron {
	display: inline-flex;
	color: inherit;
	transition: transform var(--px-duration-normal) var(--px-ease-out);
	flex-shrink: 0;
}

.px-mobile-menu__chevron svg {
	width: 10px;
	height: 6px;
	display: block;
}

/* Expanded state — dark gradient row */
.px-mobile-menu__item.is-expanded > .px-mobile-menu__row {
	background: linear-gradient(180deg, var(--Teal-100) 0%, var(--Teal-130) 100%);
	color: var(--Wit);
}

.px-mobile-menu__item.is-expanded > .px-mobile-menu__row:hover,
.px-mobile-menu__item.is-expanded > .px-mobile-menu__row:focus-visible {
	background: linear-gradient(180deg, var(--Teal-100) 0%, var(--Teal-130) 100%);
}

.px-mobile-menu__item.is-expanded > .px-mobile-menu__row .px-mobile-menu__chevron {
	transform: rotate(180deg);
}

/* ---------- Submenu (level 2) ---------- */

.px-mobile-menu__sub {
	background: var(--Wit);
	/* Uitklappen submenu (152446): hoogte vloeiend animeren via grid 0fr → 1fr.
	   JS verwijdert het [hidden]-attribuut bij init; visibility houdt de links
	   buiten de tab-volgorde zolang het submenu dicht is. */
	display: grid;
	/* minmax(0,…) forceert de track-minimum op 0; met enkel 0fr blijft de
	   min-content van de ul (padding-block) als ~40px staan en sluit hij niet. */
	grid-template-rows: minmax(0, 0fr);
	visibility: hidden;
	transition: grid-template-rows var(--px-duration-normal) var(--px-ease-out),
				visibility 0s linear var(--px-duration-normal);
}

.px-mobile-menu__sub > * {
	overflow: hidden;
	min-height: 0;
}

.px-mobile-menu__item.is-expanded > .px-mobile-menu__sub {
	grid-template-rows: minmax(0, 1fr);
	visibility: visible;
	transition: grid-template-rows var(--px-duration-normal) var(--px-ease-out),
				visibility 0s;
}

/* Pre-JS / no-JS: zonder het is-expanded mechaniek blijft het submenu dicht. */
.px-mobile-menu__sub[hidden] {
	display: none;
}

.px-mobile-menu__sub-list {
	list-style: none;
	margin: 0;
	/* Figma 442:19051: ~27px whitespace above first item (By risk) & below last (By framework) */
	padding-block: var(--D2);
	padding-inline: 0;
	display: flex;
	flex-direction: column;
}

.px-mobile-menu__sub-item {
	margin: 0;
}

.px-mobile-menu__sub-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--D1);
	width: 100%;
	padding: var(--D075) var(--D125);
	background: var(--Wit);
	border: 0;
	text-align: left;
	font-family: inherit;
	cursor: pointer;
	color: var(--Zwart);
	text-decoration: none;
}

.px-mobile-menu__sub-link:hover,
.px-mobile-menu__sub-link:focus-visible {
	background: var(--Warm-Off-White);
}

/* Active language in the expandable language switcher */
.px-mobile-menu__sub-link.is-active .px-mobile-menu__sub-label {
	color: var(--Accent-Company-100);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.px-mobile-menu__sub-label {
	font-size: 16px;
	font-weight: var(--px-weight-semibold);
	line-height: 1.2;
}

.px-mobile-menu__sub-arrow {
	display: inline-flex;
	flex-shrink: 0;
	color: inherit;
}

.px-mobile-menu__sub-arrow svg {
	width: 14px;
	height: 11px;
	display: block;
}

/* ---------- Drill panel (level 3) ---------- */

.px-mobile-menu__drill {
	background: var(--Wit);
	/* Figma 442:19123: ~27px above the back-row (By risk) inside the white drill region */
	padding-block: var(--D25) var(--D125);
	padding-inline: var(--D125);
}

.px-mobile-menu__drill[hidden] {
	display: none;
}

/* Indrillen (152446): het derde niveau schuift licht van rechts in beeld. */
.px-mobile-menu__sub-item--has-drill.is-drilled > .px-mobile-menu__drill {
	animation: pxMmDrillIn var(--px-duration-normal) var(--px-ease-out);
}

@keyframes pxMmDrillIn {
	from { opacity: 0; transform: translateX(14px); }
	to   { opacity: 1; transform: translateX(0); }
}

.px-mobile-menu__sub-item--has-drill.is-drilled .px-mobile-menu__sub-link {
	display: none;
}

/* When drill is shown, hide all OTHER sub items in this submenu */
.px-mobile-menu__sub-list:has(.is-drilled) .px-mobile-menu__sub-item:not(.is-drilled) {
	display: none;
}

.px-mobile-menu__sub-list:has(.is-drilled) {
	padding-top: 0;
	padding-bottom: 0;
}

.px-mobile-menu__back {
	display: inline-flex;
	align-items: center;
	gap: var(--D1);
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	font-family: inherit;
	color: var(--Zwart);
	/* Figma 442:19123: ~25px below the back-row (By risk) before the divider */
	margin-bottom: var(--D25);
}

.px-mobile-menu__back:focus-visible {
	outline: 2px solid var(--Zwart);
	outline-offset: 4px;
	border-radius: 3px;
}

.px-mobile-menu__back-icon svg {
	width: 14px;
	height: 11px;
	display: block;
}

.px-mobile-menu__back-label {
	font-size: 16px;
	font-weight: var(--px-weight-semibold);
}

.px-mobile-menu__drill-divider {
	border: 0;
	border-top: 1px solid var(--Zwart);
	/* Figma 442:19123: ~20px below the divider before the first drill item (ESG) */
	margin-block: 0 var(--D2);
	margin-inline: 0;
}

.px-mobile-menu__drill-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--D125);
}

.px-mobile-menu__drill-link {
	font-size: 16px;
	font-weight: var(--px-weight-semibold);
	color: var(--Zwart);
	text-decoration: none;
	display: inline-block;
}

.px-mobile-menu__drill-link:hover,
.px-mobile-menu__drill-link:focus-visible {
	text-decoration: underline;
}

/* ---------- CTA button ---------- */

.px-mobile-menu__cta-wrap {
	/* Figma 442:18985: button inset 15px L/R/top, ~19px bottom inside white footer band */
	padding-block: var(--D15) var(--D2);
	padding-inline: var(--D15);
}

.px-mobile-menu__cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--D1);
	width: 100%;
	padding: 11px var(--D125);
	background: linear-gradient(180deg, var(--Teal-100) 0%, var(--Teal-130) 100%);
	color: var(--Wit);
	text-decoration: none;
	border-radius: 5px;
	transition: filter var(--px-duration-fast) var(--px-ease-out);
}

.px-mobile-menu__cta:hover,
.px-mobile-menu__cta:focus-visible {
	filter: brightness(1.15);
}

.px-mobile-menu__cta-label {
	font-size: 14px;
	font-weight: var(--px-weight-bold);
	line-height: 1;
}

.px-mobile-menu__cta-icon {
	display: inline-flex;
	flex-shrink: 0;
	color: inherit;
}

.px-mobile-menu__cta-icon svg {
	width: 11px;
	height: 11px;
	display: block;
}

/* ---------- Toggle states ---------- */

.px-mobile-menu.is-open .px-mobile-menu__hamburger {
	display: none;
}

.px-mobile-menu.is-open .px-mobile-menu__toggle .px-mobile-menu__close-icon {
	display: inline-flex;
}

/* Sticky variant: when open, hide outer bar (it's replaced by panel-bar) */
.px-mobile-menu.is-open.px-mobile-menu--sticky .px-mobile-menu__bar {
	visibility: hidden;
}

/* Lock body scroll */
body.px-mobile-menu-is-open {
	overflow: hidden;
	touch-action: none;
}

/* Screen-reader text helper */
.px-mobile-menu .screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* ---------- Reduced motion ---------- */
/* Respecteer de systeemvoorkeur: geen schuif/fade-animaties, alleen tonen/verbergen. */
@media (prefers-reduced-motion: reduce) {
	.px-mobile-menu__overlay,
	.px-mobile-menu__panel,
	.px-mobile-menu__sub,
	.px-mobile-menu__sub-item--has-drill.is-drilled > .px-mobile-menu__drill {
		transition-duration: 0.01ms;
		animation-duration: 0.01ms;
	}

	.px-mobile-menu__panel {
		transform: none;
	}
}

/* ---------- Small phone tweak ---------- */

@media (max-width: 360px) {
	.px-mobile-menu__bar,
	.px-mobile-menu__panel {
		margin: 10px;
	}
}