/*
 * Design System - AELITA
 * components/mobile-nav.css - the .a-mobile-nav drawer.
 *
 * Source of truth: docs/aelita-design/DESIGN.md
 * Uses only CSS variables from tokens.css. No hex values, no Bootstrap
 * classes, no global selectors, no `transition: all`.
 *
 * Mobile-first: the drawer and the header hamburger are hidden from 992px,
 * matching the current header breakpoint.
 *
 * Status: component styles only - NOT enqueued yet. header.php untouched.
 *
 * Focus note: the legacy theme ships `*:focus { outline: none !important; }`
 * (css/main.css), so the focus-visible rules below use a local `!important`
 * on the outline only.
 */

/* -------------------------------------------------------------------- */
/* Drawer root + overlay                                                */
/* -------------------------------------------------------------------- */
.a-mobile-nav {
	position: fixed;
	inset: 0;
	z-index: var(--z-overlay);
	visibility: hidden;
	pointer-events: none;
}

.a-mobile-nav.is-open {
	visibility: visible;
	pointer-events: auto;
}

.a-mobile-nav[hidden] {
	display: none;
}

.a-mobile-nav__overlay {
	position: absolute;
	inset: 0;
	z-index: 1; /* below the panel within the drawer stacking context */
	background-color: var(--c-ink-900);
	opacity: 0;
	transition: opacity var(--dur-overlay) var(--ease-out);
}

.a-mobile-nav.is-open .a-mobile-nav__overlay {
	opacity: 0.5;
}

/* -------------------------------------------------------------------- */
/* Panel (slides in from the right)                                     */
/* -------------------------------------------------------------------- */
.a-mobile-nav__panel {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	z-index: 2; /* above the overlay within the drawer stacking context */
	display: flex;
	flex-direction: column;
	width: min(90vw, var(--drawer-width)); /* max 420px */
	height: 100vh; /* fallback for browsers without dvh */
	height: 100dvh;
	background-color: var(--bg);
	color: var(--text-primary);
	box-shadow: var(--shadow-overlay);
	transform: translateX(100%);
	transition: transform var(--dur-overlay) var(--ease-drawer);
}

.a-mobile-nav.is-open .a-mobile-nav__panel {
	transform: translateX(0);
}

/* -------------------------------------------------------------------- */
/* Panel header (close)                                                 */
/* -------------------------------------------------------------------- */
.a-mobile-nav__header {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--space-3);
	flex: 0 0 auto;
	min-height: calc(var(--space-6) + var(--space-5)); /* 56px */
	padding: var(--space-2) var(--space-4);
	border-bottom: var(--border-w) solid var(--border);
}

.a-mobile-nav__close {
	flex: 0 0 auto;
}

/* -------------------------------------------------------------------- */
/* Scrollable list (independent scroll)                                 */
/* -------------------------------------------------------------------- */
.a-mobile-nav__list {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	margin: 0;
	padding: var(--space-2) var(--space-4) var(--space-5);
	list-style: none;
}

.a-mobile-nav__item {
	border-bottom: var(--border-w) solid var(--border);
}

.a-mobile-nav__link,
.a-mobile-nav__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	width: 100%;
	min-height: calc(var(--space-6) + var(--space-3)); /* 44px touch target */
	padding: var(--space-3) var(--space-2);
	border: 0;
	background-color: transparent;
	color: var(--text-primary);
	font-family: var(--font-body);
	font-size: var(--fs-h4);
	font-weight: var(--fw-regular);
	line-height: var(--lh-body);
	text-align: start;
	text-decoration: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: color var(--dur-popover) var(--ease-out);
}

.a-mobile-nav__link[aria-current="page"] {
	color: var(--link-hover);
	font-weight: var(--fw-bold);
}

/* All main-menu entries are uppercase, including submenu items. */
.a-mobile-nav__link,
.a-mobile-nav__toggle {
	text-transform: uppercase;
}

.a-mobile-nav__toggle[aria-expanded="true"] {
	color: var(--link-hover);
}

/* Items with children carry a caret at the end of the row; it flips up when
 * the accordion is open. Same bordered square pattern as the desktop nav. */
.a-mobile-nav__toggle::after {
	content: "";
	flex: 0 0 auto;
	width: 5px;
	height: 5px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	transition: transform var(--dur-popover) var(--ease-out);
}

.a-mobile-nav__toggle[aria-expanded="true"]::after {
	transform: rotate(-135deg);
}

/* -------------------------------------------------------------------- */
/* Accordion submenu (opened by .is-open or aria-expanded="true")       */
/* -------------------------------------------------------------------- */
.a-mobile-nav__submenu {
	display: none;
	margin: 0;
	padding: 0 0 var(--space-2) var(--space-4);
	list-style: none;
}

.a-mobile-nav__item.is-open > .a-mobile-nav__submenu,
.a-mobile-nav__toggle[aria-expanded="true"] + .a-mobile-nav__submenu {
	display: block;
}

/* -------------------------------------------------------------------- */
/* Footer (contact / social inside the drawer)                          */
/* -------------------------------------------------------------------- */
.a-mobile-nav__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3) var(--space-5);
	flex: 0 0 auto;
	padding: var(--space-4);
	border-top: var(--border-w) solid var(--border);
	background-color: var(--bg-invert);
	color: var(--text-on-brand);
}

/* Keep [hidden] hidden even if a component rule sets display. */
.a-mobile-nav [hidden] {
	display: none;
}

/* Keyboard focus: local !important only for the outline. */
.a-mobile-nav__close:focus-visible,
.a-mobile-nav__link:focus-visible,
.a-mobile-nav__toggle:focus-visible {
	outline: 2px solid var(--focus-ring) !important;
	outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
	.a-mobile-nav__panel,
	.a-mobile-nav__overlay {
		transition-duration: 0.01ms;
	}

	.a-mobile-nav__toggle::after {
		transition-duration: 0.01ms;
	}
}

/* -------------------------------------------------------------------- */
/* Desktop: hide the drawer and the header hamburger from 992px         */
/* -------------------------------------------------------------------- */
@media (min-width: 992px) {
	.a-mobile-nav,
	.a-mobile-nav.is-open {
		display: none;
	}

	.a-header__menu-toggle {
		display: none;
	}
}

/* -------------------------------------------------------------------- */
/* Drawer content: title, social links, language switcher               */
/* -------------------------------------------------------------------- */
.a-mobile-nav__title {
	display: none;
}

.a-mobile-nav__social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.a-mobile-nav__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: calc(var(--space-6) + var(--space-3));  /* 44px touch target */
	min-height: calc(var(--space-6) + var(--space-3));
	color: var(--text-on-brand);
	text-decoration: none;
}

.a-mobile-nav__social-link svg {
	display: block;
	width: var(--space-5);
	height: var(--space-5);
}

@media (hover: hover) and (pointer: fine) {
	.a-mobile-nav__social-link:hover {
		color: var(--link-hover);
	}
}

.a-mobile-nav__social-link:focus-visible {
	outline: 2px solid var(--focus-ring) !important;
	outline-offset: 2px;
}

.a-mobile-nav__lang {
	flex: 0 0 auto;
}

.a-mobile-nav__lang .switcher-list {
	display: flex;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.a-mobile-nav__lang .switcher-list li {
	display: flex;
	align-items: center;
	min-height: calc(var(--space-6) + var(--space-3)); /* 44px touch target */
}

.a-mobile-nav__lang .switcher-list li + li {
	padding-inline-start: var(--space-3);
	border-inline-start: var(--border-w) solid var(--c-ink-700);
}

.a-mobile-nav__lang .switcher-list li a {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

/* The switcher lives in the dark drawer footer (next to the social links),
 * so it consumes dark-surface text colors. */
.a-mobile-nav__lang .switcher-list li a,
.a-mobile-nav__lang .switcher-list li > span {
	color: var(--text-muted);
}

.a-mobile-nav__lang .switcher-list li.active a,
.a-mobile-nav__lang .switcher-list li.active > span {
	color: var(--text-on-brand);
}

@media (hover: hover) and (pointer: fine) {
	.a-mobile-nav__lang .switcher-list li a:hover {
		color: var(--text-on-brand);
	}
}