/** Desktop mega menus and the separate mobile drawer interface. */

.oz-menu,
.oz-menu :where(ul),
.oz-header-cta__menu,
.oz-drawer-cta__menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.oz-menu a,
.oz-header-cta a,
.oz-drawer-cta a {
	text-decoration: none;
}

.oz-primary-menu {
	align-items: stretch;
	display: flex;
	height: 100%;
	justify-content: center;
}

.oz-primary-menu > .menu-item {
	align-items: center;
	display: flex;
	position: relative;
}

.oz-primary-menu > .oz-menu-item--mega {
	position: static;
}

.oz-primary-menu > .menu-item > a {
	align-items: center;
	color: var(--oz-color-heading);
	display: flex;
	font-size: var(--oz-font-size-small);
	font-weight: var(--oz-font-weight-bold);
	height: 100%;
	padding: 0 0.375rem;
	white-space: nowrap;
}

.oz-primary-menu > .menu-item > a:hover,
.oz-primary-menu > .current-menu-item > a,
.oz-primary-menu > .current-menu-ancestor > a {
	color: var(--oz-color-primary);
}

.oz-submenu-toggle {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: var(--oz-radius-pill);
	color: var(--oz-color-heading);
	cursor: pointer;
	display: inline-flex;
	height: 2.75rem;
	justify-content: center;
	margin-inline-start: -0.5rem;
	padding: 0;
	width: 2.75rem;
}

.oz-site-header button.oz-submenu-toggle,
.oz-mobile-drawer button.oz-submenu-toggle {
	background-color: transparent;
	border: 0;
	color: var(--oz-color-heading);
	font: inherit;
	line-height: 1;
	padding: 0;
}

/* Alleen kleur bij hover/open; de grijze cirkel blijft alleen bij toetsenbordfocus (28-09-2026). */
.oz-site-header button.oz-submenu-toggle:hover,
.oz-mobile-drawer button.oz-submenu-toggle:hover,
.oz-submenu-toggle[aria-expanded="true"] {
	background: transparent;
	color: var(--oz-color-primary);
}

.oz-site-header button.oz-submenu-toggle:focus-visible,
.oz-mobile-drawer button.oz-submenu-toggle:focus-visible {
	background: var(--oz-color-surface);
	color: var(--oz-color-primary);
}

.oz-submenu-toggle svg,
.oz-menu-item__external svg {
	fill: none;
	height: 1rem;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2;
	width: 1rem;
}

.oz-submenu-toggle[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

.oz-submenu {
	background: var(--oz-color-background);
	border: 1px solid var(--oz-color-border);
	box-shadow: 0 16px 40px rgb(22 22 23 / 10%);
	position: absolute;
	top: 100%;
	z-index: 10;
}

.oz-submenu[hidden] {
	display: none;
}

.oz-submenu--dropdown {
	border-radius: var(--oz-radius-medium);
	left: 0;
	min-width: 16rem;
	padding: var(--oz-space-sm);
}

.oz-submenu--mega {
	border-radius: var(--oz-radius-large);
	display: grid;
	gap: clamp(var(--oz-space-lg), 3vw, var(--oz-space-2xl));
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	left: 50%;
	max-height: calc(100vh - 7rem);
	overflow-y: auto;
	padding: clamp(var(--oz-space-lg), 3vw, var(--oz-space-2xl));
	top: calc(100% + var(--oz-space-sm));
	transform: translateX(-50%);
	width: min(calc(100vw - (2 * var(--oz-container-padding))), var(--oz-container-normal));
}

.oz-submenu--mega > .menu-item {
	min-width: 0;
}

.oz-menu-group-label {
	color: var(--oz-color-text-muted);
	display: block;
	font-size: var(--oz-font-size-eyebrow);
	font-weight: var(--oz-font-weight-bold);
	letter-spacing: 0.1em;
	margin-block-end: var(--oz-space-md);
	text-transform: uppercase;
}

.oz-submenu--nested {
	background: transparent;
	border: 0;
	box-shadow: none;
	display: grid;
	gap: var(--oz-space-xs);
	padding: 0;
	position: static;
}

.oz-submenu a {
	align-items: center;
	border-radius: var(--oz-radius-medium);
	color: var(--oz-color-heading);
	display: flex;
	gap: var(--oz-space-sm);
	min-height: 2.75rem;
	padding: 0.625rem var(--oz-space-sm);
}

.oz-submenu a:hover,
.oz-submenu a:focus-visible {
	background: var(--oz-color-surface);
	color: var(--oz-color-primary);
}

.oz-menu-item__copy {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.125rem;
	min-width: 0;
}

.oz-menu-item__label {
	font-weight: var(--oz-font-weight-bold);
}

.oz-menu-item__subtitle {
	color: var(--oz-color-text-muted);
	font-size: var(--oz-font-size-small);
	font-weight: var(--oz-font-weight-regular);
	line-height: 1.35;
	white-space: normal;
}

.oz-menu-item__image {
	border-radius: var(--oz-radius-medium);
	height: 3.25rem;
	object-fit: cover;
	width: 3.25rem;
}

.oz-menu-item__external {
	display: inline-flex;
	margin-inline-start: 0.25rem;
}

.oz-header-cta__menu a,
.oz-drawer-cta__menu a {
	align-items: center;
	background: var(--oz-color-primary);
	border-radius: var(--oz-radius-pill);
	color: var(--oz-color-on-primary);
	display: inline-flex;
	font-size: var(--oz-font-size-small);
	font-weight: var(--oz-font-weight-bold);
	justify-content: center;
	line-height: 1.2;
	min-height: 2.75rem;
	padding: 0.75rem 0.875rem;
	text-align: center;
}

.oz-header-cta__menu a:hover,
.oz-drawer-cta__menu a:hover {
	background: var(--oz-color-primary-hover);
	color: var(--oz-color-on-primary);
}

.oz-drawer-overlay {
	background: rgb(22 22 23 / 48%);
	inset: 0;
	position: fixed;
	z-index: var(--oz-layer-drawer-backdrop);
}

.oz-mobile-drawer {
	background: var(--oz-color-background);
	bottom: 0;
	box-shadow: var(--oz-shadow-elevated);
	display: flex;
	flex-direction: column;
	max-width: calc(100% - var(--oz-space-md));
	position: fixed;
	right: 0;
	top: 0;
	width: 26rem;
	z-index: var(--oz-layer-drawer);
}

body.admin-bar .oz-mobile-drawer {
	top: 46px;
}

.oz-mobile-drawer[hidden],
.oz-drawer-overlay[hidden] {
	display: none;
}

.oz-mobile-drawer__header {
	align-items: center;
	border-bottom: 1px solid var(--oz-color-border);
	display: flex;
	justify-content: space-between;
	min-height: 4.5rem;
	padding: var(--oz-space-sm) var(--oz-space-md);
}

.oz-mobile-drawer__title {
	font-size: var(--oz-font-size-lead);
	font-weight: var(--oz-font-weight-bold);
}

.oz-mobile-drawer__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--oz-space-lg);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--oz-space-md);
}

.oz-search-form--mobile input {
	min-width: 0;
}

.oz-search-form--mobile button {
	align-items: center;
	background: var(--oz-color-primary);
	border: 0;
	border-radius: var(--oz-radius-medium);
	color: var(--oz-color-on-primary);
	display: inline-flex;
	justify-content: center;
	min-width: 3rem;
	padding: 0.5rem;
}

.oz-mobile-menu,
.oz-mobile-menu .sub-menu {
	display: flex;
	flex-direction: column;
	gap: var(--oz-space-2xs);
}

.oz-mobile-menu .oz-submenu {
	background: transparent;
	border: 0;
	box-shadow: none;
	max-height: none;
	overflow: visible;
	position: static;
	transform: none;
	width: auto;
}

.oz-mobile-menu .oz-submenu[hidden] {
	display: none;
}

.oz-mobile-menu > .menu-item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
}

.oz-mobile-menu .menu-item > a,
.oz-mobile-menu .oz-menu-group-label {
	align-items: center;
	border-radius: var(--oz-radius-medium);
	color: var(--oz-color-heading);
	display: flex;
	font-weight: var(--oz-font-weight-bold);
	min-height: 2.75rem;
	padding: var(--oz-space-xs) var(--oz-space-sm);
}

.oz-mobile-menu .oz-submenu-toggle {
	margin: 0;
}

.oz-mobile-menu > .menu-item > .sub-menu {
	grid-column: 1 / -1;
	padding: var(--oz-space-xs) 0 var(--oz-space-md) var(--oz-space-md);
}

.oz-mobile-menu .oz-submenu--nested {
	border: 0;
	box-shadow: none;
	padding-inline-start: var(--oz-space-sm);
}

.oz-mobile-menu .oz-menu-group-label {
	color: var(--oz-color-text-muted);
	font-size: var(--oz-font-size-small);
	letter-spacing: 0.04em;
	margin: 0;
	min-height: auto;
	padding-block-end: var(--oz-space-2xs);
	text-transform: uppercase;
}



.oz-mobile-utility {
	align-items: center;
	color: var(--oz-color-heading);
	display: flex;
	font-weight: var(--oz-font-weight-bold);
	gap: var(--oz-space-sm);
	min-height: 2.75rem;
	text-decoration: none;
}

.oz-drawer-cta {
	margin-block-start: auto;
}

.oz-drawer-cta__menu a {
	width: 100%;
}

@media (prefers-reduced-motion: no-preference) {
	.oz-submenu-toggle svg {
		transition: transform 160ms ease;
	}
}

@media (min-width: 48.875rem) {
	body.admin-bar .oz-mobile-drawer {
		top: 32px;
	}
}

@media (min-width: 64rem) {
	.oz-primary-menu > .menu-item:has(> .oz-submenu-toggle[aria-expanded="true"]) > a {
		color: var(--oz-color-primary);
	}

	.oz-submenu--mega:has(> .menu-item:nth-child(2):last-child) {
		grid-template-columns: minmax(14rem, 1fr) minmax(0, 2fr);
	}

	.oz-submenu--mega .oz-submenu--nested:has(> .oz-menu-item--media) {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
	}

	.oz-submenu--mega .oz-menu-item--media > a {
		align-items: start;
		background: var(--oz-color-surface);
		border: 1px solid transparent;
		display: grid;
		gap: var(--oz-space-sm);
		grid-template-columns: auto minmax(0, 1fr) auto;
		min-height: 100%;
		padding: var(--oz-space-sm);
	}

	.oz-submenu--mega .oz-menu-item--media > a:not(:has(.oz-menu-item__image)) {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.oz-submenu--mega .oz-menu-item--media > a::after {
		align-self: center;
		color: var(--oz-color-primary);
		content: "→";
		font-size: 1.125rem;
		line-height: 1;
	}

	.oz-submenu--mega .oz-menu-item--media > a:hover,
	.oz-submenu--mega .oz-menu-item--media > a:focus-visible {
		background: var(--oz-color-background);
		border-color: var(--oz-color-primary);
	}

	.oz-submenu--mega .oz-menu-item__image {
		height: 3rem;
		width: 3rem;
	}

	.oz-mobile-drawer,
	.oz-drawer-overlay {
		display: none;
	}
}

@media (min-width: 80rem) {
	.oz-primary-menu > .menu-item > a {
		font-size: var(--oz-font-size-body);
		padding-inline: var(--oz-space-sm);
	}

	.oz-header-cta__menu a {
		font-size: var(--oz-font-size-body);
		padding-inline: var(--oz-space-lg);
	}
}

/* Education uses a stacked editorial column and a wide level-card column. */
@media (min-width:64rem) {
 .oz-primary-menu > .menu-item:has(> .oz-submenu-toggle) > a { padding-inline-end:6px; }
 .oz-primary-menu > .menu-item > .oz-submenu-toggle { justify-content:flex-start; margin-inline-start:0; }
 .oz-menu-education > .oz-submenu--mega { grid-template-columns:minmax(14rem,1fr) minmax(0,2fr); grid-template-rows:auto auto; }
 .oz-menu-education > .oz-submenu--mega > .oz-menu-start { grid-column:1; grid-row:1; }
 .oz-menu-education > .oz-submenu--mega > .oz-menu-themes { grid-column:1; grid-row:2; }
 .oz-menu-education > .oz-submenu--mega > .oz-menu-levels { grid-column:2; grid-row:1 / span 2; }
 .oz-menu-levels > .oz-submenu--nested { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* Item-level presentation; neither flag propagates to submenu descendants. */
.oz-menu-tip {
 --oz-tip-background: var(--oz-color-primary);
 --oz-tip-color: var(--oz-color-on-primary);
 display: inline-block;
 vertical-align: middle;
 margin-inline-start: .45em;
 padding: .2em .5em;
 border-radius: var(--oz-radius-pill);
 background: var(--oz-tip-background);
 color: var(--oz-tip-color);
 font-size: .6875rem;
 font-weight: var(--oz-font-weight-bold);
 line-height: 1.3;
 letter-spacing: .025em;
 white-space: nowrap;
}
.oz-menu .oz-menu-item--featured > :is(a, .oz-menu-group-label) {
 background: var(--oz-color-primary);
 color: var(--oz-color-on-primary);
 border-radius: var(--oz-radius-medium);
}
.oz-menu .oz-menu-item--featured > a :is(.oz-menu-item__subtitle, .oz-menu-item__external),
.oz-menu .oz-menu-item--featured > a::after { color: inherit; }
.oz-menu .oz-menu-item--featured > :is(a, .oz-menu-group-label) .oz-menu-tip {
 --oz-tip-background: var(--oz-color-on-primary);
 --oz-tip-color: var(--oz-color-primary);
}
.oz-menu .oz-menu-item--featured > a:is(:hover, :focus-visible) {
 background: var(--oz-color-primary-hover);
 color: var(--oz-color-on-primary);
}
.oz-menu .oz-menu-item--featured:is(.current-menu-item, .current-menu-parent, .current-menu-ancestor) > a .oz-menu-item__label {
 text-decoration: underline;
 text-underline-offset: .2em;
}
.oz-menu .oz-menu-item--featured > a:focus-visible {
 outline: 3px solid var(--oz-color-focus);
 outline-offset: 3px;
}
.oz-menu .oz-menu-item--has-tip > a .oz-menu-item__label { white-space: normal; overflow-wrap: anywhere; }
.oz-primary-menu > .menu-item > a { height: auto; min-height: 44px; }
.oz-primary-menu > .menu-item { min-width: 0; }
.oz-primary-menu { flex-wrap: wrap; align-content: center; }
.oz-mobile-menu .oz-menu-item--featured > a { background: var(--oz-color-primary); }
.oz-mobile-menu .oz-menu-item__image { flex-shrink: 0; }
.oz-mobile-menu .oz-menu-item--media > a { gap: var(--oz-space-xs); }
/* Expanded parents keep the same featured contrast as resting links. */
.oz-primary-menu > .oz-menu-item--featured:has(> .oz-submenu-toggle[aria-expanded="true"]) > a {
 color: var(--oz-color-on-primary);
}
.oz-menu .oz-menu-item__label { white-space: normal; overflow-wrap: anywhere; }
.oz-primary-menu > .menu-item > a { min-width: 0; }
.oz-primary-menu > .menu-item > .oz-submenu-toggle { display:inline-flex; flex:0 0 44px; width:44px; min-width:44px; max-width:44px; }
.oz-mobile-menu .oz-menu-item--media:not(.oz-menu-item--featured) > a { background: var(--oz-color-surface); }
/* Keep badges on the trailing edge, independent of label length. */
.oz-menu .oz-menu-item--has-tip > a .oz-menu-item__label,
.oz-menu .oz-menu-item--has-tip > .oz-menu-group-label {
 display: flex; align-items: center; gap: .75rem; width: 100%; min-width: 0;
}
.oz-menu-item__text { min-width: 0; }
.oz-menu .oz-menu-tip { flex: 0 0 auto; margin-inline-start: auto; }

/* Account uses the same dropdown and mobile disclosure primitives as Support. */
.oz-account-nav { display:none; }
.oz-account-menu, .oz-mobile-account-menu { list-style:none; padding:0; margin:0; }
.oz-account-menu > .menu-item { position:relative; }
.oz-account-menu .oz-submenu { left:var(--oz-account-dropdown-left,0px); right:auto; max-width:calc(100vw - 2rem); max-height:calc(100dvh - var(--oz-header-height,6rem) - 2rem); overflow-y:auto; list-style:none; margin:0; }
.oz-site-header .oz-header-action--account.oz-submenu-toggle { margin:0; padding:0; }
.oz-header-action--account.oz-submenu-toggle svg { transform:none; width:1.375rem; height:1.375rem; stroke-width:1.8; }
.oz-mobile-account-menu { margin-top:var(--oz-space-md); border-top:1px solid var(--oz-color-border); padding-top:var(--oz-space-sm); }
@media(min-width:64rem) { .oz-account-nav { display:block; } }

@media(min-width:64rem) {
 .oz-site-header .oz-submenu--dropdown { top:calc(var(--oz-dropdown-anchor,100%) + var(--oz-space-sm)); }
}

/* Keep desktop menu labels intrinsic; receipt/account content must not squeeze words. */
@media (min-width:64rem) {
 .oz-site-header .oz-primary-menu > .menu-item { flex-shrink:0; }
 .oz-site-header .oz-primary-menu > .menu-item > a {
  flex-shrink:0; min-width:max-content; white-space:nowrap; overflow-wrap:normal; word-break:normal;
 }
}

/* Compacte stappen als de menulabels niet op één regel passen (klassen op <html>, gezet door navigation.js). */
@media (min-width:64rem) {
 :is(.oz-nav-fit-1, .oz-nav-fit-2) .oz-site-header .oz-primary-menu > .menu-item > a { padding-inline:var(--oz-space-2xs); }
 :is(.oz-nav-fit-1, .oz-nav-fit-2) .oz-site-header .oz-primary-menu > .menu-item:has(> .oz-submenu-toggle) > a { padding-inline-end:2px; }
 .oz-nav-fit-2 .oz-site-header .oz-primary-menu > .menu-item > a { font-size:var(--oz-font-size-small); }
 .oz-nav-fit-2 .oz-site-header .oz-primary-menu > .menu-item > .oz-submenu-toggle { flex-basis:28px; width:28px; min-width:28px; max-width:28px; }
 .oz-nav-fit-2 .oz-site-header .oz-header__inner { gap:var(--oz-space-xs); }
 .oz-nav-measuring .oz-site-header :is(.oz-primary-menu, .oz-primary-menu *) { transition:none !important; }
 .oz-nav-fit-3 .oz-site-header :is(.oz-primary-nav, .oz-header-cta) { display:none; }
 .oz-nav-fit-3 .oz-site-header .oz-menu-toggle { display:inline-flex; }
 .oz-nav-fit-3 .oz-mobile-drawer:not([hidden]) { display:flex; }
 .oz-nav-fit-3 .oz-drawer-overlay:not([hidden]) { display:block; }
}