/* ============================================
Mobile Sidebar — промо Jay&Joy School
Штатний механізм теми: .menu-header-wrapper (.active) — base-05-menu.js.
Глобально (sidebar рендериться з footer.php, поза .jay-joy-school-page).
============================================ */

.menu-header-wrapper {
	position: fixed;
	inset: 0;
	z-index: 1000;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}
.menu-header-wrapper.active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}
.menu-header-background {
	position: absolute;
	inset: 0;
	background: rgba(82, 38, 10, 0.5);
}
.menu-header {
	position: absolute;
	top: 0;
	left: 0;
	width: min(360px, 86vw);
	height: 100%;
	display: flex;
	flex-direction: column;
	background: var(--cream);
	box-shadow: 0 0 40px rgba(82, 38, 10, 0.28);
	transform: translateX(-100%);
	transition: transform 0.35s ease;
	overflow-y: auto;
}
.menu-header-wrapper.active .menu-header {
	transform: translateX(0);
}

/* Top (оранж) */
.promo-sidebar__top {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 18px;
	background: var(--primary);
}
.promo-sidebar__logo {
	display: inline-flex;
	align-items: center;
}
.promo-sidebar__logo img {
	width: 120px;
	height: auto;
}
.promo-sidebar__lang {
	margin-left: auto;
}
.promo-sidebar__lang .language-box {
	z-index: 50;
}
.promo-sidebar__close {
	position: relative;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	padding: 0;
	background: transparent;
	border: 0;
	cursor: pointer;
	margin-left: auto;
}
.promo-sidebar__close::before,
.promo-sidebar__close::after {
	content: "";
	position: absolute;
	left: 6px;
	right: 6px;
	top: 50%;
	height: 3px;
	margin-top: -1.5px;
	border-radius: 2px;
	background: #fff;
}
.promo-sidebar__close::before { transform: rotate(45deg); }
.promo-sidebar__close::after { transform: rotate(-45deg); }

/* Middle — навігація (єдиний набір якорів) */
.promo-sidebar__middle {
	flex: 1 1 auto;
	padding: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.promo-sidebar .menu.menu-vertical > .menu-item {
	padding: 0;
	border-bottom: 1px solid rgba(82, 38, 10, 0.1);
}
.promo-sidebar .menu.menu-vertical > .menu-item:last-child {
	border-bottom: 0;
}
.promo-sidebar .menu a {
	display: block;
	padding: 14px 0;
	color: var(--brown);
	font-family: var(--font-family-2);
	font-weight: 700;
	font-size: 22px;
	transition: color 0.2s ease;
}
.promo-sidebar .menu a:hover {
	color: var(--primary-hover);
}

/* Bottom — телефон + соцмережі */
.promo-sidebar__bottom {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 18px 22px 26px;
	border-top: 1px solid rgba(82, 38, 10, 0.12);
}
.promo-sidebar__phone {
	background: var(--primary);
	color: #fff;
	padding: 13px 26px;
	border-radius: var(--radius-pill);
	font-family: var(--font-family-2);
	font-weight: 700;
	font-size: 19px;
	transition: background 0.3s ease;
}
.promo-sidebar__phone:hover {
	background: var(--primary-hover);
}
.promo-sidebar__socials {
	display: flex;
	gap: 12px;
}
.promo-sidebar .footer-soc {
	width: 50px;
	height: 50px;
	background: var(--primary);
}
.promo-sidebar .footer-soc:hover {
	background: var(--primary-hover);
}
.promo-sidebar .footer-soc img {
	filter: brightness(0) invert(1);
}