/* First Multi Sections
   Scoped entirely to .fms- prefixed classes so nothing here can reach the Hub theme. */

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

/* Hub's global body typography is inherited by everything, and is currently an
   italic face. Reset the inheritable text properties once at the section
   boundary so the hero is not at the mercy of the theme's global settings.
   Nothing outside .fms-hero is affected. */
.fms-hero {
	font-style: normal;
	text-transform: none;
	text-shadow: none;
	font-variant: normal;
}

/* ---------- Full-bleed shell ----------
   --fms-vw is set by JS to documentElement.clientWidth so the breakout excludes
   the scrollbar. 100vw is the no-JS fallback. */

.fms-hero {
	position: relative;
	display: block;
	width: var(--fms-vw, 100vw);
	max-width: var(--fms-vw, 100vw);
	margin-left: calc(50% - (var(--fms-vw, 100vw) / 2));
	margin-right: calc(50% - (var(--fms-vw, 100vw) / 2));
	min-height: var(--fms-hero-h, 80vh);
	overflow: hidden;
	isolation: isolate;
	background-color: var(--fms-navy, #0B2A4A);
}

/* ---------- Background media ---------- */

.fms-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.fms-hero__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	border: 0;
}

.fms-hero__overlay {
	position: absolute;
	inset: 0;
	display: block;
	background: #000;
	opacity: var(--fms-hero-overlay, 0.55);
	pointer-events: none;
}

/* ---------- Inner layout ---------- */

.fms-hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	min-height: var(--fms-hero-h, 80vh);
	width: 100%;
	padding: var(--fms-pad-y, 80px) var(--fms-pad-x, 40px);
	padding-bottom: var(--fms-hero-pad-b, var(--fms-pad-y, 80px));
}

.fms-hero--boxed .fms-hero__inner {
	max-width: var(--fms-max, 1340px);
	margin-inline: auto;
}

/* Top container takes the slack so the rule and bottom block sit low. */

.fms-hero__top {
	flex: 1 1 auto;
	display: flex;
	align-items: flex-end;
	min-height: 0;
}

/* ---------- Eyebrow, sitting on the upper left of the rule ---------- */

.fms-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding-bottom: 14px;
}

.fms-hero__stripe {
	display: block;
	width: 30px;
	height: 3px;
	flex: none;
	background: linear-gradient(
		to right,
		var(--fms-cyan, #00AEEF) 0 33.33%,
		#FF00FF 33.33% 66.66%,
		#FFF200 66.66% 100%
	);
}

/* Rendered as an h2 by default, so it needs its own reset against the theme's
   heading rules rather than inheriting an H2 size meant for section titles. */
.fms-hero .fms-hero__eyebrow-text {
	margin: 0;
	font-size: var(--fms-eyebrow-size, 16px);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #fff;
	line-height: 1.3;
}

/* ---------- Divider rule ---------- */

.fms-hero__rule {
	height: 1px;
	width: 100%;
	background: rgba(255, 255, 255, var(--fms-hero-rule, 0.3));
	transform-origin: left center;
	flex: none;
}

/* ---------- Bottom container ---------- */

.fms-hero__bottom {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
	padding-top: 40px;
	flex: none;
}

.fms-hero__col--title {
	flex: 1 1 58%;
	min-width: 0;
}

.fms-hero__col--aside {
	flex: 0 1 400px;
	min-width: 0;
}

/* By default the title carries no font-family, weight or size of its own, so
   the theme's global H1 typography applies. Leading and tracking stay here:
   a headline needs tighter optical settings than a global H1 rule provides. */
/* Two class selectors so the theme's own heading rules cannot outrank these. */
.fms-hero .fms-hero__title {
	margin: 0;
	font-style: normal;
	line-height: var(--fms-title-lh, 1.06);
	letter-spacing: var(--fms-title-ls, -0.022em);
	color: #fff;
	text-wrap: balance;
}

/* Applied only when "Follow the theme" is switched off in the plugin settings. */
.fms-hero--own-type .fms-hero__title {
	font-family: var(--fms-font-heading, sans-serif);
	font-weight: var(--fms-heading-weight, 500);
	font-size: clamp(2.125rem, 4.4vw, 4rem);
}

/* Two classes so the theme's global body weight cannot make this bold. */
.fms-hero .fms-hero__desc {
	margin: 0 0 22px;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.86);
	max-width: 42ch;
}

/* Translucent accent fill. The solid declaration is the fallback for browsers
   without color-mix; the one after it wins everywhere else. */
.fms-hero__btn {
	display: inline-block;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.01em;
	padding: 16px 32px;
	border-radius: var(--fms-btn-radius, 8px);
	/* The border is reserved but invisible at rest, so revealing it on hover
	   does not shift the button by a pixel. */
	border: 1px solid transparent;
	background: var(--fms-hero-btn, #00AEEF);
	background: color-mix(in srgb, var(--fms-hero-btn, #00AEEF) var(--fms-btn-alpha, 45%), transparent);
	color: #fff;
	text-decoration: none;
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	transition: border-color 0.25s ease, background-color 0.25s ease;
}

/* Hover reveals the outline in the button's own colour and lifts the fill a
   little. The border is already reserved above, so nothing moves. */
.fms-hero__btn:hover,
.fms-hero__btn:focus-visible {
	background: var(--fms-hero-btn, #00AEEF);
	background: color-mix(in srgb, var(--fms-hero-btn, #00AEEF) var(--fms-btn-alpha-hover, 58%), transparent);
	border-color: var(--fms-hero-btn, #00AEEF);
	color: #fff;
	text-decoration: none;
}

.fms-hero__btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* ---------- Animation start states ----------
   Removed as soon as the script runs, and never applied without JS. */

.fms-animate:not(.fms-ready) [data-fms-anim] {
	opacity: 0;
}

.fms-animate:not(.fms-ready) [data-fms-anim="rule"] {
	opacity: 1;
	transform: scaleX(0);
}

@media (prefers-reduced-motion: reduce) {
	.fms-animate [data-fms-anim] {
		opacity: 1 !important;
		transform: none !important;
	}
	.fms-hero__btn {
		transition: none;
	}
}

/* ---------- Tablet ---------- */

/* Tablet takes the same stacked composition as mobile: at this width the two
   columns squeeze the headline too hard side by side. */
@media (max-width: 1024px) {
	.fms-hero__bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
		padding-top: 30px;
	}

	.fms-hero__col--title,
	.fms-hero__col--aside {
		flex: 1 1 auto;
		width: 100%;
	}

	.fms-hero .fms-hero__desc {
		font-size: 15px;
		margin-bottom: 18px;
		max-width: 52ch;
	}
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
	.fms-hero__bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: 22px;
		padding-top: 26px;
	}

	.fms-hero__col--title,
	.fms-hero__col--aside {
		flex: 1 1 auto;
		width: 100%;
	}

	.fms-hero__title {
		line-height: 1.1;
	}

	.fms-hero .fms-hero__desc {
		max-width: none;
		margin-bottom: 20px;
	}

	.fms-hero__btn {
		padding: 15px 28px;
	}

	.fms-hero .fms-hero__eyebrow-text {
		font-size: 14px;
		letter-spacing: 0.14em;
	}
}

/* ==========================================================================
   Header — full width sticky bar, white panel left, call to action right
   ========================================================================== */

.fms-header,
.fms-header *,
.fms-header *::before,
.fms-header *::after {
	box-sizing: border-box;
}

.fms-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 900;
	font-style: normal;
	text-transform: none;
}

.fms-header--sticky {
	position: fixed;
}

/* The WordPress toolbar is itself position:fixed, so the html margin-top that
   WordPress adds does not move a fixed header out from under it. Offset by the
   toolbar's own height instead. Logged-in users only; visitors never see this.
   Heights below are WordPress's: 32px, 46px under 783px, and from 600px down
   the toolbar turns absolute and scrolls away, so the offset is dropped. */
body.admin-bar .fms-header--sticky {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .fms-header--sticky {
		top: 46px;
	}
}

@media screen and (max-width: 600px) {
	body.admin-bar .fms-header--sticky {
		top: 0;
	}
}

.fms-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: var(--fms-header-pad-top, 20px) var(--fms-pad-x, 40px) var(--fms-header-pad-bottom, 10px);
	width: 100%;
}

/* ---------- Left panel ---------- */

.fms-header__left {
	display: flex;
	align-items: center;
	gap: 26px;
	background: var(--fms-white, #fff);
	border-radius: var(--fms-panel-radius, 8px);
	padding: 10px 22px;
	min-width: 0;
}

.fms-header__logo {
	display: inline-flex;
	align-items: center;
	flex: none;
	line-height: 0;
	text-decoration: none;
}

/* The set height is a maximum rather than a fixed value, so a wide logo can
   shrink proportionally on narrow screens instead of forcing the panel to
   wrap onto two rows. */
.fms-header__logo img {
	display: block;
	height: auto;
	width: auto;
	max-height: var(--fms-logo-h, 34px);
	max-width: none;
}

/* ---------- Menu ---------- */

.fms-header__nav {
	min-width: 0;
}

.fms-header .fms-header__menu {
	display: flex;
	align-items: center;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fms-header .fms-header__menu li {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fms-header .fms-header__menu a {
	display: inline-block;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--fms-navy, #0B2A4A);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease;
}

.fms-header .fms-header__menu a:hover,
.fms-header .fms-header__menu a:focus-visible {
	color: var(--fms-cyan, #00AEEF);
	text-decoration: none;
}

/* Second level */

.fms-header .fms-header__menu .sub-menu {
	position: absolute;
	top: 100%;
	left: -14px;
	margin: 0;
	padding: 8px 0;
	min-width: 190px;
	list-style: none;
	background: var(--fms-white, #fff);
	border: 1px solid rgba(11, 42, 74, 0.1);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.fms-header .fms-header__menu li:hover > .sub-menu,
.fms-header .fms-header__menu li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.fms-header .fms-header__menu .sub-menu a {
	display: block;
	padding: 8px 18px;
	white-space: normal;
}

/* ---------- Call to action ---------- */

.fms-header__right {
	display: flex;
	align-items: center;
	flex: none;
}

/* Solid, unlike the hero button. --fms-header-cta is set per instance from the
   colour chosen in the Header Layout panel. */
.fms-header__cta {
	display: inline-block;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	padding: 15px 26px;
	border-radius: var(--fms-btn-radius, 8px);
	border: 1px solid transparent;
	background: var(--fms-header-cta, var(--fms-navy, #0B2A4A));
	color: var(--fms-header-cta-text, #fff);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.25s ease, transform 0.25s ease;
}

.fms-header__cta:hover,
.fms-header__cta:focus-visible {
	background: var(--fms-header-cta, var(--fms-blue, #0F5FA8));
	background: color-mix(in srgb, var(--fms-header-cta, var(--fms-navy, #0B2A4A)) var(--fms-btn-keep, 78%), #000);
	color: #fff;
	transform: translateY(-2px);
	text-decoration: none;
}

.fms-header__cta:focus-visible {
	outline: 2px solid var(--fms-white, #fff);
	outline-offset: 2px;
}

/* ---------- Mobile toggle ---------- */

.fms-header__toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 34px;
	height: 30px;
	padding: 0;
	margin-left: auto;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.fms-header__toggle span {
	display: block;
	height: 2px;
	width: 22px;
	margin: 0 auto;
	background: var(--fms-navy, #0B2A4A);
	transition: transform 0.25s ease, opacity 0.25s ease;
}

.fms-header__toggle[aria-expanded="true"] span:first-child {
	transform: translateY(3.5px) rotate(45deg);
}

.fms-header__toggle[aria-expanded="true"] span:last-child {
	transform: translateY(-3.5px) rotate(-45deg);
}

/* ---------- Tablet and below ---------- */

@media (max-width: 1024px) {
	.fms-header__left {
		gap: 16px;
		padding: 8px 16px;
	}

	.fms-header .fms-header__menu {
		gap: 18px;
	}

	.fms-header__cta {
		padding: 13px 20px;
		font-size: 13px;
	}
}

@media (max-width: 900px) {
	.fms-header__inner {
		align-items: flex-start;
	}

	/* Panel and button share one control height so their tops and bottoms
	   line up. min-height, not height, so the panel can still grow when the
	   menu opens while the button stays put. */
	.fms-header__left {
		flex: 1 1 auto;
		flex-wrap: wrap;
		gap: 12px;
		min-height: var(--fms-header-ctl-h, 46px);
	}

	.fms-header__cta {
		display: inline-flex;
		align-items: center;
		min-height: var(--fms-header-ctl-h, 46px);
		padding-top: 0;
		padding-bottom: 0;
	}

	.fms-header__toggle {
		display: flex;
	}

	.fms-header__nav {
		display: none;
		flex-basis: 100%;
		width: 100%;
		border-top: 1px solid rgba(11, 42, 74, 0.12);
		padding-top: 12px;
	}

	.fms-header__nav.is-open {
		display: block;
	}

	.fms-header .fms-header__menu {
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
	}

	.fms-header .fms-header__menu > li {
		width: 100%;
	}

	.fms-header .fms-header__menu a {
		display: block;
		width: 100%;
		padding: 9px 0;
		font-size: 15px;
	}

	/* Second level opens inline rather than floating */
	.fms-header .fms-header__menu .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		border: 0;
		background: transparent;
		padding: 0 0 4px 14px;
		min-width: 0;
	}
}

@media (max-width: 767px) {
	.fms-header__left {
		padding: 6px 12px;
		gap: 10px;
	}

	/* Keeps the configured height on normal phones, and only scales down if the
	   logo is wide enough to push the toggle onto a second row. */
	.fms-header__logo img {
		max-width: 45vw;
	}

	.fms-header__toggle {
		width: 30px;
		height: 26px;
	}

	.fms-header__cta {
		padding: 11px 14px;
		font-size: 11px;
	}
}

@media (max-width: 400px) {
	.fms-header__logo img {
		max-width: 40vw;
	}

	.fms-header__cta {
		padding: 10px 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fms-header__cta,
	.fms-header__toggle span,
	.fms-header .fms-header__menu a,
	.fms-header .fms-header__menu .sub-menu {
		transition: none;
	}
}