/**
 * ANSL Nav – structure only. Mode rules (dropdown / inline / static per breakpoint) are
 * generated inline (Nav::breakpoint_css()).
 */

/* Defaults with zero specificity: framework tokens with own fallbacks */
:where(.ansl-nav) {
	--ansl-nav-gap: var(--space-s, 1em); /* top level; drill-down submenus too */
	--ansl-nav-indent: var(--space-s, 1em);
	--ansl-nav-duration: var(--transition-duration, 0.2s); /* submenu animation (nav.js) and chevron */
	--ansl-nav-easing: var(--transition-timing, ease);
	--ansl-nav-dropdown-padding: var(--space-2xs, 0.5em); /* one value: fly-outs are offset by it */
	--ansl-nav-dropdown-background: var(--bg-body, #fff);
	--ansl-nav-dropdown-shadow: none; /* decoration is per project (like radius), the background is for legibility */
	--ansl-nav-dropdown-border: none;
	--ansl-nav-dropdown-radius: 0;
	--ansl-nav-dropdown-min-width: max-content;
	--ansl-nav-chevron-size: 0.75em;
	--ansl-nav-icon-open-transform: rotate(180deg);
	--ansl-nav-hover-delay: 1s; /* WAI fly-out tutorial; nav.js */
	--ansl-nav-hover-open-delay: 0.1s; /* hover intent; nav.js */
	--ansl-nav-dropdown-offset: 0px; /* distance below the item (a bridge keeps hover alive) */
	--ansl-nav-dropdown-panel-padding: 0; /* mega menu panels: the content brings its spacing */
	--ansl-nav-chevron-stroke: 2; /* in viewBox units (16) */
	--ansl-nav-toggle-gap: 0; /* text ↔ chevron box, also link ↔ submenu button */
	--ansl-nav-toggle-size: 1.5em; /* chevron box: same look everywhere, tap area of split buttons (WCAG 2.5.8) */
}

/* Windows high contrast: backgrounds and shadows are removed, so dropdowns get a system
   color border to stay distinguishable (only the dropdown mode reads the variable) */
@media (forced-colors: active) {
	:where(.ansl-nav) {
		--ansl-nav-dropdown-border: 1px solid CanvasText;
	}
}

/* Lists */
:where(.ansl-nav__list, .ansl-nav-item__submenu) {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* No align-items default: stretch keeps a vertical nav left-aligned; items center their
   own content. */
.ansl-nav__list {
	display: flex;
	flex-wrap: wrap;
}

:where(.ansl-nav__list) {
	gap: var(--ansl-nav-gap);
}

.ansl-nav-item__submenu {
	flex-direction: column;
}

/* Item: link/label/button side by side, an in-flow submenu wraps below. Positioned, so a
   dropdown sits below (and a fly-out beside) its own item. */
/* Structural (li in the nav lists): in the builder Bricks renders Nav Items without our
   classes; native list items (e.g. a Bricks Div with tag li) fit in too. Zero specificity:
   defaults only (e.g. the Nav Dropdown's width option makes an item static). */
:where(.ansl-nav__list, .ansl-nav-item__submenu) > :where(li) {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start; /* the mode CSS centers rows (static: columns stay at the top) */
	align-items: center;
	column-gap: var(--ansl-nav-toggle-gap);
}

.ansl-nav-item__submenu {
	flex-basis: 100%;
}

/* Dropdown alignment (first level; read by the dropdown mode CSS) */
.ansl-nav--align-center {
	--_ansl-nav-dd-start: 50%;
	--_ansl-nav-dd-shift: -50% 0;
}

.ansl-nav--align-center:dir(rtl) {
	--_ansl-nav-dd-shift: 50% 0;
}

.ansl-nav--align-end {
	--_ansl-nav-dd-start: auto;
	--_ansl-nav-dd-end: 0;
}

/* Fly-out direction (deeper levels): toward the end, with "End" alignment toward the start.
   --flip (nav.js, near the viewport edge) reverses it; deeper levels inherit it. */
.ansl-nav--align-end,
.ansl-nav-item--flip {
	--_ansl-nav-fly-start: auto;
	--_ansl-nav-fly-end: calc(100% + var(--ansl-nav-dropdown-padding));
}

.ansl-nav--align-end .ansl-nav-item--flip {
	--_ansl-nav-fly-start: calc(100% + var(--ansl-nav-dropdown-padding));
	--_ansl-nav-fly-end: auto;
}

/* A Nav Dropdown's own alignment (overrides the Nav's): the same variables on its item,
   including the fly-out direction of its deeper levels */
.ansl-nav-item--align-start,
.ansl-nav-item--align-center {
	--_ansl-nav-dd-start: 0;
	--_ansl-nav-dd-end: auto;
	--_ansl-nav-dd-shift: none;
	--_ansl-nav-fly-start: calc(100% + var(--ansl-nav-dropdown-padding));
	--_ansl-nav-fly-end: auto;
}

.ansl-nav-item--align-center {
	--_ansl-nav-dd-start: 50%;
	--_ansl-nav-dd-shift: -50% 0;
}

.ansl-nav-item--align-center:dir(rtl) {
	--_ansl-nav-dd-shift: 50% 0;
}

.ansl-nav-item--align-end {
	--_ansl-nav-dd-start: auto;
	--_ansl-nav-dd-end: 0;
	--_ansl-nav-dd-shift: none;
	--_ansl-nav-fly-start: auto;
	--_ansl-nav-fly-end: calc(100% + var(--ansl-nav-dropdown-padding));
}

:is(.ansl-nav-item--align-start, .ansl-nav-item--align-center) .ansl-nav-item--flip {
	--_ansl-nav-fly-start: auto;
	--_ansl-nav-fly-end: calc(100% + var(--ansl-nav-dropdown-padding));
}

.ansl-nav-item--align-end .ansl-nav-item--flip {
	--_ansl-nav-fly-start: calc(100% + var(--ansl-nav-dropdown-padding));
	--_ansl-nav-fly-end: auto;
}

/* Submenu and back buttons: look like links (link color, decoration + hover, framework
   tokens), chevron via CSS. Interactive items look alike; only static labels keep the
   text color. */
:where(.ansl-nav-item__toggle) {
	align-items: center;
	gap: var(--ansl-nav-toggle-gap);
	padding: 0;
	border: 0;
	background: none;
	color: var(--link-color, inherit);
	font: inherit;
	text-decoration: var(--link-decoration, none);
	text-underline-offset: var(--link-underline-offset, auto);
	cursor: pointer;
}

:where(.ansl-nav-item__toggle, .ansl-nav-item__back):hover {
	color: var(--link-color-hover, var(--link-color, inherit));
	text-decoration: var(--link-decoration-hover, var(--link-decoration, none));
}

/* Focus outline above an open dropdown / fly-out (it would cover the outline's lower
   edge). Only while focused, no layout change. */
:where(.ansl-nav-item__link, .ansl-nav-item__toggle):focus-visible {
	position: relative;
	z-index: calc(var(--ansl-nav-z-index, 50) + 1);
}

.ansl-nav-item__chevron {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	inline-size: var(--ansl-nav-toggle-size);
	block-size: var(--ansl-nav-toggle-size);
}

/* The box is only needed where the chevron is its own button (split items: tap area).
   Button parents (whole item = button): icon-sized, with the same visible space before
   it, so padding and backgrounds look symmetric. */
:where(.ansl-nav) {
	--_ansl-nav-icon-space: calc((var(--ansl-nav-toggle-size) - var(--ansl-nav-chevron-size)) / 2);
}

:where(.ansl-nav-item__toggle:first-child) .ansl-nav-item__chevron {
	inline-size: auto;
	block-size: auto;
	margin-inline-start: var(--_ansl-nav-icon-space);
}

/* SVG chevron: square like the framework (no rounding by default); round per project:
   stroke-linecap/-linejoin: round. */
.ansl-nav-item__chevron-svg {
	inline-size: var(--ansl-nav-chevron-size);
	block-size: var(--ansl-nav-chevron-size);
	stroke-width: var(--ansl-nav-chevron-stroke);
}

/* Bricks gives every SVG without width/height attributes a min. size of 1em
   (svg:not([width])): our icons may be smaller (chevron size, item icon size) */
.ansl-nav-item__chevron-svg,
:where(.ansl-nav-item__icon, .ansl-nav-item__chevron-icon) > svg {
	min-inline-size: 0;
	min-block-size: 0;
}

/* Open state of every icon (SVG chevron or a chosen Bricks icon; flex items, so inline
   icons transform too) */
.ansl-nav-item__chevron > * {
	transition: transform var(--ansl-nav-duration) var(--ansl-nav-easing);
}

.ansl-nav-item__toggle[aria-expanded="true"] .ansl-nav-item__chevron > * {
	transform: var(--ansl-nav-icon-open-transform);
}

/* Item icon (Nav Link / Nav Dropdown "Icon"): icon and text side by side. The mode CSS still decides
   whether a label shows (it's more specific). */
:where(.ansl-nav-item__link, .ansl-nav-item__toggle-text, .ansl-nav-item__label, .ansl-nav-item__text):has(> .ansl-nav-item__icon) {
	display: inline-flex;
	align-items: center;
	gap: 0.375em;
}

.ansl-nav-item__icon {
	flex-shrink: 0;
}

/* Font icons are text: an underline on the link or button (e.g. the framework's hover
   decoration) would run under them, and turn with an open transform. Decorations aren't
   drawn into inline blocks, so icons sit as inline blocks in a block box. */
.ansl-nav-item__icon,
.ansl-nav-item__chevron-icon {
	display: block;
	line-height: 0;
}

.ansl-nav-item__icon > *,
.ansl-nav-item__chevron-icon > * {
	display: inline-block;
	vertical-align: top;
	line-height: 1;
}

:where(.ansl-nav-item__icon > svg) {
	inline-size: 1em;
	block-size: 1em;
}

/* Drill-down (nav.js sets --drilled on the open item): the open submenu replaces its
   level — the other items of that level and the item's own link / button hide. */
:where(.ansl-nav-item__submenu, .ansl-nav__list):has(> .ansl-nav-item--drilled) > li:not(.ansl-nav-item--drilled),
li.ansl-nav-item--drilled > :not(.ansl-nav-item__submenu) {
	display: none !important; /* a state: wins over every mode / back-button display rule */
}

/* Back button: looks like the submenu buttons (hover above), chevron pointing back */
:where(.ansl-nav-item__back) {
	align-items: center;
	gap: 0.375em;
	padding: 0;
	border: 0;
	background: none;
	color: var(--link-color, inherit);
	font: inherit;
	text-decoration: var(--link-decoration, none);
	text-underline-offset: var(--link-underline-offset, auto);
	cursor: pointer;
}

/* In a panel (column) the back button is a direct child: not stretched to full width */
.ansl-nav-item__submenu--panel > .ansl-nav-item__back {
	align-self: flex-start;
}

.ansl-nav-item__back-icon {
	display: inline-flex;
	rotate: 90deg;
}

.ansl-nav-item__back-icon:dir(rtl) {
	rotate: -90deg;
}

/* RTL: mirror the chevrons (a down chevron stays the same, "deeper" points to the left) */
.ansl-nav-item__chevron-svg:dir(rtl) {
	scale: -1 1;
}

.ansl-nav-item__back-icon .ansl-nav-item__chevron-svg {
	inline-size: var(--ansl-nav-chevron-size);
	block-size: var(--ansl-nav-chevron-size);
	stroke-width: var(--ansl-nav-chevron-stroke);
}

/* Screen readers only: a split button's label, an item's hidden text (icon only) */
.ansl-nav-item__toggle-label,
.ansl-nav-item__name--hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Builder: "Show submenus open in builder" (Nav: all), "Show open in builder" (Nav
   Dropdown: this one and its deeper levels) */
.ansl-nav--builder-open .ansl-nav-item__submenu,
.ansl-nav-item--builder-open .ansl-nav-item__submenu {
	display: flex !important;
}

/* All levels open at once (drill-down: in the flow): items with a submenu as blocks, so the
   submenu breaks below instead of adding to the dropdown's width (a wrapping flex row is as
   wide as all its items in one line); back buttons are generated, not edited: hidden. */
:is(.ansl-nav--builder-open, .ansl-nav-item--builder-open) li:has(> .ansl-nav-item__submenu) {
	display: block;
}

:is(.ansl-nav--builder-open, .ansl-nav-item--builder-open) :is(.ansl-nav-item__back-item, .ansl-nav-item__back) {
	display: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.ansl-nav-item__chevron > * {
		transition: none;
	}
}