/* Mobile menu panel (spec §4.3): max-height 0 → 650px + opacity, 300ms ease-out. Hidden from 1024. */
.mobile-menu {
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	visibility: hidden;
	/* visibility waits for the collapse so closed links leave the tab order only after the animation */
	transition: max-height var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out), visibility 0s linear var(--duration-base);
}
.mobile-menu.is-open {
	max-height: 650px;
	opacity: 1;
	visibility: visible;
	transition: max-height var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out), visibility 0s;
}
/* The language list adds up to ~230px; the live 650px cap would clip it. */
.mobile-menu.is-open.has-lang-open { max-height: 900px; }
.mobile-menu__inner { padding-block: calc(var(--spacing) * 4); border-top: 1px solid var(--color-gray-100); }
.mobile-menu__nav { display: flex; flex-direction: column; gap: calc(var(--spacing) * 2); }
.mobile-menu__link {
	padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
	border-radius: var(--radius-xl);
	font-size: var(--text-base);
	line-height: var(--text-base-lh);
	font-weight: var(--font-weight-medium);
	color: var(--color-gray-700);
	transition: all 200ms var(--ease-default);
}
.mobile-menu.is-open .mobile-menu__link { transition-delay: calc(var(--i, 0) * 50ms); }
.mobile-menu__link:hover { background-color: var(--color-gray-50); }
.mobile-menu__link.is-active { background-color: var(--color-gray-50); color: var(--color-brand-orange); }
.mobile-menu__extra { margin-top: calc(var(--spacing) * 4); padding-inline: calc(var(--spacing) * 4); }
.mobile-menu__buttons { display: flex; flex-direction: column; gap: calc(var(--spacing) * 2); }
@media (min-width: 64rem) { .mobile-menu { display: none; } }