/*
 * The member portal's shell: the fixed header, the slide-out menu, the
 * welcome strip, the gym title and the footer — everything layouts/main.php
 * draws around a page. Registered by frontend\assets\ShellAsset.
 *
 * The page content in between is NOT restyled here. Each shell element
 * carries .bz for the shared components and focus ring, but the content
 * container does not, so a legacy page keeps its legacy look inside the new
 * frame until it moves over itself.
 *
 * Heights are unchanged from the old shell on purpose. The body clears the
 * fixed header with --buzz-top-margin (the 75px bar plus 10px above and
 * below), and the timetable's sticky toolbar hangs from the same sum; change
 * the header's height here and both have to move with it.
 */

/* ----------------------------------------------------------------- header -- */

.bz-shell-head {
	background: var(--buzz-black);
	/* A shadow, not a border: a border would add a pixel to the header's
	   height and the body's clearance would come up one short. */
	box-shadow: 0 1px 0 var(--buzz-line);
	padding: 10px 0;
}

.bz-shell-bar {
	height: var(--buzz-header-height);
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--buzz-space-3);
}

.bz-shell-logo {
	display: block;
	height: var(--buzz-header-height);
	width: auto;
	max-width: 100%;
}

.bz-shell-end {
	justify-self: end;
}

/* The two header controls: MENU on the left, LOG IN / LOG OUT on the right.
   Quiet outlines rather than green buttons — they are always there, and the
   page's own main action should be the green thing on screen. */
.bz .bz-shell-control {
	display: inline-flex;
	align-items: center;
	gap: var(--buzz-space-2);
	min-height: 40px;
	padding: 0 14px;
	background: transparent;
	border: 1px solid var(--buzz-line-strong);
	border-radius: var(--buzz-radius-pill);
	color: var(--buzz-text);
	font-family: var(--buzz-font-heading);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color .15s ease, color .15s ease;
}

.bz .bz-shell-control:hover,
.bz .bz-shell-control[aria-expanded="true"] {
	border-color: var(--buzz-green);
	color: var(--buzz-green);
}

.bz-shell-control .bi {
	font-size: 20px;
	line-height: 1;
}

/* On a phone the words go and the icons stay, as before — but the words are
   only hidden from sight, so a screen reader still says "Menu" and "Log out"
   instead of "button" and "link". */
@media (max-width: 575.98px) {
	.bz .bz-shell-control {
		padding: 0 10px;
	}

	.bz-shell-control .bz-shell-word {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}
}

/* ------------------------------------------------------------------- menu -- */

/*
 * The slide-out menu hangs from the bottom of the fixed header rather than
 * covering it, so the MENU control stays in reach and toggles it shut.
 *
 * Closed is visibility:hidden as well as off-screen. That takes every link out
 * of the tab order and away from screen readers, which a menu that is merely
 * slid out of view does not.
 */
.bz-shell-menu {
	position: fixed;
	top: var(--buzz-top-margin);
	left: 0;
	bottom: 0;
	z-index: 1029;
	width: min(var(--buzz-sidebar-width), 85vw);
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--buzz-surface-1);
	border-right: 1px solid var(--buzz-line);
	box-shadow: 12px 0 30px -12px rgba(0, 0, 0, 0.9);
	transform: translateX(-100%);
	visibility: hidden;
	transition: transform .25s ease, visibility .25s;
}

.bz-shell-menu.is-open {
	transform: none;
	visibility: visible;
	/* Visible at once on opening (the hide still waits for the slide), or
	   the link shell.js focuses would still be hidden at that instant and
	   focus() would silently do nothing. */
	transition: transform .25s ease, visibility 0s;
}

.bz-shell-menu-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--buzz-space-4) var(--buzz-space-4) var(--buzz-space-3) 20px;
	border-bottom: 1px solid var(--buzz-line-soft);
}

.bz .bz-shell-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--buzz-line-strong);
	border-radius: 50%;
	color: var(--buzz-text);
	font-size: 16px;
	cursor: pointer;
}

.bz .bz-shell-close:hover {
	border-color: var(--buzz-green);
	color: var(--buzz-green);
}

.bz-shell-links {
	list-style: none;
	margin: 0;
	padding: var(--buzz-space-2) 0 var(--buzz-space-6);
}

.bz .bz-shell-links a {
	display: flex;
	align-items: center;
	gap: var(--buzz-space-2);
	padding: 11px 20px;
	border-left: 3px solid transparent;
	color: var(--buzz-text-soft);
	font-family: var(--buzz-font-heading);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
}

.bz .bz-shell-links a:hover {
	background: var(--buzz-surface-2);
	color: var(--buzz-text);
}

/* The page you are on. A green bar down the edge and the full-white label,
   not the green alone — and aria-current says it to a screen reader. */
.bz .bz-shell-links a[aria-current="page"] {
	border-left-color: var(--buzz-green);
	background: var(--buzz-surface-2);
	color: var(--buzz-text);
}

/* Links that leave the members area (the app portal, the coaches pages on the
   public site) open in a new tab, and say so. */
.bz-shell-links .bi-box-arrow-up-right {
	font-size: 11px;
	color: var(--buzz-text-dim);
}

.bz-shell-overlay {
	position: fixed;
	top: var(--buzz-top-margin);
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1028;
	background: rgba(0, 0, 0, 0.7);
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s ease, visibility .25s;
}

.bz-shell-overlay.is-open {
	opacity: 1;
	visibility: visible;
}

/* The page behind an open menu does not scroll away underneath it.
 *
 * Hiding the overflow also takes away the scrollbar, so the page would get
 * that much wider and everything centred on it would jump sideways by half a
 * scrollbar. .bz-shell-gutter keeps the scrollbar's space reserved while the
 * menu is open. shell.js adds it only when there was a scrollbar to begin
 * with: on a page too short to scroll, reserving one would cause the very
 * jump it is there to prevent, the other way. */
html.bz-shell-locked {
	overflow: hidden;
}

html.bz-shell-gutter {
	scrollbar-gutter: stable;
}

@media (prefers-reduced-motion: reduce) {
	.bz-shell-menu,
	.bz-shell-overlay,
	.bz .bz-shell-control {
		transition: none;
	}
}

/* --------------------------------------------------------- welcome strip -- */

.bz-shell-welcome {
	background: var(--buzz-surface-1);
	border-bottom: 1px solid var(--buzz-line);
	color: var(--buzz-text-soft);
	font-size: 13px;
	text-align: center;
	padding: 7px var(--buzz-space-4);
}

.bz-shell-welcome .bi {
	color: var(--buzz-green);
	margin-right: 4px;
}

.bz.bz-shell-welcome a {
	color: var(--buzz-green);
	font-weight: 700;
	text-decoration: none;
}

.bz.bz-shell-welcome a:hover {
	color: var(--buzz-green-bright);
	text-decoration: underline;
}

/* ------------------------------------------------------------- gym title -- */

/* "READING GYM MEMBERS AREA", in the public site's display voice. */
.bz-shell-gym {
	border-bottom: 1px solid var(--buzz-line-soft);
	margin-bottom: 15px;
	padding: 18px var(--buzz-space-4);
	text-align: center;
}

.bz .bz-shell-gym-title {
	font-family: var(--buzz-font-display);
	font-style: italic;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	font-size: clamp(24px, 4vw, 34px);
	line-height: 1;
	color: var(--buzz-text);
	margin: 0;
}

.bz-shell-gym-title span {
	color: var(--buzz-green);
}

@media (max-width: 575.98px) {
	.bz-shell-gym-title span {
		display: block;
		margin-top: 4px;
	}
}

/* ----------------------------------------------------------------- footer -- */

.bz-shell-foot {
	margin-top: var(--buzz-space-5);
}

/* The green band. Black type on green, like every other green fill on the
   site: white on this green is about 2.5:1, black about 8.6:1. */
.bz .bz-shell-strap {
	background: var(--buzz-green);
	color: var(--buzz-on-accent);
	font-family: var(--buzz-font-display);
	font-style: italic;
	font-weight: 700;
	text-transform: uppercase;
	font-size: clamp(18px, 2.6vw, 26px);
	line-height: 1.2;
	text-align: center;
	padding: 18px var(--buzz-space-4);
	margin: 0;
}

.bz .bz-shell-copy {
	color: var(--buzz-text-dim);
	font-size: 12px;
	text-align: center;
	padding: var(--buzz-space-4);
	margin: 0;
}