/**
 * Site chrome palette bridge.
 *
 * The header and footer were ported from the INAA theme, which drives all of its
 * colour, spacing and motion through `--rwh-*` custom properties (originally
 * `--inaa-*`). Rather than editing thousands of lines of ported CSS, this file
 * redefines those variables in terms of the NISSU palette — so the imported
 * structure keeps its layout and behaviour but wears our colours.
 *
 * Change a value here and the whole header/footer follows. Do not hard-code
 * colours into site-header.css or site-footer.css; add or remap a token instead.
 */

:root {
	/*
	 * The nav bar and footer ground. INAA's navy held this role; NISSU's deep
	 * petrol takes it — the darkest step of the cyan in the logo's ring cluster,
	 * so the chrome belongs to the same hue family as the mark it sits under.
	 * The mid/light steps are tuned from that same hue to keep borders and hover
	 * states inside the ported CSS legible.
	 */
	--rwh-navy: #08323f;        /* petrol deep — nav bar, footer ground */
	--rwh-navy-dark: #05222c;   /* deeper step: footer base, active states */
	--rwh-navy-mid: #0e5a73;    /* hover fills inside the nav */
	--rwh-navy-light: #17798f;  /* dividers and subtle borders on petrol */

	/*
	 * INAA's red was the accent and call-to-action colour. NISSU's is the orange
	 * chevron from the logo. The logo orange (#f3941e) only reaches 2:1 against
	 * white, so it cannot sit under white button text — the CTA uses the
	 * deepened step (5.2:1) and the true logo orange is kept for focus rings and
	 * accents on the dark chrome, where it has all the contrast it needs.
	 */
	--rwh-red: #b06105;         /* deepened orange — flat CTA fill, 4.61:1 under white text */
	--rwh-red-hover: #8f4d05;   /* hover / focus */
	--rwh-red-active: #7d4304;  /* pressed */
	--rwh-red-dark: #8f4f05;    /* CTA hover */
	--rwh-red-light: #f3941e;   /* logo orange — focus rings, accents on petrol */

	/* Neutrals come straight from the shared design tokens. */
	--rwh-white: var( --rw-surface, #ffffff );
	--rwh-off-white: var( --rw-surface-sunken, #eef1f3 );
	--rwh-border: var( --rw-border, #eee7dd );
	--rwh-text: var( --rw-ink, #14202b );
	--rwh-text-muted: var( --rw-ink-muted, #5a6472 );

	/* Footer ground and ink. Kept separate so the footer can be re-skinned alone. */
	--rwh-footer-bg: var( --rwh-navy );
	--rwh-footer-text: rgba( 255, 255, 255, 0.86 );

	/* Type, metrics and motion. */
	--rwh-font: var( --nissu-font );
	--rwh-container: 1280px;
	--rwh-radius: var( --rw-radius-xs, 8px );
	--rwh-shadow: var( --rw-shadow-md, 0 10px 22px -6px rgba( 22, 35, 59, 0.14 ) );
	--rwh-transition: var( --rw-duration, 0.26s ) var( --rw-ease, ease );
}

/*
 * The ported header is fixed/sticky and the parent theme does not reserve space
 * for it, so the first section of a page would slide underneath. The script sets
 * --rwh-brand-offset as the brand row collapses on scroll; this keeps the page
 * content clear of the header at rest.
 */
.rw-header-wrap {
	position: sticky;
	top: 0;
	z-index: 999;
}

/*
 * Hello Elementor's reset marks unstyled buttons with a magenta focus
 * background. The ported header is full of icon buttons (search, burger, drawer
 * close) that are styled by site-header.css, so neutralise the marker for them.
 */
.rw-header-wrap .rw-icon-btn:focus,
.rw-drawer .rw-icon-btn:focus,
.rw-header-wrap button[type="button"]:focus,
.rw-drawer button[type="button"]:focus {
	background-color: transparent;
}

.rw-header-wrap .rw-icon-btn:focus-visible,
.rw-drawer .rw-icon-btn:focus-visible {
	outline: 2px solid var( --rwh-red );
	outline-offset: 2px;
}

/*
 * The search field's magnifier is a `button[type="submit"]`, which the theme's
 * content-button rule in style.css styles as a solid filled button — turning the
 * icon into a coloured block inside the field. Restate it here, deeper than that
 * rule, so the chrome keeps its own icon-button treatment.
 */
.rw-search .rw-search__submit,
.rw-search .rw-search__submit:hover,
.rw-search .rw-search__submit:focus {
	width: 46px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var( --rwh-text-muted );
	transform: none;
}

.rw-search .rw-search__submit:hover,
.rw-search .rw-search__submit:focus-visible {
	color: var( --rwh-red );
}

/* --------------------------------------------------------------------------
 * Primary call-to-action ("Become a member")
 *
 * Flat brand fill, no gradient and no inset highlight. Depth comes only from a
 * soft warm shadow: a lift on hover and a real press on click, so it still
 * reads as a physical control.
 *
 * The three fills are tokens, not literals, because each must clear 4.5:1
 * against white text — #b06105 is 4.61:1, and hover/active only go darker.
 *
 * Restated here rather than in site-header.css so the port stays untouched.
 * ----------------------------------------------------------------------- */

.rw-btn.rw-btn--red {
	position: relative;
	gap: 0.5em;
	padding: 12px 24px;
	border-radius: 10px;
	font-weight: 600;
	letter-spacing: 0.015em;
	/* Flat fill — no gradient, no inner highlight. Depth comes from the shadow. */
	background-image: none;
	background-color: var( --rwh-red );
	box-shadow: 0 1px 2px rgba( 60, 32, 4, 0.22 );
	transition:
		background-color var( --rwh-transition ),
		box-shadow var( --rwh-transition ),
		transform var( --rwh-transition );
}

/*
 * The primary CTA carries a quiet forward arrow. Drawn with a
 * mask so it inherits the button's text colour and needs no markup change.
 */
.rw-btn.rw-btn--red::after {
	content: "";
	width: 1em;
	height: 1em;
	flex: 0 0 auto;
	background-color: currentColor;
	opacity: 0.85;
	-webkit-mask: var( --rwh-arrow ) center / contain no-repeat;
	mask: var( --rwh-arrow ) center / contain no-repeat;
	transition: transform var( --rwh-transition );
}

:root {
	--rwh-arrow: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h12.2l-4.6-4.6L14 6l7 7-7 7-1.4-1.4 4.6-4.6H5z'/%3E%3C/svg%3E" );
}

/* The theme's global `a:hover` underline outranks .rw-btn's text-decoration. */
.rw-btn.rw-btn--red,
.rw-btn.rw-btn--red:hover,
.rw-btn.rw-btn--red:focus,
.rw-btn.rw-btn--red:active {
	text-decoration: none;
	color: #fff;
}

.rw-btn.rw-btn--red:hover,
.rw-btn.rw-btn--red:focus-visible {
	background-image: none;
	background-color: var( --rwh-red-hover );
	transform: translateY( -1px );
	box-shadow: 0 3px 8px -2px rgba( 60, 32, 4, 0.3 );
}

.rw-btn.rw-btn--red:hover::after,
.rw-btn.rw-btn--red:focus-visible::after {
	transform: translateX( 2px );
}

/* Press: settle back onto the surface, shadow tightens. */
.rw-btn.rw-btn--red:active {
	transform: translateY( 0 );
	background-image: none;
	background-color: var( --rwh-red-active );
	box-shadow: 0 1px 1px rgba( 60, 32, 4, 0.26 );
	transition-duration: 60ms;
}

.rw-btn.rw-btn--red:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
	box-shadow:
		0 0 0 4px rgba( 243, 148, 30, 0.5 ),
		0 10px 20px -4px rgba( 4, 92, 180, 0.5 );
}

/* On the navy nav bar a white ring would vanish, so ring in azure instead. */
.rw-navbar .rw-btn.rw-btn--red:focus-visible {
	outline-color: rgba( 255, 255, 255, 0.9 );
}

@media ( prefers-reduced-motion: reduce ) {
	.rw-btn.rw-btn--red,
	.rw-btn.rw-btn--red::after {
		transition: none;
	}

	.rw-btn.rw-btn--red:hover,
	.rw-btn.rw-btn--red:focus-visible {
		transform: none;
	}

	.rw-btn.rw-btn--red:hover::after {
		transform: none;
	}
}

/*
 * The statement of purpose that opens the footer's first column. Sits where the
 * imported layout put office addresses, so it takes the same column width.
 */
.rw-footer__about {
	max-width: 46ch;
	font-size: 0.88rem;
	line-height: 1.7;
	color: var( --rwh-footer-text );
}

.rw-footer__about p {
	margin: 0 0 0.85rem;
}

.rw-footer__about p:last-child {
	margin-bottom: 0;
}

/* Skip link — visible only when focused. */
.skip-link.screen-reader-text {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100001;
}

.skip-link.screen-reader-text:focus {
	left: 1rem;
	top: 1rem;
	width: auto;
	height: auto;
	padding: 0.7rem 1.1rem;
	clip: auto;
	clip-path: none;
	color: #fff;
	background: var( --rwh-navy );
	border-radius: var( --rwh-radius );
}

/* =========================================================================
   Head-band artwork

   Any section's head band can wear .rw-head--image alongside a
   --rwh-head-image custom property, and the navy gradient moves off the
   element onto ::after so it becomes a wash over the photograph instead of
   replacing it. The wash is heaviest on the left, where the eyebrow, title
   and intro sit, and thins out to the right so the picture stays visible.

   Text is lifted above both layers here rather than in each component, so a
   band only has to add the class.
   ========================================================================= */

.rw-head--image {
	position: relative;
	overflow: hidden;
	background: none;
}

.rw-head--image > * {
	position: relative;
	z-index: 1;
}

.rw-head--image::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: var(--rwh-head-image);
	background-size: cover;

	/* These bands are far wider than they are tall, so a 3:2 photograph loses
	   most of its height. Centring the crop reliably decapitates people —
	   faces sit above the middle of almost every group shot — so the window
	   is biased towards the top. Override per band with --rwh-head-focus. */
	background-position: var(--rwh-head-focus, center 28%);
}

.rw-head--image::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background:
		radial-gradient(110% 150% at 86% 6%, rgba(4, 92, 180, 0.34) 0%, rgba(4, 92, 180, 0) 58%),
		linear-gradient(100deg, rgba(5, 34, 44, 0.94) 0%, rgba(5, 34, 44, 0.84) 46%, rgba(5, 34, 44, 0.66) 100%);
}

/* Give the band room to read as a picture rather than a stripe. */
.rw-head--image {
	padding-block: 76px 80px;
}

@media (max-width: 767px) {
	.rw-head--image {
		padding-block: 56px 60px;
	}

	/* A narrow screen leaves the left-to-right fade no room to work in — the
	   title, intro and chips all sit over the picture — so the wash turns
	   vertical and gets heavier. The photograph still reads underneath. */
	.rw-head--image::after {
		background:
			radial-gradient(120% 90% at 84% 4%, rgba(4, 92, 180, 0.32) 0%, rgba(4, 92, 180, 0) 62%),
			linear-gradient(180deg, rgba(5, 34, 44, 0.90) 0%, rgba(5, 34, 44, 0.84) 100%);
	}
}


/* --------------------------------------------------------------------------
 * Compact nav bar — keep it on one line
 *
 * With nine menu items the bar needed ~867px but the container only offers
 * ~837px, so the list wrapped and the sticky bar grew to two rows with a single
 * orphaned item on the second. It wrapped at every desktop width, because the
 * inner container is capped at --rwh-container — a wider screen did not help.
 *
 * Three changes, cheapest first: refuse to wrap, trim the horizontal padding to
 * reclaim the shortfall, and drop the compact logo when it would still not fit.
 * The logo is decorative here (aria-hidden, tabindex="-1") and the full logo is
 * already in the brand row above, so nothing is lost by hiding it.
 * ----------------------------------------------------------------------- */

.rw-navbar .rw-menu {
	flex-wrap: nowrap;
}

.rw-navbar .rw-nav {
	/* Never let the nav be the thing that forces the row taller. */
	min-width: 0;
}

@media ( min-width: 1025px ) {
	.rw-navbar .rw-menu > li > a {
		padding-inline: 13px;
	}
}

/*
 * Between 1025px and 1300px the nav plus the compact logo cannot both fit.
 * The logo goes first — it repeats the brand row rather than adding anything.
 */
@media ( max-width: 1300px ) {
	/*
	 * Deeper than site-header.css's `.rw-header-wrap.is-stuck
	 * .rw-navbar__compact-logo`, which would otherwise win: this file is a
	 * dependency of that one, so it loads first and loses any specificity tie.
	 */
	.rw-header-wrap .rw-navbar .rw-navbar__compact-logo,
	.rw-header-wrap.is-stuck .rw-navbar .rw-navbar__compact-logo {
		display: none;
	}
}

/*
 * Last resort on the narrowest desktop widths: let the nav scroll sideways
 * rather than wrap. Scrollbar hidden — the items remain reachable by keyboard
 * and by trackpad swipe, and the row keeps its height.
 */
@media ( min-width: 1025px ) and ( max-width: 1120px ) {
	.rw-navbar .rw-nav {
		overflow-x: auto;
		scrollbar-width: none;
	}

	.rw-navbar .rw-nav::-webkit-scrollbar {
		display: none;
	}
}


/* --------------------------------------------------------------------------
 * Honeypot
 *
 * Bot-trap fields must never be visible or focusable. This lives here — in a
 * stylesheet loaded on every page — deliberately: if the rule sits in a
 * stylesheet that only loads for one widget, any page missing it renders the
 * trap as a real input, and a visitor who fills it in is silently treated as a
 * bot. The handler bails with an "ok" status and stores nothing, so the message
 * is lost with no error shown to anyone.
 * ----------------------------------------------------------------------- */

.rw-hp,
.rw-newsletter__hp,
.rw-auth__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;

	/* Belt and braces: even if a layout rule wins on position, this hides it. */
	opacity: 0 !important;
	pointer-events: none !important;
}