/* ==========================================================================
   Essence Acupunctuur — mobiel menu
   --------------------------------------------------------------------------
   Vervangt het paneel van de plugin Responsive Menu.

   WAT ER MIS WAS
   1. Drie niveaus diep, met "Vrouwengezondheid" en "Algemene Gezondheid" als
      tussenlaag die zelf geen pagina is (url = #). Drie tikken naar
      Zwangerschap, en twee rijen waarop tikken niets deed.
   2. Alleen het driehoekje rechts vouwde uit — een doel van ~24px.
   3. Rijen van ~70px: er pasten vier items op een scherm.
   4. Blauwe scheidingslijntjes uit het oude kleurschema.

   HOE HET NU WERKT
   Een linnen kaart die niet tot de rand loopt, zodat je ziet dat er een
   pagina onder ligt. Bruin is accent, geen ondergrond: de meridiaan, de
   punten, de zandkleurige uitklapvlakken en één massieve knop onderaan.
   De categorieën zijn kopjes geworden in plaats van rijen — twee tikken naar
   elke klacht. De hele rij is de schakelaar.

   HET MOTIEF
   Eén haarlijn van boven naar beneden met een punt bij elk hoofditem: een
   meridiaan. Uitgeklapte secties hangen als zandkleurige kaartjes rechts van
   die lijn, met ronde miniaturen uit de pagina's zelf.

   Palet: linnen #f5f1ea · zand #e7e1d6 · donker #382c24 · inkt #241b14
   ========================================================================== */

/* Safari op iOS legt bij het aantikken een eigen gekleurde laag over het
   aangeraakte element. Die zie je niet terug in getComputedStyle, vandaar dat
   hij bleef terugkomen terwijl de achtergrond doorzichtig was. Hier voor het
   hele paneel uitgezet. */
.ess-menu,
.ess-menu *,
.ess-menu-trigger {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
	-webkit-touch-callout: none;
}

.ess-menu,
.ess-menu-trigger {
	--ess-m-linnen: #f5f1ea;
	--ess-m-zand: #e7e1d6;
	--ess-m-donker: #382c24;
	--ess-m-inkt: #241b14;
	--ess-m-op-donker: #f0eae2;
	--ess-m-zacht: #6f6355;
	--ess-m-flauw: rgba(56, 44, 36, .48);
	--ess-m-lijn: rgba(56, 44, 36, .14);
	--ess-m-spoed: cubic-bezier(.22, .61, .36, 1);
	--ess-m-serif: 'Playfair Display', Georgia, serif;
	--ess-m-sans: 'Helvetica Now Display', 'Helvetica Neue', Arial, sans-serif;
}

/* --- De hamburger ------------------------------------------------------- */

/* Blijft donker: hij ligt vaak over een foto. */
.ess-menu-trigger {
	position: fixed;
	top: 14px;
	right: 14px;
	z-index: 99991;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 0;
	border-radius: 15px;
	box-shadow: 0 6px 18px rgba(26, 19, 14, .22);
	background: rgba(56, 44, 36, .92);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	cursor: pointer;
	transition: opacity .2s ease, transform .2s ease;
}

.ess-menu-trigger span {
	display: block;
	width: 20px;
	height: 2px;
	border-radius: 2px;
	background: var(--ess-m-op-donker);
}

.ess-menu-trigger:hover { transform: translateY(-1px); }

.ess-menu-trigger[aria-expanded="true"] {
	opacity: 0;
	pointer-events: none;
}

@media (min-width: 1025px) {
	.ess-menu-trigger,
	.ess-menu { display: none; }
}

/* Restanten van de oude plugin: haar markup blijft in de voettekst staan
   zolang de plugin actief is, maar zonder stijlblad zou die zichtbaar worden. */
.rmp-container,
.rmp_menu_trigger,
.rmp-menu-trigger-boring { display: none !important; }

/* --- De kaart ---------------------------------------------------------- */

.ess-menu {
	position: fixed;
	inset: 0;
	z-index: 99990;
	visibility: hidden;
	transition: visibility 0s linear .36s;
}

.ess-menu.is-open {
	visibility: visible;
	transition-delay: 0s;
}

.ess-menu__sluier {
	position: absolute;
	inset: 0;
	background: rgba(26, 19, 14, .42);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	opacity: 0;
	transition: opacity .32s ease;
}

.ess-menu.is-open .ess-menu__sluier { opacity: 1; }

.ess-menu__paneel {
	position: absolute;
	top: 10px;
	right: 10px;
	bottom: 10px;
	display: flex;
	flex-direction: column;
	width: calc(100% - 44px);
	max-width: 372px;
	border-radius: 22px;
	overflow: hidden;
	background: var(--ess-m-linnen);
	box-shadow: -18px 0 52px rgba(26, 19, 14, .30);
	transform: translateX(calc(100% + 14px));
	transition: transform .36s var(--ess-m-spoed);
}

.ess-menu.is-open .ess-menu__paneel { transform: none; }

/* --- Kop -------------------------------------------------------------- */

/* Het merk staat gecentreerd, net als in de kop van de site zelf; links
   uitgelijnd lijnde het nergens mee uit. De sluitknop ligt er absoluut over,
   zodat hij de centrering niet verschuift. */
.ess-menu__kop {
	position: relative;
	flex: 0 0 auto;
	padding: 17px 64px 13px;
	text-align: center;
}

.ess-menu__merk {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

/* Zelfde opbouw als de kop van de site: naam, haarlijn, ondertitel. */
.ess-menu__merk b {
	font-family: var(--ess-m-serif);
	font-size: 24px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: .30em;
	text-indent: .30em;
	text-transform: uppercase;
	color: var(--ess-m-inkt);
}

.ess-menu__merk s {
	display: block;
	align-self: stretch;
	height: 1px;
	background: rgba(56, 44, 36, .30);
	text-decoration: none;
}

.ess-menu__merk i {
	font-family: var(--ess-m-sans);
	font-size: 9.5px;
	font-style: normal;
	font-weight: 400;
	line-height: 1;
	letter-spacing: .34em;
	text-indent: .34em;
	text-transform: uppercase;
	color: rgba(56, 44, 36, .58);
}

.ess-menu__sluit {
	position: absolute;
	top: 12px;
	right: 14px;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	box-shadow: none;
	background: rgba(56, 44, 36, .07);
	cursor: pointer;
	transition: background-color .2s ease;
}

.ess-menu__sluit::before,
.ess-menu__sluit::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 15px;
	height: 1.6px;
	border-radius: 2px;
	background: var(--ess-m-donker);
}

.ess-menu__sluit::before { transform: translate(-50%, -50%) rotate(45deg); }
.ess-menu__sluit::after { transform: translate(-50%, -50%) rotate(-45deg); }
.ess-menu__sluit:hover { background: rgba(56, 44, 36, .14); }

/* --- Lijst ------------------------------------------------------------ */

.ess-menu__lijst {
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: 0 0 8px;
}

.ess-menu__niveau1 {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* De meridiaan. Op de <ul>, want alleen die is zo hoog als haar inhoud. */
.ess-menu__niveau1::before {
	content: "";
	position: absolute;
	left: 30px;
	top: 14px;
	bottom: 14px;
	width: 1px;
	background: var(--ess-m-lijn);
}

.ess-menu__niveau1 > li {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* --- Hoofditems ------------------------------------------------------- */

.ess-menu__link {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	min-height: 50px;
	margin: 0;
	padding: 9px 18px 9px 52px;
	border: 0;
	/* Astra geeft elke button een lichte schaduw; die las als een streepje
	   onder Klachten en Behandelingen. */
	box-shadow: none;
	background: transparent;
	text-align: left;
	text-decoration: none;
	color: var(--ess-m-inkt);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: color .18s ease;
}

/* Fonts Plugin Pro zet `button, input, select, textarea` met !important op de
   schreefloze. De twee uitklapbare items zijn <button>, dus zonder deze regel
   staan Klachten en Behandelingen in een ander font dan de rest. */
.ess-menu__link,
.ess-menu__link > span:not(.ess-menu__chevron) {
	font-family: var(--ess-m-serif) !important;
	font-size: 20px !important;
	font-weight: 500 !important;
	line-height: 1.15 !important;
	/* Playfair staat op deze grootte van zichzelf wat ruim. */
	letter-spacing: -.006em !important;
	text-transform: none !important;
}

.ess-menu__link:hover,
.ess-menu__link:active { color: var(--ess-m-donker); }

/* Punt op de meridiaan */
.ess-menu__link::before {
	content: "";
	position: absolute;
	left: 30px;
	top: 50%;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ess-m-donker);
	opacity: .32;
	transform: translate(-50%, -50%);
	transition: opacity .22s ease, box-shadow .3s ease;
}

.ess-menu__link:hover::before { opacity: .6; }
.ess-menu__rij.is-open > .ess-menu__link::before { opacity: 1; }

/* Chevron: één gedraaid vierkantje met twee randen, geen extra markup. */
.ess-menu__chevron {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	margin-right: 8px;
	border-right: 1.5px solid rgba(56, 44, 36, .45);
	border-bottom: 1.5px solid rgba(56, 44, 36, .45);
	transform: translateY(-3px) rotate(45deg);
	transition: transform .32s var(--ess-m-spoed), border-color .2s ease;
}

.ess-menu__rij.is-open > .ess-menu__link .ess-menu__chevron {
	border-color: rgba(56, 44, 36, .75);
	transform: translateY(1px) rotate(225deg);
}

/* --- Uitklapbaar deel ------------------------------------------------- */

.ess-menu__sub {
	height: 0;
	overflow: hidden;
	transition: height .32s var(--ess-m-spoed);
}

/* Geen kleurvlak: de miniaturen geven al genoeg structuur, en een vulling
   werd een vlek. De sectie hangt aan de meridiaan met een dunne aftakking. */
.ess-menu__subinner {
	position: relative;
	margin: 0 14px 10px 44px;
	padding: 2px 0 8px;
}

.ess-menu__niveau2,
.ess-menu__niveau3 {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ess-menu__niveau2 > li,
.ess-menu__niveau3 > li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ess-menu__sublink {
	display: flex;
	align-items: center;
	gap: 13px;
	min-height: 46px;
	padding: 4px 14px 4px 16px;
	font-family: var(--ess-m-sans);
	font-size: 15.5px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: normal;
	text-decoration: none;
	text-transform: none;
	color: #4a4038;
	-webkit-tap-highlight-color: transparent;
	transition: color .18s ease;
}

.ess-menu__sublink:hover,
.ess-menu__sublink:active { color: var(--ess-m-inkt); }

/* Rond miniatuur uit de pagina zelf. Dekkend voor alle onderliggende
   pagina's, dus geen gaten in het ritme. */
.ess-menu__mini {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background-color: rgba(56, 44, 36, .10);
	background-position: center;
	background-size: cover;
	box-shadow: 0 3px 9px rgba(26, 19, 14, .16);
	transition: transform .22s var(--ess-m-spoed), box-shadow .22s ease;
}

.ess-menu__sublink:hover .ess-menu__mini {
	transform: scale(1.06);
	box-shadow: 0 5px 14px rgba(26, 19, 14, .22);
}

/* --- Groepskopjes ----------------------------------------------------- */

/* "Vrouwengezondheid" en "Algemene Gezondheid" waren rijen naar #. Als kopje
   zijn ze niet aan te tikken en dus ook niet verwarrend. */
.ess-menu__label {
	margin: 11px 0 3px;
	padding: 0 14px 0 18px;
	font-family: var(--ess-m-sans);
	font-size: 10px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--ess-m-flauw);
}

/* --- Huidige pagina --------------------------------------------------- */

.ess-menu__link[aria-current="page"] { color: var(--ess-m-inkt); }

.ess-menu__link[aria-current="page"]::before {
	opacity: 1;
	box-shadow: 0 0 0 4px rgba(56, 44, 36, .13);
}

/* Licht accent achter de pagina waar je bent, en achter de sectie die open
   staat. Als ::after met z-index -1, want een marge op de rij zelf zou de punt
   van de meridiaan meeschuiven. */
.ess-menu__link[aria-current="page"]::after,
.ess-menu__sublink[aria-current="page"]::after,
.ess-menu__rij.is-open > .ess-menu__link::after {
	content: "";
	position: absolute;
	inset: 3px 10px;
	z-index: -1;
	border-radius: 12px;
	background: rgba(56, 44, 36, .055);
}

.ess-menu__sublink {
	position: relative;
}

.ess-menu__sublink[aria-current="page"] {
	font-weight: 500;
	color: var(--ess-m-inkt);
}

.ess-menu__sublink[aria-current="page"] .ess-menu__mini {
	box-shadow: 0 0 0 2px var(--ess-m-donker), 0 3px 9px rgba(26, 19, 14, .18);
}

/* --- Voet ------------------------------------------------------------- */

/* Licht als de kaart; de knop is het ene massieve bruine element. */
.ess-menu__voet {
	flex: 0 0 auto;
	padding: 12px 20px max(14px, env(safe-area-inset-bottom));
	border-top: 1px solid var(--ess-m-lijn);
	background: var(--ess-m-linnen);
	position: relative;
}

/* Zachte fade in plaats van een schaduw: die las als een vage veeg. Laat zien
   dat de lijst onder de voet doorloopt. */
.ess-menu__voet::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: 28px;
	background: linear-gradient(to top, var(--ess-m-linnen), rgba(245, 241, 234, 0));
	pointer-events: none;
}

.ess-menu__voettekst {
	margin: 0 0 9px;
	font-family: var(--ess-m-sans);
	font-size: 12.5px;
	text-align: center;
	font-weight: 400;
	line-height: 1.45;
	letter-spacing: normal;
	text-transform: none;
	color: var(--ess-m-zacht);
}

.ess-menu__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 22px;
	border-radius: 999px;
	background: var(--ess-m-donker);
	font-family: var(--ess-m-sans);
	font-size: 15.5px;
	font-weight: 500;
	letter-spacing: .01em;
	text-decoration: none;
	color: var(--ess-m-op-donker);
	transition: background-color .2s ease, transform .2s ease;
}

.ess-menu__cta:hover {
	background: var(--ess-m-inkt);
	transform: translateY(-1px);
	color: var(--ess-m-op-donker);
}

/* --- Toetsenbord ------------------------------------------------------ */

/* Astra zet een achtergrond op zowel `button:focus` als `button:hover`
   (--ast-global-color-1). Op iOS blijft :hover ná het aantikken hangen tot je
   ergens anders tikt, en dáárom bleef die bruine tint achter Klachten en
   Behandelingen staan — in een test met een tik is er geen :hover, dus daar
   was hij niet te zien. Alle drie de toestanden dus neutraliseren.
   Ook `-webkit-appearance: button` eraf: anders legt iOS er nog eigen
   knopstyling over. */
.ess-menu__link,
.ess-menu__sluit,
.ess-menu-trigger {
	-webkit-appearance: none;
	appearance: none;
}

.ess-menu__link:hover,
.ess-menu__link:focus,
.ess-menu__link:active,
.ess-menu__link:focus-visible {
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	color: var(--ess-m-inkt) !important;
}

.ess-menu__sluit:hover,
.ess-menu__sluit:focus,
.ess-menu__sluit:active {
	background-color: rgba(56, 44, 36, .12) !important;
	background-image: none !important;
	box-shadow: none !important;
}

.ess-menu-trigger:hover,
.ess-menu-trigger:focus,
.ess-menu-trigger:active {
	background-color: rgba(56, 44, 36, .92) !important;
	background-image: none !important;
}

.ess-menu__link:focus:not(:focus-visible) { outline: none; }

.ess-menu__link:focus-visible,
.ess-menu__sublink:focus-visible,
.ess-menu__sluit:focus-visible,
.ess-menu__cta:focus-visible,
.ess-menu-trigger:focus-visible {
	outline: 2px solid var(--ess-m-donker);
	outline-offset: -3px;
	border-radius: 6px;
}

.ess-menu-trigger:focus-visible { outline-color: var(--ess-m-linnen); }

/* --- Openingsbeweging ------------------------------------------------- */

/* Eén moment: de items komen van boven naar beneden binnen, als een puls die
   over de meridiaan loopt. Daarna staat alles stil. */
.ess-menu__niveau1 > li {
	opacity: 0;
	transform: translateX(10px);
}

.ess-menu.is-open .ess-menu__niveau1 > li {
	animation: ess-menu-in .4s var(--ess-m-spoed) forwards;
	animation-delay: calc(var(--i, 0) * 26ms + 110ms);
}

@keyframes ess-menu-in {
	to {
		opacity: 1;
		transform: none;
	}
}

.ess-menu__kop,
.ess-menu__voet {
	opacity: 0;
	transition: opacity .3s ease .26s;
}

.ess-menu.is-open .ess-menu__kop,
.ess-menu.is-open .ess-menu__voet { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	.ess-menu,
	.ess-menu__sluier,
	.ess-menu__paneel,
	.ess-menu__sub,
	.ess-menu__chevron,
	.ess-menu__mini,
	.ess-menu__kop,
	.ess-menu__voet,
	.ess-menu-trigger { transition-duration: 1ms; }

	.ess-menu__niveau1 > li {
		opacity: 1;
		transform: none;
		animation: none;
	}

	.ess-menu.is-open .ess-menu__niveau1 > li { animation: none; }
}