/* ============================================================
   Mobile and tablet menu (< 1024px) - full-screen Primary Navy overlay
   opened by the hamburger (a native <dialog>, see navigation.js).
   Designs: menu-mobile and menu-mobile-expanded (402 x 874).
   Spec: docs/homepage-build-brief.md 3.4-3.6.
   Phones: full width. Tablet (768-1023, proposal 3.5): the same content
   in a centred 560px column, logo at its desktop size.
   Rows: Koulen 24 Cream, 1px Grey Dark lines, 61px tall (62px pitch with
   the line); open row Light Orange with the chevron flipped; sub-items
   Poppins 16 Cream on a 33px rhythm. Socials pinned to the bottom.
   ============================================================ */

/* Reset the browser's dialog box: full viewport, no frame. */
.mobile-menu {
	position: fixed;
	inset: 0;
	z-index: 100;
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	border: 0;
	background-color: var(--color-surface-dark);
	color: var(--color-text-on-dark);
}

.mobile-menu:not([open]) {
	display: none;
}

/* navigation.js closes the menu when the window reaches the desktop
   layout (1024px), where the hamburger is hidden. */
.mobile-menu::backdrop {
	background-color: var(--color-surface-dark);
}

.mobile-menu__inner {
	display: flex;
	flex-direction: column;
	min-height: 100%;
}

/* ---------- Top: logo + close X (no Book pill: the BOOK row replaces it) ---------- */

.mobile-menu__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 103px;
	padding: 0 8px 0 33.5px;
}

.mobile-menu__logo {
	flex: 0 1 168px;
	align-self: flex-start;
	min-width: 0;
	margin-top: 19px;
	line-height: 0;
}

.mobile-menu__logo img {
	width: 100%;
	height: auto;
}

/* White X, 22 x 22 visible, in a 44 x 44 target. */
.mobile-menu__close {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: var(--tap-target);
	height: var(--tap-target);
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-white);
	transition: color var(--transition);
}

.mobile-menu__close:hover {
	color: var(--color-link-hover-on-dark);
}

/* ---------- Rows ---------- */

.mobile-menu__list {
	margin: 0;
	padding: 0;
	border-top: var(--border-hairline) solid var(--color-divider-on-dark);
	list-style: none;
}

.mobile-menu__item {
	border-bottom: var(--border-hairline) solid var(--color-divider-on-dark);
}

/* Toggle rows and the plain CONTACT / BOOK rows share one shape. The
   content box is the label's 24px line, so the chevron stays put when an
   open row trims its bottom padding. */
.mobile-menu__toggle,
.mobile-menu__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 18.5px 17.5px 18.5px 30px;
	border: 0;
	background: none;
	color: var(--color-text-on-dark);
	font-family: var(--font-display);
	font-size: var(--fs-card-title-lg);
	font-weight: var(--fw-display);
	font-synthesis: none;
	line-height: 24px;
	text-align: left;
	text-decoration: none;
	text-transform: uppercase;
	transition: color var(--transition);
}

.mobile-menu__toggle:hover,
.mobile-menu__link:hover,
.mobile-menu__item.is-current > .mobile-menu__link {
	color: var(--color-link-hover-on-dark);
}

/* Open row: Light Orange label and chevron, chevron up. */
.mobile-menu__toggle[aria-expanded="true"] {
	padding-bottom: 9px;
	color: var(--color-accent);
}

/* 17 x 9 chevron in a 26px box: the -2px top margin keeps the row at the
   label's 24px line and centres the chevron on the capitals. */
.mobile-menu__chevron {
	flex: none;
	margin-top: -2px;
	transition: transform var(--transition);
}

.mobile-menu__toggle[aria-expanded="true"] .mobile-menu__chevron {
	transform: rotate(180deg);
}

/* ---------- Sub-items ---------- */

/* Expanded Courses as drawn (402): Rock, Mountain, Winter, Leadership on a
   33px rhythm, View All 36px after Leadership, the row ending at y 340. */
.mobile-menu__sub {
	margin: 0;
	padding: 0 21px 16.5px 42px;
	list-style: none;
}

.mobile-menu__sub[hidden] {
	display: none;
}

.mobile-menu__sublink {
	display: block;
	padding-block: 4.5px;
	color: var(--color-text-on-dark);
	font-size: var(--fs-body);
	line-height: 24px;
	text-decoration: none;
	transition: color var(--transition);
}

.mobile-menu__sublink--all {
	margin-top: 3px;
	font-weight: var(--fw-bold);
}

/* A discipline's groups under it (Sam 2026-10-15: ML Development and
   Further Professional Development under Leadership in Workshops). */
.mobile-menu__sublink--child {
	padding-left: 18px;
}

/* "See the full ML pathway" under Leadership / ML Development (as the
   desktop panels; not designed for phones): SemiBold Light Orange with
   an arrow (6.05:1 on Primary Navy); hover, keyboard focus and the
   current page turn it Cream, and the arrow slides (not under reduced
   motion; hover only where the pointer can hover). Two classes, so it
   wins over the sub-links' own hover and current colour below. */
.mobile-menu__sublink.mobile-menu__sublink--more {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--color-link-hover-on-dark);
	font-weight: var(--fw-semibold);
}

.mobile-menu__sublink--more .icon {
	flex: none;
	width: 12px;
	height: 12px;
	transition: transform var(--transition);
}

.mobile-menu__sublink.mobile-menu__sublink--more:hover,
.mobile-menu__sublink.mobile-menu__sublink--more:focus-visible,
.mobile-menu__sublink.mobile-menu__sublink--more[aria-current="page"] {
	color: var(--color-text-on-dark);
}

@media (prefers-reduced-motion: no-preference) {
	.mobile-menu__sublink--more:focus-visible .icon {
		transform: translateX(var(--arrow-nudge));
	}
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.mobile-menu__sublink--more:hover .icon {
		transform: translateX(var(--arrow-nudge));
	}
}

.mobile-menu__sublink:hover,
.mobile-menu__sublink[aria-current="page"] {
	color: var(--color-link-hover-on-dark);
}

/* ---------- Social icons, centred at the bottom ---------- */

.mobile-menu__social {
	display: flex;
	justify-content: center;
	margin: auto 0 0;
	padding: 40px 0 16px;
	list-style: none;
}

/* 24px glyphs on a 38px pitch; each link is a 38 x 44 target. */
.mobile-menu__social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: var(--tap-target);
	color: var(--color-white);
	transition: color var(--transition);
}

.mobile-menu__social-link:hover {
	color: var(--color-link-hover-on-dark);
}

/* Tripadvisor: a disc in the link colour with the owl in navy. */
.mobile-menu__social-disc {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background-color: currentColor;
}

.mobile-menu__social-disc .icon {
	color: var(--color-surface-dark);
}

/* ---------- Tablet: a centred 560px column ---------- */

@media (min-width: 768px) {
	.mobile-menu__inner {
		max-width: 560px;
		margin-inline: auto;
	}

	.mobile-menu__logo {
		flex-basis: 208px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mobile-menu__chevron {
		transition: none;
	}
}