/* Haags.nl — scaling hamburger navigation (geport van sjaakbralide, zelfde look).
 * Thema via data-nav-theme: de knop/het paneel krijgen steeds de
 * tegenovergestelde kleur van de sectie eronder (JS zet on-green/on-yellow).
 *
 * Zelfstandig: de --sb-* kleur-/font-tokens worden hier op .sb-nav zelf gezet
 * (hardcoded hex, net als CartButton.css), zodat de nav site-breed werkt zonder
 * afhankelijk te zijn van een globaal geladen stylesheet met die variabelen. */
.sb-nav {
	position: fixed;
	inset: 0;
	z-index: 500;
	pointer-events: none;
	--sb-green-dark: #1E7A54;
	--sb-yellow: #F7E87D;
	--sb-yellow-ochre: #E6C044;
	--sb-white: #FFFFFF;
	--sb-font: "Antonio", system-ui, sans-serif;
	font-family: var(--sb-font);
	/* Sectie eronder is groen → geel oppervlak met groene inkt. */
	--nav-surface: var(--sb-yellow-ochre);
	--nav-ink: var(--sb-green-dark);
}

/* Sectie eronder is geel/licht → groen oppervlak met gele inkt. */
.sb-nav[data-nav-theme="on-yellow"] {
	--nav-surface: var(--sb-green-dark);
	--nav-ink: var(--sb-yellow);
}

.sb-nav__dark-bg {
	position: absolute;
	inset: 0;
	background-color: #000;
	opacity: 0;
	visibility: hidden;
	pointer-events: auto;
	transition: all .7s cubic-bezier(.5, .5, 0, 1);
}

.sb-nav[data-navigation-status="active"] .sb-nav__dark-bg {
	opacity: .33;
	visibility: visible;
}

.sb-nav__burger {
	position: absolute;
	/* Evenveel ruimte boven als rechts; de WP-adminbar (ingelogd) telt niet mee
	 * als ruimte, dus die hoogte wordt bij de top-afstand opgeteld. */
	top: calc(2em + var(--wp-admin--admin-bar--height, 0px));
	right: 2em;
	border-radius: 1.5em;
	@media (max-width: 767px) {
		top: calc(1.25em + var(--wp-admin--admin-bar--height, 0px));
		right: 1.25em;
	}
}

/* Rondje dat open-schaalt naar het menupaneel. */
.sb-nav__bg {
	position: absolute;
	top: 0;
	right: 0;
	width: 3.5em;
	height: 3.5em;
	border-radius: 1.75em;
	background-color: var(--nav-surface);
	transition: all .7s cubic-bezier(.5, .5, 0, 1);
}

.sb-nav[data-navigation-status="active"] .sb-nav__bg {
	width: 100%;
	height: 100%;
}

.sb-nav__group {
	position: relative;
	display: flex;
	flex-flow: column;
	gap: 1em;
	padding: 2.25em 2.5em 2em 2em;
	pointer-events: auto;
	transform-origin: 100% 0;
	transform: scale(.15) rotate(.001deg);
	opacity: 0;
	visibility: hidden;
	transition: all .5s cubic-bezier(.5, .5, 0, 1), transform .7s cubic-bezier(.5, .5, 0, 1);
}

.sb-nav[data-navigation-status="active"] .sb-nav__group {
	transform: scale(1) rotate(.001deg);
	opacity: 1;
	visibility: visible;
}

.sb-nav__menu-label {
	margin: 0;
	font-size: 1em;
	font-weight: 400;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--nav-ink);
	opacity: .5;
	transition: color .7s cubic-bezier(.5, .5, 0, 1);
}

.sb-nav__list {
	display: flex;
	flex-flow: column;
	gap: .375em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sb-nav__item {
	margin: 0;
	padding: 0;
}

/* Submenu: de shop-categorieën ingesprongen onder "Shop", met een lijntje links
 * zodat zichtbaar is dat ze onder dat hoofd-item vallen. */
.sb-nav__sublist {
	display: flex;
	flex-flow: column;
	gap: .05em;
	margin: .25em 0 .15em;
	padding: 0 0 0 .9em;
	list-style: none;
	border-left: 2px solid color-mix(in srgb, var(--nav-ink) 35%, transparent);
}

.sb-nav__subitem {
	margin: 0;
	padding: 0;
}

.sb-nav__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: var(--nav-ink);
	text-decoration: none;
	transition: color .7s cubic-bezier(.5, .5, 0, 1);
}

/* Hover: item wordt wit. */
.sb-nav__link:hover {
	color: var(--sb-white);
}

.sb-nav__link-text {
	margin: 0;
	padding-right: 1.25em;
	font-size: 2em;
	font-weight: 700;
	line-height: 1.15;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Submenu-links: kleiner dan de hoofd-items (visuele hiërarchie). */
.sb-nav__link-text--sub {
	font-size: 1.2em;
	font-weight: 600;
}

/* Actieve/geselecteerde pagina: wit (i.p.v. gedimd). */
.sb-nav__link[aria-current] .sb-nav__link-text {
	color: var(--sb-white);
	opacity: 1;
}

/* Actieve-pagina indicator */
.sb-nav__dot {
	flex-shrink: 0;
	width: .5em;
	height: .5em;
	border-radius: 50%;
	background-color: currentColor;
	transform: scale(0) rotate(.001deg);
	opacity: .5;
	transition: all .7s cubic-bezier(.5, .5, 0, 1);
}

.sb-nav__link[aria-current] .sb-nav__dot {
	transform: scale(1) rotate(.001deg);
	opacity: 1;
}

.sb-nav__burger:has(.sb-nav__link:hover) .sb-nav__dot {
	transform: scale(0) rotate(.001deg);
}

.sb-nav__burger .sb-nav__link:hover .sb-nav__dot {
	transform: scale(1) rotate(.001deg);
	opacity: .25;
}

/* Hamburger-knop */
.sb-nav__toggle {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.5em;
	height: 3.5em;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: none;
	cursor: pointer;
	pointer-events: auto;
	transform: translate(0em, 0em) rotate(.001deg);
	transition: transform .7s cubic-bezier(.5, .5, 0, 1);
}

.sb-nav[data-navigation-status="active"] .sb-nav__toggle {
	transform: translate(-1em, 1em) rotate(.001deg);
}

.sb-nav__toggle-bar {
	position: absolute;
	width: 40%;
	height: .125em;
	background-color: var(--nav-ink);
	transform: translateY(-.15em) rotate(.001deg);
	transition: transform .7s cubic-bezier(.5, .5, 0, 1), background-color .7s cubic-bezier(.5, .5, 0, 1);
}

.sb-nav__toggle:hover .sb-nav__toggle-bar {
	transform: translateY(.15em) rotate(.001deg);
}

.sb-nav[data-navigation-status="active"] .sb-nav__toggle .sb-nav__toggle-bar {
	transform: translateY(0em) rotate(45deg);
}

.sb-nav__toggle .sb-nav__toggle-bar:nth-child(2) {
	transform: translateY(.15em) rotate(.001deg);
}

.sb-nav__toggle:hover .sb-nav__toggle-bar:nth-child(2) {
	transform: translateY(-.15em) rotate(.001deg);
}

.sb-nav[data-navigation-status="active"] .sb-nav__toggle .sb-nav__toggle-bar:nth-child(2) {
	transform: translateY(0em) rotate(-45deg);
}