/**
 * Site navigation - desktop mega panel and mobile drawer.
 *
 * Written against the markup in lib/nvn-nav.php. Everything is laid out with
 * logical properties (inline-start / inline-end rather than left / right), so
 * the Arabic layout is the same stylesheet mirrored by `dir` and needs no
 * overrides in nvn-rtl.css.
 *
 * Type sizes are deliberately unchanged from the previous navigation: 16px in
 * the desktop bar and panels, 1rem / 0.9rem / 0.85rem down the drawer. The
 * hierarchy here comes from weight, case, colour and spacing instead.
 */

.nvn-nav,
.nvn-mnav {
	--nvn-nav-fg: var(--primary-color, #0071A9);
	--nvn-nav-accent: var(--secondary-color, #2EAE49);
	--nvn-nav-ink: #22384a;
	--nvn-nav-muted: #56748a;
	--nvn-nav-surface: #fff;
	--nvn-nav-tint: #eef8ff;
	--nvn-nav-tint-strong: #ddf4ff;
	--nvn-nav-rule: #e2eef6;
	--nvn-nav-border: #d5e7f2;
	--nvn-nav-radius: 14px;
	--nvn-nav-shadow: 0 20px 44px -20px rgba(4, 55, 84, .34), 0 2px 10px rgba(4, 55, 84, .07);
}

/* ========================================================================== *
 * 1. Desktop bar
 * ========================================================================== */

.nvn-nav {
	font-size: 16px;
	line-height: 1.35;
}

/*
 * The bar has to be allowed to shrink inside the header's flex row, or the
 * longer Arabic labels run off the edge of the container at 992px.
 */
.nvn-nav-wrap {
	flex: 0 1 auto;
	min-width: 0;
	/* Once the bar fills the row, this is all that keeps it off the logo. */
	padding-inline-start: 20px;
}

.nvn-nav__list {
	display: flex;
	align-items: stretch;
	/* Wrapping to a second row beats clipping the last institute's name. */
	flex-wrap: wrap;
	/* Rows pack from the start, so a wrapped item sits under the first one. */
	justify-content: flex-start;
	gap: 0 26px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nvn-nav__item {
	position: relative;
	display: flex;
	align-items: stretch;
}

/*
 * The trigger.
 *
 * Parents that only open a panel are <button>s, so every appearance property
 * a button brings with it has to be reset here for the two to look identical.
 */
.nvn-nav__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	padding: 22px 0;
	border: 0;
	background: none;
	color: var(--nvn-nav-fg);
	font: inherit;
	font-weight: 500;
	text-align: inherit;
	text-decoration: none;
	/*
	 * The stored titles are already in the case the design shows. The one
	 * label that comes back lower case after its prefix is dropped is title-
	 * cased in PHP, so nothing needs transforming here - and `capitalize`
	 * would have turned the full "Institute of ..." into "Institute Of ...".
	 */
	text-transform: none;
	letter-spacing: .01em;
	white-space: nowrap;
	cursor: pointer;
	transition: color .18s ease;
}

.nvn-nav__link:focus-visible {
	outline: 2px solid var(--nvn-nav-accent);
	outline-offset: 3px;
	border-radius: 4px;
}

/* The open/current marker. Drawn on the link so it tracks the text width. */
.nvn-nav__link::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 14px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: center;
	transition: transform .22s ease;
}

.nvn-nav__item:hover > .nvn-nav__link,
.nvn-nav__item.is-open > .nvn-nav__link,
.nvn-nav__link:focus-visible {
	color: var(--nvn-nav-accent);
}

.nvn-nav__item:hover > .nvn-nav__link::after,
.nvn-nav__item.is-open > .nvn-nav__link::after,
.nvn-nav__item.is-current > .nvn-nav__link::after {
	transform: scaleX(1);
}

.nvn-nav__item.is-current > .nvn-nav__link {
	color: var(--nvn-nav-accent);
	font-weight: 600;
}

/* The bar hangs at the end of the row, away from the logo. */
.nvn-nav-wrap {
	margin-inline-start: auto;
}

/*
 * Two labels per item, one shown at a time.
 *
 * The full title needs about 1075px of bar in English, and only a 1400px
 * viewport gives that much beside a 200px logo - that is exactly where
 * Bootstrap's container steps up to 1320px. Below it the shortened title
 * takes over rather than the type getting smaller or the row wrapping.
 */
.nvn-nav__label-short {
	display: none;
}

.nvn-caret {
	flex: 0 0 auto;
	transition: transform .22s ease;
}

.nvn-nav__item.is-open > .nvn-nav__link .nvn-caret {
	transform: rotate(180deg);
}

/* -------------------------------------------------------------------------- *
 * 1.1 Panel
 *
 * Closed panels are `visibility: hidden` AND `pointer-events: none`. The old
 * panel was a 238x600 box that merely had no visible background, so it sat
 * over the hero swallowing clicks whenever the pointer passed the header.
 * -------------------------------------------------------------------------- */

.nvn-nav__panel {
	position: absolute;
	top: 100%;
	inset-inline-start: 0;
	z-index: 1030;
	/* Bridges the gap to the card so the pointer can travel into it. */
	padding-top: 10px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translate(var(--nvn-nav-shift, 0px), -8px);
	transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
	/*
	 * Size to the card's own content.
	 *
	 * An absolutely positioned box shrink-to-fits against its containing
	 * block, which here is the menu item - about 230px. Without this the
	 * columns were squeezed to their min-width and every longer programme
	 * name broke onto a second line.
	 */
	width: max-content;
	max-width: min(780px, calc(100vw - 24px));
}

.nvn-nav__item.is-open > .nvn-nav__panel {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translate(var(--nvn-nav-shift, 0px), 0);
	transition: opacity .18s ease, transform .18s ease, visibility 0s;
}

/* Panels near the end of the bar hang inwards instead of off the page. */
.nvn-nav__item.at-end > .nvn-nav__panel {
	inset-inline-start: auto;
	inset-inline-end: 0;
}

.nvn-nav__card {
	box-sizing: border-box;
	padding: 20px 22px;
	border: 1px solid var(--nvn-nav-border);
	border-radius: var(--nvn-nav-radius);
	background: var(--nvn-nav-surface);
	box-shadow: var(--nvn-nav-shadow);
	width: 100%;
}

.nvn-mega {
	display: flex;
	align-items: flex-start;
	gap: 24px;
}

.nvn-mega__col {
	flex: 0 0 auto;
	min-width: 190px;
	max-width: 300px;
}

/* A rule between columns is what makes the grouping readable at a glance. */
.nvn-mega__col + .nvn-mega__col {
	padding-inline-start: 24px;
	border-inline-start: 1px solid var(--nvn-nav-rule);
}

/*
 * A column of plain links with no heading of its own starts level with the
 * first link of the column beside it, not with that column's heading. The
 * first such column now carries the section's name, so this only reaches a
 * second one, and panels with no headings at all are left alone.
 */
.nvn-mega:has(.nvn-mega__col--group) .nvn-mega__col--links:not(.nvn-mega__col--titled) {
	padding-top: calc(1.35em + 21px);
}

.nvn-mega__col--split {
	max-width: 540px;
}

.nvn-mega__col--split > .nvn-mega__list {
	column-count: 2;
	column-gap: 24px;
}

.nvn-mega__col--split > .nvn-mega__list > .nvn-mega__item {
	break-inside: avoid;
}

/* The column heading: the parent item itself, still a link where it has one. */
.nvn-mega__heading {
	display: block;
	margin-bottom: 10px;
	padding: 0 10px 10px;
	border-bottom: 1px solid var(--nvn-nav-rule);
	color: var(--nvn-nav-fg);
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	transition: color .16s ease;
}

a.nvn-mega__heading:hover,
a.nvn-mega__heading:focus-visible {
	color: var(--nvn-nav-accent);
}

.nvn-mega__heading.is-current {
	color: var(--nvn-nav-accent);
}

/*
 * The section's own name. Set in the same slot as the group headings beside
 * it, but left in its stored case - it is a title rather than a label, and it
 * is long enough that uppercase would wrap.
 */
.nvn-mega__col--titled > .nvn-mega__heading {
	text-transform: none;
	letter-spacing: 0;
}

.nvn-mega__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nvn-mega__item {
	margin: 0;
}

/*
 * Panel links stay in the case the editor typed them in. The bar above is
 * uppercase for the brand look; repeating that here gave four identical-looking
 * levels and multi-line SHOUTING for the longer programme names.
 */
.nvn-mega__link {
	display: block;
	padding: 8px 10px;
	border-radius: 8px;
	color: var(--nvn-nav-muted);
	text-decoration: none;
	text-transform: none;
	transition: background-color .16s ease, color .16s ease;
}

a.nvn-mega__link:hover,
a.nvn-mega__link:focus-visible {
	background: var(--nvn-nav-tint);
	color: var(--nvn-nav-fg);
}

a.nvn-mega__link:focus-visible {
	outline: 2px solid var(--nvn-nav-accent);
	outline-offset: -2px;
}

.nvn-mega__link.is-current {
	background: var(--nvn-nav-tint);
	color: var(--nvn-nav-fg);
	font-weight: 600;
}

span.nvn-mega__link {
	cursor: default;
}

/* Fourth level and deeper, if an editor ever adds one. */
.nvn-mega__list--nested {
	margin-inline-start: 10px;
	padding-inline-start: 12px;
	border-inline-start: 1px solid var(--nvn-nav-rule);
}

.nvn-mega__list--nested .nvn-mega__link {
	padding-block: 6px;
}

/*
 * Narrow desktops: keep the columns, shrink the frame around them.
 *
 * The bar itself starts at 992px (below that the drawer takes over), so this
 * is the tight end of its range rather than a tablet fallback.
 */
@media (max-width: 1399.98px) {
	.nvn-nav__label-full {
		display: none;
	}

	.nvn-nav__label-short {
		display: inline;
	}

	.nvn-nav__list {
		gap: 0 16px;
	}

	.nvn-nav__link {
		padding-block: 16px;
	}

	/*
	 * Below 1400px the five institute names no longer fit beside the logo on
	 * one line, even shortened, in every language.
	 *
	 * Keep them on one row and let the long ones break over two lines instead.
	 * That needs all three of these: `nowrap` so the row cannot break between
	 * items, `min-width: 0` so an item may shrink past its longest word, and
	 * `white-space: normal` so the label wraps once it does. None of it
	 * changes the type size. The drawer takes over below 1200px, so this only
	 * has to hold for a 240px band.
	 */
	.nvn-nav__list {
		flex-wrap: nowrap;
	}

	/*
	 * No `min-width: 0` on the items. A flex item's automatic minimum size is
	 * its min-content - here, its longest word - and that floor is what stops
	 * flexbox from shrinking "ABOUT" down to 51px and pressing it against the
	 * logo. The five labels together need about 550px of longest-word width,
	 * and the bar has ~730px at 992px, so they all fit with room to spare.
	 */
	.nvn-nav__link {
		white-space: normal;
	}

	/*
	 * Wrapped labels are centred, and evened out rather than filled greedily.
	 *
	 * A wrapped line never uses the whole box, so a start-aligned label leaves
	 * a ragged strip of empty space between its shorter line and the caret -
	 * in Arabic that stranded the caret most of an item away from its own
	 * words. Centring splits that slack either side, and balancing keeps the
	 * two lines a similar length so there is less of it to split.
	 */
	.nvn-nav__label {
		text-align: center;
		text-wrap: balance;
	}

	.nvn-nav__link::after {
		bottom: 8px;
	}

	.nvn-nav__card {
		padding: 16px 18px;
	}

	.nvn-mega {
		gap: 18px;
	}

	.nvn-mega__col {
		min-width: 178px;
	}

	.nvn-mega__col + .nvn-mega__col {
		padding-inline-start: 18px;
	}
}

@media (max-width: 1199.98px) {
	.nvn-nav__list {
		gap: 0 14px;
	}

	.nvn-nav-wrap {
		padding-inline-start: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nvn-nav__panel,
	.nvn-nav__link::after,
	.nvn-caret {
		transition-duration: .01ms;
	}
}

/* ========================================================================== *
 * 2. Mobile drawer
 * ========================================================================== */

.nvn-mnav {
	display: block;
	font-size: 1rem;
}

.nvn-mnav__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nvn-mnav__row {
	display: flex;
	align-items: stretch;
	gap: 4px;
	border-radius: 10px;
	transition: background-color .18s ease;
}

.nvn-mnav__list--0 > .nvn-mnav__item + .nvn-mnav__item > .nvn-mnav__row {
	border-top: 1px solid var(--nvn-nav-rule);
	border-radius: 0;
}

/*
 * The row's two controls.
 *
 * Splitting them is the point: a section that is also a page - "Overview" and
 * the rest - can now be opened as well as expanded. Previously the toggle ate
 * the tap and those pages were unreachable from a phone.
 */
.nvn-mnav__link {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 48px;
	margin: 0;
	padding: 12px 10px;
	border: 0;
	border-radius: inherit;
	background: none;
	color: var(--nvn-nav-fg);
	font: inherit;
	font-weight: 600;
	text-align: start;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
}

.nvn-mnav__toggle {
	flex: 0 0 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: none;
	color: var(--nvn-nav-fg);
	cursor: pointer;
}

.nvn-mnav__chevron {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 24px;
}

.nvn-mnav__toggle:focus-visible,
.nvn-mnav__link:focus-visible {
	outline: 2px solid var(--nvn-nav-accent);
	outline-offset: -2px;
}

.nvn-mnav__label {
	min-width: 0;
}

/* Open sections are tinted so the expanded branch is obvious while scrolling. */
.nvn-mnav__item.is-open > .nvn-mnav__row {
	background: var(--nvn-nav-tint);
}

.nvn-mnav__item.is-open > .nvn-mnav__row > .nvn-mnav__toggle,
.nvn-mnav__item.is-open > .nvn-mnav__row > .nvn-mnav__link {
	color: var(--nvn-nav-fg);
}

.nvn-mnav__item.is-open > .nvn-mnav__row .nvn-caret {
	transform: rotate(180deg);
}

.nvn-mnav__item.is-current > .nvn-mnav__row > .nvn-mnav__link {
	color: var(--nvn-nav-accent);
}

.nvn-mnav__link[aria-current="page"] {
	color: var(--nvn-nav-accent);
}

/* -------------------------------------------------------------------------- *
 * 2.1 Nested levels
 * -------------------------------------------------------------------------- */

.nvn-mnav__panel {
	overflow: hidden;
	transition: height .28s ease;
}

.nvn-mnav__panel[hidden] {
	display: none;
}

.nvn-mnav__list--1 {
	margin: 2px 0 10px;
	padding-inline-start: 12px;
	border-inline-start: 2px solid var(--nvn-nav-tint-strong);
	margin-inline-start: 10px;
}

.nvn-mnav__list--1 > .nvn-mnav__item > .nvn-mnav__row > .nvn-mnav__link {
	font-size: .9rem;
	font-weight: 500;
	min-height: 44px;
	text-transform: none;
	color: var(--nvn-nav-ink);
}

.nvn-mnav__list--2 {
	margin: 0 0 8px;
	padding-inline-start: 14px;
	margin-inline-start: 8px;
}

.nvn-mnav__list--2 > .nvn-mnav__item > .nvn-mnav__row > .nvn-mnav__link {
	position: relative;
	font-size: .85rem;
	font-weight: 500;
	min-height: 40px;
	padding-inline-start: 18px;
	text-transform: none;
	color: var(--nvn-nav-muted);
}

/* A marker so the third level reads as detail rather than as more sections. */
.nvn-mnav__list--2 > .nvn-mnav__item > .nvn-mnav__row > .nvn-mnav__link::before {
	content: "";
	position: absolute;
	inset-inline-start: 2px;
	top: 50%;
	width: 6px;
	height: 6px;
	margin-top: -3px;
	border-radius: 50%;
	background: var(--nvn-nav-tint-strong);
}

.nvn-mnav__list--2 > .nvn-mnav__item > .nvn-mnav__row > .nvn-mnav__link[aria-current="page"]::before,
.nvn-mnav__list--2 > .nvn-mnav__item.is-current > .nvn-mnav__row > .nvn-mnav__link::before {
	background: var(--nvn-nav-accent);
}

.nvn-mnav__list--1 .nvn-mnav__item.is-open > .nvn-mnav__row,
.nvn-mnav__list--2 .nvn-mnav__item.is-open > .nvn-mnav__row {
	background: transparent;
}

.nvn-mnav a.nvn-mnav__link:active,
.nvn-mnav button.nvn-mnav__link:active {
	background: var(--nvn-nav-tint);
}

@media (prefers-reduced-motion: reduce) {
	.nvn-mnav__panel,
	.nvn-mnav__row {
		transition-duration: .01ms;
	}
}