/*
 * MA-ZAL Group — the frame of every page: header (desktop bar / phone app bar), language switch, side menu,
 * phone dock, footer, account side menu. Reads tokens.css only.
 */

/* ---------- header ---------- */
.mzs-header {
	position: sticky;
	top: 0;
	z-index: var(--z-sticky);
	padding-top: var(--safe-top);
	background: var(--c-surface);
	border-bottom: var(--b-1);
}

.mzs-header__bar {
	display: flex;
	align-items: center;
	gap: var(--s-5);
	min-height: 5.25rem;
}

.mzs-brand {
	display: inline-flex;
	align-items: center;
	gap: var(--s-3);
	color: var(--c-ink);
	text-decoration: none;
	min-width: 0;
}

.mzs-brand:hover { color: var(--c-ink); }
.mzs-brand__logo { width: 2.75rem; height: 2.75rem; flex: 0 0 auto; }

.mzs-brand__name {
	font-size: 1.375rem;
	font-weight: var(--fw-bold);
	letter-spacing: 0.01em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	direction: ltr;
}

.mzs-nav {
	display: flex;
	align-items: center;
	gap: var(--s-6);
	margin-inline: auto;
}

.mzs-nav a {
	position: relative;
	padding-block: var(--s-2);
	color: var(--c-ink);
	font-size: var(--fs-body);
	font-weight: var(--fw-medium);
}

.mzs-nav a.is-current::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 2px;
	border-radius: var(--r-pill);
	background: var(--c-gold);
}

.mzs-header__tools {
	display: flex;
	align-items: center;
	gap: var(--s-3);
}

.mzs-menu-btn {
	display: none; /* the side menu button shows on phones and tablets only */
}

/* ---------- language switch (flags and names from demo-ui-languages.json) ---------- */
.mzs-lang { position: relative; }

.mzs-lang__current {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	min-height: var(--h-control-sm);
	padding: 0 var(--s-3);
	border: var(--b-1);
	border-radius: var(--r-pill);
	background: transparent;
	color: var(--c-ink);
	font: var(--fw-semi) var(--fs-small)/1 var(--f-text);
	cursor: pointer;
}

.mzs-flag {
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
}

.mzs-lang__list {
	position: absolute;
	inset-inline-end: 0;
	top: calc(100% + var(--s-2));
	z-index: var(--z-drawer);
	display: grid;
	min-width: 11rem;
	margin: 0;
	padding: var(--s-2);
	list-style: none;
	background: var(--c-surface);
	border: var(--b-1);
	border-radius: var(--r-md);
	box-shadow: var(--shadow-1);
}

.mzs-lang__list button {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	width: 100%;
	min-height: var(--tap);
	padding: 0 var(--s-3);
	border: 0;
	border-radius: var(--r-sm);
	background: transparent;
	color: var(--c-ink);
	font: var(--fw-medium) var(--fs-small)/1 var(--f-text);
	text-align: start;
	cursor: pointer;
}

.mzs-lang__list button:hover,
.mzs-lang__list button.is-active { background: var(--c-gold-soft); }

/* ---------- side menu (phones and tablets) ---------- */
.mzs-drawer {
	position: fixed;
	inset-block: 0;
	inset-inline-start: 0;
	z-index: var(--z-drawer);
	display: flex;
	flex-direction: column;
	gap: var(--s-5);
	width: min(86vw, 22rem);
	box-sizing: border-box;
	padding: calc(var(--s-5) + var(--safe-top)) var(--s-5) calc(var(--s-5) + var(--safe-bottom));
	overflow-y: auto;
	background: var(--c-surface);
	box-shadow: var(--shadow-1);
}

.mzs-drawer[hidden] { display: none; }

.mzs-drawer__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.mzs-drawer__nav {
	display: grid;
	gap: var(--s-1);
}

.mzs-drawer__nav a {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	min-height: var(--tap);
	padding: 0 var(--s-3);
	border-radius: var(--r-sm);
	color: var(--c-ink);
	font-weight: var(--fw-medium);
}

.mzs-drawer__nav a.is-current { background: var(--c-gold-soft); }
.mzs-drawer__label { font-size: var(--fs-micro); font-weight: var(--fw-semi); color: var(--c-ink-2); padding-inline: var(--s-3); }

.mzs-drawer__langs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s-2);
}

.mzs-drawer__langs button {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	min-height: var(--tap);
	padding: 0 var(--s-3);
	border: var(--b-1);
	border-radius: var(--r-sm);
	background: transparent;
	color: var(--c-ink);
	font: var(--fw-medium) var(--fs-small)/1 var(--f-text);
	cursor: pointer;
}

.mzs-drawer__langs button.is-active { border-color: var(--c-gold); background: var(--c-gold-soft); }

.mzs-drawer-scrim {
	position: fixed;
	inset: 0;
	z-index: calc(var(--z-drawer) - 1);
	background: var(--c-scrim);
}

.mzs-drawer-scrim[hidden] { display: none; }

/* ---------- dock (phones) ---------- */
.mzs-dock {
	display: none;
}

/* ---------- footer ---------- */
.mzs-footer {
	background: var(--c-night);
	color: var(--c-on-night-2);
	font-size: var(--fs-small);
}

.mzs-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(10rem, 1fr));
	gap: var(--s-6);
	padding-block: var(--s-8) var(--s-6);
}

.mzs-footer__brand { display: grid; gap: var(--s-3); align-content: start; max-width: 22rem; }
.mzs-footer .mzs-brand { color: var(--c-on-night); }
.mzs-footer .mzs-brand:hover { color: var(--c-on-night); }
.mzs-footer__title { color: var(--c-on-night); font-size: var(--fs-small); font-weight: var(--fw-semi); margin-block-end: var(--s-3); }
.mzs-footer__links { display: grid; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.mzs-footer a { color: var(--c-on-night-2); }
.mzs-footer a:hover { color: var(--c-gold-night); }

.mzs-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--s-3);
	padding-block: var(--s-5);
	border-top: 1px solid var(--c-night-line);
	color: var(--c-on-night-3);
	font-size: var(--fs-tiny);
}

/* ---------- account frame (layout.php: side menu + page) ---------- */
.mzs-account {
	display: grid;
	grid-template-columns: 16rem minmax(0, 1fr);
	gap: var(--s-6);
	align-items: start;
}

.mzs-account__body { min-width: 0; }

.mzs-side {
	min-width: 0;
	position: sticky;
	top: calc(5.25rem + var(--s-5));
	display: grid;
	gap: var(--s-4);
	padding: var(--s-4);
	background: var(--c-surface);
	border: var(--b-1);
	border-radius: var(--r-md);
}

.mzs-side__group { display: grid; gap: var(--s-1); }
.mzs-side__label { font-size: var(--fs-micro); font-weight: var(--fw-semi); color: var(--c-ink-2); padding-inline: var(--s-3); }

.mzs-side a {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	min-height: var(--tap);
	padding: 0 var(--s-3);
	border-radius: var(--r-sm);
	color: var(--c-ink);
	font-size: var(--fs-small);
	font-weight: var(--fw-medium);
}

.mzs-side a.is-current { background: var(--c-gold-soft); }

.mzs-side__user {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	padding: var(--s-2) var(--s-3) var(--s-4);
	border-bottom: var(--b-1);
}

.mzs-side__who { display: grid; min-width: 0; }

.mzs-side__email {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--c-ink-2);
	font-size: var(--fs-micro);
}

.mzs-avatar {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: var(--c-gold-soft);
	color: var(--c-gold-text);
	font-weight: var(--fw-bold);
}

.mzs-denied {
	display: grid;
	justify-items: start;
	gap: var(--s-4);
	max-width: var(--reading);
	padding-block: var(--s-8);
}

/* ---------- phones and tablets ---------- */
@media (max-width: 63.99rem) {
	.mzs-header__bar { min-height: var(--bar-h); gap: var(--s-2); }
	.mzs-nav,
	.mzs-header__tools .mzs-lang,
	.mzs-header__tools .mzs-btn--ghost { display: none; }
	.mzs-menu-btn { display: grid; margin-inline-start: calc(var(--s-2) * -1); }
	.mzs-brand__logo { width: 2rem; height: 2rem; }
	.mzs-brand__name { font-size: 1.125rem; }
	.mzs-header__tools { margin-inline-start: auto; }

	.mzs-dock {
		position: fixed;
		inset-inline: var(--s-3);
		bottom: calc(var(--s-3) + var(--safe-bottom));
		z-index: var(--z-dock);
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
		align-items: center;
		height: var(--dock-h);
		padding-inline: var(--s-1);
		background: var(--c-surface);
		border: var(--b-1);
		border-radius: var(--r-lg);
		box-shadow: var(--shadow-1);
	}

	.mzs-dock a,
	.mzs-dock button {
		display: grid;
		justify-items: center;
		gap: 3px;
		min-height: var(--tap);
		padding: var(--s-1) 0;
		border: 0;
		background: transparent;
		color: var(--c-ink-2);
		font: var(--fw-semi) 0.71875rem/1.2 var(--f-text);
		text-align: center;
		cursor: pointer;
	}

	.mzs-dock .is-current { color: var(--c-gold-text); }

	body.mzs { padding-bottom: calc(var(--dock-h) + var(--s-5) + var(--safe-bottom)); }
	.mzs-account { grid-template-columns: 1fr; }
	.mzs-side { display: none; }
	.mzs-footer__grid { grid-template-columns: 1fr 1fr; }
	.mzs-footer__brand { grid-column: 1 / -1; }
}