/*
 * Liliental mobile menu — Figma "Menu mob main 1–4" (480px frame, file 5g6xIi3QeithDWYIAXhziV).
 * Level 1: 24/600 uppercase on a 36px pitch; the open group sits on a 32px #F5F6F8 band.
 * Level 2: 77×71 tiles, 14px apart, label 12/500 9px under the tile.
 *
 * Selectors are .llmm-prefixed twice over on purpose: the theme's button/img
 * rules must lose even after Seraphinite reorders the combined CSS bundle.
 */
.llmm {
	--llmm-ink: #222d68;
	--llmm-line: #212c68;
	--llmm-band: #f5f6f8;
	--llmm-hover: #cfbe7b;
	--llmm-hover-line: #222d68;
	--llmm-row: 36px;      /* level-1 pitch */
	--llmm-band-h: 32px;   /* open-group band */
	--llmm-gap: 14px;      /* between tiles */
	--llmm-row-gap: 12px;  /* label bottom -> next tile */
	--llmm-base: 77;       /* design tile width, px: icons keep their share of it */
	container: llmm / inline-size;
	/* Inline-size containment makes the box's intrinsic width 0. Inside any
	   shrink-to-fit parent (an Elementor popup's .dialog-message is a
	   flex-start flex box) the height was then measured at ~0 width — every
	   word on its own line — and the widget wrapper came out 2600px tall. */
	contain-intrinsic-inline-size: 441px;
	max-width: 441px;
	margin-inline: auto;
	color: var(--llmm-ink);
	font-family: Montserrat, sans-serif;
}

.llmm .llmm-list,
.llmm .llmm-grid {
	list-style: none;
	margin: 0;
	padding: 0;
}

.llmm .llmm-item,
.llmm .llmm-cell {
	margin: 0;
	padding: 0;
}

.llmm .llmm-item::before,
.llmm .llmm-cell::before {
	content: none;
}

/* Level 1 — a link, or a toggle button for groups. */
.llmm .llmm-top {
	display: block;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 0 8px;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--llmm-ink);
	font-family: Montserrat, sans-serif;
	font-size: 24px;
	font-weight: 600;
	line-height: var(--llmm-row);
	letter-spacing: 0;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	white-space: normal;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.llmm .llmm-top:hover,
.llmm .llmm-top:focus,
.llmm .llmm-top:active {
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--llmm-ink);
	text-decoration: none;
}

.llmm .llmm-top:focus-visible {
	outline: 2px solid var(--llmm-hover);
	outline-offset: -2px;
}

.llmm .llmm-item.is-open > .llmm-top {
	margin-block: calc((var(--llmm-row) - var(--llmm-band-h)) / 2);
	background: var(--llmm-band);
	line-height: var(--llmm-band-h);
}

/* Collapsible panel: 0fr -> 1fr animates to the content height. visibility
   takes closed tiles out of the tab order without losing the animation. */
.llmm .llmm-panel {
	display: grid;
	grid-template-rows: 0fr;
	visibility: hidden;
	transition: grid-template-rows .3s ease, visibility 0s linear .3s;
}

.llmm .llmm-item.is-open > .llmm-panel {
	grid-template-rows: 1fr;
	visibility: visible;
	transition: grid-template-rows .3s ease, visibility 0s;
}

/* The side bleed keeps edge labels (wider than their tile, as in Figma) from being clipped. */
.llmm .llmm-panel-in {
	min-height: 0;
	overflow: hidden;
	margin-inline: -12px;
	padding-inline: 12px;
}

/* Tiles. Fixed-width tracks + auto-fit + center: a short group (3 tiles) is
   centred, a long one fills rows from the left — both as in the Figma frames. */
.llmm .llmm-grid {
	--llmm-cols: 4;
	--llmm-tile: calc((100cqw - (var(--llmm-cols) - 1) * var(--llmm-gap)) / var(--llmm-cols));
	display: grid;
	grid-template-columns: repeat(auto-fit, var(--llmm-tile));
	justify-content: center;
	column-gap: var(--llmm-gap);
	row-gap: var(--llmm-row-gap);
	/* 16px under the band in Figma; the band's own (row - band-h) / 2 margin already gives 2 of them. */
	padding-block: calc(16px - (var(--llmm-row) - var(--llmm-band-h)) / 2) 22px;
}

/* 5 tiles per row on screens wider than 420px (viewport, not the menu box). */
@media (min-width: 421px) {
	.llmm .llmm-grid {
		--llmm-cols: 5;
	}
}

@container llmm (max-width: 299px) {
	.llmm .llmm-grid {
		--llmm-cols: 3;
	}
}

.llmm .llmm-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	color: var(--llmm-ink);
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}

.llmm .llmm-tile:hover,
.llmm .llmm-tile:focus {
	color: var(--llmm-ink);
	text-decoration: none;
}

.llmm .llmm-box {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	aspect-ratio: 77 / 71;
	/* An icon taller than the tile must not stretch it: aspect-ratio's
	   automatic minimum height is content-based. Keeps every tile equal. */
	min-height: 0;
	overflow: hidden;
	border: 1px solid var(--llmm-line);
	background: transparent;
	transition: background-color .2s ease;
}

/* Icon width = its Figma width as a share of the 77px tile (border included). */
.llmm .llmm-box .llmm-ico {
	display: block;
	flex: none;
	width: calc(var(--iw, 50) * (100% + 2px) / var(--llmm-base));
	height: auto;
	max-width: none;
	max-height: none;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* Wraps at the tile width, so labels stack a word per line as in Figma
   ("Аренда / джета"). A single word wider than the tile ("Медицинские")
   never breaks: the inner span can't shrink below its longest word and the
   flex centring lets it overflow evenly into the gaps on both sides.
   mobile-menu.js (fitLabels) shrinks a label's font when two such neighbours
   would otherwise meet across the gap. */
.llmm .llmm-label {
	display: flex;
	justify-content: center;
	width: 100%;
	margin-top: 9px;
	font-family: Montserrat, sans-serif;
	/* 12px on the 77px design tile, shrinking with it on narrow phones (10.8px
	   at 360) so two long neighbouring words don't meet across the gap. */
	font-size: clamp(10px, calc(var(--llmm-tile) * 12 / 77), 12px);
	font-weight: 500;
	line-height: 1;
	text-align: center;
}

.llmm .llmm-label > span {
	text-wrap: balance;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: manual;
}

/* Gold = hover. The current page's tile looks like any other (it is still
   marked aria-current, and its group opens by itself). :active gives touch
   screens the same gold while the finger is down. */
@media (hover: hover) {
	.llmm .llmm-tile:hover .llmm-box {
		border-color: var(--llmm-hover-line);
		background: var(--llmm-hover);
	}
}

.llmm .llmm-tile:active .llmm-box {
	border-color: var(--llmm-hover-line);
	background: var(--llmm-hover);
}

.llmm .llmm-tile:focus-visible {
	outline: none;
}

.llmm .llmm-tile:focus-visible .llmm-box {
	outline: 2px solid var(--llmm-hover);
	outline-offset: 2px;
}

.llmm-empty {
	padding: 16px;
	border: 1px dashed #c3c4c7;
	color: #646970;
	font: 14px/1.4 sans-serif;
	text-align: center;
}

/*
 * Popup header helpers (classes set on ordinary Elementor widgets in the popup).
 * .llmm-burger-close — icon widget holding the 30×20 three-bar SVG: the bars
 * fold into a cross when the popup opens, so the burger itself becomes "close".
 */
.llmm-search-proxy {
	cursor: pointer;
}

/* Popups given the "llmm-popup" class (Popup settings → Advanced → CSS
   classes): make the document fill the dialog instead of shrinking to its
   content, so a full-screen menu is also full-width and centred on tablets. */
.llmm-popup .dialog-message > .elementor {
	width: 100%;
}

/* The header icon SVGs (search, globe, MAX, Telegram, WhatsApp) draw their
   1px outline right on the viewBox edge; with the browser's default
   svg { overflow: hidden } half of that stroke is cut off, which shows as
   flattened circle edges once the icons are scaled up. */
.llmm-popup svg {
	overflow: visible;
}

/* Set by mobile-menu.js while the menu popup is open. */
.llmm-open .amo-button-holder {
	display: none !important;
}

.llmm-burger-close svg {
	overflow: visible;
}

.llmm-burger-close svg > * {
	transform-box: view-box;
	transform-origin: 15px 10px;
	animation: .28s ease .12s both;
}

.llmm-burger-close svg > :nth-child(1) {
	animation-name: llmm-bar-top;
}

.llmm-burger-close svg > :nth-child(2) {
	animation-name: llmm-bar-mid;
}

.llmm-burger-close svg > :nth-child(3) {
	animation-name: llmm-bar-bottom;
}

@keyframes llmm-bar-top {
	to { transform: rotate(45deg) translateY(9px); }
}

@keyframes llmm-bar-mid {
	to { opacity: 0; }
}

@keyframes llmm-bar-bottom {
	to { transform: rotate(-45deg) translateY(-9px); }
}

@media (prefers-reduced-motion: reduce) {
	.llmm .llmm-panel,
	.llmm .llmm-item.is-open > .llmm-panel {
		transition: none;
	}

	.llmm-burger-close svg > * {
		animation-duration: .01s;
		animation-delay: 0s;
	}
}