/* Mega menu panels («Про театр» / «Колектив» / «Корисне»), desktop only — Figma
   «Column - Pharma & Finance» 3850:12238 / 3863:13321 / 3863:13341 @1440,
   4220:16686 @1920, all inside frame «Головна» (3850:11701 / 4220:16151).
   `.site-nav` itself is `display: none` below 1440 (site-header.css), so this
   file only ever takes effect at ≥1440 — the `@media` wrapper below is what
   keeps it from doing anything on 390/768 rather than a second breakpoint
   query.

   Text token: the spec's «S/S text (semi bold) caps» style is --fs-s-text /
   --lh-s-text / --ls-s-text at every measured width (16/22 @1440, 20/24
   @1920), matching this component exactly — not --fs-menu-button, which is
   the *toggle button's* own text size in site-header.css.

   Column width: the design gives «Про театр»/«Корисне» explicit hug widths
   (163 / 267 @1440) and «Колектив» an explicit fixed width (277 @1440, 339
   @1920) that two of its five rows wrap inside. `width: max-content` with a
   `max-width` cap reproduces both from one rule: the two short columns never
   reach the cap (stay hug-sized, matching the spec numbers exactly), and the
   cap is itself set to the longest *unwrapped* row in «Колектив»
   («Художньо-керівний склад», 245 + 32 padding = 277 / 307 + 32 = 339),
   which is what forces the two long rows to wrap at precisely the spec
   width. */

@media (min-width: 1440px) {

	/* The panel hangs from the BAR's bottom edge, not from the menu row's.
	   In the open-menu frame «Головна» 3850:11701 the NavigationBar instance
	   is 1440×136 with `pad=0/0/24/0`, the menu row (Navigation Options
	   Container 303,88) ends at y 112, and all three panels — «Про театр»
	   574,136, «Колектив» 758,136, «Корисне» 1086,136 — start at y 136:
	   flush with the bar, no gap. site-header.css folds that 24px tail into
	   row 2 of the header grid (48 = the 24px menu row + the component's own
	   trailing padding), so a plain `top: 100%` on the row's own box put the
	   panel 24px higher — INSIDE the bar, with its left/right/bottom frame
	   lines cutting across the bar and the menu row (client fix ПР-16).
	   `--podil-mega-tail` is that padding: 28px at 1920 (Full HD 4220:16151 —
	   bar 1920×168 `pad=0/0/28/0`, menu row 423,112 ends at 140, panel
	   1033,168).

	   `display: flex` is what makes the sum exact. As a block the <li>'s line
	   box is 1px taller than the inline-flex toggle inside it at 1920 (29 vs
	   28, measured), and that 1px would leave the panel's side lines a pixel
	   short of the bar — the break the fix is about. A flex container is its
	   content's height at both widths, so row bottom + tail lands on the bar's
	   own edge. */
	.site-nav__item {
		--podil-mega-tail: 24px;

		position: relative;
		display: flex;
	}

	.mega {
		position: absolute;
		top: calc(100% + var(--podil-mega-tail));
		left: 0;
		z-index: 20;
		display: inline-flex;
		flex-direction: column;
		width: max-content;
		max-width: 277px;
		box-sizing: border-box;
		padding: 0 0 8px;
		background: var(--color-neutral-100);
		box-shadow:
			inset -1px 0 0 var(--color-neutral-300),
			inset 0 -1px 0 var(--color-neutral-300),
			inset 1px 0 0 var(--color-neutral-300);
	}

	.mega[hidden] {
		display: none;
	}

	/* Hover bridge. The panel now starts a tail below the menu row, so a
	   pointer travelling from the toggle to the first link crosses the bar's
	   own bottom padding — a band inside neither box, where `pointerleave` on
	   the item fires and mega-menu.js starts its CLOSE_DELAY timer. This
	   invisible strip spans exactly that band and belongs to the panel, hence
	   to the item's own subtree, so the pointer never leaves the item at all.
	   It lives and dies with the panel (`.mega[hidden]` above takes the whole
	   box out), and it covers only the panel's own width over an empty part of
	   the bar — nothing focusable or clickable is under it. */
	.mega::before {
		content: "";
		position: absolute;
		top: calc(-1 * var(--podil-mega-tail));
		right: 0;
		left: 0;
		height: var(--podil-mega-tail);
	}

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

	.mega__link {
		display: flex;
		align-items: center;
		gap: 8px;
		box-sizing: border-box;
		width: 100%;
		padding: 12px 16px;
		color: var(--color-neutral-950);
		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;
		text-decoration: none;
	}

	/* Controller ruling R22: the exported "up-sign (2) 4" asset (3863:13311),
	   which round 1 read as a decorative pointer graphic connecting the toggle
	   to the panel, actually renders as a hand cursor — in the design frame it
	   illustrates a mouse hovering the second row of each column, not a UI
	   element to build. The grey background on that row (`Industry Item -
	   Legal Sector`, #E1E5EA = --color-neutral-200) is therefore the row's own
	   :hover/:focus-visible state, the same treatment for every row (the
	   design only draws it on row 2 because that's where the cursor sits in
	   the screenshot), not a static highlight or a "current page" signal.
	   Focus keeps the standard visible outline from base.css in addition. */
	.mega__link:hover,
	.mega__link:focus-visible {
		background: var(--color-neutral-200);
	}

	/* Toggle hover — Figma «About Container» set 3861:13295: Default
	   (3850:12882) —ON_HOVER, INSTANT_TRANSITION→ Variant2 (3861:13296).
	   Instant: the 600ms ease-in-out stored on that interaction is not
	   used by Figma for an instant transition, so nothing is tweened
	   here. Per-layer delta: «About Label» fill #272B30 → #12AD99 (text
	   uses --color-primary-700 instead — contrast, designer-questions.md);
	   «Vector 5» (24×12) flipped vertically (m11 1 → −1) and its box
	   moved from y 7..19 to y 6..18 (1px up). The mega menu rows have no
	   prototype interaction at all: row 2's #E1E5EA fill in the frame is
	   the hovered row under the drawn cursor, so it switches instantly
	   too (rule above). Open state (aria-expanded) shows the same
	   variant: the panel opens on hover, which is what Variant2 draws. */
	.site-nav__toggle:hover,
	.site-nav__toggle:focus-visible,
	.site-nav__toggle[aria-expanded="true"] {
		color: var(--color-primary-700);
	}

	.site-nav__toggle:hover svg,
	.site-nav__toggle:focus-visible svg,
	.site-nav__toggle[aria-expanded="true"] svg {
		transform: translateY(-1px) scaleY(-1);
	}
}

@media (min-width: 1920px) {

	/* Full HD 4220:16151: the bar is 1920×168 with `pad=0/0/28/0` and the
	   panel «Колектив» 4220:16686 sits at 1033,168 — the menu row ends at
	   140. See the 1440 block for what the tail is. */
	.site-nav__item {
		--podil-mega-tail: 28px;
	}

	.mega {
		max-width: 339px;
	}

	.mega__link {
		padding: 18px 16px;
	}
}

/* Windows High Contrast / `forced-colors: active`. The panel's edge is the
   project's «inside stroke» convention — `box-shadow: inset` (0/1/1/1px
   #D0D5DC in the frame, no top side: the bar is the top edge) — and Chromium
   drops author `box-shadow` here, so without this the panel has no boundary at
   all: exactly the missing frame the client's fix is about, one mode further.
   `outline` rather than `border`, and a negative offset to hold the same
   inside position, for the reasons base.css states for the controls it lists.
   It draws on all four sides — the top one lands on the bar's own bottom edge,
   which forced-colors gives no line of its own either.

   The hovered row is a `background` (#E1E5EA), which forced-colors flattens to
   the system canvas along with everything else, so the row's own edge carries
   the state instead. `:not(:focus-visible)` for the reason base.css spells out
   on `.c-ticket--disabled`: `outline` is a shorthand resolved longhand by
   longhand, and a (0,2,0) `outline-color` here would keep beating
   base.css's `:focus-visible { outline: 2px solid Highlight }` (0,1,0) while
   the row is focused — a focus ring in the wrong colour. Excluded, this rule
   simply does not match then, and the Highlight ring wins outright. */
@media (forced-colors: active) and (min-width: 1440px) {

	.mega {
		outline: 1px solid CanvasText;
		outline-offset: -1px;
	}

	.mega__link:hover:not(:focus-visible) {
		outline: 1px solid CanvasText;
		outline-offset: -1px;
	}
}