/* KzS Mega Menu
 * Fonts: relies on Montserrat/Roboto already loaded site-wide via the
 * Elementor kit (both are already in its typography settings) -- not
 * re-enqueued here to avoid a duplicate font request. Falls back to
 * sans-serif if that's ever not true.
 *
 * Colors pulled from the site's real Elementor global kit, not invented:
 * accent/red #A5001E, link purple #350058, text #000.
 *
 * Specificity note: hello-elementor's own reset.css sets `a { color: #c36 }`
 * and `button, [type=button] { border: 1px solid #c36; ... }` with a solid
 * #c36 fill on :hover/:focus. A plain class selector like `.kzs-mm__link`
 * ties `[type=button]` in specificity (both one class/attribute selector),
 * and since reset.css happens to load after this stylesheet, the tie goes
 * to the theme, not us -- that's the pink borders/fills this looked like
 * before. Fixed by scoping every descendant rule under the drawer's own
 * `#kzs-mm` ID instead of its class -- an ID categorically outranks any
 * number of classes/attributes/pseudo-classes, so this wins regardless of
 * load order, with no !important needed inside the drawer. The one
 * exception is .kzs-mm-trigger, which lives outside #kzs-mm (it's placed
 * wherever the shortcode goes in the header) and so can't borrow that ID;
 * it uses !important on just its chrome properties instead.
 */

#kzs-mm,
#kzs-mm * {
	box-sizing: border-box;
}

.kzs-mm {
	position: fixed;
	inset: 0;
	z-index: 99999;
	pointer-events: none;
	visibility: hidden;
	transition: visibility 0.3s;
}

.kzs-mm.is-open {
	pointer-events: auto;
	visibility: visible;
	transition: visibility 0s;
}

#kzs-mm .kzs-mm__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(10, 9, 11, 0.6);
	backdrop-filter: blur(2px);
	opacity: 0;
	transition: opacity 0.3s ease;
}

/* Must be #kzs-mm.is-open, not .kzs-mm.is-open -- the base rule above is
 * ID-scoped for the same reason as everything else in this file, so an
 * open-state override scoped only by class would never actually beat it
 * (a real bug this file shipped with once already: the base "closed"
 * transform/opacity values won every time regardless of .is-open). */
#kzs-mm.is-open .kzs-mm__backdrop {
	opacity: 1;
}

#kzs-mm .kzs-mm__panel {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: 100%;
	max-width: 460px;
	display: flex;
	flex-direction: column;
	background: #141015;
	transform: translateX(100%);
	transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
	box-shadow: -8px 0 40px rgba(0, 0, 0, 0.35);
}

#kzs-mm.is-open .kzs-mm__panel {
	transform: translateX(0);
}

/* ── Rail (always visible; the whole panel on mobile, left column on desktop) ── */

#kzs-mm .kzs-mm__rail {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

#kzs-mm .kzs-mm__rail-top {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24px 24px 10px;
}

#kzs-mm .kzs-mm__login,
#kzs-mm .kzs-mm__login:hover,
#kzs-mm .kzs-mm__login:focus,
#kzs-mm .kzs-mm__login:active,
#kzs-mm .kzs-mm__login:visited {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: #e9e6ec;
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 13px;
	text-decoration: none;
	background: none;
	border: none;
	border-radius: 0;
	padding: 0;
}

#kzs-mm .kzs-mm__login-icon svg {
	width: 14px;
	height: 14px;
	display: block;
}

#kzs-mm .kzs-mm__close,
#kzs-mm .kzs-mm__close:hover,
#kzs-mm .kzs-mm__close:focus {
	width: 38px;
	height: 38px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #e9e6ec;
	padding: 0;
}

#kzs-mm .kzs-mm__close svg {
	width: 15px;
	height: 15px;
}

#kzs-mm .kzs-mm__nav {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: 6px 24px 10px;
}

#kzs-mm .kzs-mm__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

#kzs-mm .kzs-mm__item {
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

#kzs-mm .kzs-mm__link,
#kzs-mm .kzs-mm__link:hover,
#kzs-mm .kzs-mm__link:focus,
#kzs-mm .kzs-mm__link:active,
#kzs-mm .kzs-mm__link:visited {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 14px 4px;
	background: none;
	border: none;
	border-radius: 0;
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 19px;
	color: #c3bfc9;
	text-decoration: none;
	text-align: left;
}

#kzs-mm .kzs-mm__item--expandable .kzs-mm__link {
	color: #d9d5df;
}

#kzs-mm .kzs-mm__item--expandable.is-open > .kzs-mm__link {
	color: #ffffff;
}

#kzs-mm .kzs-mm__chevron svg {
	width: 15px;
	height: 15px;
	display: block;
	transition: transform 0.15s ease;
}

#kzs-mm .kzs-mm__item--expandable.is-open .kzs-mm__chevron svg {
	transform: rotate(90deg);
}

#kzs-mm .kzs-mm__accordion {
	padding: 0 4px 16px 14px;
}

#kzs-mm .kzs-mm__footer {
	flex: none;
	padding: 16px 24px 26px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* The real logo is black text on a light background, not a white-on-dark
 * wordmark -- wrapped in its own light card so it stays legible against
 * the drawer's dark background instead of vanishing into it. */
#kzs-mm .kzs-mm__logo-card {
	display: inline-block;
	background: #ffffff;
	border-radius: 6px;
	padding: 8px 12px;
	margin-bottom: 16px;
}

#kzs-mm .kzs-mm__logo {
	width: 130px;
	height: auto;
	display: block;
}

#kzs-mm .kzs-mm__socials {
	display: flex;
	gap: 10px;
}

#kzs-mm .kzs-mm__social,
#kzs-mm .kzs-mm__social:hover,
#kzs-mm .kzs-mm__social:focus,
#kzs-mm .kzs-mm__social:visited {
	width: 34px;
	height: 34px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #e9e6ec;
	background: transparent;
}

#kzs-mm .kzs-mm__social svg {
	width: 14px;
	height: 14px;
}

/* ── Desktop content pane (hidden on mobile; mega content never lands here below the breakpoint) ── */

#kzs-mm .kzs-mm__pane {
	display: none;
}

#kzs-mm .kzs-mm__pane-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	text-align: center;
	gap: 18px;
	opacity: 0.6;
}

#kzs-mm .kzs-mm__logo-card--pane {
	margin-bottom: 0;
}

#kzs-mm .kzs-mm__pane-empty-logo {
	width: 150px;
	height: auto;
	display: block;
}

#kzs-mm .kzs-mm__pane-empty p {
	margin: 0;
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	color: #9b96a4;
	max-width: 220px;
}

/* ── Mega content: shared between the mobile accordion and the desktop pane -- the SAME <template> markup lands in one or the other depending on viewport, see menu.js ── */

#kzs-mm .kzs-mm__mega-heading {
	margin: 0 0 6px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 22px;
	color: #f4f2f6;
}

#kzs-mm .kzs-mm__mega-rule {
	width: 40px;
	height: 3px;
	background: #A5001E;
	margin-bottom: 16px;
}

#kzs-mm .kzs-mm__mega-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}

#kzs-mm .kzs-mm__card,
#kzs-mm .kzs-mm__card:hover,
#kzs-mm .kzs-mm__card:focus,
#kzs-mm .kzs-mm__card:visited {
	display: block;
	padding: 16px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.045);
	border: 1px solid rgba(255, 255, 255, 0.09);
	text-decoration: none;
}

#kzs-mm .kzs-mm__card-icon {
	display: none;
}

#kzs-mm .kzs-mm__card-label {
	display: block;
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 15px;
	color: #f4f2f6;
	margin-bottom: 6px;
}

#kzs-mm .kzs-mm__card-children {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-left: 12px;
	border-left: 2px solid rgba(165, 0, 30, 0.4);
}

#kzs-mm .kzs-mm__card-child {
	display: block;
	font-family: 'Roboto', sans-serif;
	font-size: 12.5px;
	color: #b6b1bd;
}

/* ── Desktop: two-pane layout kicks in ── */

@media (min-width: 900px) {
	#kzs-mm .kzs-mm__panel {
		max-width: 1360px;
		flex-direction: row;
	}

	#kzs-mm .kzs-mm__rail {
		flex: none;
		width: 420px;
		border-right: 1px solid rgba(255, 255, 255, 0.08);
	}

	#kzs-mm .kzs-mm__rail-top {
		padding: 40px 36px 20px;
	}

	#kzs-mm .kzs-mm__nav {
		padding: 6px 36px 10px;
	}

	#kzs-mm .kzs-mm__link {
		font-size: 21px;
		padding: 13px 10px;
	}

	#kzs-mm .kzs-mm__footer {
		padding: 16px 36px 30px;
	}

	/* The mobile accordion is never shown on desktop -- content goes to the pane instead. */
	#kzs-mm .kzs-mm__accordion {
		display: none !important;
	}

	#kzs-mm .kzs-mm__pane {
		display: block;
		flex: 1;
		min-width: 0;
		background: #18121d;
		padding: 56px 64px;
		overflow-y: auto;
	}

	#kzs-mm .kzs-mm__pane .kzs-mm__mega-heading {
		font-size: 36px;
	}

	#kzs-mm .kzs-mm__pane .kzs-mm__mega-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	#kzs-mm .kzs-mm__pane .kzs-mm__card {
		padding: 22px;
	}

	#kzs-mm .kzs-mm__pane .kzs-mm__card-icon {
		display: flex;
		width: 32px;
		height: 32px;
		border-radius: 999px;
		border: 1.5px solid #A5001E;
		align-items: center;
		justify-content: center;
		margin-bottom: 14px;
	}

	#kzs-mm .kzs-mm__pane .kzs-mm__card-icon svg {
		width: 13px;
		height: 13px;
		color: #A5001E;
	}
}

/* ── Trigger button (placed via shortcode in the Elementor header) ──
 * Lives outside #kzs-mm, in whatever header template the shortcode is
 * dropped into, so it can't borrow that ID's specificity -- !important on
 * its chrome properties instead, since it's one small, isolated button. */

/* color: inherit sounded nice in theory, but with nothing upstream setting
 * an explicit text color, it resolved to the page's plain default (black)
 * instead of whatever the surrounding header actually looks like -- which
 * is how this went invisible against a dark header. A CSS variable
 * default is visible out of the box and still overridable per-placement
 * (e.g. a snippet targeting --kzs-mm-trigger-color on a lighter header). */
.kzs-mm-trigger,
.kzs-mm-trigger:hover,
.kzs-mm-trigger:focus,
.kzs-mm-trigger:active,
.kzs-mm-trigger:visited {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 44px !important;
	height: 44px !important;
	padding: 0 !important;
	background: none !important;
	border: none !important;
	border-radius: 0 !important;
	color: var(--kzs-mm-trigger-color, #e9e6ec) !important;
}

.kzs-mm-trigger__icon svg {
	width: 24px;
	height: 24px;
	display: block;
}

body.kzs-mm-locked {
	overflow: hidden;
}