/* Mobile / tablet menu panel — Figma «Меню»: 390 expanded 4173:17337
   (frame 4163:16872), 390 collapsed 4173:17536, 768 4220:17832
   (frame 4220:17803 «tablet»). Both mockups place the panel below the
   header at a fixed 76px offset (44px toggle + 16/16px header padding,
   same derivation as a11y-panel.css) and share one background with the
   header (#F3F4F6, --color-neutral-100). Inside strokes are
   `box-shadow: inset` per project convention (a border would change the
   box; see site-footer.css/site-header.css). Row padding (20/16 for nav
   rows, 32/16 for the info stages) and gaps are identical at 390 and 768
   in both specs — only the token-driven font sizes (--fs-menu-button,
   --fs-s-text, --fs-m-text) step up at 768 on their own, so this file
   carries no 768 media query for the nav/stage layout. */

.mobile-menu {
	position: fixed;
	z-index: 15;
	top: 76px;
	left: 0;
	right: 0;
	bottom: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	background: var(--color-neutral-100);
}

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

/* #a11y-toggle-mobile — no Figma node of its own, see
   task-6-report.md/mobile-menu.php. Styled like the header's own
   accessibility control (site-header.css .site-header__a11y), full
   width as the first row of the panel. */
.mobile-menu__a11y {
	display: flex;
	align-items: center;
	gap: 8px;
	box-sizing: border-box;
	width: 100%;
	box-shadow: inset 0 1px 0 0 var(--color-neutral-300);
	border: 0;
	background: transparent;
	margin: 0;
	padding: 20px 16px;
	color: var(--color-neutral-800);
	font-family: var(--font-body);
	font-size: var(--fs-menu-button);
	line-height: var(--lh-menu-button);
	letter-spacing: var(--ls-menu-button);
	font-weight: 600;
	text-align: left;
	text-transform: uppercase;
	cursor: pointer;
}

.mobile-menu__a11y svg {
	width: 22px;
	height: 16px;
	flex: none;
}

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

.mobile-menu__item {
	box-shadow: inset 0 1px 0 0 var(--color-neutral-300);
}

.mobile-menu__link--top,
.mobile-menu__group {
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	width: 100%;
	border: 0;
	background: transparent;
	margin: 0;
	padding: 20px 16px;
	color: var(--color-neutral-800);
	font-family: var(--font-body);
	font-size: var(--fs-menu-button);
	line-height: var(--lh-menu-button);
	letter-spacing: var(--ls-menu-button);
	font-weight: 600;
	text-align: left;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
}

.mobile-menu__group-icon {
	display: flex;
	flex: none;
}

.mobile-menu__group-icon svg {
	width: 20px;
	height: 20px;
}

.mobile-menu__group-icon--up {
	display: none;
}

.mobile-menu__group[aria-expanded="true"] .mobile-menu__group-icon--down {
	display: none;
}

.mobile-menu__group[aria-expanded="true"] .mobile-menu__group-icon--up {
	display: flex;
}

.mobile-menu__sub {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 0;
	padding: 0 16px 16px;
	list-style: none;
}

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

.mobile-menu__item:last-child .mobile-menu__sub {
	padding-bottom: 20px;
}

.mobile-menu__link {
	color: var(--color-neutral-800);
	font-family: var(--font-body);
	font-size: var(--fs-s-text);
	line-height: var(--lh-s-text);
	letter-spacing: var(--ls-s-text);
	font-weight: 400;
	text-decoration: none;
}

/* Block, not the default inline: an inline <a>'s own line-height paints
   its text but the containing <li> (untouched, "normal" UA line-height)
   still sets the line box — and therefore the <li>'s height — unless the
   link establishes its own block box. Without this, each row measured
   20px tall instead of the spec's 18px. */
.mobile-menu__sub .mobile-menu__link {
	display: block;
}

/* .mobile-menu__link--top (Афіша/Репертуар) also carries .mobile-menu__link
   (shared with the accordion's own leaf links) — restated after it, same
   0,1,0 specificity as the rule above, so source order alone would let
   .mobile-menu__link's 400/fs-s-text win; this block re-asserts the
   Menu,button typography the row style above already set. */
.mobile-menu__link--top {
	font-size: var(--fs-menu-button);
	line-height: var(--lh-menu-button);
	letter-spacing: var(--ls-menu-button);
	font-weight: 600;
	text-transform: uppercase;
}

/* Info stages: partner / address / box office / socials — Figma
   «Stage»/«Block», all four with the same gap=16, pad=32/16 (identical
   at 390 and 768). */
.mobile-menu__stage {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 16px;
	box-shadow: inset 0 1px 0 0 var(--color-neutral-300);
	padding: 32px 16px;
}

.mobile-menu__label {
	margin: 0;
	color: var(--color-neutral-800);
	font-family: var(--font-body);
	font-size: var(--fs-s-text);
	line-height: var(--lh-s-text);
	letter-spacing: var(--ls-s-text);
	font-weight: 600;
	text-transform: uppercase;
}

.mobile-menu__address-text,
.mobile-menu__phone {
	margin: 0;
	color: var(--color-neutral-800);
	font-family: var(--font-body);
	font-size: var(--fs-m-text);
	line-height: var(--lh-m-text);
	letter-spacing: var(--ls-m-text);
	font-weight: 600;
	text-transform: uppercase;

	/* Figma: these two text layers (only these two in this component)
	   carry leadingTrim: CAP_HEIGHT — their own box is trimmed to the
	   glyphs' cap/baseline, not the font's full line-height (spec height
	   11px vs the 20px line-height everywhere else uses). Progressive
	   enhancement: supporting engines trim to match; without it the box
	   stays at the full line-height, a fallback that is still correct
	   text, just measured taller than the spec's trimmed box. */
	text-box: trim-both cap alphabetic;
}

.mobile-menu__phone a {
	color: inherit;
	text-decoration: none;
}

.mobile-menu__hours {
	margin: 0;

	/* Figma's literal #697482 (--color-neutral-500) is 4.32:1 on the
	   --color-neutral-100 background — fails axe color-contrast (needs
	   4.5:1); --color-neutral-600 is the closest token that clears it
	   (6.89:1). Same fix as site-footer.css .site-footer__hours and
	   site-header.css's nav links; flagged in designer-questions.md. */
	color: var(--color-neutral-600);
	font-family: var(--font-body);
	font-size: var(--fs-s-text);
	line-height: var(--lh-s-text);
	letter-spacing: var(--ls-s-text);
}

/* Partner — Figma text here (title, body copy) is fixed at 16px/20px
   and 14px/18px at *both* 390 and 768 (spec-390.md / spec-768.md:
   identical pixel values at both widths), unlike every other text
   style in this component, which steps up at 768 via its token. Kept
   as a literal, non-stepping size (only the a11y font-scale
   multiplier still applies) rather than --fs-menu-button/--fs-s-text,
   which would introduce a real 768 drift. */
.mobile-menu__partner-title {
	margin: 0;
	color: var(--color-neutral-800);
	font-family: var(--font-body);
	font-size: calc(16px * var(--font-scale));
	line-height: calc(20px * var(--font-scale));
	font-weight: 600;
	text-transform: uppercase;
}

.mobile-menu__partner-text {
	margin: 0;
	color: var(--color-neutral-800);
	font-family: var(--font-body);
	font-size: calc(14px * var(--font-scale));
	line-height: calc(18px * var(--font-scale));
	font-weight: 400;
}

.mobile-menu__partner-logo img {
	display: block;
	max-width: 146px;
	height: auto;
}

/* This instance of the ticket button (Figma «Ticket Button /
   Property 1=Default, mob=off», 128×40) stays at its 40px "Default"
   height at 390 too, instead of the 34px "mobile" height
   ticket-button.css otherwise gives .c-ticket below 768 — an explicit
   per-instance override in the design, not a responsive rule. */
.mobile-menu__partner .c-ticket {
	align-self: flex-start;
	min-height: 40px;
}