/* ============================================================
   Desktop mega menus (>= 1024px)
   Designs: menu-mega-courses, menu-mega-workshops, menu-mega-bespoke-v2,
   menu-mega-about (slice-01). Spec: docs/homepage-build-brief.md 3.3.
   White panel (QH18: Brand says Secondary Navy) 6px below the header,
   aligned to the container, radius 30, soft shadow, over the page with no
   dimming. Two kinds:
     --links  Courses / Workshops: four discipline columns + Browse All bar
     --cards  Bespoke / About: intro block + up to three image link cards
   Opened by navigation.js (.is-open on the item); without JS on :hover /
   :focus-within. Markup: inc/navigation.php.
   Motion (Miles 2026-10-07: "smoother but elegant and quick", then "just
   smoothly appear is enough" - nothing slides or rolls): a panel fades
   in, and fades out a little quicker; a fade that is interrupted turns
   back from where it is. navigation.js keeps a closing panel shown with
   .is-closing until its fade ends (inert meanwhile), so the fade-out runs
   in every engine. Moving from one item to another cross-fades the panels:
   the new one is drawn over the one fading out, and its quick-starting
   fade-in over the slow-starting fade-out keeps the overlap nearly opaque
   (never below about 96%; no jump in height). A plain close starts fading
   at once.
   ============================================================ */

.mega-panel {
	display: none;
}

@media (min-width: 1024px) {
	.mega-panel {
		position: absolute;
		top: calc(100% + var(--mega-gap));
		left: var(--gutter);
		right: var(--gutter);
		z-index: 50;
		border-radius: var(--radius-button);
		background-color: var(--color-menu-panel);
		box-shadow: var(--shadow-menu);
		color: var(--color-text);
		font-size: var(--fs-body);
		line-height: var(--lh-body);
		opacity: 0;
		transition:
			opacity var(--menu-out-duration) var(--ease-in-cubic),
			display var(--menu-out-duration) allow-discrete;
	}

	/* With JS the script holds a closing panel (below), so a closed one
	   simply goes. */
	html.has-js .mega-panel {
		transition: none;
	}

	/* z-index 51: the opening panel is drawn over one still fading out. */
	.primary-nav__item.is-open > .mega-panel,
	html:not(.has-js) .primary-nav__item--mega:hover > .mega-panel,
	html:not(.has-js) .primary-nav__item--mega:focus-within > .mega-panel {
		z-index: 51;
		display: block;
		opacity: 1;
		transition:
			opacity var(--menu-in-duration) var(--ease-out-cubic),
			display var(--menu-in-duration) allow-discrete;
	}

	@starting-style {
		.primary-nav__item.is-open > .mega-panel,
		html:not(.has-js) .primary-nav__item--mega:hover > .mega-panel,
		html:not(.has-js) .primary-nav__item--mega:focus-within > .mega-panel {
			opacity: 0;
		}
	}

	/* Fading out (navigation.js): a close starts at once (ease-out); handing
	   over to the next panel the fade starts slowly (ease-in), so the
	   incoming panel covers the overlap. */
	.primary-nav__item.is-closing > .mega-panel {
		display: block;
		transition: opacity var(--menu-out-duration) var(--ease-out-cubic);
	}

	.primary-nav__item.is-closing.is-handing-over > .mega-panel {
		transition-timing-function: var(--ease-in-cubic);
	}

	/* The strip from an open item down to its panel (the item's width,
	   through the gap) counts as the item, so a hand moving straight down
	   never leaves it and the panel never starts to close on the way.
	   Placed against the header bar by navigation.js. A mouse only: on a
	   touch screen it would cover the bottom of the chevron's 44px target. */
	@media (hover: hover) and (pointer: fine) {
		.primary-nav__item.is-open::after {
			content: "";
			position: absolute;
			top: var(--mega-bridge-top, 100%);
			bottom: calc(-1 * var(--mega-gap));
			left: var(--mega-bridge-left, 0);
			width: var(--mega-bridge-width, 0);
		}
	}

	/* Focus ring that reads on White (Light Orange is 2.66:1 there). */
	.mega-panel :focus-visible {
		outline-color: var(--color-focus-light);
	}

	/* ---------- Shared type ---------- */

	.mega-panel__heading {
		color: var(--color-heading);
		font-family: var(--font-display);
		font-size: var(--fs-card-title-lg);
		font-weight: var(--fw-display);
		font-synthesis: none;
		line-height: 1;
		text-transform: uppercase;
	}

	/* ---------- Courses / Workshops ---------- */

	/* Four columns from x 113 at 1440 (33px inside the panel) on the drawn
	   pitch of about 300px (columns at 113 / 418 / 715 / 1012), so the
	   spare width stays at the right as in the design; narrower desktops
	   shrink all four equally. */
	.mega-panel__columns {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 284px));
		column-gap: 16px;
		padding: 38.5px 33px 30px;
	}

	/* What courses / workshops are (Miles 2026-10-11): the panel's first
	   line, over the columns, with a hairline under it. */
	.mega-panel__lead {
		margin: 0 33px;
		padding: 26px 0 20px;
		border-bottom: var(--border-hairline) solid var(--color-border);
		color: var(--color-text);
		font-size: var(--fs-body);
		line-height: var(--lh-body);
	}

	.mega-panel__lead + .mega-panel__columns {
		padding-top: 26px;
	}

	/* Line every column's links up under the tallest subtitle (the Doc 01
	   subtitles wrap to two lines in some columns). */
	@supports (grid-template-rows: subgrid) {
		.mega-panel__columns {
			grid-template-rows: auto auto 1fr;
		}

		.mega-panel__column {
			display: grid;
			grid-row: span 3;
			grid-template-rows: subgrid;
			align-content: start;
		}
	}

	.mega-panel__subtitle {
		margin-top: 6px;
		color: var(--color-text-muted);
		text-transform: uppercase;
	}

	/* One rhythm: 33px from link to link, 20px between the lines of a
	   wrapped title, 28px-tall targets. */
	.mega-panel__links {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 5px;
		margin: 7px 0 0;
		padding: 0;
		list-style: none;
	}

	.mega-panel__link {
		display: inline-block;
		padding-block: 4px;
		color: var(--color-link);
		line-height: 20px;
		text-decoration: none;
	}

	/* A discipline's groups as categories of their own (Sam 2026-10-15, Emma
	   2026-10-18: the Workshops panel's last column is ML Development and
	   Further Professional Development, no Leadership heading over them):
	   each group is headed like the other columns, with no subtitle, so the
	   column stays short; the next group starts 24px after the last link.
	   The groups take the column's three rows of the panel's subgrid, so
	   the other columns' headings, subtitles and links stay where they are.
	   A discipline with links outside its groups keeps its own heading
	   above them (inc/navigation.php). */
	.mega-panel__column--groups > .mega-panel__sections {
		grid-row: 1 / -1;
	}

	.mega-panel__sections .mega-panel__heading {
		text-wrap: balance;
	}

	.mega-panel__sections .mega-panel__heading + .mega-panel__links {
		margin-top: 12px;
	}

	.mega-panel__sections .mega-panel__links + .mega-panel__heading,
	.mega-panel__links + .mega-panel__sections {
		margin-top: 24px;
	}

	.mega-panel__link:hover,
	.mega-panel__link[aria-current="page"] {
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 0.18em;
	}

	/* "See the full ML pathway" (designs/ML Development, 2026-10-24): after
	   the Leadership courses and the ML Development workshops, on the
	   links' 33px rhythm, SemiBold with an arrow. Drawn Light Orange
	   (2.65:1 on White, under AA for text): the deep orange link colour
	   (4.89:1). Hover and keyboard focus turn it Navy as the arrow slides
	   (main.css); the next group's heading follows 24px under it, as after
	   links. */
	.mega-panel__more {
		margin: 5px 0 0;
	}

	.mega-panel__more-link {
		padding-block: 4px;
		color: var(--color-link-accent);
		line-height: 20px;
	}

	.mega-panel__more-link .icon {
		width: 14px;
		height: 14px;
	}

	.mega-panel__more-link:hover,
	.mega-panel__more-link:focus-visible,
	.mega-panel__more-link[aria-current="page"] {
		color: var(--color-link);
	}

	.mega-panel__sections .mega-panel__more + .mega-panel__heading {
		margin-top: 24px;
	}

	/* Full-width Dark Orange bar, 54px, bottom corners follow the panel.
	   The label is centred on the panel and the chevron hangs after it.
	   2px top padding centres Koulen's capitals (they sit high in the
	   line box). */
	.mega-panel__all {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 54px;
		padding-top: 2px;
		border-radius: 0 0 var(--radius-button) var(--radius-button);
		background-color: var(--btn-primary-bg);
		color: var(--color-white);
		font-family: var(--font-display);
		font-size: var(--fs-card-title-lg);
		font-weight: var(--fw-display);
		font-synthesis: none;
		line-height: 1;
		text-decoration: none;
		text-transform: uppercase;
		transition: background-color var(--transition);
	}

	/* Hover: the button system's deeper orange (Miles 2026-10-05), the
	   label stays White, and the chevron slides right (below). */
	.mega-panel__all:hover,
	.mega-panel__all:focus-visible {
		background-color: var(--btn-primary-bg-hover);
	}

	/* A Cream ring inside the bar: 4.58:1 on the deeper hover fill (a
	   Navy ring would be 3.29:1). */
	.mega-panel__all:focus-visible {
		outline-color: var(--color-focus-on-button);
		outline-offset: -6px;
	}

	.mega-panel__all-label {
		position: relative;
	}

	.mega-panel__all-icon {
		position: absolute;
		top: 50%;
		left: 100%;
		margin-left: 4px;
		transform: translateY(-50%);
		transition: transform var(--transition);
	}

	/* Arrows on hover targets slide right (Miles 2026-10-05): on keyboard
	   focus, and on hover where the pointer can hover; not under reduced
	   motion. */
	@media (prefers-reduced-motion: no-preference) {
		.mega-panel__all:focus-visible .mega-panel__all-icon {
			transform: translate(var(--arrow-nudge), -50%);
		}
	}

	@media (hover: hover) and (prefers-reduced-motion: no-preference) {
		.mega-panel__all:hover .mega-panel__all-icon {
			transform: translate(var(--arrow-nudge), -50%);
		}
	}

	/* ---------- Bespoke / About ---------- */

	.mega-panel__layout {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: clamp(24px, 3vw, 43px);
		padding: 43px 43px 43px 35px;
	}

	.mega-panel__intro {
		flex: 1 1 200px;
		min-width: 200px;
		padding-top: 4.5px;
	}

	.mega-panel__intro-text {
		margin-top: 10px;
		color: var(--color-text-muted);
		text-transform: uppercase;
	}

	.mega-panel__cards {
		display: flex;
		flex: 0 1 auto;
		gap: clamp(24px, 3vw, 43px);
		min-width: 0;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	/* 271 x 286 at 1440; shrinks with the panel on smaller desktops. The
	   explicit width keeps the row's natural size at 3 x 271 (flex sizing
	   would otherwise measure the cards by their text). */
	.mega-panel__card {
		flex: 0 1 271px;
		width: 271px;
		min-width: 0;
		container-type: inline-size;
	}

	/* Image link card: photo, a soft navy gradient behind the label for
	   contrast (not in the design), label bottom-left, thin arrow right. */
	.menu-card {
		position: relative;
		isolation: isolate;
		display: flex;
		align-items: center;
		align-content: flex-end;
		flex-wrap: wrap;
		gap: 8px;
		aspect-ratio: 271 / 286;
		overflow: hidden;
		padding: 0 18px 23px 23px;
		border-radius: var(--radius-md);
		background-color: var(--color-surface-dark-alt);
		color: var(--color-white);
		text-decoration: none;
	}

	.menu-card__media {
		position: absolute;
		inset: 0;
		z-index: -2;
	}

	/* Zooms in slowly on hover and keyboard focus (below). The photo's
	   focus point (--focus-x / --focus-y, inc/image-focus.php) decides
	   what the box trims from the crop. */
	.menu-card__media img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: var(--focus-x, 50%) var(--focus-y, 50%);
		transition: transform var(--transition-zoom);
	}

	.menu-card::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background-image: var(--overlay-card-photo);
	}

	/* 36px on Bespoke and 32px on About in the designs: one size, 32px on
	   a full-size card, scaling down with narrower cards so a label never
	   runs into the arrow. The label's last line sits on the card's
	   padding and the arrow is centred on that line, so a label that wraps
	   ("Mountain Mentoring", Emma 2026-10-19; "Knowledge Hub" on smaller
	   desktops) keeps its arrow level with the other cards'. The arrow's
	   margin is half the difference between the label's line (1em:
	   line-height 1, the same font size as below) and the 31px arrow. */
	.menu-card__label {
		align-self: flex-end;
		flex: 1 1 0;
		min-width: 0;
		font-family: var(--font-display);
		font-size: 2rem;
		font-size: clamp(1.375rem, 11.8cqi, 2rem);
		font-weight: var(--fw-display);
		font-synthesis: none;
		line-height: 1;
		text-transform: uppercase;
		transition: color var(--transition);
	}

	.menu-card__arrow {
		align-self: flex-end;
		flex: none;
		margin-bottom: calc((2rem - 31px) / 2);
		margin-bottom: calc((clamp(1.375rem, 11.8cqi, 2rem) - 31px) / 2);
		color: var(--color-cream);
		transition: transform var(--transition), color var(--transition);
	}

	.menu-card:hover .menu-card__label,
	.menu-card:hover .menu-card__arrow,
	.menu-card:focus-visible .menu-card__label,
	.menu-card:focus-visible .menu-card__arrow {
		color: var(--color-accent);
	}

	/* The arrow also slides right and the photo zooms in slowly (Miles
	   2026-10-05): on keyboard focus, and on hover where the pointer can
	   hover; not under reduced motion. */
	@media (prefers-reduced-motion: no-preference) {
		.menu-card:focus-visible .menu-card__arrow {
			transform: translateX(var(--arrow-nudge));
		}

		.menu-card:focus-visible .menu-card__media img {
			transform: scale(var(--image-zoom));
		}
	}

	@media (hover: hover) and (prefers-reduced-motion: no-preference) {
		.menu-card:hover .menu-card__arrow {
			transform: translateX(var(--arrow-nudge));
		}

		.menu-card:hover .menu-card__media img {
			transform: scale(var(--image-zoom));
		}
	}

	/* Windows High Contrast tells links apart by shape: underline the card
	   labels and the "Browse all" label, like the arrow links. */
	@media (forced-colors: active) {
		.menu-card__label,
		.mega-panel__all-label {
			text-decoration: underline;
			text-decoration-thickness: 1px;
			text-underline-offset: 0.18em;
		}
	}

	/* ---------- Without JS: hover / focus opens the panel ----------
	   (the open state and its fade are with the panel rules above) */

	/* So the pointer can travel from the label down to the panel without
	   losing :hover, the items fill the bar's height and a strip bridges
	   the 6px gap (with JS, the strip under the open item does this job,
	   with a short close delay for paths that wander outside it). */
	html:not(.has-js) .primary-nav {
		align-self: stretch;
	}

	html:not(.has-js) .primary-nav__list {
		height: 100%;
		align-items: stretch;
	}

	html:not(.has-js) .mega-panel::before {
		content: "";
		position: absolute;
		bottom: 100%;
		left: 0;
		right: 0;
		height: 8px;
	}
}