/*
 * Ferndale Intranet: layout and the site shell.
 *
 * Header (sticky, z-index 1100), main menu (desktop) and drawer (phones and
 * tablets), weather slot, search panel, account menu, title and greeting
 * bands, content widths and the slim footer.
 *
 * DESKTOP BREAKPOINT: 64rem. It appears in this file's media queries and in
 * --fi-desktop-bp below, which theme.js reads. Move them together.
 */

:root {
	--fi-desktop-bp: 64rem;
}

/* ------------------------------------------------------------------
 * Containers and widths.
 * ------------------------------------------------------------------ */
.fi-container {
	width: 100%;
	max-width: calc(var(--fi-wide) + 2 * var(--fi-gutter));
	margin-inline: auto;
	padding-inline: var(--fi-gutter);
}

.fi-width--reading {
	max-width: calc(var(--fi-content) + 2 * var(--fi-article-pad) + 2 * var(--fi-gutter));
}

/* Short pages: the footer sits at the bottom of the window. */
body {
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
}

.site-main {
	display: block;
	flex: 1 0 auto;
	min-width: 0;
	overflow-x: clip;
}

.site-header,
.fi-footer {
	flex: none;
}

.fi-layout {
	padding-block: clamp(1.5rem, 1rem + 2vw, 2.75rem) clamp(2.5rem, 2rem + 3vw, 4.5rem);
}

/* The article: a white card in Version A, open text on white in Version B. */
.fi-article {
	min-width: 0;
	padding: var(--fi-article-pad);
	border-top: var(--fi-article-border-top);
	border-radius: var(--fi-radius-lg);
	background: var(--fi-article-bg);
	box-shadow: var(--fi-article-shadow);
}

.fi-article--plain {
	padding: 0;
	border-top: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

/* ------------------------------------------------------------------
 * Header (always dark; sticky; never overflow:hidden, so the weather
 * panel and drop-downs can extend below it).
 * ------------------------------------------------------------------ */
.site-header {
	--fi-ring: var(--fi-focus-on-dark);
	position: relative;
	z-index: var(--fi-z-header);
	background: var(--fi-header-bg);
	color: var(--fi-header-text);
	border-bottom: 1px solid var(--fi-on-dark-border);
	transition: box-shadow 0.2s ease;
}

.has-sticky-header .site-header {
	position: sticky;
	top: 0;
}

.admin-bar.has-sticky-header .site-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}

@media (max-width: 600px) {
	.admin-bar.has-sticky-header .site-header {
		top: 0;
	}
}

.site-header.is-stuck {
	box-shadow: var(--fi-shadow-header);
}

.fi-header__inner {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.375rem;
	min-height: 4.25rem;
}

/* Brand. */
.fi-brand {
	display: flex;
	align-items: center;
	flex: 0 1 auto;
	min-width: 0;
	gap: 0.4rem;
	color: var(--fi-header-text);
	text-decoration: none;
	border-radius: 6px;
}

.fi-brand:hover {
	color: var(--fi-header-text);
}

/* Version B: white logo, gold "Staff intranet" label (under it on phones). */
.fi-brand--ferndale {
	flex-direction: column;
	align-items: flex-start;
	gap: 0.15rem;
}

.fi-brand__logo {
	display: block;
	line-height: 0;
}

/* Phones: as large as the room beside the weather chip and the Menu button
 * allows (they take about 194px, plus a 12px margin; the logo is 4.67:1),
 * from 1.8rem up to 2.1rem. object-fit keeps the proportions if a wider
 * weather chip ever leaves less room. */
.fi-brand__img {
	display: block;
	width: auto;
	height: clamp(1.8rem, (100vw - 15.25rem) / 4.67, 2.1rem);
	max-width: 100%;
	object-fit: contain;
	object-position: left center;
}

.fi-brand__label {
	color: var(--fi-current);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	line-height: 1.2;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Version A: fern mark and the "Intranet" wordmark (the text can't shrink). */
.fi-brand--classic {
	flex: none;
}

/* Phones: as large as the room beside the weather chip and the Menu button
 * allows, so 320px phones keep the old size and wider phones grow a little
 * (measured with qa/header-fit.mjs; the administrator asked for a bigger
 * logo and wordmark without a taller header, 9 Oct 2026). */
.fi-brand__mark {
	display: block;
	width: auto;
	height: clamp(1.6rem, 0.3rem + 6.25vw, 1.9rem);
}

.fi-brand__wordmark {
	color: var(--fi-header-text);
	font-family: var(--fi-font-brand);
	font-size: clamp(1.25rem, 0.25rem + 4.6vw, 1.45rem);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1;
	white-space: nowrap;
}

/* Header buttons (search, close). */
.icon-button {
	display: inline-grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid transparent;
	border-radius: var(--fi-radius-control);
	background: transparent;
	color: var(--fi-heading);
	transition: background-color var(--fi-duration) ease, color var(--fi-duration) ease;
}

.icon-button:hover,
.icon-button[aria-expanded="true"] {
	background: var(--fi-surface);
	color: var(--fi-primary);
}

.site-header .icon-button {
	color: var(--fi-header-text);
}

.site-header .icon-button:hover,
.site-header .icon-button[aria-expanded="true"] {
	background: var(--fi-on-dark-hover);
	color: var(--fi-header-text);
}

/* The account and Menu buttons sit at the right-hand end. */
.site-header__actions {
	display: flex;
	flex: none;
	align-items: center;
	gap: 0.375rem;
	margin-inline-start: auto;
}

.menu-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 2.75rem;
	padding: 0.5rem 0.75rem;
	border: 0;
	border-radius: var(--fi-menu-btn-radius);
	background: var(--fi-on-dark-btn-bg);
	color: var(--fi-on-dark-btn-text);
	font-weight: 750;
	line-height: 1;
	transition: background-color var(--fi-duration) ease;
}

.menu-toggle:hover {
	background: var(--fi-on-dark-btn-hover);
	color: var(--fi-on-dark-btn-text);
}

/* Small phones (under 375px): icon-only Menu button (the label stays for screen readers). */
@media (max-width: 23.4rem) {
	.menu-toggle {
		padding-inline: 0.7rem;
	}

	.menu-toggle__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(1px, 1px, 1px, 1px);
		clip-path: inset(50%);
		white-space: nowrap;
	}

	/* The Menu button is icon-only here, so the right side takes about 140px. */
	.fi-brand__img {
		height: clamp(1.6rem, (100vw - 11.875rem) / 4.67, 2.1rem);
	}
}

@media (min-width: 40rem) {
	.fi-header__inner {
		gap: 0.75rem;
		min-height: 5rem;
	}

	.fi-brand {
		gap: 0.6rem;
	}

	.menu-toggle {
		gap: 0.45rem;
		padding-inline: 0.95rem;
	}

	.fi-brand--ferndale {
		flex-direction: row;
		align-items: center;
		gap: 0.85rem;
	}

	/* Version B's logo, a little larger on tablets (back to 2.45rem from 64rem
	 * to 75rem, where the menu needs the room). */
	.fi-brand__img {
		height: 2.65rem;
	}

	.fi-brand__label {
		max-width: 5.5rem;
		padding-inline-start: 0.85rem;
		border-inline-start: 1px solid var(--fi-on-dark-border);
		font-size: 0.6875rem;
		letter-spacing: 0.14em;
		white-space: normal;
	}

	/* Version A's fern mark and wordmark, bigger inside the same 80px/84px
	 * header (they were 2.4rem and 1.75rem). */
	.fi-brand__mark {
		height: 3rem;
	}

	.fi-brand__wordmark {
		font-size: 2.125rem;
	}
}

/* The search and account buttons live in the drawer below the desktop breakpoint. */
.search-toggle,
.fi-account {
	display: none;
}

/* ------------------------------------------------------------------
 * Weather (GeneratePress hook slot; the plugin's own markup). A compact
 * chip on the dark header in both designs, just after the brand
 * (administrator's request, 9 Oct 2026).
 * ------------------------------------------------------------------ */
.fi-header__weather {
	display: flex;
	flex: none;
	align-items: center;
}

.fi-header .gpomw-weather {
	--gpomw-panel-bg: var(--fi-card-bg);
	--gpomw-panel-text: var(--fi-text);
	--gpomw-border: var(--fi-on-dark-border);
	--gpomw-control-bg: rgba(255, 255, 255, 0.06);
	--gpomw-control-bg-hover: var(--fi-on-dark-hover);
	--gpomw-focus: var(--fi-focus-on-dark);
	position: static;
	margin: 0;
	color: var(--fi-header-text);
}

.fi-header .gpomw-weather__toggle {
	min-width: 0;
	max-width: none;
	min-height: 2.75rem;
	padding: 0.3rem 0.5rem;
	gap: 0.35rem;
	border-radius: var(--fi-radius-control);
	color: var(--fi-header-text);
}

.fi-header .gpomw-weather__icon {
	width: 1.5rem;
	height: 1.5rem;
	color: var(--fi-current);
}

.fi-header .gpomw-weather__icon svg {
	width: 100%;
	height: 100%;
}

.fi-header .gpomw-weather__location,
.fi-header .gpomw-weather__temp > span {
	display: none;
}

.fi-header .gpomw-weather__temp strong {
	font-size: 1rem;
	font-variant-numeric: tabular-nums;
}

/* The panel opens under the header, inside the page width. */
.fi-header .gpomw-weather__panel {
	top: calc(100% + 0.25rem);
	right: var(--fi-gutter);
	left: auto;
	color: var(--fi-text);
	--fi-ring: var(--fi-focus);
}

@media (min-width: 40rem) {
	.fi-header .gpomw-weather__toggle {
		padding-inline: 0.7rem;
		gap: 0.45rem;
	}
}

.fi-header .gpomw-weather__location {
	color: var(--fi-on-dark-muted);
	opacity: 1; /* The plugin's own 0.78 opacity would fail contrast on top of this colour. */
}

@media (min-width: 48rem) {
	.fi-header .gpomw-weather__location {
		display: block;
	}

	.fi-header .gpomw-weather__temp > span {
		display: inline;
	}
}

/* WP Weather Forecast (the pupils' portal; 0.1.36): its widget, added by its
 * own script into the slot (inc/compat-generatepress.php), drawn as the same
 * compact chip. The plugin hides the forecast below 1100px and the whole
 * widget below 768px itself. */
.fi-header .fi-wpwf-slot {
	display: contents;
}

.fi-header .fi-wpwf-slot .wpwf-header-slot {
	padding: 0;
}

.fi-header .fi-wpwf-slot .wpwf-widget {
	gap: 0.75rem;
	min-height: 2.75rem;
	padding: 0.3rem 0.7rem;
	border: 1px solid var(--fi-on-dark-border);
	border-radius: var(--fi-radius-control);
	color: var(--fi-header-text);
	font-size: 0.875rem;
}

.fi-header .fi-wpwf-slot .wpwf-current .wpwf-temp {
	font-size: 1.0625rem;
	font-weight: 700;
}

.fi-header .fi-wpwf-slot .wpwf-current .wpwf-location {
	color: var(--fi-on-dark-muted);
	opacity: 1; /* The plugin's 0.85 opacity would fail contrast on top of this colour. */
}

.fi-header .fi-wpwf-slot .wpwf-forecast {
	border-left-color: var(--fi-on-dark-border);
}

.fi-header .fi-wpwf-slot .wpwf-forecast .wpwf-day {
	opacity: 1;
}

/* ------------------------------------------------------------------
 * Main menu (desktop bar).
 * ------------------------------------------------------------------ */
.primary-nav {
	display: none;
}

.primary-menu {
	display: flex;
	align-items: center;
	gap: var(--fi-menu-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.primary-menu > li {
	position: relative;
	display: flex;
	align-items: center;
}

/* Log Out is in the account menu; the drawer keeps it as its last item. */
.primary-menu > .fi-menu-item--logout {
	display: none;
}

.primary-menu > li > .nav-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 2.75rem;
	padding: 0.6rem 0.85rem;
	border: 0;
	border-radius: var(--fi-menu-radius);
	background: var(--fi-menu-item-bg);
	color: var(--fi-header-text);
	font-size: var(--fi-menu-size);
	font-weight: var(--fi-menu-weight);
	letter-spacing: var(--fi-menu-tracking);
	line-height: 1.2;
	text-decoration: none;
	text-transform: var(--fi-menu-case);
	white-space: nowrap;
	transition: background-color var(--fi-duration) ease, color var(--fi-duration) ease;
}

.primary-menu > li > .nav-link:hover,
.primary-menu > li.is-open > .nav-link {
	background: var(--fi-menu-item-hover);
	color: var(--fi-header-text);
}

/* Current page: a gold bar (plus aria-current on the link). */
.primary-menu > li:is(.is-current, .is-ancestor) > .nav-link::after {
	content: "";
	position: absolute;
	right: var(--fi-menu-current-inset);
	bottom: var(--fi-menu-current-bottom);
	left: var(--fi-menu-current-inset);
	height: 3px;
	border-radius: 3px;
	background: var(--fi-current);
}

.primary-menu > li.has-children > a.nav-link {
	padding-inline-end: 0.3rem;
}

.nav-icon {
	flex: none;
}

.submenu-toggle--icon {
	display: inline-grid;
	place-items: center;
	width: 1.9rem;
	height: 2.5rem;
	padding: 0;
	border: 0;
	border-radius: var(--fi-radius-sm);
	background: none;
	color: inherit;
}

.primary-menu > li > .submenu-toggle--icon {
	color: var(--fi-header-text);
}

.primary-menu > li > .submenu-toggle--icon:hover {
	background: var(--fi-on-dark-hover);
}

.nav-chevron {
	transition: transform 0.2s ease;
}

.is-open > .submenu-toggle .nav-chevron {
	transform: rotate(180deg);
}

/* Drop-down panels: white, radius 12px, light focus ring. */
.primary-menu .submenu {
	--fi-ring: var(--fi-focus);
	position: absolute;
	top: calc(100% + 0.6rem);
	left: 0;
	z-index: 20;
	display: none;
	min-width: 17.5rem;
	padding: 0.625rem;
	border: 1px solid var(--fi-border);
	border-radius: var(--fi-radius);
	background: var(--fi-card-bg);
	color: var(--fi-text);
	box-shadow: var(--fi-shadow-lg);
	text-align: start;
}

/* Bridges the gap so the panel stays open while the pointer moves into it. */
.primary-menu .submenu::before {
	content: "";
	position: absolute;
	right: 0;
	bottom: 100%;
	left: 0;
	height: 0.7rem;
}

.primary-menu .has-children.is-open > .submenu {
	display: block;
	animation: fi-drop 0.16s ease-out;
}

html:not(.js) .primary-menu .has-children:is(:hover, :focus-within) > .submenu {
	display: block;
}

.primary-menu > li:nth-last-child(-n+2) > .submenu {
	right: 0;
	left: auto;
}

.primary-menu .submenu__list:has(> li:nth-child(7)) {
	column-count: 2;
	column-gap: 0.5rem;
	width: 35rem;
}

/* Resources: three labelled groups side by side (04 §4.8). */
.primary-menu .submenu__list:has(> li > .nav-link--label) {
	display: grid;
	grid-template-columns: repeat(3, minmax(11rem, 1fr));
	gap: 0.25rem 1rem;
	width: min(42rem, calc(100vw - 2 * var(--fi-gutter)));
	column-count: auto;
}

.primary-menu .submenu__list:has(> li > .nav-link--label) .submenu__list--nested {
	margin: 0;
	padding: 0;
	border: 0;
}

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

.submenu__list > li {
	break-inside: avoid;
}

.primary-menu .submenu .nav-link {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.55rem 0.75rem;
	border-radius: var(--fi-radius-sm);
	color: var(--fi-heading);
	font-size: 0.9375rem;
	font-weight: 550;
	line-height: 1.35;
	text-decoration: none;
	transition: background-color 0.12s ease, color 0.12s ease;
}

.primary-menu .submenu a.nav-link:hover {
	background: var(--fi-surface);
	color: var(--fi-primary);
}

.primary-menu .submenu .is-current > .nav-link {
	background: var(--fi-current-tint);
	box-shadow: inset 3px 0 0 var(--fi-accent-line);
	color: var(--fi-primary);
	font-weight: 700;
}

.submenu .nav-link--label {
	color: var(--fi-muted);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.submenu__list--nested {
	margin: 0 0 0.25rem 0.75rem;
	padding: 0 0 0 0.5rem;
	border-inline-start: 2px solid var(--fi-border);
	list-style: none;
}

/* Slide only, no fade, so a panel is never see-through. */
@keyframes fi-drop {
	from {
		transform: translateY(-4px);
	}

	to {
		transform: none;
	}
}

/* ------------------------------------------------------------------
 * Account menu (desktop).
 * ------------------------------------------------------------------ */
.fi-account {
	position: relative;
}

.fi-account__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	min-height: 2.75rem;
	padding: 0.2rem 0.4rem 0.2rem 0.2rem;
	border: 1px solid transparent;
	border-radius: var(--fi-radius-pill);
	background: transparent;
	color: var(--fi-header-text);
}

.fi-account__toggle:hover,
.fi-account__toggle[aria-expanded="true"] {
	background: var(--fi-on-dark-hover);
}

.fi-account__toggle[aria-expanded="true"] .nav-chevron {
	transform: rotate(180deg);
}

.fi-avatar {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 2.3rem;
	height: 2.3rem;
	border-radius: 50%;
	background: var(--fi-avatar-bg);
	box-shadow: 0 0 0 2px var(--fi-on-dark-border);
	color: var(--fi-avatar-text);
	font-size: 0.875rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	line-height: 1;
}

.fi-account__panel {
	--fi-ring: var(--fi-focus);
	position: absolute;
	top: calc(100% + 0.6rem);
	right: 0;
	z-index: 20;
	width: max-content;
	min-width: 15rem;
	max-width: min(20rem, calc(100vw - 2rem));
	padding: 0.5rem;
	border: 1px solid var(--fi-border);
	border-radius: var(--fi-radius);
	background: var(--fi-card-bg);
	color: var(--fi-text);
	box-shadow: var(--fi-shadow-lg);
	animation: fi-drop 0.16s ease-out;
}

.fi-account__panel[hidden] {
	display: none;
}

.fi-account__who {
	display: grid;
	margin: 0 0 0.35rem;
	padding: 0.5rem 0.75rem 0.65rem;
	border-bottom: 1px solid var(--fi-border);
	line-height: 1.35;
}

.fi-account__label {
	color: var(--fi-muted);
	font-size: 0.8125rem;
}

.fi-account__name {
	overflow: hidden;
	color: var(--fi-heading);
	font-weight: 750;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fi-account__links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fi-account__link {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 2.75rem;
	padding: 0.5rem 0.75rem;
	border-radius: var(--fi-radius-sm);
	color: var(--fi-heading);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
}

.fi-account__link:hover {
	background: var(--fi-surface);
	color: var(--fi-primary);
}

.fi-account__link .fi-icon {
	color: var(--fi-muted);
}

/* ------------------------------------------------------------------
 * Desktop (64rem and wider).
 * ------------------------------------------------------------------ */
@media (min-width: 64rem) {
	.fi-header__inner {
		gap: 1rem;
		min-height: 5.25rem;
	}

	/* Version B: the menu needs the room on small laptops (from 75rem the
	 * logo grows again). */
	.fi-brand__img {
		height: 2.45rem;
	}

	.primary-nav {
		display: block;
		margin-inline-start: clamp(0.25rem, 2vw - 0.75rem, 1.5rem);
	}

	.menu-toggle {
		display: none;
	}

	.search-toggle {
		display: inline-grid;
	}

	.fi-account {
		display: block;
	}

	/* Small laptops: tighter menu items so the bar fits from 64rem. */
	.primary-menu > li > .nav-link {
		padding-inline: 0.6rem;
	}

	.primary-menu > li.has-children > a.nav-link {
		padding-inline-end: 0.2rem;
	}

	/* Between 64rem and 80rem the weather chip shows the temperature only. */
	.fi-header .gpomw-weather__location,
	.fi-header .gpomw-weather__temp > span {
		display: none;
	}
}

@media (min-width: 75rem) {
	.fi-brand__img {
		height: 2.65rem;
	}

	.primary-menu > li > .nav-link {
		padding-inline: 0.85rem;
	}

	.primary-menu > li.has-children > a.nav-link {
		padding-inline-end: 0.3rem;
	}
}

@media (min-width: 80rem) {
	/* Bigger logo and wordmark on wide screens, inside the same 84px header. */
	.fi-brand__img {
		height: 2.95rem;
	}

	.fi-brand__mark {
		height: 3.1rem;
	}

	.fi-brand__wordmark {
		font-size: 2.25rem;
	}

	.fi-header .gpomw-weather__location {
		display: block;
	}

	.fi-header .gpomw-weather__temp > span {
		display: inline;
	}
}

/* Without JavaScript: the drawer, search and account can't open, so show
 * the main menu inline (wrapping) and un-stick the header. */
html:not(.js) .search-toggle,
html:not(.js) .fi-account {
	display: none;
}

@media (max-width: 63.99rem) {
	html:not(.js) .menu-toggle {
		display: none;
	}

	html:not(.js) .fi-header__inner {
		flex-wrap: wrap;
		padding-block: 0.75rem;
	}

	html:not(.js) .primary-nav {
		display: block;
		flex-basis: 100%;
	}

	html:not(.js) .primary-menu {
		position: relative;
		flex-wrap: wrap;
	}

	html:not(.js) .has-sticky-header .site-header {
		position: relative;
	}

	html:not(.js) .primary-menu > li {
		position: static;
	}

	html:not(.js) .primary-menu .submenu {
		right: 0;
		left: 0;
		width: auto;
		min-width: 0;
	}

	html:not(.js) .primary-menu .submenu__list:has(> li > .nav-link--label) {
		grid-template-columns: 1fr;
		width: auto;
	}
}

/* ------------------------------------------------------------------
 * Search panel (under the header) and the search form.
 * ------------------------------------------------------------------ */
.search-panel {
	--fi-ring: var(--fi-focus);
	border-top: 1px solid var(--fi-on-dark-border);
	background: var(--fi-card-bg);
	color: var(--fi-text);
	box-shadow: var(--fi-shadow-panel);
}

.search-panel[hidden] {
	display: none;
}

.search-panel__inner {
	padding-block: 1.25rem;
}

.search-panel .search-form {
	max-width: 46rem;
	margin-inline: auto;
}

.search-form {
	display: flex;
	gap: 0.5rem;
	width: 100%;
	margin: 0;
}

.search-form__input {
	flex: 1;
	min-width: 0;
	min-height: 3rem;
	padding: 0.65rem 1rem;
	border: 1px solid var(--fi-control-border);
	border-radius: var(--fi-radius-control);
	background: var(--fi-control-bg);
	color: var(--fi-text);
	font-size: 1.0625rem;
	-webkit-appearance: none;
	appearance: none;
}

.search-form__input::placeholder {
	color: var(--fi-placeholder);
	opacity: 1;
}

.search-form__input:focus-visible {
	border-color: var(--fi-primary);
	outline: 3px solid var(--fi-focus);
	outline-offset: 1px;
}

.search-form__submit {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 0.5rem;
	min-height: 3rem;
	padding: 0.6rem 1.1rem;
	border: 0;
	border-radius: var(--fi-radius-control);
	background: var(--fi-primary);
	color: var(--fi-on-primary);
	font-weight: 700;
}

.search-form__submit:hover {
	background: var(--fi-primary-hover);
	color: var(--fi-on-primary);
}

@media (max-width: 30rem) {
	.search-form__submit-label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(1px, 1px, 1px, 1px);
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

/* ------------------------------------------------------------------
 * Mobile menu drawer (dark, in both designs; z-index 100001).
 * ------------------------------------------------------------------ */
.mobile-menu[hidden] {
	display: none;
}

.mobile-menu {
	position: fixed;
	inset: 0;
	z-index: var(--fi-z-drawer);
}

.mobile-menu__backdrop {
	position: absolute;
	inset: 0;
	background: var(--fi-backdrop);
	opacity: 0;
	transition: opacity 0.25s ease;
}

.mobile-menu__panel {
	--fi-ring: var(--fi-focus-on-dark);
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	width: min(26rem, 100%);
	background: var(--fi-drawer-bg);
	color: var(--fi-header-text);
	box-shadow: var(--fi-shadow-lg);
	transform: translateX(100%);
	transition: transform 0.3s var(--fi-ease);
}

.mobile-menu.is-open .mobile-menu__backdrop {
	opacity: 1;
}

.mobile-menu.is-open .mobile-menu__panel {
	transform: none;
}

.mobile-menu__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 4.25rem;
	padding: 0.5rem 1rem 0.5rem 1.25rem;
	border-bottom: 1px solid var(--fi-on-dark-border);
}

.mobile-menu__title {
	margin: 0;
	color: var(--fi-header-text);
	font-family: var(--fi-font);
	font-size: 1.125rem;
	font-weight: 800;
}

.mobile-menu .icon-button {
	color: var(--fi-header-text);
}

.mobile-menu .icon-button:hover {
	background: var(--fi-on-dark-hover);
	color: var(--fi-header-text);
}

.mobile-menu__body {
	display: grid;
	flex: 1;
	align-content: start;
	gap: 1.5rem;
	padding: 0.75rem 1.25rem 1.5rem;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.mobile-menu__heading {
	margin: 0 0 0.6rem;
	color: var(--fi-on-dark-muted);
	font-family: var(--fi-font);
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.mobile-nav__menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mobile-nav__menu > li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	border-bottom: 1px solid var(--fi-on-dark-border);
}

.mobile-nav__menu > li > .nav-link {
	display: flex;
	flex: 1;
	align-items: center;
	gap: 0.6rem;
	min-height: 3.25rem;
	padding: 0.75rem 0.25rem;
	border: 0;
	background: none;
	color: var(--fi-header-text);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
	text-align: start;
	text-decoration: none;
}

.mobile-nav__menu > li > .nav-link--toggle .nav-chevron {
	margin-inline-start: auto;
}

.mobile-nav__menu > li > .nav-link:hover {
	color: var(--fi-current);
}

.mobile-nav__menu > li:is(.is-current, .is-ancestor) > .nav-link {
	color: var(--fi-current);
	box-shadow: inset 3px 0 0 var(--fi-current);
	padding-inline-start: 0.75rem;
}

.mobile-nav__menu > .fi-menu-item--logout > .nav-link {
	color: var(--fi-on-dark-muted);
	font-weight: 650;
}

.mobile-nav__menu .submenu-toggle--icon {
	width: 2.75rem;
	height: 2.75rem;
	color: var(--fi-header-text);
}

.mobile-nav__menu .submenu-toggle--icon:hover {
	background: var(--fi-on-dark-hover);
}

.mobile-nav__menu .submenu {
	display: none;
	flex-basis: 100%;
	padding: 0 0 0.75rem;
}

.mobile-nav__menu .is-open > .submenu {
	display: block;
}

.mobile-nav__menu .submenu .nav-link {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 2.75rem;
	padding: 0.55rem 0.75rem;
	border-radius: var(--fi-radius-sm);
	color: var(--fi-header-text);
	font-weight: 550;
	line-height: 1.35;
	text-decoration: none;
}

.mobile-nav__menu .submenu a.nav-link:hover {
	background: var(--fi-on-dark-hover);
	color: var(--fi-header-text);
}

.mobile-nav__menu .submenu .is-current > .nav-link {
	box-shadow: inset 3px 0 0 var(--fi-current);
	color: var(--fi-current);
	font-weight: 700;
}

.mobile-nav__menu .submenu .nav-link--label {
	min-height: 0;
	padding-top: 0.85rem;
	color: var(--fi-on-dark-muted);
}

.mobile-nav__menu .submenu__list--nested {
	margin: 0 0 0.25rem 0.75rem;
	border-inline-start-color: var(--fi-on-dark-border);
}

.fi-drawer .search-form__submit {
	background: var(--fi-on-dark-btn-bg);
	color: var(--fi-on-dark-btn-text);
}

.fi-drawer .search-form__submit:hover {
	background: var(--fi-on-dark-btn-hover);
	color: var(--fi-on-dark-btn-text);
}

.fi-drawer .search-form__input {
	border-color: transparent;
}

.fi-drawer .search-form__input:focus-visible {
	outline-color: var(--fi-focus-on-dark);
}

.fi-drawer-account__who {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 0.5rem;
	font-weight: 700;
}

.fi-drawer-account__name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fi-drawer-account__links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fi-drawer-account__link {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 2.75rem;
	padding: 0.5rem 0.25rem;
	color: var(--fi-header-text);
	font-weight: 600;
	text-decoration: none;
}

.fi-drawer-account__link:hover {
	color: var(--fi-current);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

html.has-open-menu {
	overflow: hidden;
}

/* ------------------------------------------------------------------
 * Title band (every page except the front page, which has the small
 * welcome line further down).
 * B: a compact navy band (no photo) with a gold line.
 * A: a light band with a Merriweather title and a green bar.
 * ------------------------------------------------------------------ */
.fi-title-band {
	--fi-ring: var(--fi-focus-on-dark);
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--fi-band-bg);
	color: var(--fi-band-text);
}

:root[data-design="classic"] .fi-title-band {
	--fi-ring: var(--fi-focus);
}

/* A faint fern watermark (Version B). */
.fi-title-band::after {
	content: "";
	position: absolute;
	right: -3rem;
	bottom: -3.5rem;
	z-index: -1;
	width: min(26rem, 70vw);
	aspect-ratio: 400 / 234;
	background: url("../images/mark.png") no-repeat center / contain;
	filter: brightness(0) invert(1);
	opacity: var(--fi-band-watermark);
	pointer-events: none;
}

/* Compact, so the page's own content starts high up the screen. */
.fi-title-band__inner {
	padding-block: clamp(1.25rem, 1rem + 1.2vw, 2rem);
}

:root[data-design="classic"] .fi-title-band__inner {
	padding-block-end: 0.25rem;
}

/* The title lines up with the text inside the article (Version A's card has padding). */
.fi-title-band__inner {
	padding-inline: calc(var(--fi-gutter) + var(--fi-article-pad));
}

.fi-title-band__title {
	max-width: 52rem;
	margin: 0;
	color: var(--fi-band-text);
	font-family: var(--fi-font-display);
	font-size: clamp(1.5rem, 1.25rem + 1vw, 2.125rem);
	font-weight: var(--fi-display-weight);
	letter-spacing: var(--fi-display-tracking);
	line-height: 1.15;
	text-wrap: balance;
}

.fi-title-band__title::after {
	content: "";
	display: block;
	width: 3rem;
	height: 3px;
	margin-top: 0.7rem;
	border-radius: 4px;
	background: var(--fi-band-accent);
}

.fi-title-band__intro {
	max-width: 44rem;
	margin: 0.9rem 0 0;
	color: var(--fi-band-muted);
	font-size: 1.0625rem;
}

/* Breadcrumbs (pages with parent pages). */
.fi-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.5rem;
	margin: 0 0 0.6rem;
	padding: 0;
	list-style: none;
	color: var(--fi-band-muted);
	font-size: 0.875rem;
	font-weight: 600;
}

.fi-breadcrumbs__item + .fi-breadcrumbs__item::before {
	content: "/";
	margin-inline-end: 0.5rem;
	opacity: 0.7;
}

.fi-breadcrumbs a {
	color: var(--fi-band-text);
	text-decoration: underline;
	text-decoration-color: currentColor;
	text-underline-offset: 0.2em;
}

/* ------------------------------------------------------------------
 * Front page: the news ticker hangs from the header (flush against it,
 * square top corners, rounded bottom corners), above the welcome line
 * (administrator's request, 9 Oct 2026). The ticker's colours, label and
 * pause button come from the third-party plugin group; only its place and
 * corners are set here.
 * ------------------------------------------------------------------ */
.fi-front-ticker__content {
	margin: 0;
}

.fi-front-ticker .entry-content div.ticker-news {
	border-top: 0;
	border-radius: 0 0 var(--fi-radius) var(--fi-radius);
}

.fi-front-ticker .entry-content div.ticker-news > span:first-child {
	border-radius: 0 0 0 calc(var(--fi-radius) - 1px);
}

.fi-front-ticker .entry-content div.ticker-news > button.fi-ticker-toggle {
	border-radius: 0 0 calc(var(--fi-radius) - 1px) 0;
}

/* The ticker's shortcode block is now empty in the content: no gap for it. */
.home .entry-content > p:empty {
	display: none;
}

/* ------------------------------------------------------------------
 * Front page: a small, quiet welcome line (greeting, date, school week),
 * then the dashboard links straight away. Same in both designs: the
 * administrator found the large greeting band "in your face" and wanted the
 * links at the top, as on the old intranet (9 Oct 2026).
 * ------------------------------------------------------------------ */
.fi-welcome__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.125rem 0.875rem;
	padding-block: clamp(0.875rem, 0.7rem + 0.6vw, 1.25rem) 0;
}

.fi-welcome__title {
	margin: 0;
	color: var(--fi-heading);
	font-family: var(--fi-font);
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.4;
}

.fi-welcome__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 0.5rem;
	margin: 0;
	color: var(--fi-muted);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.4;
}

.fi-welcome__week {
	color: var(--fi-text);
	font-weight: 600;
}

/* The page content follows the welcome line closely. */
.fi-front {
	padding-top: 0.75rem;
}

/* Version B: a light page behind the white dashboard cards, as in Version A
 * and the old intranet, so the cards stand out without heavy styling. */
:root:not([data-design="classic"]) body.home {
	--fi-page-bg: var(--fi-surface);
	background-color: var(--fi-surface);
}

/* ------------------------------------------------------------------
 * Search results and small page parts.
 * ------------------------------------------------------------------ */
.fi-search-page__form {
	max-width: 40rem;
	margin-bottom: 1.5rem;
}

.fi-search-page__count {
	margin: 0 0 1rem;
	color: var(--fi-muted);
	font-weight: 600;
}

.fi-results {
	display: grid;
	grid-template-columns: minmax(0, 1fr); /* One column, never wider than the page. */
	gap: 0.875rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* A long unbroken word or address in a title or summary wraps instead of
 * widening every result past main's edge (where it was cut off on phones). */
.fi-result {
	position: relative;
	padding: 1.15rem 1.35rem;
	overflow-wrap: anywhere;
	border: 1px solid var(--fi-border);
	border-radius: var(--fi-radius);
	background: var(--fi-card-bg);
	transition: border-color var(--fi-duration) ease, box-shadow var(--fi-duration) ease;
}

.fi-result:hover {
	border-color: var(--fi-primary);
	box-shadow: var(--fi-shadow);
}

.fi-result__path {
	margin: 0 0 0.25rem;
	color: var(--fi-success);
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.fi-result__title {
	margin: 0;
	font-size: 1.2rem;
	font-weight: 750;
}

.fi-result__title a {
	color: var(--fi-heading);
	text-decoration: none;
}

.fi-result__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.fi-result__title a:hover {
	color: var(--fi-primary);
	text-decoration: underline;
}

.fi-result:focus-within {
	outline: 3px solid var(--fi-focus);
	outline-offset: 2px;
}

.fi-result__title a:focus-visible {
	outline: none;
}

.fi-result__text {
	margin: 0.4rem 0 0;
	color: var(--fi-muted);
	font-size: 0.95rem;
	line-height: 1.6;
}

.fi-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 1.5rem 0 0;
}

.navigation.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 2rem;
}

.navigation.pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0 0.85rem;
	border: 1px solid var(--fi-border);
	border-radius: var(--fi-radius-control);
	color: var(--fi-primary);
	font-weight: 700;
	text-decoration: none;
}

.navigation.pagination .page-numbers.current {
	border-color: var(--fi-primary);
	background: var(--fi-primary);
	color: var(--fi-on-primary);
}

/* ------------------------------------------------------------------
 * Footer (slim).
 * ------------------------------------------------------------------ */
.fi-footer {
	--fi-ring: var(--fi-focus-on-dark);
	background: var(--fi-footer-bg);
	color: var(--fi-on-dark-muted);
	font-size: 0.9375rem;
}

.fi-footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
	padding-block: 1.25rem;
}

.fi-footer__name {
	margin: 0;
	color: var(--fi-header-text);
	font-weight: 650;
}

.fi-footer__sep {
	margin-inline: 0.35rem;
	color: var(--fi-current);
}

.fi-footer__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fi-footer__link {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	min-height: 2.75rem;
	color: var(--fi-header-text);
	font-weight: 600;
	text-decoration: none;
}

.fi-footer__link:hover {
	color: var(--fi-header-text);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.fi-footer__link .fi-icon {
	color: var(--fi-current);
}

/* ------------------------------------------------------------------
 * Forced colours and print.
 * ------------------------------------------------------------------ */
@media (forced-colors: active) {
	.site-header,
	.fi-footer,
	.mobile-menu__panel,
	.menu-toggle,
	.search-form__submit,
	.fi-result {
		border: 1px solid CanvasText;
	}

	.fi-brand__img,
	.fi-brand__mark {
		forced-color-adjust: none;
	}
}

@media print {
	.site-header,
	.mobile-menu,
	.fi-footer,
	.skip-link {
		display: none !important;
	}

	.fi-title-band {
		background: none;
		color: #000;
	}

	.fi-title-band__title,
	.fi-welcome__title {
		color: #000;
	}

	.fi-article {
		padding: 0;
		box-shadow: none;
	}
}

.fi-article > .entry-content + .fi-search-page__form {
	margin-top: 1.25rem;
}