/* ==========================================================================
   Компонент: мобилно меню (Offcanvas в Bricks) + бутоните Toggle – ImpacT Hire (мокъп v1.14, ≤991)
   Маркировката е на Bricks: .brxe-offcanvas.ih-menu > .brx-offcanvas-inner (панелът) + .brx-offcanvas-backdrop;
   Toggle = button > .brxa-wrap > .brxa-inner. Частите в панела (ih-menu__top, __ctas, __list, __link,
   __contact, __close) и бутонът ih-header__toggle са глобални класове – тук е само това, което Bricks
   рисува сам. Зарежда се винаги (хедърът е на всяка страница) – ih_components() в inc/enqueue.php.
   ========================================================================== */

/* Панелът: на цял екран, светъл, колона със скрол (мокъп: .ih-menu). */
.ih-menu .brx-offcanvas-inner {
	display: flex;
	flex-direction: column;
	gap: var(--ih-space-xl);
	width: 100%;
	max-width: none;
	height: 100%;
	padding: var(--ih-space-m) var(--ih-space-l) var(--ih-space-xl);
	background: var(--ih-color-surface);
	overflow-y: auto;
}

/* Фиксираните части не се свиват в колоната със скрол (наръчник: Offcanvas). */
.ih-menu .brx-offcanvas-inner > * {
	flex-shrink: 0;
}

/* Влязъл потребител: лентата на WordPress закрива горния край на панела. */
.admin-bar .ih-menu .brx-offcanvas-inner {
	padding-top: calc(32px + var(--ih-space-m));
}

@media (max-width: 782px) {
	.admin-bar .ih-menu .brx-offcanvas-inner {
		padding-top: calc(46px + var(--ih-space-m));
	}
}

.ih-menu .brx-offcanvas-backdrop {
	background: color-mix(in srgb, var(--ih-color-ink) 40%, transparent);
}

.ih-menu__top img {
	display: block;
}

/* Бутоните в менюто – на цялата ширина (мокъп: grid). */
.ih-menu__ctas .ih-btn {
	width: 100%;
}

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

.ih-menu__contact a {
	color: inherit;
	text-decoration: none;
}

.ih-menu__contact a:hover {
	color: var(--ih-color-accent);
}

/* ---------- Toggle: бургер в хедъра (две линии, като в мокъпа) ---------- */
/* Глобалният клас има „.ih-header__toggle span“ за маркировката на мокъпа – тук е за тази на Bricks. */
.ih-header__toggle .brxa-wrap {
	position: relative;
	display: block;
	width: 1.8rem;
	height: .65rem;
	background: none;
}

.ih-header__toggle .brxa-inner {
	position: static;
	display: block;
	width: auto;
	height: 0;
	margin: 0;
	background: none !important; /* Bricks рисува средната линия на бургера с background. */
	transform: none;
}

.ih-header__toggle .brxa-inner::before,
.ih-header__toggle .brxa-inner::after {
	content: "";
	position: absolute;
	left: 0;
	display: block;
	width: 100%;
	height: 1.5px;
	margin: 0;
	background: var(--ih-color-ink);
	transform: none;
}

.ih-header__toggle .brxa-inner::before {
	top: 0;
	bottom: auto;
}

.ih-header__toggle .brxa-inner::after {
	top: auto;
	bottom: 0;
}

/* ---------- Toggle: „Затвори“ в менюто (иконка ✕) ---------- */
.ih-menu__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.ih-menu__close :is(i, svg) {
	font-size: 1.8rem;
	line-height: 1;
}

/* Появяване на стъпки при отваряне (Bricks добавя .brx-open); само на frontend. */
.bricks-is-frontend .ih-menu .brx-offcanvas-inner > :not(.ih-menu__top) {
	opacity: 0;
	transform: translateY(1.2rem);
	transition: opacity .4s ease, transform .4s ease;
}

.ih-menu.brx-open .brx-offcanvas-inner > :not(.ih-menu__top) {
	opacity: 1;
	transform: none;
}

.ih-menu.brx-open .brx-offcanvas-inner > :nth-child(2) { transition-delay: .1s; }
.ih-menu.brx-open .brx-offcanvas-inner > :nth-child(3) { transition-delay: .16s; }
.ih-menu.brx-open .brx-offcanvas-inner > :nth-child(4) { transition-delay: .22s; }

@media (prefers-reduced-motion: reduce) {
	.bricks-is-frontend .ih-menu .brx-offcanvas-inner > :not(.ih-menu__top) {
		opacity: 1;
		transform: none;
		transition: none;
	}
}