/**
 * SFX Drilldown-Menü
 *
 * Each value resolves as:  --sfx-dd-X: var(--sfx-dd-X--set, <framework, literal>)
 *
 * The `--set` slot is the single override point, effective at every level and
 * independent of source order / specificity:
 *   1. Global/contextual — :root { --sfx-dd-bg--set: … } or
 *      .header--dark .dd { --sfx-dd-bg--set: … } in your own CSS.
 *      (No admin page emits this anymore — styling is done on the element.)
 *   2. Per element — the Bricks controls write --sfx-dd-bg directly on
 *      %root%, which beats the slot for that one element.
 * Leave the slot unset to inherit the Core Framework token (or the literal).
 */

.dd {
	/* Surface — defaults aligned to the original hand-built version. */
	--sfx-dd-bg: var(--sfx-dd-bg--set, var(--neutral-ultra-light, #fff));
	--sfx-dd-color: var(--sfx-dd-color--set, inherit);
	--sfx-dd-transition-duration: var(--sfx-dd-transition-duration--set, .3s);
	--sfx-dd-transition-easing: var(--sfx-dd-transition-easing--set, ease);
	--sfx-dd-hover-transition-duration: var(--sfx-dd-hover-transition-duration--set, .15s);

	/* Items / links */
	--sfx-dd-link-color: var(--sfx-dd-link-color--set, inherit);
	--sfx-dd-link-color-hover: var(--sfx-dd-link-color-hover--set, var(--accent, #e11d48));
	--sfx-dd-link-color-current: var(--sfx-dd-link-color-current--set, var(--accent, #e11d48));
	--sfx-dd-link-bg-hover: var(--sfx-dd-link-bg-hover--set, transparent);
	--sfx-dd-font-family: var(--sfx-dd-font-family--set, inherit);
	--sfx-dd-font-size: var(--sfx-dd-font-size--set, inherit);
	--sfx-dd-font-weight: var(--sfx-dd-font-weight--set, inherit);
	--sfx-dd-letter-spacing: var(--sfx-dd-letter-spacing--set, normal);
	--sfx-dd-text-transform: var(--sfx-dd-text-transform--set, none);
	--sfx-dd-line-height: var(--sfx-dd-line-height--set, 1.3);
	--sfx-dd-item-gap: var(--sfx-dd-item-gap--set, var(--space-s, .75rem));
	--sfx-dd-pad-item-block: var(--sfx-dd-pad-item-block--set, var(--space-xs, .25rem));
	--sfx-dd-pad-item-inline: var(--sfx-dd-pad-item-inline--set, var(--space-l, 1.25rem));
	--sfx-dd-pad-label-block: var(--sfx-dd-pad-label-block--set, 0);
	--sfx-dd-pad-label-inline: var(--sfx-dd-pad-label-inline--set, 0);
	--sfx-dd-item-border-width: var(--sfx-dd-item-border-width--set, 1px);
	--sfx-dd-item-border-color: var(--sfx-dd-item-border-color--set, var(--neutral-light, #e5e5e5));

	/* Main menu (top level) & submenu (nested) — default to the base tokens. */
	--sfx-dd-main-color: var(--sfx-dd-main-color--set, var(--sfx-dd-link-color));
	--sfx-dd-main-font-size: var(--sfx-dd-main-font-size--set, var(--sfx-dd-font-size));
	--sfx-dd-main-font-weight: var(--sfx-dd-main-font-weight--set, var(--sfx-dd-font-weight));
	--sfx-dd-main-link-color-hover: var(--sfx-dd-link-color-hover);
	--sfx-dd-sub-color: var(--sfx-dd-sub-color--set, var(--sfx-dd-link-color));
	--sfx-dd-sub-font-size: var(--sfx-dd-sub-font-size--set, var(--sfx-dd-font-size));
	--sfx-dd-sub-font-weight: var(--sfx-dd-sub-font-weight--set, var(--sfx-dd-font-weight));
	--sfx-dd-sub-link-color-hover: var(--sfx-dd-link-color-hover);

	/* Forward chevron */
	--sfx-dd-chevron: var(--sfx-dd-chevron--set, currentColor);
	--sfx-dd-chevron-size: var(--sfx-dd-chevron-size--set, .5rem);
	--sfx-dd-chevron-thickness: var(--sfx-dd-chevron-thickness--set, 2px);

	/* Back row — bold, centred label; chevron sits on the start edge. */
	--sfx-dd-back-bg: var(--sfx-dd-back-bg--set, var(--neutral-ultra-light, #f6f6f6));
	--sfx-dd-back-color: var(--sfx-dd-back-color--set, inherit);
	--sfx-dd-back-font-weight: var(--sfx-dd-back-font-weight--set, 600);
	--sfx-dd-chevron-back: var(--sfx-dd-chevron-back--set, var(--accent, #e11d48));
	--sfx-dd-pad-back-block: var(--sfx-dd-pad-back-block--set, var(--space-s, 1.25rem));
	--sfx-dd-pad-back-inline: var(--sfx-dd-pad-back-inline--set, var(--space-l, 2.5rem));
	--sfx-dd-back-border-color: var(--sfx-dd-back-border-color--set, var(--neutral-light, #e5e5e5));
	--sfx-dd-back-color-hover: var(--sfx-dd-back-color-hover--set, var(--sfx-dd-link-color-hover));

	/* Overview row — bold like the original. */
	--sfx-dd-overview-color: var(--sfx-dd-overview-color--set, inherit);
	--sfx-dd-overview-font-weight: var(--sfx-dd-overview-font-weight--set, 600);

	/* Flex item inside the offcanvas; no height:100% chain. */
	flex: 1 1 auto;
	min-inline-size: 0;
	min-block-size: 0;
	inline-size: 100%;
	display: flex;
	flex-direction: column;
	position: relative;
	overflow: hidden;
	background: var(--sfx-dd-bg);
	color: var(--sfx-dd-color);
	font-size: var(--sfx-dd-font-size);
}

/* Every panel is a positioned box so its own sub-panels resolve inset:0
   against it. The root panel is relative and gives .dd its height. */
.dd__panel {
	display: flex;
	flex-direction: column;
	min-block-size: 0;
	background: var(--sfx-dd-bg);
}

.dd__panel--root {
	position: relative;
	flex: 1 1 auto;
	min-block-size: 0;
	/* x=hidden: keeps the translateX(100%)-parked sub-panels from adding a
	   horizontal scrollbar. */
	overflow: hidden auto;
}

.dd__panel:not(.dd__panel--root) {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden auto;
	visibility: hidden;
	/* translateX is physical; menus here are LTR. Kept on the compositor for
	   smooth motion. */
	transform: translateX(100%);
	transition:
		transform var(--sfx-dd-transition-duration) var(--sfx-dd-transition-easing),
		visibility var(--sfx-dd-transition-duration) var(--sfx-dd-transition-easing);
}

.dd__panel.is-open {
	visibility: visible;
	transform: translateX(0);
}

.dd__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dd__item + .dd__item {
	border-block-start: var(--sfx-dd-item-border-width) solid var(--sfx-dd-item-border-color);
}

/* Links and the parent toggle share item layout/typography. */
.dd__link,
.dd__toggle {
	display: flex;
	align-items: center;
	gap: var(--sfx-dd-item-gap);
	padding-block: var(--sfx-dd-pad-item-block);
	padding-inline: var(--sfx-dd-pad-item-inline);
	color: var(--sfx-dd-link-color);
	text-decoration: none;
	cursor: pointer;
}

.dd__toggle {
	justify-content: space-between;
}

.dd__link,
.dd__toggle,
.dd__back {
	transition:
		color var(--sfx-dd-hover-transition-duration) var(--sfx-dd-transition-easing),
		background-color var(--sfx-dd-hover-transition-duration) var(--sfx-dd-transition-easing);
}

/* The label carries all typography, so it can be padded and restyled on its
   own (and per level via the main/submenu token overrides below). */
.dd__label {
	font-family: var(--sfx-dd-font-family);
	font-size: var(--sfx-dd-font-size);
	font-weight: var(--sfx-dd-font-weight);
	letter-spacing: var(--sfx-dd-letter-spacing);
	text-transform: var(--sfx-dd-text-transform);
	line-height: var(--sfx-dd-line-height);
	padding-block: var(--sfx-dd-pad-label-block);
	padding-inline: var(--sfx-dd-pad-label-inline);
}

/* Top-level items adopt the "main menu" overrides; items inside any sub-panel
   adopt the "submenu" overrides. Both default to the base tokens, so unset =
   unchanged. Redefining the base tokens (not the properties) keeps hover /
   current / overview colours working. */
.dd__panel--root > .dd__list > .dd__item > .dd__link,
.dd__panel--root > .dd__list > .dd__item > .dd__toggle {
	--sfx-dd-link-color: var(--sfx-dd-main-color);
	--sfx-dd-font-size: var(--sfx-dd-main-font-size);
	--sfx-dd-font-weight: var(--sfx-dd-main-font-weight);
	--sfx-dd-link-color-hover: var(--sfx-dd-main-link-color-hover);
}

.dd__panel:not(.dd__panel--root) .dd__item > .dd__link,
.dd__panel:not(.dd__panel--root) .dd__item > .dd__toggle {
	--sfx-dd-link-color: var(--sfx-dd-sub-color);
	--sfx-dd-font-size: var(--sfx-dd-sub-font-size);
	--sfx-dd-font-weight: var(--sfx-dd-sub-font-weight);
	--sfx-dd-link-color-hover: var(--sfx-dd-sub-link-color-hover);
}

.dd__link:hover,
.dd__link:focus-visible,
.dd__toggle:hover,
.dd__toggle:focus-visible {
	color: var(--sfx-dd-link-color-hover);
	background: var(--sfx-dd-link-bg-hover);
}

.dd__item--overview .dd__link {
	color: var(--sfx-dd-overview-color);
}

.dd__item--overview .dd__label {
	font-weight: var(--sfx-dd-overview-font-weight);
}

/* Current page — WordPress adds these classes to the <li>; the walker keeps
   them. Highlights the active item and the ancestor path leading to it. */
.dd__item.current-menu-item > .dd__link,
.dd__item.current-menu-item > .dd__toggle,
.dd__item.current-menu-parent > .dd__toggle,
.dd__item.current-menu-ancestor > .dd__toggle {
	color: var(--sfx-dd-link-color-current);
}

.dd__item.current-menu-item > .dd__link {
	font-weight: 700;
}

/* Chevron span: holds either a chosen icon or, when empty, the CSS border glyph. */
.dd__chevron {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--sfx-dd-chevron);
	font-size: var(--sfx-dd-chevron-size);
}

.dd__chevron svg,
.dd__chevron img {
	inline-size: 1em;
	block-size: 1em;
}

/* Forward glyph (empty = no icon): top + inline-end borders rotated into ">".
   Excludes the back span (which also carries .dd__chevron) so the forward
   transform can't stack onto the back rule's rotate. */
.dd__chevron:not(.dd__chevron--back):empty::after {
	content: "";
	inline-size: var(--sfx-dd-chevron-size);
	block-size: var(--sfx-dd-chevron-size);
	border-block-start: var(--sfx-dd-chevron-thickness) solid currentColor;
	border-inline-end: var(--sfx-dd-chevron-thickness) solid currentColor;
	transform: rotate(45deg);
}

/* Back row — label centred and bold by default; the chevron sits absolutely on
   the start edge so it never pushes the centred label off-centre. */
.dd__back {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-block: var(--sfx-dd-pad-back-block);
	padding-inline: var(--sfx-dd-pad-back-inline);
	background: var(--sfx-dd-back-bg);
	color: var(--sfx-dd-back-color);
	border-block-end: var(--sfx-dd-item-border-width) solid var(--sfx-dd-back-border-color);
	font-weight: var(--sfx-dd-back-font-weight);
	cursor: pointer;
}

.dd__back:hover,
.dd__back:focus-visible {
	color: var(--sfx-dd-back-color-hover);
}

/* Back chevron span: absolutely positioned on the start edge so an inline icon
   never shifts the centred back label. */
.dd__chevron--back {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: var(--space-l, 1.25rem);
	translate: 0 -50%;
	color: var(--sfx-dd-chevron-back);
}

.dd__chevron--back:empty::after {
	content: "";
	inline-size: var(--sfx-dd-chevron-size);
	block-size: var(--sfx-dd-chevron-size);
	border-block-start: var(--sfx-dd-chevron-thickness) solid currentColor;
	border-inline-end: var(--sfx-dd-chevron-thickness) solid currentColor;
	rotate: -135deg;
}

@media (prefers-reduced-motion: reduce) {
	.dd__panel:not(.dd__panel--root),
	.dd__link,
	.dd__toggle,
	.dd__back {
		transition: none;
	}
}