/**
 * bhss-modern — template.css
 * Bahrain Health & Safety Society. Arabic RTL-first; CSS logical properties
 * throughout so the layout mirrors cleanly for the en-GB language.
 *
 * Contrast verified against the hex fallbacks below (see final delivery
 * report for the worked ratios): ink-on-bg ~13.8:1, ink-soft-on-bg ~7.6:1,
 * white-on-red ~7.5:1 — all comfortably clear of the 4.5:1 AA floor.
 */

/* ------------------------------------------------------------------ */
/* Tokens                                                              */
/* ------------------------------------------------------------------ */
:root {
	--bhss-red: #a32026;
	--bhss-red: oklch(0.48 0.19 27);
	--bhss-red-deep: #7e161b;
	--bhss-red-deep: oklch(0.40 0.17 27);
	--bhss-green: #2c8a5b;
	--bhss-green: oklch(0.55 0.12 155);

	--ink: #332b2a;
	--ink: oklch(0.24 0.015 27);
	--ink-soft: #5b5250;
	--ink-soft: oklch(0.42 0.02 27);

	--bg: #ffffff;
	--surface: #f6f1f1;
	--surface: oklch(0.965 0.006 27);
	--surface-line: #e7dedd;

	--on-red: #ffffff;

	--font-heading: 'Zain', 'Segoe UI', Tahoma, sans-serif;
	--font-body: 'Readex Pro', 'Segoe UI', Tahoma, sans-serif;

	--measure: 70ch;
	/* The merged brand+nav header row's real rendered height varies a
	   little with content/viewport, but comfortably clears ~5.5rem even
	   unscrolled — this only needs to be "tall enough", not exact, since
	   it's solely used to keep the sticky aside clear of the sticky
	   header below. */
	--nav-height: 5.5rem;

	--radius: 0.5rem;
	--space-1: 0.5rem;
	--space-2: 1rem;
	--space-3: 1.5rem;
	--space-4: 2.5rem;

	--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
	--ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
	--motion-fast: 160ms;
	--motion-medium: 320ms;
	--motion-reveal: 400ms;

	--z-nav: 100;
	--z-nav-panel: 110;
	--z-back-to-top: 120;
	/* Below the login popup (z-nav + 10 = 110) on purpose — that's a
	   modal-ish overlay and should always win; this is a persistent,
	   always-present rail. */
	--z-quick-actions: 105;
	--z-skiplink: 200;
}

/* ------------------------------------------------------------------ */
/* Reset & base                                                        */
/* ------------------------------------------------------------------ */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
}

h1, h2, h3, h4 {
	font-family: var(--font-heading);
	font-weight: 800;
	line-height: 1.25;
	margin-block: 0 var(--space-2);
}

h1, h2, h3 {
	text-wrap: balance;
}

p {
	max-width: var(--measure);
	margin-block: 0 var(--space-2);
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
	padding: 0;
	margin: -1px;
}

.skip-link {
	position: absolute;
	inset-inline-start: var(--space-2);
	inset-block-start: -3rem;
	z-index: var(--z-skiplink);
	background: var(--bhss-red);
	color: var(--on-red);
	padding: var(--space-1) var(--space-2);
	border-radius: var(--radius);
	font-weight: 600;
	transition: inset-block-start var(--motion-fast) var(--ease-out-quint);
}

.skip-link:focus {
	inset-block-start: var(--space-2);
}

:focus-visible {
	outline: 3px solid var(--bhss-red-deep);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/* Fluid headings                                                       */
/* ------------------------------------------------------------------ */
h1 {
	font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3.2rem);
}

h2 {
	font-size: clamp(1.35rem, 1.1rem + 1.1vw, 2rem);
}

h3 {
	font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem);
}

/* ------------------------------------------------------------------ */
/* Utility bar                                                          */
/* ------------------------------------------------------------------ */
.utility-bar {
	background: var(--ink);
	color: var(--bg);
	font-size: 0.8125rem;
}

.utility-bar__inner {
	max-width: 78rem;
	margin-inline: auto;
	padding-inline: var(--space-2);
	padding-block: 0.55rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
}

.utility-bar__start {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.utility-bar__portal {
	text-decoration: none;
	opacity: 0.92;
	transition: opacity 150ms var(--ease-out-quart), text-underline-offset 150ms var(--ease-out-quart);
}

.utility-bar__portal:hover,
.utility-bar__portal:focus-visible {
	text-decoration: underline;
	text-underline-offset: 4px;
	opacity: 1;
}

/* ------------------------------------------------------------------ */
/* Login trigger + floating panel — replaces the old sidebar login       */
/* form entirely (mod_login now lives in MenuPos1, moved there at the    */
/* database level). Never in page flow: a plain disclosure button        */
/* toggling an absolutely-positioned card, same aria-expanded/            */
/* aria-controls idiom as the nav caret buttons elsewhere in this file.  */
/* ------------------------------------------------------------------ */
.login-widget {
	position: relative;
}

.login-trigger {
	display: inline-flex;
	align-items: center;
	background: var(--bhss-red);
	color: var(--on-red);
	border: 1px solid var(--bhss-red);
	border-radius: 999px;
	padding-inline: 0.85rem;
	padding-block: 0.3rem;
	font-size: 0.8125rem;
	font-weight: 600;
	transition: background-color 150ms var(--ease-out-quart), border-color 150ms var(--ease-out-quart), transform 150ms var(--ease-out-quart), box-shadow 150ms var(--ease-out-quart);
}

.login-trigger:hover,
.login-trigger:focus-visible {
	background: var(--bhss-red-deep);
	border-color: var(--bhss-red-deep);
	transform: translateY(-1px);
	box-shadow: 0 6px 16px -8px rgb(0 0 0 / 0.5);
}

.login-trigger.is-active {
	transform: translateY(1px);
}

.login-pop {
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: calc(100% + 0.6rem);
	inline-size: 340px;
	max-inline-size: calc(100vw - 2rem);
	background: var(--bg);
	color: var(--ink);
	border-radius: 12px;
	box-shadow: 0 30px 60px -24px rgb(0 0 0 / 0.45), 0 8px 24px -8px rgb(0 0 0 / 0.2);
	padding: var(--space-3);
	z-index: calc(var(--z-nav) + 10);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-6px);
}

@media (prefers-reduced-motion: no-preference) {
	.login-pop {
		transition: opacity 160ms var(--ease-out-quart), transform 160ms var(--ease-out-quart), visibility 160ms;
	}
}

.login-pop.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
}

/* Same red-top-rule motif as the old aside login panel and the footer's
   green rule — a primary-action panel gets this treatment consistently
   across the template. */
.login-pop__heading {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1.1rem;
	color: var(--ink);
	margin: 0 0 var(--space-2);
	padding-block-start: 0.65rem;
	border-block-start: 3px solid var(--bhss-red);
}

.login-pop .mod-login__userdata {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.login-pop .form-group {
	margin: 0;
}

.login-pop .form-group label {
	display: block;
	margin-block-end: 0.3rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--ink-soft);
}

.login-pop .form-group input[type='text'],
.login-pop .form-group input[type='password'] {
	inline-size: 100%;
	padding: 0.65rem 0.85rem;
	border: 1px solid var(--surface-line);
	border-radius: var(--radius);
	background: var(--bg);
	color: var(--ink);
	font: inherit;
	transition: border-color var(--motion-fast) var(--ease-out-quint), box-shadow var(--motion-fast) var(--ease-out-quint);
}

.login-pop .form-group input[type='text']:focus-visible,
.login-pop .form-group input[type='password']:focus-visible {
	outline: none;
	border-color: var(--bhss-red);
	box-shadow: 0 0 0 3px rgb(163 32 38 / 0.15);
}

.mod-login__remember {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.mod-login__remember input[type='checkbox'] {
	inline-size: 1rem;
	block-size: 1rem;
	margin: 0;
	accent-color: var(--bhss-red);
	cursor: pointer;
}

.mod-login__remember label {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--ink);
	cursor: pointer;
}

/* Same shape/weight as the hero CTA and the aside's old submit button. */
.mod-login__submit-btn,
.mod-login__extra-btn {
	inline-size: 100%;
	background: var(--bhss-red);
	color: var(--on-red);
	border: 0;
	border-radius: var(--radius);
	padding-inline: var(--space-3);
	padding-block: 0.85rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color var(--motion-fast) var(--ease-out-quint), transform var(--motion-fast) var(--ease-out-quint), box-shadow var(--motion-fast) var(--ease-out-quint);
}

.mod-login__submit-btn:hover,
.mod-login__extra-btn:hover {
	background: var(--bhss-red-deep);
	transform: translateY(-2px);
	box-shadow: 0 8px 20px -8px rgb(0 0 0 / 0.35);
}

.mod-login__submit-btn:active,
.mod-login__extra-btn:active {
	transform: translateY(1px);
	box-shadow: none;
}

.mod-login__options {
	list-style: none;
	margin: var(--space-2) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	font-size: 0.8125rem;
}

.mod-login__options a {
	color: var(--ink-soft);
	text-decoration: none;
}

.mod-login__options a:hover {
	color: var(--bhss-red);
	text-decoration: underline;
}

@media (max-width: 1280px) {
	.login-pop {
		position: fixed;
		inset-inline: 1rem;
		inset-block-start: 3.4rem;
		inline-size: auto;
		max-inline-size: none;
	}
}

.utility-bar__lang {
	display: flex;
	align-items: center;
}

/* Defensive: core mod_languages markup (or any other module dropped into
   this position) never shows a flag icon in the utility bar — the
   text-pill treatment in html/mod_languages/default.php already omits
   them, this just guards against anything else that might not. */
.utility-bar__lang img {
	display: none;
}

.utility-bar__lang ul {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

/* Language switcher pill — html/mod_languages/default.php override.
   Text label, not a flag; border pill that fills solid on hover/focus. */
.lang-pill {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	color: inherit;
	border: 1px solid rgb(255 255 255 / 0.4);
	border-radius: 999px;
	padding-inline: 0.75rem;
	padding-block: 0.3rem;
	font-size: 0.8125rem;
	font-weight: 600;
	transition: background-color 150ms var(--ease-out-quart), color 150ms var(--ease-out-quart), border-color 150ms var(--ease-out-quart);
}

.lang-pill:hover,
.lang-pill:focus-visible {
	background: var(--bhss-red);
	border-color: var(--bhss-red);
	color: var(--on-red);
}

/* ------------------------------------------------------------------ */
/* Header — the merged brand + nav row (mohandis-style: logo at           */
/* inline-start, menu at inline-end, one white row). The red identity     */
/* band is gone; what's left of it is this slim keyline plus the hero     */
/* slider's scrim/CTA and the site's buttons. The whole row is what       */
/* sticks now (replacing the old nav-only sticky), so .site-nav itself    */
/* carries no position/background of its own any more — see the Nav      */
/* section further down.                                                 */
/* ------------------------------------------------------------------ */
.site-header {
	position: sticky;
	inset-block-start: 0;
	z-index: var(--z-nav);
	background: var(--bg);
	border-block-end: 3px solid var(--bhss-red);
	transition: box-shadow 200ms var(--ease-out-quart);
}

.site-header--scrolled {
	box-shadow: 0 8px 20px -14px rgb(0 0 0 / 0.45);
}

.site-header__aux,
.site-header__extra {
	max-width: 78rem;
	margin-inline: auto;
	padding-inline: var(--space-2);
	font-size: 0.875rem;
	color: var(--ink-soft);
}

.site-header__inner {
	max-width: 78rem;
	margin-inline: auto;
	padding-inline: var(--space-2);
	padding-block: 0.65rem;
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.site-header__brand {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	text-decoration: none;
	color: var(--ink);
	flex: none;
}

.site-header__logo {
	inline-size: 2.75rem;
	block-size: auto;
}

.site-header__name {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.35rem);
	line-height: 1.2;
}

/* Logo mark alone carries the brand in the header row (still linked,
   still an <a> — just without the wordmark competing with the nav for
   space), unconditionally, at every width the nav shares this row with
   it. Not a responsive threshold: .site-header__inner is capped at the
   same 78rem/1248px as every other section on the page (so the two line
   up), and that cap doesn't grow past 1248px no matter how wide the
   viewport gets — the full Arabic wordmark plus a 9-item menu never fit
   in 1248px at any viewport size, so there's no width where showing it
   would actually be safe. */
.site-header__name {
	display: none;
}

/* Everything after the brand — the optional HAModulePosition* extra slot
   and the nav itself — is pushed to the far inline-end of the row. */
.site-header__nav-group {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-inline-start: auto;
	min-width: 0;
}

/* ------------------------------------------------------------------ */
/* Slim auxiliary bars (S* positions)                                   */
/* ------------------------------------------------------------------ */
.sub-bar {
	background: var(--surface);
	border-block-end: 1px solid var(--surface-line);
	padding-block: var(--space-1);
}

.sub-bar .module-panel {
	max-width: 78rem;
	margin-inline: auto;
	padding-inline: var(--space-2);
}

/* ------------------------------------------------------------------ */
/* Nav — lives inside .site-header__nav-group now, not its own sticky    */
/* red band (see the Header section above for the sticky/shadow/keyline  */
/* that replaced it). Ink text, generous spacing, a red underline that    */
/* grows from the inline-start edge on hover — the active item gets a    */
/* permanent full underline plus red text.                                */
/* ------------------------------------------------------------------ */
.site-nav {
	display: flex;
	align-items: center;
	min-width: 0;
}

.site-nav__toggle {
	display: none;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	min-width: 48px;
	padding: var(--space-1);
	color: var(--ink);
}

/* Inert on desktop (no styling needed there at all — the toggle that
   would open it is display: none, see above); the max-width: 1280px block
   further down gives it its actual fixed-overlay appearance. */
.site-nav__scrim {
	display: none;
}

.site-nav__burger,
.site-nav__burger::before,
.site-nav__burger::after {
	display: block;
	width: 22px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
}

.site-nav__burger {
	position: relative;
}

.site-nav__burger::before,
.site-nav__burger::after {
	content: '';
	position: absolute;
	inset-inline-start: 0;
}

.site-nav__burger::before {
	inset-block-start: -7px;
}

.site-nav__burger::after {
	inset-block-start: 7px;
}

/* Top-level row: one bar height, always, on one line, never scrolling —
   a scrollable/wrapping menu is not an acceptable fallback. The 1280px
   burger breakpoint (see the header/toggle rules and the max-width:
   1280px block further down) exists specifically so any viewport too
   narrow to fit every item gets the drawer instead of either of those.
   overflow stays visible (not hidden/auto) so the absolutely-positioned
   dropdown panels further down are never clipped. */
.site-nav .mod-menu {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: clamp(0.9rem, 0.2rem + 1.2vw, 1.75rem);
	overflow: visible;
}

.site-nav .mod-menu > li {
	flex: none;
}

/* Label and caret as one glued unit: flex row, small gap, centered —
   never absolutely positioned apart from each other. */
.site-nav li {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.15rem;
}

.site-nav a {
	display: flex;
	align-items: center;
	position: relative;
	padding-inline: 0.3rem;
	padding-block: 0.9rem;
	color: var(--ink);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.95rem;
	transition: padding-block 200ms var(--ease-out-quart), color var(--motion-fast) var(--ease-out-quart);
}

.site-header--scrolled .site-nav a {
	padding-block: 0.65rem;
}

/* Active-item underline: top-level only — nested dropdown items get their
   own hover/focus treatment, not this bar. Also doubles as the hover/focus
   underline for non-active items, growing from the inline-start edge. On
   the label link itself (not the parent li) so it spans just the label,
   not the caret sitting beside it. transform-origin has no logical
   keyword in CSS, so it's set physically per direction via :dir()
   instead — right for the default RTL, flipped to left for en-GB. */
.site-nav .mod-menu > li > a::after {
	content: '';
	position: absolute;
	inset-inline: 0.15rem;
	inset-block-end: 0.4rem;
	block-size: 3px;
	background: var(--bhss-red);
	border-radius: 2px;
	transform: scaleX(0);
	transform-origin: 100% 50%;
	transition: transform var(--motion-fast) var(--ease-out-quart);
}

:dir(ltr) .site-nav .mod-menu > li > a::after {
	transform-origin: 0% 50%;
}

.site-nav li:hover > a,
.site-nav a:focus-visible {
	color: var(--bhss-red);
}

.site-nav .mod-menu > li:hover > a::after,
.site-nav .mod-menu > li:focus-within > a::after {
	transform: scaleX(1);
}

/* The active item's underline is a permanent state, not a hover
   affordance — no grow-in replay for it. Red text alongside it, so the
   current item reads unambiguously even before anyone hovers it. */
.site-nav .mod-menu > li.current > a::after,
.site-nav .mod-menu > li.active > a::after {
	transform: scaleX(1);
	transition: none;
}

.site-nav .mod-menu > li.current > a,
.site-nav .mod-menu > li.active > a {
	color: var(--bhss-red);
}

.site-nav__aux,
.site-nav__secondary {
	flex-basis: 100%;
	color: var(--ink-soft);
	font-size: 0.875rem;
	padding-block: 0.25rem;
}

/* Caret toggle buttons --------------------------------------------------
   Added by the html/mod_menu/default.php override for every item that has
   children. Click-to-open, not hover: aria-expanded + aria-haspopup carry
   the state, template.js drives it. Small and glued to its label at
   desktop (the .site-nav li flex row + gap does the gluing); the
   max-width: 1280px block further down restores a full 44px touch
   target for the mobile accordion, where every level's caret is a real
   tap target rather than a mouse-hover affordance. */
.site-nav__caret {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.15rem;
	color: inherit;
}

/* Physical (not logical) borders on purpose: a down/up chevron is a
   physical-space concept independent of text direction — border-right +
   border-bottom rotated 45deg is the standard "corner" recipe for it, and
   using border-inline-end/-block-end here would silently mirror the
   glyph between RTL and LTR instead of keeping it pointing down/up. */
.site-nav__caret-icon {
	inline-size: 0.4em;
	block-size: 0.4em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform var(--motion-fast) var(--ease-out-quint);
	margin-block-start: -0.15em;
}

.site-nav__caret[aria-expanded='true'] .site-nav__caret-icon {
	transform: rotate(225deg);
	margin-block-start: 0.2rem;
}

/* A heading/separator parent (e.g. a "2019" group label with no URL of its
   own) has nothing else to click, so its caret is stretched over the whole
   row: the whole item is the toggle, not just the small icon. */
.site-nav__caret--full {
	position: absolute;
	inset: 0;
	justify-content: flex-end;
	padding-inline-end: var(--space-2);
}

/* ------------------------------------------------------------------ */
/* Nav dropdown panels — desktop only. min-width: 1281px is the same    */
/* single breakpoint as the max-width: 1280px mobile block further      */
/* down, just expressed from the other side, so desktop and mobile      */
/* rules can never both match the same viewport and fight over          */
/* !important. Raised from 900/901px to 1100/1281px so the full 9-item  */
/* Arabic top-level menu always has room to sit on one line without      */
/* wrapping or scrolling — below that, the burger drawer takes over.    */
/* ------------------------------------------------------------------ */
@media (min-width: 1281px) {
	/* Level 2: the floating panel that opens off a top-level item. */
	.site-nav .mod-menu > li > .mod-menu__sub {
		display: none;
		position: absolute;
		inset-inline-start: 0;
		inset-block-start: 100%;
		flex-direction: column;
		min-inline-size: 14rem;
		max-inline-size: min(90vw, 28rem);
		max-block-size: min(70vh, 32rem);
		overflow-y: auto;
		background: var(--bg);
		color: var(--ink);
		border-radius: 10px;
		box-shadow: 0 24px 48px -20px rgb(0 0 0 / 0.28), 0 4px 12px -4px rgb(0 0 0 / 0.12);
		padding: 0.5rem;
		margin: 0.4rem 0 0;
		z-index: var(--z-nav-panel);
	}

	.site-nav .mod-menu > li > .mod-menu__sub.is-open {
		display: flex;
	}

	@media (prefers-reduced-motion: no-preference) {
		.site-nav .mod-menu > li > .mod-menu__sub.is-open {
			animation: bhssPanelIn 160ms var(--ease-out-quint) both;
		}
	}

	.site-nav .mod-menu > li > .mod-menu__sub li {
		flex-wrap: nowrap;
		align-items: stretch;
	}

	.site-nav .mod-menu > li > .mod-menu__sub > li > a {
		color: var(--ink);
		padding-inline: 0.75rem;
		padding-block: 0.6rem;
		border-radius: calc(var(--radius) - 0.15rem);
		font-weight: 500;
		font-size: 0.9375rem;
	}

	.site-nav .mod-menu > li > .mod-menu__sub a:hover,
	.site-nav .mod-menu > li > .mod-menu__sub a:focus-visible {
		background: var(--surface);
		color: var(--bhss-red);
	}

	.site-nav .mod-menu__sub .mod-menu__heading,
	.site-nav .mod-menu__sub .mod-menu__separator {
		display: block;
		padding-inline: 0.75rem;
		padding-block: 0.5rem 0.2rem;
		font-weight: 700;
		color: var(--ink);
		font-size: 0.875rem;
	}

	/* Level 3+: no flyout-of-flyout. Grandchildren render as an
	   always-open, indented group inside the very same panel — "2019"
	   reads as a group heading with its links underneath it, not another
	   popover to open. */
	.site-nav .mod-menu > li .mod-menu__sub .mod-menu__sub {
		display: flex;
		flex-direction: column;
		position: static;
		background: transparent;
		box-shadow: none;
		padding: 0;
		margin-inline-start: 0.6rem;
		margin-block: 0.15rem 0.4rem;
		border-inline-start: 2px solid var(--surface-line);
		padding-inline-start: 0.6rem;
	}

	.site-nav .mod-menu > li .mod-menu__sub .mod-menu__sub a {
		color: var(--ink-soft);
		font-size: 0.875rem;
	}

	/* Nested carets only drive the mobile accordion. At desktop every
	   descendant level is flattened open inside the panel (rule above),
	   so there is nothing left for them to toggle here. */
	.site-nav .mod-menu > li > .mod-menu__sub .site-nav__caret {
		display: none;
	}
}

@keyframes bhssPanelIn {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ------------------------------------------------------------------ */
/* Hero (home only)                                                     */
/* ------------------------------------------------------------------ */
.hero {
	background: var(--bhss-red);
	color: var(--on-red);
	/* Grows with viewport but caps a bit earlier than before: at very wide
	   desktop widths a shorter band reads calmer than a tall one. */
	padding-block: clamp(2.5rem, 2rem + 2.4vw, 4rem);
}

.hero__inner {
	max-width: 54rem;
	margin-inline: auto;
	padding-inline: var(--space-2);
	text-align: center;
}

.hero__mark {
	display: inline-block;
	inline-size: 3.25rem;
	block-size: 0.55rem;
	background: var(--bhss-green);
	border-radius: 2px;
	transform: skewX(-18deg);
	margin-block-end: var(--space-3);
}

.hero__title {
	color: var(--on-red);
	margin-block-end: var(--space-2);
	/* Also inherited from the global h1/h2/h3 rule, but named explicitly
	   here since this is the element the "don't wrap awkwardly" complaint
	   was actually about. */
	text-wrap: balance;
}

.hero__text {
	max-width: 42rem;
	margin-inline: auto;
	margin-block-end: var(--space-3);
	font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
	color: var(--on-red);
}

.hero__cta {
	display: inline-block;
	background: var(--on-red);
	color: var(--bhss-red);
	font-weight: 600;
	text-decoration: none;
	padding-inline: var(--space-3);
	padding-block: 0.85rem;
	border-radius: var(--radius);
	transition: transform var(--motion-fast) var(--ease-out-quint), box-shadow var(--motion-fast) var(--ease-out-quint);
}

.hero__cta:hover,
.hero__cta:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px -8px rgb(0 0 0 / 0.35);
}

.hero__cta:active {
	transform: translateY(1px);
	box-shadow: none;
}

/* Page-load choreography: green mark, then title, then mission line, then
   CTA, each 450ms translateY+fade with an 80ms stagger. Wrapped in the
   no-preference query rather than relying on the blanket reduced-motion
   override further down, so under reduced motion these elements never
   pass through a hidden/offset state at all — they render at their
   ordinary static position from the first frame, not just "very fast". */
@media (prefers-reduced-motion: no-preference) {
	.hero.js-anim .hero__mark {
		animation: bhssFadeUp 450ms var(--ease-out-quint) 0ms both;
	}

	.hero.js-anim .hero__title {
		animation: bhssFadeUp 450ms var(--ease-out-quint) 80ms both;
	}

	.hero.js-anim .hero__text {
		animation: bhssFadeUp 450ms var(--ease-out-quint) 160ms both;
	}

	.hero.js-anim .hero__cta {
		animation: bhssFadeUp 450ms var(--ease-out-quint) 240ms both;
	}
}

@keyframes bhssFadeUp {
	from {
		opacity: 0;
		transform: translateY(12px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ------------------------------------------------------------------ */
/* Hero image slider (home only, html/com_content/featured/default.php) */
/* — the .hero band's centerpiece when the featured articles have        */
/* pictures; .hero itself (mark/title/text/cta, further up) is what      */
/* renders instead when none do, so .hero--slider only resets the        */
/* padding/background/color .hero otherwise carries, it doesn't          */
/* replace that block. js/template.js: initSlider() drives index/        */
/* autoplay/swipe/keyboard; every visual state (.is-active, the track's  */
/* transform, .is-entering) is a plain class or inline style this file   */
/* reacts to, so a JS failure just leaves slide 1 showing, static.       */
/* ------------------------------------------------------------------ */
.hero--slider {
	padding: 0;
	background: none;
	color: inherit;
}

.hero-slider {
	position: relative;
	overflow: hidden;
}

/* touch-action: pan-y so a vertical page-scroll swipe still works over
   the slider on touch devices; only horizontal drags are claimed by the
   pointer-swipe handling in initSlider(). */
.hero-slider__track {
	display: flex;
	touch-action: pan-y;
	will-change: transform;
}

@media (prefers-reduced-motion: no-preference) {
	.hero-slider__track {
		transition: transform 500ms var(--ease-out-quint);
	}
}

.hero-slider__slide {
	flex: 0 0 100%;
	min-inline-size: 0;
}

.hero-slider__link {
	display: block;
	position: relative;
	text-decoration: none;
	color: inherit;
	block-size: clamp(380px, 58vh, 560px);
}

.hero-slider__img {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/* Pure legibility, not decoration: a bottom-up scrim strong enough that
   the caption's white text always clears AA contrast over any photo. */
.hero-slider__scrim {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	block-size: 70%;
	background: linear-gradient(to top, rgb(20 12 12 / 0.88), rgb(20 12 12 / 0));
	pointer-events: none;
}

.hero-slider__caption {
	position: absolute;
	inset-inline-start: 0;
	inset-block-end: 0;
	max-inline-size: 46rem;
	padding: var(--space-3) var(--space-3) var(--space-4);
	color: #fff;
}

.hero-slider__date {
	display: block;
	font-size: 0.8125rem;
	opacity: 0.85;
	margin-block-end: 0.4rem;
}

.hero-slider__title {
	display: block;
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: clamp(1.4rem, 1.1rem + 2vw, 2.2rem);
	color: #fff;
	text-wrap: balance;
	margin-block-end: 0.85rem;
}

/* Per-slide entrance: template.js toggles this class off/on (with a
   reflow between) every time the active slide changes, restarting the
   animation each time — see initSlider()'s playCaptionEntrance(). */
@media (prefers-reduced-motion: no-preference) {
	.hero-slider__title.is-entering {
		animation: bhssSliderTitleIn 500ms var(--ease-out-quint) 80ms both;
	}
}

@keyframes bhssSliderTitleIn {
	from {
		opacity: 0;
		transform: translateY(14px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.hero-slider__cta {
	display: inline-block;
	background: #fff;
	color: var(--bhss-red);
	font-weight: 600;
	padding-inline: 1.25rem;
	padding-block: 0.6rem;
	border-radius: var(--radius);
	transition: transform var(--motion-fast) var(--ease-out-quint), box-shadow var(--motion-fast) var(--ease-out-quint);
}

.hero-slider__link:hover .hero-slider__cta,
.hero-slider__link:focus-visible .hero-slider__cta {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px -8px rgb(0 0 0 / 0.4);
}

.hero-slider__arrow {
	position: absolute;
	inset-block-start: 50%;
	transform: translateY(-50%);
	inline-size: 2.75rem;
	block-size: 2.75rem;
	border-radius: 50%;
	background: rgb(255 255 255 / 0.22);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	transition: background-color var(--motion-fast) var(--ease-out-quart);
}

.hero-slider__arrow:hover,
.hero-slider__arrow:focus-visible {
	background: rgb(255 255 255 / 0.4);
}

.hero-slider__arrow--prev {
	inset-inline-start: var(--space-2);
}

.hero-slider__arrow--next {
	inset-inline-end: var(--space-2);
}

/* Logical corner (inline-end + block-start) so the glyph mirrors itself
   automatically between RTL and LTR — no separate :dir() override needed,
   the same recipe just resolves to a different physical corner per
   direction on its own. */
.hero-slider__arrow-icon {
	display: block;
	inline-size: 0.6rem;
	block-size: 0.6rem;
	border-inline-end: 2px solid currentColor;
	border-block-start: 2px solid currentColor;
}

.hero-slider__arrow--prev .hero-slider__arrow-icon {
	transform: rotate(-135deg);
	margin-inline-start: 0.15rem;
}

.hero-slider__arrow--next .hero-slider__arrow-icon {
	transform: rotate(45deg);
	margin-inline-end: 0.15rem;
}

.hero-slider__dots {
	position: absolute;
	inset-block-end: var(--space-2);
	inset-inline: 0;
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	z-index: 2;
}

.hero-slider__dot {
	inline-size: 0.5rem;
	block-size: 0.5rem;
	border-radius: 999px;
	background: rgb(255 255 255 / 0.5);
	transition: inline-size var(--motion-fast) var(--ease-out-quint), background-color var(--motion-fast) var(--ease-out-quint);
}

.hero-slider__dot:hover,
.hero-slider__dot:focus-visible {
	background: rgb(255 255 255 / 0.8);
}

.hero-slider__dot.is-active {
	inline-size: 1.5rem;
	background: #fff;
}

/* ------------------------------------------------------------------ */
/* Sponsor / conference banner                                          */
/* ------------------------------------------------------------------ */
.sponsor-band {
	background: var(--surface);
	padding-block: var(--space-2);
}

/* Same centered inner column as every other full-bleed section (utility
   bar, header, nav, page-container, footer) — all share this exact
   max-width/margin-inline/padding-inline triplet so everything aligns on
   one axis at any viewport width. Without this wrapper the img's own
   margin-inline: auto had nothing narrower than the full viewport to
   center against, so in RTL it just sat flush at the inline-start (right)
   edge instead of centering. */
.sponsor-band__inner {
	max-width: 78rem;
	margin-inline: auto;
	padding-inline: var(--space-2);
}

/* The module's own saved content typically wraps the image in a <p> (the
   editor puts it there). The base `p { max-width: var(--measure) }` rule
   further down is meant for reading prose, but it also caps THIS
   paragraph to 70ch and — because that <p> gets no auto margins of its
   own — leaves it flush at the inline-start edge instead of centered, so
   the img's own margin-inline: auto had nothing but a narrow, off-center
   box to center within. Freeing the <p> back to full width here is what
   actually lets the centering work. */
.sponsor-band__inner p {
	max-width: none;
}

.sponsor-band img {
	display: block;
	max-inline-size: 100%;
	block-size: auto;
	max-block-size: 340px;
	object-fit: contain;
	margin-inline: auto;
}

/* ------------------------------------------------------------------ */
/* Module panel chrome (bhssPanel)                                      */
/* ------------------------------------------------------------------ */
.module-panel {
	background: var(--surface);
	border-radius: var(--radius);
	padding: var(--space-3);
}

.module-panel__title {
	font-size: 1.1rem;
	margin-block-end: var(--space-1);
	color: var(--ink);
}

.module-panel__body :is(ul, ol) {
	list-style: revert;
	padding-inline-start: 1.25rem;
	margin-block: 0.5rem;
}

.module-panel__body a {
	color: var(--bhss-red);
}

.module-panel__body a:hover {
	color: var(--bhss-red-deep);
}

/* ------------------------------------------------------------------ */
/* Content auxiliary rows (CA/CB positions)                             */
/* ------------------------------------------------------------------ */
.content-aux {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--space-2);
	margin-block-end: var(--space-3);
}

.content-aux--end {
	margin-block-start: var(--space-3);
	margin-block-end: 0;
}

/* ------------------------------------------------------------------ */
/* Main layout grid                                                     */
/* ------------------------------------------------------------------ */
.page-container {
	max-width: 78rem;
	margin-inline: auto;
	padding-inline: var(--space-2);
	padding-block: var(--space-4);
}

.layout-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
	gap: var(--space-4);
	align-items: start;
}

.layout-grid--full {
	grid-template-columns: minmax(0, 1fr);
}

/* No max-width on .layout-grid__content main here on purpose: the featured
   news layout (lead + list) is meant to use the full width of this grid
   column. --measure is applied only to actual reading prose further down
   (article body paragraphs, category blog intros, the lead item's intro)
   so long body text still gets a comfortable line length without
   strangling the wider layouts that live in the same column.

   The full-width variant is different: with no aside, .layout-grid__content
   is the entire 78rem page-container — the lead/list layout was designed
   against the narrower ~55% column it shared with the aside, and just
   stretching that same grid-template-columns split edge-to-edge at
   1920px reads as an accident, not a decision. Capping it at a still-
   generous 68rem and centering keeps the composition deliberate at both
   1366 and 1920 without touching the two-column case at all. */
.layout-grid--full .layout-grid__content {
	max-inline-size: 68rem;
	margin-inline: auto;
}

.layout-grid__aside {
	position: sticky;
	inset-block-start: calc(var(--nav-height) + var(--space-2));
}

/* A quiet surface panel (no card-in-card), given its own definite rhythm
   with a thin brand rule at the top — the same visual language as the
   footer's green rule and the nav's active-item underline, just in red
   since this is a primary action (member login), not the reserved green
   counterpoint. */
.layout-grid__aside .module-panel {
	border-block-start: 3px solid var(--bhss-red);
}

.layout-grid__aside .module-panel__title {
	font-family: var(--font-heading);
	font-weight: 700;
	margin-block-end: var(--space-2);
}

.layout-grid__aside form {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.layout-grid__aside fieldset {
	border: 0;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.layout-grid__aside label {
	display: block;
	margin-block-end: 0.3rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--ink-soft);
}

.layout-grid__aside input[type='text'],
.layout-grid__aside input[type='password'] {
	inline-size: 100%;
	padding: 0.65rem 0.85rem;
	border: 1px solid var(--surface-line);
	border-radius: var(--radius);
	background: var(--bg);
	color: var(--ink);
	font: inherit;
	transition: border-color var(--motion-fast) var(--ease-out-quint), box-shadow var(--motion-fast) var(--ease-out-quint);
}

.layout-grid__aside input[type='text']:focus-visible,
.layout-grid__aside input[type='password']:focus-visible {
	outline: none;
	border-color: var(--bhss-red);
	box-shadow: 0 0 0 3px rgb(163 32 38 / 0.15);
}

/* Same shape/weight as the hero CTA, just inverted for a white/surface
   panel instead of sitting on the red band. */
.layout-grid__aside input[type='submit'] {
	inline-size: 100%;
	margin-block-start: var(--space-1);
	background: var(--bhss-red);
	color: var(--on-red);
	border: 0;
	border-radius: var(--radius);
	padding-inline: var(--space-3);
	padding-block: 0.85rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color var(--motion-fast) var(--ease-out-quint), transform var(--motion-fast) var(--ease-out-quint), box-shadow var(--motion-fast) var(--ease-out-quint);
}

.layout-grid__aside input[type='submit']:hover {
	background: var(--bhss-red-deep);
	transform: translateY(-2px);
	box-shadow: 0 8px 20px -8px rgb(0 0 0 / 0.35);
}

.layout-grid__aside input[type='submit']:active {
	transform: translateY(1px);
	box-shadow: none;
}

.layout-grid__aside ul {
	margin-block-start: var(--space-2);
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	font-size: 0.875rem;
}

.layout-grid__aside a {
	color: var(--bhss-red);
	text-decoration: none;
}

.layout-grid__aside a:hover {
	text-decoration: underline;
}

/* ------------------------------------------------------------------ */
/* Featured / news list (com_content overrides)                         */
/* ------------------------------------------------------------------ */
.news-featured__heading h1 {
	margin-block-end: var(--space-3);
}

.news-lead {
	margin-block-end: var(--space-4);
}

.news-lead .news-item {
	display: grid;
	/* Media column first, at inline-start (the DOM already puts .news-item__media
	   before .news-item__body; grid auto-placement follows document
	   direction, so this lands on the right in RTL and the left in
	   en-GB with no extra rules needed). Roughly a 55/45 split. */
	grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
	gap: var(--space-3);
	align-items: center;
	text-decoration: none;
	color: inherit;
	border-radius: var(--radius);
	padding: var(--space-2);
	margin: calc(var(--space-2) * -1);
	transition: transform 200ms var(--ease-out-quint), box-shadow 200ms var(--ease-out-quint);
}

.news-lead .news-item:hover,
.news-lead .news-item:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 16px 32px -20px rgb(0 0 0 / 0.4);
}

.news-lead .news-item__media {
	aspect-ratio: 16 / 9;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--surface);
}

.news-lead .news-item__img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.news-lead .news-item__tile {
	inline-size: 100%;
	block-size: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.news-lead .news-item__initial {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: clamp(3rem, 2.5rem + 3vw, 5rem);
	color: var(--bhss-red);
	opacity: 0.85;
}

.news-lead .news-item__date {
	color: var(--ink-soft);
	font-size: 0.875rem;
	display: block;
	margin-block-end: 0.35rem;
}

.news-lead .news-item__title {
	display: block;
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: clamp(1.4rem, 1.1rem + 1.6vw, 2.4rem);
	color: var(--ink);
	margin-block-end: 0.5rem;
	text-wrap: balance;
}

.news-lead .news-item:hover .news-item__title,
.news-lead .news-item:focus-visible .news-item__title {
	color: var(--bhss-red);
}

.news-lead .news-item__intro {
	display: -webkit-box;
	max-width: var(--measure);
	color: var(--ink-soft);
	/* Capped at 3 lines so a long introtext never dumps a wall of text
	   beside the lead image. */
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.news-list {
	display: flex;
	flex-direction: column;
}

.news-list__item {
	border-block-end: 1px solid var(--surface-line);
}

.news-list__item:first-child {
	border-block-start: 1px solid var(--surface-line);
}

.news-list .news-item {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding-block: var(--space-2);
	/* Negative margin-inline + matching padding-inline lets the hover tint
	   bleed slightly past the text column while the text itself still
	   lines up with everything else in the content column. */
	margin-inline: calc(var(--space-2) * -1);
	padding-inline: var(--space-2);
	border-radius: var(--radius);
	text-decoration: none;
	color: inherit;
	transition: background-color var(--motion-fast) var(--ease-out-quint), transform 200ms var(--ease-out-quint), box-shadow 200ms var(--ease-out-quint);
}

.news-list .news-item:hover,
.news-list .news-item:focus-visible {
	background: var(--surface);
	transform: translateY(-2px);
	box-shadow: 0 12px 24px -18px rgb(0 0 0 / 0.35);
}

.news-list .news-item__media {
	flex: none;
	inline-size: 6rem;
	block-size: 6rem;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--surface);
}

.news-list .news-item__img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform 300ms var(--ease-out-quart);
}

.news-list .news-item:hover .news-item__img,
.news-list .news-item:focus-visible .news-item__img {
	transform: scale(1.04);
}

.news-list .news-item__tile {
	inline-size: 100%;
	block-size: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.news-list .news-item__initial {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 1.25rem;
	color: var(--bhss-red);
}

.news-list .news-item__body {
	min-width: 0;
}

.news-list .news-item__date {
	display: block;
	color: var(--ink-soft);
	font-size: 0.8125rem;
	margin-block-end: 0.2rem;
}

.news-list .news-item__title {
	display: block;
	font-weight: 600;
	color: var(--ink);
}

.news-list .news-item:hover .news-item__title,
.news-list .news-item:focus-visible .news-item__title {
	color: var(--bhss-red);
}

/* "More news" list (html/com_content/featured/default_links.php override) */
.news-more__heading {
	font-size: 1.1rem;
	margin-block-end: var(--space-1);
}

.news-more__list {
	display: flex;
	flex-direction: column;
}

.news-more__item {
	border-block-end: 1px solid var(--surface-line);
}

.news-more__item:first-child {
	border-block-start: 1px solid var(--surface-line);
}

.news-more__item a {
	display: block;
	padding-block: 0.6rem;
	padding-inline: var(--space-1);
	margin-inline: calc(var(--space-1) * -1);
	border-radius: var(--radius);
	color: var(--ink);
	text-decoration: none;
	transition: background-color var(--motion-fast) var(--ease-out-quint), color var(--motion-fast) var(--ease-out-quint);
}

.news-more__item a:hover,
.news-more__item a:focus-visible {
	background: var(--surface);
	color: var(--bhss-red);
}

/* Pager — Joomla core's joomla.pagination.list/link layouts render the
   actual <nav class="pagination__wrapper"><ul class="pagination"> markup
   (Bootstrap-shaped class names, but this template doesn't load Bootstrap
   CSS, so it renders unstyled/underlined until styled here directly). */
.news-featured__pagination {
	margin-block-start: var(--space-3);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-1);
}

.news-featured__pagination .counter {
	margin: 0;
	color: var(--ink-soft);
	font-size: 0.875rem;
}

.pagination__wrapper {
	display: flex;
	justify-content: center;
}

.pagination {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.35rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.pagination .page-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 2.25rem;
	min-block-size: 2.25rem;
	padding-inline: 0.6rem;
	border-radius: 999px;
	background: var(--surface);
	color: var(--ink);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.875rem;
	transition: background-color var(--motion-fast) var(--ease-out-quint), color var(--motion-fast) var(--ease-out-quint);
}

.pagination .page-link:hover,
.pagination .page-link:focus-visible {
	background: var(--bhss-red-deep);
	color: var(--on-red);
}

.pagination .page-item.active .page-link {
	background: var(--bhss-red);
	color: var(--on-red);
}

.pagination .page-item.disabled .page-link {
	opacity: 0.4;
	pointer-events: none;
}

/* Core swaps in these icon-font class names for Start/Prev/Next/End; no
   icon font is loaded here, so a plain glyph stands in via ::before. Core
   already flips which class is used for RTL vs LTR (see
   layouts/joomla/pagination/link.php), so the glyphs just need to match
   each class name, not be flipped again here. */
.pagination .page-link .icon-angle-double-right::before {
	content: '»';
}

.pagination .page-link .icon-angle-double-left::before {
	content: '«';
}

.pagination .page-link .icon-angle-right::before {
	content: '›';
}

.pagination .page-link .icon-angle-left::before {
	content: '‹';
}

/* ------------------------------------------------------------------ */
/* Article & category-blog prose (core com_content markup, no override —  */
/* .com-content-article / .com-content-category-blog are core's own       */
/* class names). --measure goes on the reading text itself, not on the    */
/* whole .layout-grid__content column, so titles/images/info-blocks can   */
/* still use the column's full width.                                     */
/* ------------------------------------------------------------------ */
.com-content-article__body p,
.com-content-category-blog .item-content p {
	max-width: var(--measure);
}

/* ------------------------------------------------------------------ */
/* Footer — four columns (RTL document order: brand first = inline-     */
/* start), the identity's dark ink background plus the green top rule   */
/* stay; green is the footer's one accent, everything else here is       */
/* white/ink-on-dark. Column headings share one pattern (Zain 700 white  */
/* + a short green rule under, the same "brand rule" language as the    */
/* aside login panel's old red top border and the hero's green mark).    */
/* ------------------------------------------------------------------ */
.site-footer {
	background: var(--ink);
	color: var(--bg);
	border-block-start: 3px solid var(--bhss-green);
	margin-block-start: var(--space-4);
}

.site-footer__aux {
	max-width: 78rem;
	margin-inline: auto;
	padding-inline: var(--space-2);
	padding-block: var(--space-2);
	font-size: 0.875rem;
	opacity: 0.9;
}

.site-footer__grid {
	max-width: 78rem;
	margin-inline: auto;
	padding-inline: var(--space-2);
	padding-block: 3.5rem;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-4);
}

.site-footer__col {
	min-width: 0;
}

.site-footer__heading {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--bg);
	margin: 0;
}

.site-footer__heading::after {
	content: '';
	display: block;
	inline-size: 2rem;
	block-size: 3px;
	background: var(--bhss-green);
	border-radius: 2px;
	margin-block: 0.5rem 1rem;
}

/* Brand + blurb column */
.site-footer__brand {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-block-end: var(--space-2);
}

/* The colored logo needs a light ground to read correctly — a small
   white rounded tile behind it, rather than trying to find/ship a
   separate white-friendly logo asset. */
.site-footer__logo-tile {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	inline-size: 3rem;
	block-size: 3rem;
	background: var(--bg);
	border-radius: 12px;
}

.site-footer__logo {
	inline-size: 2.25rem;
	block-size: auto;
}

.site-footer__name {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--bg);
	line-height: 1.3;
}

.site-footer__blurb {
	max-width: none;
	margin: 0;
	color: rgb(255 255 255 / 0.75);
	font-size: 0.9375rem;
}

.site-footer__social {
	display: flex;
	gap: 0.6rem;
	margin-block-start: var(--space-2);
}

.site-footer__social-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.5rem;
	block-size: 2.5rem;
	border-radius: 50%;
	border: 1px solid rgb(255 255 255 / 0.4);
	color: rgb(255 255 255 / 0.85);
	transition: background-color var(--motion-fast) var(--ease-out-quint), border-color var(--motion-fast) var(--ease-out-quint), color var(--motion-fast) var(--ease-out-quint), transform var(--motion-fast) var(--ease-out-quint);
}

.site-footer__social-btn svg {
	inline-size: 1.25rem;
	block-size: 1.25rem;
}

.site-footer__social-btn:hover,
.site-footer__social-btn:focus-visible {
	background: var(--bhss-red);
	border-color: var(--bhss-red);
	color: var(--on-red);
	transform: translateY(-1px);
}

/* Contact column */
.site-footer__contact {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	font-size: 0.9375rem;
}

.site-footer__contact-row {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	color: rgb(255 255 255 / 0.8);
}

.site-footer__contact-row a {
	color: rgb(255 255 255 / 0.8);
	text-decoration: none;
}

.site-footer__contact-row a:hover {
	color: var(--bg);
	text-decoration: underline;
}

.site-footer__icon {
	display: inline-flex;
	flex: none;
	inline-size: 1.1rem;
	block-size: 1.1rem;
	color: rgb(255 255 255 / 0.7);
}

.site-footer__icon svg {
	inline-size: 100%;
	block-size: 100%;
}

.site-footer__map {
	margin-block-start: var(--space-2);
	inline-size: 100%;
	aspect-ratio: 16 / 10;
	border-radius: 10px;
	border: 1px solid rgb(255 255 255 / 0.15);
	overflow: hidden;
}

.site-footer__map iframe {
	inline-size: 100%;
	block-size: 100%;
	border: 0;
	display: block;
}

/* Quick links column — core mod_menu markup (html/mod_menu/default.php's
   override) reused as-is for correctly localized real links "for free",
   flattened to a plain top-level list here: the nested sub-panels and
   caret toggle buttons are the desktop-dropdown/mobile-accordion
   machinery, meaningless (and, being position: absolute, visually
   broken) inside a footer column, so both are hidden in this scope
   rather than trying to reuse that structure for something it isn't. */
.site-footer__menu .mod-menu {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.site-footer__menu .mod-menu > li {
	position: static;
}

.site-footer__menu .mod-menu > li > a {
	position: static;
	display: inline;
	padding: 0;
	color: rgb(255 255 255 / 0.8);
	font-weight: 500;
	font-size: 0.9375rem;
	text-decoration: none;
}

.site-footer__menu .mod-menu > li > a::after {
	content: none;
}

.site-footer__menu .mod-menu > li:hover > a,
.site-footer__menu .mod-menu > li > a:focus-visible {
	color: var(--bg);
	text-decoration: underline;
}

/* Belt-and-braces CSS hide, on top of the JS removal in template.js
   (initFooterMenuCleanup) that strips these out of the DOM entirely —
   both the caret buttons and the nested .mod-menu__sub lists are dead
   weight in a flattened top-level-only footer column, never wired up by
   any JS in this scope. CSS is what covers the brief window before that
   cleanup runs (or a no-JS page, where duplicate ids are a lesser
   concern than a visually broken caret). */
.site-footer__menu .site-nav__caret,
.site-footer__menu .mod-menu__sub {
	display: none;
}

/* Members portal column */
.site-footer__tagline {
	margin: 0 0 var(--space-2);
	color: rgb(255 255 255 / 0.75);
	font-size: 0.9375rem;
}

.site-footer__portal-cta {
	display: inline-flex;
}

.site-footer__legacy {
	margin-block-start: var(--space-3);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.site-footer__legacy .module-panel {
	background: transparent;
	padding: 0;
}

.site-footer__legacy .module-panel__title {
	color: var(--bg);
	font-family: var(--font-heading);
	font-size: 0.95rem;
}

.site-footer__legacy .module-panel__body {
	color: rgb(255 255 255 / 0.75);
	font-size: 0.875rem;
}

.site-footer__legacy .module-panel__body a {
	color: rgb(255 255 255 / 0.75);
}

.site-footer__legacy .module-panel__body a:hover {
	color: var(--bg);
}

@media (max-width: 1024px) {
	.site-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.site-footer__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.site-footer__bottom {
	border-block-start: 1px solid rgb(255 255 255 / 0.12);
	padding-block: var(--space-2);
}

.site-footer__bottom p {
	max-width: 78rem;
	margin-inline: auto;
	padding-inline: var(--space-2);
	text-align: start;
	font-size: 0.8125rem;
	color: rgb(255 255 255 / 0.75);
}

/* ------------------------------------------------------------------ */
/* Error page                                                           */
/* ------------------------------------------------------------------ */
.error-page {
	margin: 0;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--surface);
	color: var(--ink);
	font-family: var(--font-body);
	padding: var(--space-2);
}

.error-page__panel {
	max-width: 32rem;
	text-align: center;
	background: var(--bg);
	border-radius: var(--radius);
	padding: var(--space-4) var(--space-3);
	box-shadow: 0 20px 45px -25px rgb(0 0 0 / 0.35);
}

.error-page__logo {
	inline-size: 3rem;
	block-size: auto;
	margin-inline: auto;
	margin-block-end: var(--space-2);
}

.error-page__code {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: clamp(3rem, 2.5rem + 4vw, 5.5rem);
	color: var(--bhss-red);
	margin: 0;
	line-height: 1;
}

.error-page__title {
	margin-block: var(--space-2);
}

.error-page__message {
	color: var(--ink-soft);
	margin-inline: auto;
}

.error-page__home {
	display: inline-block;
	margin-block-start: var(--space-2);
	background: var(--bhss-red);
	color: var(--on-red);
	text-decoration: none;
	font-weight: 600;
	padding-inline: var(--space-3);
	padding-block: 0.75rem;
	border-radius: var(--radius);
}

.error-page__home:hover {
	background: var(--bhss-red-deep);
}

.error-page__debug {
	text-align: start;
	margin-block-start: var(--space-3);
	font-size: 0.75rem;
	max-height: 16rem;
	overflow: auto;
	background: var(--surface);
	padding: var(--space-2);
	border-radius: var(--radius);
}

/* ------------------------------------------------------------------ */
/* Motion system                                                        */
/*                                                                       */
/* Scroll reveals (js/template.js: initScrollReveal). [data-reveal] is   */
/* set server-side on the lead article, each news-list row, the aside    */
/* login panel and the footer columns — and added by JS itself for       */
/* article/category-page items, which live in core Joomla markup this    */
/* template doesn't override, so there's no template file to put the     */
/* attribute in ahead of time.                                           */
/*                                                                       */
/* The two rules below are the whole safety contract: with no CSS or JS  */
/* at all, [data-reveal] elements are just normal elements (opacity: 1,  */
/* no transform) — fully visible. Only once JS has both run AND added    */
/* .js-motion to <html> do they start hidden pending reveal; the js-anim */
/* class only gets applied by JS immediately before the same script      */
/* wires up the observer, and a timeout in initScrollReveal force-adds   */
/* .is-revealed to anything left over so a missed intersection (or an    */
/* IntersectionObserver-less browser) can never leave content stuck      */
/* invisible.                                                            */
/* ------------------------------------------------------------------ */
[data-reveal] {
	opacity: 1;
	transform: none;
}

.js-motion [data-reveal] {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity var(--motion-reveal) var(--ease-out-quint), transform var(--motion-reveal) var(--ease-out-quint);
}

.js-motion [data-reveal].is-revealed {
	opacity: 1;
	transform: translateY(0);
}

/* Back-to-top — built entirely by JS (see initBackToTop), never present
   in server-rendered markup at all, so there is no "hidden by default"
   state to reason about for the no-JS case: without JS the button simply
   doesn't exist, which is correct for a purely optional scroll utility. */
.back-to-top {
	position: fixed;
	inset-block-end: var(--space-3);
	inset-inline-end: var(--space-3);
	inline-size: 3rem;
	block-size: 3rem;
	border-radius: 50%;
	border: 0;
	background: var(--bhss-red);
	color: var(--on-red);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 10px 24px -10px rgb(0 0 0 / 0.45);
	cursor: pointer;
	opacity: 0;
	transform: scale(0.7);
	pointer-events: none;
	z-index: var(--z-back-to-top);
	transition: opacity 250ms var(--ease-out-quart), transform 250ms var(--ease-out-expo), background-color var(--motion-fast) var(--ease-out-quart);
}

.back-to-top.is-visible {
	opacity: 1;
	transform: scale(1);
	pointer-events: auto;
}

.back-to-top:hover,
.back-to-top:focus-visible {
	background: var(--bhss-red-deep);
}

/* pointer-events is none until .is-visible, so :active can only ever
   fire once the button is already shown — no need for a separate
   not-yet-visible variant of this rule. */
.back-to-top.is-visible:active {
	transform: scale(0.94);
}

.back-to-top__chevron {
	display: block;
	inline-size: 0.55rem;
	block-size: 0.55rem;
	/* Physical borders again (see .site-nav__caret-icon above) — "up" is
	   up regardless of text direction. */
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(-45deg);
	margin-block-start: 0.15rem;
}

/* ------------------------------------------------------------------ */
/* Floating quick-actions rail (initQuickActions() in template.js).      */
/* Desktop (>1280px): a vertical tab rail flush to the inline-end edge.  */
/* Mobile (<=1280px, same boundary as the nav burger): the same markup   */
/* becomes a FAB that expands the same four links upward as pills — see  */
/* the max-width: 1280px block further down. Server-rendered (not JS-    */
/* built like .back-to-top) because two of its four links need a real    */
/* #__menu lookup — see bhssResolveMenuLink() in index.php.              */
/* ------------------------------------------------------------------ */
.quick-actions {
	position: fixed;
	inset-inline-end: 0;
	/* Plain 50% collides with the home hero slider's arrows (vertically
	   centered inside the hero band, which sits in roughly this same
	   vertical range on common desktop viewport heights) — nudged down
	   past them. Checked against the hero's arrow rect at 1366x900: this
	   clears it with margin to spare, and still reads as "centered" on
	   inner pages that have no hero at all. */
	inset-block-start: calc(50% + 150px);
	transform: translateY(-50%);
	z-index: var(--z-quick-actions);
	display: flex;
	flex-direction: column;
}

.quick-actions__fab,
.quick-actions__scrim {
	display: none;
}

.quick-actions__list {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.quick-actions__item {
	opacity: 1;
	transform: none;
}

.quick-actions__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.3rem;
	inline-size: 4.5rem;
	padding-block: 0.7rem;
	padding-inline: 0.4rem;
	/* Rounded on the inline-start corners only — the side facing the
	   content — flush/square against the viewport edge on the other. */
	border-start-start-radius: 14px;
	border-end-start-radius: 14px;
	background: var(--ink);
	color: rgb(255 255 255 / 0.9);
	text-decoration: none;
	text-align: center;
	box-shadow: 0 8px 20px -12px rgb(0 0 0 / 0.4);
	transition: transform var(--motion-fast) var(--ease-out-quint), filter var(--motion-fast) var(--ease-out-quint), box-shadow var(--motion-fast) var(--ease-out-quint);
}

.quick-actions__link--primary {
	background: var(--bhss-red);
	color: var(--on-red);
}

/* Slides toward the content (away from the edge it's flush against) on
   hover — physically opposite directions between RTL and LTR, since the
   rail sits at inset-inline-end on both (left in RTL, right in LTR). */
.quick-actions__link:hover,
.quick-actions__link:focus-visible {
	transform: translateX(6px);
	filter: brightness(1.15);
	box-shadow: 0 14px 28px -12px rgb(0 0 0 / 0.5);
}

:dir(ltr) .quick-actions__link:hover,
:dir(ltr) .quick-actions__link:focus-visible {
	transform: translateX(-6px);
}

.quick-actions__icon {
	display: inline-flex;
	flex: none;
	inline-size: 1.4rem;
	block-size: 1.4rem;
}

.quick-actions__icon svg {
	inline-size: 100%;
	block-size: 100%;
}

.quick-actions__label {
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 1.3;
}

/* Load entrance — staggered slide-in from the edge, desktop only (the
   rail is always visible here, unlike the mobile FAB's pills which stay
   collapsed until tapped). Self-contained rather than reusing the
   [data-reveal] system: that's scroll-triggered, and this rail is
   position: fixed — always within the viewport already — so the two
   don't actually share a triggering condition, just the same "start
   hidden only once .js-motion confirms JS ran" safety contract. */
@media (min-width: 1281px) {
	.js-motion .quick-actions__item {
		opacity: 0;
		transform: translateX(24px);
		transition: opacity 300ms var(--ease-out-quint), transform 300ms var(--ease-out-quint);
	}

	:dir(ltr) .js-motion .quick-actions__item {
		transform: translateX(-24px);
	}

	.js-motion .quick-actions__item.is-shown {
		opacity: 1;
		transform: translateX(0);
	}
}

/* ------------------------------------------------------------------ */
/* Responsive — single breakpoint for nav/aside                         */
/* ------------------------------------------------------------------ */
@media (max-width: 1280px) {
	.site-nav__toggle {
		display: inline-flex;
	}

	/* Real touch target back for the mobile accordion — every level's
	   caret is a genuine tap target here, not the small mouse-hover
	   affordance it is glued next to its label at desktop. */
	.site-nav__caret {
		min-inline-size: 44px;
		min-block-size: 44px;
	}

	/* Full-screen overlay scrim behind the drawer — a plain fixed layer,
	   opacity/pointer-events only so it's free under prefers-reduced-motion
	   with zero extra rules. template.js toggles .is-open on it in lockstep
	   with the panel (see initNavToggle's openPanel/closePanel). */
	.site-nav__scrim {
		display: block;
		position: fixed;
		inset: 0;
		background: rgb(20 12 12 / 0.45);
		opacity: 0;
		pointer-events: none;
		z-index: var(--z-nav-panel);
		transition: opacity 220ms var(--ease-out-quart);
	}

	.site-nav__scrim.is-open {
		opacity: 1;
		pointer-events: auto;
	}

	/* Full-height inline-end drawer — white bg / ink text / red accents,
	   replacing the old red flyout band. translateX is physical, not
	   logical, so which physical side it slides off toward has to be
	   flipped explicitly per direction, same :dir() idiom as the rest of
	   this file (site-nav underline, back-to-top chevron, etc). */
	.site-nav__panel {
		position: fixed;
		inset-block: 0;
		inset-inline-end: 0;
		inline-size: min(85vw, 22rem);
		z-index: calc(var(--z-nav-panel) + 1);
		background: var(--bg);
		color: var(--ink);
		overflow-y: auto;
		padding: var(--space-4) var(--space-2) var(--space-2);
		box-shadow: -16px 0 40px -20px rgb(0 0 0 / 0.4);
		transform: translateX(100%);
	}

	:dir(rtl) .site-nav__panel {
		transform: translateX(-100%);
	}

	@media (prefers-reduced-motion: no-preference) {
		.site-nav__panel {
			transition: transform 260ms var(--ease-out-quint);
		}
	}

	.site-nav__panel.is-open {
		transform: translateX(0);
	}

	.site-nav__panel ul,
	.site-nav ul {
		flex-direction: column;
	}

	.site-nav .mod-menu {
		overflow-x: visible;
	}

	.site-nav__panel li::after {
		inset-block-end: 0.3rem;
	}

	/* Dropdown panels become collapsed-by-default accordions: every level
	   (not just the top one) gets its own working caret, static in normal
	   flow rather than an absolutely-positioned floating panel. */
	.site-nav .mod-menu > li > .mod-menu__sub,
	.site-nav .mod-menu > li .mod-menu__sub .mod-menu__sub {
		display: none;
		position: static;
		inline-size: auto;
		min-inline-size: 0;
		max-inline-size: none;
		max-block-size: none;
		overflow: visible;
		background: transparent;
		color: var(--ink);
		box-shadow: none;
		border-radius: 0;
		border-inline-start: 1px solid var(--surface-line);
		padding: 0;
		margin-inline-start: var(--space-2);
	}

	/* !important: the level-3 half of the display:none rule above
	   (".mod-menu__sub .mod-menu__sub") carries higher specificity than
	   this single-class ".is-open" toggle, so without it a grandchild
	   accordion could never actually open. */
	.site-nav .mod-menu__sub.is-open {
		display: flex !important;
		flex-direction: column;
	}

	.site-nav .mod-menu > li > .mod-menu__sub a,
	.site-nav .mod-menu > li .mod-menu__sub .mod-menu__sub a {
		color: var(--ink);
	}

	.site-nav .mod-menu > li > .mod-menu__sub a:hover,
	.site-nav .mod-menu > li > .mod-menu__sub a:focus-visible {
		background: var(--surface);
		color: var(--bhss-red);
		text-decoration: none;
	}

	.site-nav .mod-menu__sub .mod-menu__heading,
	.site-nav .mod-menu__sub .mod-menu__separator {
		color: var(--ink-soft);
		opacity: 1;
	}

	/* Re-enable every nested caret so each level accordions independently. */
	.site-nav .mod-menu > li > .mod-menu__sub .site-nav__caret {
		display: inline-flex;
	}

	.layout-grid {
		grid-template-columns: 1fr;
	}

	.layout-grid__aside {
		position: static;
	}

	.news-lead .news-item {
		grid-template-columns: 1fr;
	}

	/* .back-to-top moves to the opposite corner so the FAB (below) never
	   overlaps it — the two persistent fixed controls simply take one
	   bottom corner each. */
	.back-to-top {
		inset-inline-end: auto;
		inset-inline-start: var(--space-3);
	}

	.quick-actions {
		inset-block-start: auto;
		inset-block-end: var(--space-3);
		inset-inline-end: var(--space-3);
		transform: none;
	}

	.quick-actions__fab {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		inline-size: 56px;
		block-size: 56px;
		border-radius: 50%;
		border: 0;
		background: var(--bhss-red);
		color: var(--on-red);
		box-shadow: 0 10px 24px -10px rgb(0 0 0 / 0.5);
		z-index: 1;
		transition: background-color var(--motion-fast) var(--ease-out-quint);
	}

	.quick-actions__fab:hover,
	.quick-actions__fab:focus-visible {
		background: var(--bhss-red-deep);
	}

	.quick-actions__fab-icon svg {
		transition: transform 200ms var(--ease-out-quint);
	}

	/* Plus becomes an X — a 45deg turn is the standard trick, no second
	   icon needed. */
	.quick-actions__fab[aria-expanded='true'] .quick-actions__fab-icon svg {
		transform: rotate(45deg);
	}

	.quick-actions__scrim {
		display: block;
		position: fixed;
		inset: 0;
		background: rgb(20 12 12 / 0.2);
		opacity: 0;
		pointer-events: none;
		z-index: -1;
		transition: opacity 200ms var(--ease-out-quart);
	}

	.quick-actions__scrim.is-open {
		opacity: 1;
		pointer-events: auto;
	}

	.quick-actions__list {
		position: absolute;
		inset-inline-end: 0;
		inset-block-end: calc(100% + 0.75rem);
		flex-direction: column-reverse;
		align-items: flex-end;
		gap: 0.6rem;
		pointer-events: none;
	}

	.quick-actions__list.is-open {
		pointer-events: auto;
	}

	.quick-actions__item {
		opacity: 0;
		transform: scale(0.8) translateY(8px);
	}

	.quick-actions__list.is-open .quick-actions__item {
		opacity: 1;
		transform: scale(1) translateY(0);
	}

	@media (prefers-reduced-motion: no-preference) {
		.quick-actions__item {
			transition: opacity 150ms var(--ease-out-quint), transform 150ms var(--ease-out-quint);
		}
	}

	.quick-actions__link {
		flex-direction: row;
		inline-size: auto;
		max-inline-size: 80vw;
		white-space: nowrap;
		border-radius: 999px;
		padding-inline: 1rem;
		padding-block: 0.65rem;
		gap: 0.5rem;
	}

	.quick-actions__label {
		font-size: 0.8125rem;
	}
}

/* ------------------------------------------------------------------ */
/* Reduced motion                                                       */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		animation-delay: 0ms !important;
		transition-duration: 0.001ms !important;
		transition-delay: 0ms !important;
		scroll-behavior: auto !important;
	}

	/* Belt-and-braces on top of the blanket rule above: the hero stagger
	   keyframes are already scoped to a `prefers-reduced-motion:
	   no-preference` query (see .hero.js-anim above), so they never apply
	   here in the first place — nothing to neutralize. The scroll-reveal
	   and back-to-top effects are plain transitions, already covered by
	   transition-duration/-delay: 0.001ms above; JS also skips the
	   per-element transition-delay stagger entirely when this media query
	   matches (see prefersReducedMotion() in template.js), so there's
	   nothing left in this file that still needs a reduced-motion
	   override written out explicitly. */
}

/* ------------------------------------------------------------------ */
/* Print                                                                */
/* ------------------------------------------------------------------ */
@media print {
	.utility-bar,
	.site-nav,
	.hero,
	.sponsor-band,
	.layout-grid__aside,
	.site-footer,
	.skip-link {
		display: none !important;
	}

	body {
		color: #000;
		background: #fff;
	}

	.layout-grid {
		display: block;
	}

	a[href]::after {
		content: ' (' attr(href) ')';
		font-size: 0.75em;
	}
}