/*
 * Site header menu panels and the footer (inc/nav.php, footer.php).
 * Loaded after style.css and home.css, so these rules win over the older .mega__* and .footer__grid ones.
 */

:root {
	--mx-bg: #fff;
	--mx-sf: #f4f3f8;
	--mx-sf-2: #faf9fc;
	--mx-hi: rgba(108, 78, 245, 0.08);
	--mx-shadow: 0 30px 70px -20px rgba(19, 20, 48, 0.28), 0 2px 6px rgba(19, 20, 48, 0.06);
	--mx-v-s: #e6e3f0;
	--mx-v-c: #fff;
	--mx-v-line: #d9d5e6;
	--mx-v-m: #b9b5c9;
	--mx-promo: linear-gradient(160deg, #efeaff 0%, #f8f6ff 70%);
}
[data-theme="dark"] {
	--mx-bg: #150c22;
	--mx-sf: rgba(255, 255, 255, 0.06);
	--mx-sf-2: rgba(255, 255, 255, 0.03);
	--mx-hi: rgba(143, 124, 255, 0.16);
	--mx-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.04);
	--mx-v-s: rgba(255, 255, 255, 0.12);
	--mx-v-c: #241a36;
	--mx-v-line: rgba(255, 255, 255, 0.16);
	--mx-v-m: rgba(255, 255, 255, 0.35);
	--mx-promo: linear-gradient(160deg, #2a1a4a 0%, #1b1030 75%);
}

/* ------------------------------------------------------------------ shared pieces */
.mx__label {
	margin: 0 0 12px;
	color: var(--muted);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1.3;
	text-transform: uppercase;
}
.mx-card {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 10px;
	border-radius: 14px;
	color: var(--ink);
	text-decoration: none;
	transition: background 0.18s;
}
.mx-card:hover,
.mx-card:focus-visible { background: var(--mx-sf); }
.mx-card__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: var(--radius);
	background: var(--mx-sf);
	color: var(--accent);
	transition: background 0.18s, color 0.18s;
}
.mx-card__icon .icon { width: 18px; height: 18px; }
.mx-card:hover .mx-card__icon,
.mx-card:focus-visible .mx-card__icon { background: var(--accent); color: #fff; }
.mx-card__body { display: grid; gap: 2px; min-width: 0; padding-top: 1px; }
.mx-card__title { color: var(--ink); font-size: 15px; font-weight: 600; line-height: 1.3; }
.mx-card__text { overflow: hidden; color: var(--muted); font-size: 13px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }

/* Mini drawings (jx_nav_visual) */
.mx-vis { display: block; width: 100%; height: auto; overflow: visible; }
.mx-vis .v-s { fill: var(--mx-v-s); }
.mx-vis .v-c { fill: var(--mx-v-c); }
.mx-vis .v-line { stroke: var(--mx-v-line); stroke-width: 1.5; }
.mx-vis .v-a { fill: var(--accent); }
.mx-vis .v-m { fill: var(--mx-v-m); }
.mx-vis .v-w { fill: #fff; opacity: 0.85; }
.mx-vis .v-stroke { fill: none; stroke: var(--mx-v-line); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.mx-vis .v-acc { stroke: var(--accent); }
.mx-vis .v-move { transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.mx-feat:hover .v-move { transform: translateX(29px); }
.mx-vis .v-grow { transform-box: fill-box; transform-origin: left; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); transform: scaleX(0.7); }
.mx-feat:hover .v-grow { transform: scaleX(1.6); }
.mx-vis .v-nudge { transition: transform 0.4s; }
.mx-feat:hover .v-nudge { transform: translateX(3px); }
.mx-vis .v-draw { stroke-dasharray: 30; stroke-dashoffset: 0; }
.mx-feat:hover .v-draw { animation: mx-draw 0.6s ease-out; }
.is-open .mx-vis .v-blink,
.mnav .mx-vis .v-blink { animation: mx-blink 1.4s ease-in-out infinite; }
.mx-vis .v-d1 { animation-delay: 0.2s !important; }
.mx-vis .v-d2 { animation-delay: 0.4s !important; }
.is-open .mx-vis .v-pulse { animation: mx-pulse 2.4s ease-in-out infinite; }
@keyframes mx-blink { 50% { opacity: 0.25; } }
@keyframes mx-pulse { 50% { opacity: 0.45; } }
@keyframes mx-draw { from { stroke-dashoffset: 30; } }

/* ------------------------------------------------------------------ desktop panels */
@media (min-width: 1101px) {
	.mega { padding: 10px clamp(16px, 3vw, 40px) 0; }
	.mx {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 280px;
		grid-template-areas: "main promo" "bar bar";
		width: min(1320px, 100%);
		max-height: calc(100vh - var(--header, 76px) - 40px);
		margin: 0 auto;
		overflow: auto;
		border: 1px solid var(--line);
		border-radius: 22px;
		background: var(--mx-bg);
		box-shadow: var(--mx-shadow);
		text-align: left;
		overscroll-behavior: contain;
	}
	.mx.has-rail { grid-template-columns: 240px minmax(0, 1fr) 280px; grid-template-areas: "rail main promo" "bar bar bar"; }
	.mx__rail {
		grid-area: rail;
		display: flex;
		flex-direction: column;
		gap: 4px;
		padding: 24px 14px 20px 20px;
		border-right: 1px solid var(--line);
	}
	.mx__rail .mx__label { margin-left: 12px; }
	.mx__tab {
		display: grid;
		gap: 2px;
		width: 100%;
		margin-bottom: 2px;
		padding: 10px 12px;
		border: 0;
		border-radius: 12px;
		background: transparent;
		color: var(--ink);
		font: inherit;
		text-align: left;
		cursor: pointer;
		transition: background 0.18s;
	}
	.mx__tab:hover { background: var(--mx-sf); }
	.mx__tab.is-on { background: var(--mx-hi); }
	.mx__tab-title { font-size: 15px; font-weight: 600; line-height: 1.3; }
	.mx__tab.is-on .mx__tab-title { color: var(--accent-2); }
	.mx__tab-text { color: var(--muted); font-size: 13px; line-height: 1.4; }
	.mx__all { display: inline-flex; align-items: center; gap: 6px; margin: auto 12px 0; padding-top: 16px; color: var(--accent-2); font-size: 14px; font-weight: 600; text-decoration: none; }
	.mx__all .icon { width: 16px; height: 16px; transition: transform 0.2s; }
	.mx__all:hover .icon { transform: translateX(3px); }
	.mx__main { grid-area: main; min-width: 0; padding: 24px 24px 22px; }
	.mx__pane { animation: mx-in 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
	.mx__pane[hidden] { display: none; }
	.mx__pane .mx__label { margin-left: 10px; }
	.mx__grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr));
		gap: 2px 8px;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.mx:not(.has-rail) .mx__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.mx__feats {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
		gap: 10px;
		margin: 18px 0 0;
		padding: 18px 0 0;
		border-top: 1px solid var(--line);
		list-style: none;
	}
	.mx-feat {
		display: flex;
		align-items: center;
		gap: 14px;
		height: 100%;
		padding: 12px;
		border-radius: 16px;
		background: var(--mx-sf);
		color: var(--ink);
		text-decoration: none;
		transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), background 0.18s;
	}
	.mx-feat:hover,
	.mx-feat:focus-visible { transform: translateY(-2px); background: var(--mx-hi); }
	.mx__feats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mx__feats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.mx__feats--3 .mx-feat { flex-direction: column; align-items: flex-start; gap: 10px; }
	.mx__feats--3 .mx-feat__art { width: 76px; }
	.mx-feat__art { flex: none; width: 84px; padding: 6px 4px; border-radius: var(--radius); background: var(--mx-bg); }
	.mx-feat__body { display: grid; gap: 2px; min-width: 0; }
	.mx-feat__title { font-size: 14.5px; font-weight: 600; line-height: 1.3; }
	.mx-feat__text { color: var(--muted); font-size: 13px; line-height: 1.4; }
	.mx__promo {
		grid-area: promo;
		align-self: start; /* Same height on every panel: it does not stretch with a taller list. */
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
		margin: 14px 14px 14px 0;
		padding: 18px;
		border-radius: 18px;
		background: var(--mx-promo);
		color: var(--ink);
	}
	.mx__promo-art { display: block; width: 100%; margin-bottom: 6px; padding: 10px; border-radius: 12px; background: var(--mx-bg); box-shadow: 0 10px 24px -14px rgba(19, 20, 48, 0.35); }
	.mx__promo-kicker { padding: 3px 10px; border-radius: 999px; background: var(--mx-bg); color: var(--accent-2); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
	.mx__promo-title { margin: 0; color: var(--ink); font-size: 18px; font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; }
	.mx__promo-text { flex: 0 0 auto; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
	.mx__promo .mx__promo-btn { min-height: 42px; margin-top: 6px; padding: 0 18px; font-size: 15px; }
	.mx__promo-btn .icon { width: 16px; height: 16px; }
	.mx__bar {
		grid-area: bar;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		padding: 10px 16px 10px 22px;
		border-top: 1px solid var(--line);
		background: var(--mx-sf-2);
	}
	.mx__bar-links { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; }
	.mx__bar-links li { display: flex; align-items: center; }
	.mx__bar-links li + li::before { content: ""; width: 1px; height: 14px; margin: 0 4px; background: var(--line); }
	.mx__bar-links a { padding: 6px 10px; border-radius: 999px; color: var(--muted); font-size: 14px; font-weight: 500; text-decoration: none; transition: color 0.18s, background 0.18s; }
	.mx__bar-links a:hover { background: var(--mx-sf); color: var(--ink); }
	.mx__close {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		min-height: 36px;
		padding: 0 12px;
		border: 0;
		border-radius: 999px;
		background: transparent;
		color: var(--muted);
		font: inherit;
		font-size: 14px;
		font-weight: 500;
		cursor: pointer;
	}
	.mx__close:hover { background: var(--mx-sf); color: var(--ink); }
	.mx__close .icon { width: 16px; height: 16px; }
	.mx a:focus-visible,
	.mx button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
	@keyframes mx-in { from { opacity: 0; } to { opacity: 1; } }
}
@media (min-width: 1101px) and (max-width: 1279px) {
	.mx,
	.mx.has-rail { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "bar"; }
	.mx.has-rail { grid-template-columns: 220px minmax(0, 1fr); grid-template-areas: "rail main" "bar bar"; }
	.mx__promo { display: none; }
}

/* ------------------------------------------------------------------ phone and tablet panel */
.mnav { display: none; }
@media (max-width: 1100px) {
	body.nav-open { overflow: hidden; }
	[data-theme] .nav {
		height: var(--mnav-h, calc(100dvh - 72px));
		max-height: none;
		padding: 0;
		overflow: hidden;
		border-top: 1px solid var(--line);
		border-bottom: 0;
		background: var(--mx-bg);
	}
	.nav .nav-m { display: none; }
	.mnav { position: relative; display: block; height: 100%; overflow: hidden; }
	.mnav__view {
		position: absolute;
		inset: 0;
		display: flex;
		flex-direction: column;
		padding: 8px 20px calc(24px + env(safe-area-inset-bottom, 0px));
		overflow-y: auto;
		overscroll-behavior: contain;
		visibility: hidden;
		transform: translateX(100%);
		transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.32s;
		-webkit-overflow-scrolling: touch;
	}
	.mnav__view.is-on { visibility: visible; transform: none; transition-delay: 0s; }
	.mnav__view.is-left { transform: translateX(-28%); }
	.mnav__list { margin: 0; padding: 0; list-style: none; }
	.mnav__go {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		width: 100%;
		min-height: 58px;
		padding: 0 4px;
		border: 0;
		border-bottom: 1px solid var(--line);
		background: transparent;
		color: var(--ink);
		font: inherit;
		font-size: 20px;
		font-weight: 500;
		letter-spacing: -0.02em;
		text-align: left;
		text-decoration: none;
		cursor: pointer;
	}
	.mnav__go .icon { width: 20px; height: 20px; color: var(--muted); }
	.mnav__go.is-current > span { color: var(--accent-2); }
	.mnav__foot { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 24px; }
	.mnav__foot .btn { flex: 1 1 auto; justify-content: center; white-space: nowrap; min-height: 48px; padding: 0 18px; font-size: 16px; }
	.mnav__head {
		position: sticky;
		top: -8px;
		z-index: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		margin: -8px -20px 6px;
		padding: 10px 20px;
		border-bottom: 1px solid var(--line);
		background: var(--mx-bg);
	}
	.mnav__back {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		min-height: 40px;
		padding: 0 14px 0 10px;
		border: 0;
		border-radius: 999px;
		background: var(--mx-sf);
		color: var(--ink);
		font: inherit;
		font-size: 15px;
		font-weight: 500;
		cursor: pointer;
	}
	.mnav__back .icon { width: 18px; height: 18px; transform: rotate(180deg); }
	.mnav__title { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; color: var(--accent-2); font-size: 15px; font-weight: 600; text-decoration: none; }
	.mnav__title .icon { width: 16px; height: 16px; }
	.mnav .mx__label { margin: 18px 0 4px; }
	.mnav__cards { margin: 0; padding: 0; list-style: none; }
	.mnav__card { display: flex; align-items: flex-start; gap: 12px; min-height: 52px; padding: 9px 8px; margin: 0 -8px; border-radius: 12px; color: var(--ink); text-decoration: none; }
	.mnav__card:hover,
	.mnav__card:focus-visible { background: var(--mx-sf); }
	.mnav__card[aria-current] .mx-card__title { color: var(--accent-2); }
	.mnav__card .mx-card__text { white-space: normal; }
	.mnav__bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); list-style: none; }
	.mnav__bar a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; background: var(--mx-sf); color: var(--ink); font-size: 14px; font-weight: 500; text-decoration: none; }
}
@media (max-width: 1100px) and (min-width: 721px) {
	.mnav__view { padding-inline: max(32px, calc((100% - 720px) / 2)); }
	.mnav__head { margin-inline: calc(-1 * max(32px, calc((100% - 720px) / 2))); padding-inline: max(32px, calc((100% - 720px) / 2)); }
	.mnav__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
	.mnav__card { margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.mnav__view,
	.mx__pane,
	.mx-feat,
	.mx-vis * { transition: none !important; animation: none !important; }
}

/* ------------------------------------------------------------------ footer (columns) */
.site-footer--columns { padding: 0; }
.ft-top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px 48px;
	padding: 44px 0 36px;
	border-bottom: 1px solid var(--line);
}
.ft-top__brand { min-width: 0; max-width: 40rem; }
.ft-top__brand p { margin: 12px 0 0; color: var(--muted); font-size: 16px; line-height: 1.5; }
.ft-top__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ft-top__actions .btn { min-height: 46px; padding: 0 22px; font-size: 16px; }
.ft-top__actions .btn .icon { width: 18px; height: 18px; }
[data-theme="light"] .ft-top__actions .btn--ghost { border: 1px solid var(--line); background: var(--mx-bg); color: var(--ink); }
[data-theme="dark"] .ft-top__actions .btn--ghost { border: 1px solid rgba(255, 255, 255, 0.18); color: #fff; }

.ft-cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 32px;
	padding: 36px 0 40px;
}
.ft-cols--nl { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(280px, 1.5fr); }
.ft-col h2 { margin: 0 0 14px; }
.ft-col__btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ink);
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1.4;
	text-align: left;
	text-transform: uppercase;
	cursor: default;
}
[data-theme="light"] .site-footer .ft-col h2 { color: var(--ink); font-weight: 600; }
.ft-col__btn .icon { display: none; width: 18px; height: 18px; transition: transform 0.25s; }
.ft-col .footer__menu li + li { margin-top: 9px; }
.ft-col .footer__menu a { font-size: 15px; }
.ft-nl .newsletter h2 { margin: 0 0 6px; color: var(--ink); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.ft-nl .newsletter p { font-size: 14px; }
.ft-nl .newsletter form { margin-top: 12px; }

.site-footer .ft-base {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 24px;
	margin: 0 auto;
	padding: 18px 0 26px;
	border-top: 1px solid var(--line);
	color: var(--muted);
	font-size: 14px;
}
.ft-base p { margin: 0; }
.ft-base .footer__legal { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0; }
.ft-base__end { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.ft-base .socials { gap: 8px; }
.ft-base .social { width: 36px; height: 36px; }
.ft-base .social .icon { width: 15px; height: 15px; }
.ft-base .lang__list { top: auto; bottom: calc(100% + 8px); }

@media (max-width: 1000px) {
	.ft-cols--nl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ft-cols--nl .ft-nl { grid-column: 1 / -1; }
	.ft-cols:not(.ft-cols--nl) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
	.ft-top { flex-direction: column; align-items: stretch; padding: 32px 0 24px; }
	.ft-top__actions .btn { flex: 1 1 auto; justify-content: center; padding: 0 18px; white-space: nowrap; }
	.ft-cols,
	.ft-cols--nl,
	.ft-cols:not(.ft-cols--nl) { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 4px 0 24px; }
	.ft-col { border-bottom: 1px solid var(--line); }
	.ft-col h2 { margin: 0; }
	.ft-col__btn { min-height: 54px; cursor: pointer; font-size: 13px; }
	.ft-col__btn .icon { display: block; color: var(--muted); }
	.ft-col__btn[aria-expanded="true"] .icon { transform: rotate(180deg); }
	.ft-col .footer__menu { padding: 0 0 16px; }
	.ft-col .footer__menu[hidden] { display: none; }
	.ft-cols--nl .ft-nl { padding-top: 24px; }
	.site-footer .ft-base { flex-direction: column; align-items: flex-start; gap: 14px; }
	.ft-base__end { margin-left: 0; }
}

/* ------------------------------------------------------------------ header fit */
/* Signed in, the bar carries three more icons: the search stays an icon until there is room for the field,
   and on narrower desktops the workspace button steps aside (it is also in the account menu). */
@media (min-width: 1400px) and (max-width: 1699px) {
	body.logged-in .bar__actions .search-trigger { width: 44px; padding: 0; justify-content: center; border-color: transparent; border-radius: 12px; background: transparent; color: var(--ink); }
	body.logged-in .bar__actions .search-trigger__text,
	body.logged-in .bar__actions .search-trigger kbd { display: none; }
}
@media (min-width: 1101px) and (max-width: 1360px) {
	body.logged-in .bar__actions > .btn--solid { display: none; }
}

/* Website header: the person's photo in the account badge and the menu head. */
.acct__me[data-photo], .acct__avatar[data-photo]{ background-size:cover; background-position:center; color:transparent; }