/* Red Arrow Hero Banner */

/* Montserrat, self-hosted (SIL Open Font License, see fonts/Montserrat-OFL.txt). */
@font-face {
	font-family: "RA Montserrat";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/montserrat-latin-400-normal.woff2") format("woff2");
}

@font-face {
	font-family: "RA Montserrat";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("fonts/montserrat-latin-700-normal.woff2") format("woff2");
}

.ra-hero {
	--ra-hero-brand: #b83230;
	--ra-hero-ratio: 4/3;
	--ra-hero-ratio-m: 4/5;
	--ra-hero-maxh: 80vh;
	--ra-hero-speed: 600ms;
	--ra-hero-container: 1200px;
	--ra-hero-gutter: clamp(20px, 4vw, 64px);
	--ra-hero-ink: #1a1a1a;

	position: relative;
	width: 100%;
	overflow: hidden;
	background: #fff;
	color: var(--ra-hero-ink);
}

.ra-hero *,
.ra-hero *::before,
.ra-hero *::after {
	box-sizing: border-box;
}

/* Full width: break out of the theme's content box to span the whole screen.
   Works inside boxed pages and inside already-stretched rows (where it changes nothing). */
.ra-hero.ra-hero--full {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* Stops 100vw causing a sideways scrollbar on Windows (clip, unlike hidden, keeps sticky headers working). */
html:has(.ra-hero--full),
body:has(.ra-hero--full) {
	overflow-x: clip;
}

/* All slides sit in the same grid cell, so the banner is as tall as the tallest
   slide and nothing jumps when they change. */
.ra-hero__track {
	display: grid;
}

.ra-hero__slide {
	grid-area: 1 / 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--ra-hero-speed) ease, visibility 0s linear var(--ra-hero-speed);
}

.ra-hero__slide.is-active {
	opacity: 1;
	visibility: visible;
	z-index: 1;
	transition: opacity var(--ra-hero-speed) ease, visibility 0s;
}

.ra-hero--img-left .ra-hero__media {
	order: -1;
}

/* ---------- Text ---------- */

.ra-hero__content {
	/* Lines the text up with the site's content width on large screens.
	   200% = full banner width, because % padding is relative to this column. */
	padding-block: var(--ra-hero-gutter);
	padding-inline-start: max(var(--ra-hero-gutter), calc((200% - var(--ra-hero-container)) / 2));
	padding-inline-end: var(--ra-hero-gutter);
}

.ra-hero--img-left .ra-hero__content {
	padding-inline-start: var(--ra-hero-gutter);
	padding-inline-end: max(var(--ra-hero-gutter), calc((200% - var(--ra-hero-container)) / 2));
}

.ra-hero__content-inner {
	max-width: 36rem;
}

.ra-hero__heading {
	margin: 0 0 0.5em;
	color: var(--ra-hero-brand);
	font-size: clamp(1.75rem, 1.1rem + 1.8vw, 3rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

/* Designer spec (2027 catalogue): Montserrat, heading Regular with **Bold** words,
   leading 43/40, tracking 0; subheading at 23/40 of the heading size. */
.ra-hero--font-montserrat:not(.ra-hero--fixed) .ra-hero__heading,
.ra-hero--font-montserrat:not(.ra-hero--fixed) .ra-hero__subheading {
	font-family: "RA Montserrat", Montserrat, Arial, sans-serif;
	font-weight: 400;
	letter-spacing: 0;
}

.ra-hero--font-montserrat:not(.ra-hero--fixed) .ra-hero__heading {
	line-height: 1.075;
}

.ra-hero__heading strong,
.ra-hero__subheading strong {
	font-weight: 700;
}

.ra-hero__heading {
	--ra-h: clamp(1.75rem, 1.1rem + 1.8vw, 3rem);
	font-size: var(--ra-h);
}

.ra-hero__subheading {
	margin: -0.35em 0 1.25em;
	font-size: calc(clamp(1.75rem, 1.1rem + 1.8vw, 3rem) * 0.575);
	line-height: 1.2;
	color: inherit;
}

.ra-hero__text {
	margin: 0 0 1.5em;
	font-size: clamp(1rem, 0.9rem + 0.35vw, 1.25rem);
	line-height: 1.5;
	color: var(--ra-hero-ink);
}

.ra-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 16px;
}

.ra-hero .ra-hero__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 10rem;
	min-height: 48px;
	padding: 0.75em 2em;
	border-radius: 999px;
	background: var(--ra-hero-brand);
	color: #fff;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none !important; /* themes often underline links inside page content */
	box-shadow: none;
	transition: background-color 0.25s ease;
}

.ra-hero .ra-hero__btn:hover,
.ra-hero .ra-hero__btn:focus-visible {
	color: #fff;
	/* Hover style A: the brand red deepens. No movement. */
	background-color: color-mix(in srgb, var(--ra-hero-brand) 78%, #000);
}

/* ---------- Dark panel ---------- */

.ra-hero__slide--dark {
	background: var(--ra-hero-dark, #000);
	color: #fff;
}

.ra-hero__slide--dark .ra-hero__heading,
.ra-hero__slide--dark .ra-hero__subheading,
.ra-hero__slide--dark .ra-hero__text {
	color: #fff;
}

.ra-hero__slide--dark .ra-hero__media {
	background: var(--ra-hero-dark, #000);
}

/* ---------- Image ---------- */

.ra-hero__media {
	position: relative;
	align-self: stretch; /* fills the full banner height if the text column is taller */
	width: 100%;
	aspect-ratio: var(--ra-hero-ratio);
	max-height: var(--ra-hero-maxh);
	overflow: hidden;
	background: #111;
}

.ra-hero__media-link,
.ra-hero__media picture {
	position: absolute;
	inset: 0;
	display: block;
}

.ra-hero__media img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: var(--ra-fx, 50%) var(--ra-fy, 50%);
	transition: transform 0.6s ease;
}

.ra-hero__media-link:hover img {
	transform: scale(1.02);
}

/* ---------- Controls ---------- */

.ra-hero__controls {
	position: absolute;
	z-index: 3;
	bottom: 24px;
	left: calc(50% + 24px);
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 8px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.45);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.ra-hero--img-left .ra-hero__controls {
	left: 24px;
}

.ra-hero__dots {
	display: flex;
	align-items: center;
}

.ra-hero .ra-hero__dot,
.ra-hero .ra-hero__arrow,
.ra-hero .ra-hero__pause {
	appearance: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: #fff;
	cursor: pointer;
	box-shadow: none;
}

/* 24px tap target, 10px visible dot */
.ra-hero .ra-hero__dot {
	position: relative;
	width: 24px;
	height: 24px;
}

.ra-hero .ra-hero__dot::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 10px;
	border: 2px solid #fff;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	transition: background 0.2s ease, width 0.2s ease;
}

.ra-hero .ra-hero__dot.is-active::before {
	background: #fff;
}

.ra-hero .ra-hero__arrow,
.ra-hero .ra-hero__pause {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	transition: background 0.2s ease;
}

.ra-hero .ra-hero__arrow:hover,
.ra-hero .ra-hero__pause:hover {
	background: rgba(255, 255, 255, 0.18);
}

.ra-hero__arrow svg,
.ra-hero__pause svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.25;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ra-hero__icon-play {
	display: none;
}

.ra-hero__pause[aria-pressed="true"] .ra-hero__icon-pause {
	display: none;
}

.ra-hero__pause[aria-pressed="true"] .ra-hero__icon-play {
	display: block;
	fill: currentColor;
}

.ra-hero a:focus-visible,
.ra-hero button:focus-visible {
	outline: 3px solid var(--ra-hero-brand);
	outline-offset: 3px;
}

.ra-hero__controls button:focus-visible {
	outline-color: #fff;
	outline-offset: 1px;
}

.ra-hero__media-link:focus-visible {
	outline-offset: -6px;
	outline-color: #fff;
}

/* ---------- Mobile: stacked ---------- */

@media (max-width: 767px) {
	.ra-hero__slide {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
	}

	.ra-hero__media {
		align-self: start;
		aspect-ratio: var(--ra-hero-ratio-m);
		max-height: 75vh;
	}

	.ra-hero--m-image-first .ra-hero__media {
		order: -1;
	}

	.ra-hero--m-text-first .ra-hero__media {
		order: 1;
	}

	.ra-hero__content,
	.ra-hero--img-left .ra-hero__content {
		padding: 24px 20px 28px;
	}

	.ra-hero__content-inner {
		max-width: none;
	}

	.ra-hero__actions {
		gap: 10px 12px;
	}

	.ra-hero .ra-hero__btn {
		flex: 1 1 9rem;
		min-width: 0;
	}

	.ra-hero__controls,
	.ra-hero--img-left .ra-hero__controls {
		position: static;
		width: max-content;
		margin: 0 auto 20px;
		background: rgba(0, 0, 0, 0.72);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ra-hero__slide,
	.ra-hero__slide.is-active,
	.ra-hero__media img,
	.ra-hero .ra-hero__btn {
		transition: none;
	}

	.ra-hero__media-link:hover img {
		transform: none;
	}
}

.ra-hero-admin-note {
	margin: 1em 0 0;
	padding: 8px 12px;
	border: 1px dashed currentColor;
	border-radius: 4px;
	font-size: 0.875rem;
	color: #b83230;
}

.ra-hero-empty {
	padding: 16px;
	border: 1px dashed #b83230;
	color: #b83230;
}

/* ==========================================================================
   Layout: fixed text, sliding images
   ========================================================================== */

.ra-hero__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
}

.ra-hero--img-left .ra-hero__stage {
	order: -1;
}

.ra-hero__stage {
	position: relative;
	align-self: stretch;
	min-width: 0;
}

.ra-hero--fixed .ra-hero__slide {
	display: block;
}

.ra-hero--fixed .ra-hero__controls,
.ra-hero--fixed.ra-hero--img-left .ra-hero__controls {
	left: 24px;
}

/* Live text over the image (slide Heading / Subheading). */
.ra-hero__caption {
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 7%;
	max-width: 42%;
	transform: translateY(-50%);
	color: #fff;
	pointer-events: none;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

.ra-hero__caption-heading,
.ra-hero__caption-sub {
	display: block;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

.ra-hero--font-montserrat .ra-hero__caption-heading,
.ra-hero--font-montserrat .ra-hero__caption-sub {
	font-family: "RA Montserrat", Montserrat, Arial, sans-serif;
}

.ra-hero__caption-heading {
	font-size: clamp(1.25rem, 0.4rem + 1.7vw, 3rem);
	line-height: 1.075;
}

.ra-hero__caption-sub {
	margin-top: 0.45em;
	font-size: calc(clamp(1.25rem, 0.4rem + 1.7vw, 3rem) * 0.575);
	line-height: 1.2;
}

/* Fixed layout: the left-hand text keeps the site's own font and bold heading,
   matching the current homepage. Montserrat is only used for the image captions. */
.ra-hero--fixed .ra-hero__content .ra-hero__heading {
	/* No font-family here, so the theme's own heading font is used. */
	font-size: clamp(1.6rem, 1.15rem + 0.9vw, 2.25rem);
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 0.6em;
}

.ra-hero--fixed .ra-hero__content .ra-hero__text {
	font-size: clamp(1.0625rem, 0.9rem + 0.35vw, 1.3rem);
	line-height: 1.45;
	margin-bottom: 1.25em;
}

.ra-hero__caption strong {
	font-weight: 700;
}

@media (max-width: 767px) {
	.ra-hero__layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.ra-hero--fixed.ra-hero--m-image-first .ra-hero__stage {
		order: -1;
	}

	.ra-hero--fixed.ra-hero--m-text-first .ra-hero__stage {
		order: 1;
	}

	.ra-hero__caption {
		top: 7%;
		left: 7%;
		max-width: 80%;
		transform: none;
	}

	.ra-hero__caption-heading {
		font-size: clamp(1.5rem, 7.5vw, 2.25rem);
	}

	.ra-hero__caption-sub {
		font-size: calc(clamp(1.5rem, 7.5vw, 2.25rem) * 0.575);
	}

	.ra-hero--fixed .ra-hero__controls,
	.ra-hero--fixed.ra-hero--img-left .ra-hero__controls {
		position: absolute;
		left: 50%;
		bottom: 14px;
		margin: 0;
		transform: translateX(-50%);
	}
}

/* Fixed layout: the image always fills the full banner height, even when the
   text column is the taller of the two (e.g. tablets). */
@media (min-width: 768px) {
	.ra-hero--fixed .ra-hero__track,
	.ra-hero--fixed .ra-hero__slide,
	.ra-hero--fixed .ra-hero__media {
		height: 100%;
	}
}

.ra-hero--fixed .ra-hero__content-inner {
	max-width: 40rem;
}

/* When the banner is the first thing on the page, remove the theme's top spacing
   (Astra adds a top margin and padding above page content) so it sits directly
   under the header. Only applies on pages that start with the banner. */
body:has(.entry-content > .vc_row:first-child .ra-hero),
body:has(.entry-content > .ra-hero:first-child) {
	--ra-hero-flush: 1;
}

body:has(.entry-content > .vc_row:first-child .ra-hero) #primary,
body:has(.entry-content > .ra-hero:first-child) #primary {
	margin-top: 0;
	padding-top: 0; /* Astra uses padding instead of margin on mobile */
}

body:has(.entry-content > .vc_row:first-child .ra-hero) .site-main > article,
body:has(.entry-content > .ra-hero:first-child) .site-main > article {
	padding-top: 0;
}

/* WP Bakery adds 35px under every element; the banner shouldn't have it. */
.wpb_content_element:has(> .wpb_wrapper > .ra-hero) {
	margin-bottom: 0;
}

/* ==========================================================================
   Slide indicators: progress dashes (style C). Overrides the earlier pill.
   ========================================================================== */

.ra-hero .ra-hero__controls,
.ra-hero.ra-hero--img-left .ra-hero__controls,
.ra-hero--fixed .ra-hero__controls,
.ra-hero--fixed.ra-hero--img-left .ra-hero__controls {
	position: absolute;
	left: 24px;
	right: auto;
	bottom: 16px;
	margin: 0;
	padding: 0;
	transform: none;
	background: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	border-radius: 0;
}

.ra-hero:not(.ra-hero--fixed) .ra-hero__controls {
	left: calc(50% + 24px);
}

.ra-hero .ra-hero__dots {
	gap: 6px;
}

/* 24px tall tap target around a 3px dash */
.ra-hero .ra-hero__dot {
	position: relative;
	width: 28px;
	height: 24px;
	padding: 0;
}

.ra-hero .ra-hero__dot::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 3px;
	margin-top: -1.5px;
	border: 0;
	border-radius: 2px;
	transform: none;
	background: rgba(255, 255, 255, 0.4);
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}

.ra-hero .ra-hero__dot.is-active::before {
	background: rgba(255, 255, 255, 0.4);
}

.ra-hero__dot-fill {
	position: absolute;
	top: 50%;
	left: 0;
	width: 0;
	height: 3px;
	margin-top: -1.5px;
	border-radius: 2px;
	background: #fff;
}

.ra-hero__dot.is-done .ra-hero__dot-fill,
.ra-hero__dot.is-active .ra-hero__dot-fill {
	width: 100%;
}

/* While autoplaying, the current dash fills over the slide's time. */
.ra-hero.is-autoplay .ra-hero__dot.is-active .ra-hero__dot-fill {
	width: 0;
	animation: ra-hero-fill var(--ra-hero-interval, 6000ms) linear forwards;
}

.ra-hero.is-autoplay.is-paused .ra-hero__dot.is-active .ra-hero__dot-fill {
	animation-play-state: paused;
}

@keyframes ra-hero-fill {
	to {
		width: 100%;
	}
}

.ra-hero .ra-hero__dot:hover::before {
	background: rgba(255, 255, 255, 0.7);
}

@media (max-width: 767px) {
	.ra-hero .ra-hero__controls,
	.ra-hero.ra-hero--img-left .ra-hero__controls,
	.ra-hero--fixed .ra-hero__controls,
	.ra-hero--fixed.ra-hero--img-left .ra-hero__controls,
	.ra-hero:not(.ra-hero--fixed) .ra-hero__controls {
		left: 20px;
		bottom: 10px;
	}
}