/* ===========================================================================
   Site chrome — header, mobile menu, footer.
   Loaded alongside a page's own stylesheet, never instead of it.

   Type comes entirely from the tokens in style.css: Barlow Condensed for the
   wordmark, section headings and menu links, Barlow for everything that is read
   rather than scanned. Nothing here introduces a face the homepage does not
   already use.
   =========================================================================== */

/* The bar's height is derived, not guessed: the emblem drives it, and the
   anchor targets below borrow the same value so a link never lands underneath
   a fixed header. Changing --fts-hdr-mark rebalances all three. */
:root {
	--fts-hdr-pad:  clamp(0.7rem, 1.6vw, 1rem);
	--fts-hdr-mark: clamp(1.75rem, 4.4vw, 2.6rem);
	--fts-hdr-h:    calc(var(--fts-hdr-mark) + (var(--fts-hdr-pad) * 2) + 1px);
}

/* Below the nav breakpoint the burger, at its 44px minimum tap target, is taller
   than the emblem and becomes what sets the bar's height. Measured: 51px
   predicted against 67px actual, which put every anchor 16px under the bar. */
@media (max-width: 60rem) {
	:root { --fts-hdr-h: calc(2.75rem + (var(--fts-hdr-pad) * 2) + 1px); }
}

/* --- Skip link ------------------------------------------------------------ */

.fts-skip {
	position: fixed;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 100;
	padding: 0.7rem 1.1rem;
	border-radius: 0.4rem;
	background: #fff;
	color: var(--fts-navy);
	font-family: var(--fts-font);
	font-weight: 700;
	font-size: 0.9rem;
	text-decoration: none;
	transform: translateY(-160%);
	transition: transform 0.2s ease-out;
}

.fts-skip:focus-visible { transform: translateY(0); }

/* --- Header --------------------------------------------------------------- */

.fts-hdr {
	position: fixed;
	inset: 0 0 auto;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(0.75rem, 2vw, 1.5rem);
	padding: var(--fts-hdr-pad) clamp(1.15rem, 4vw, 3rem);
	background: rgba(11, 24, 48, 0.55);
	border-bottom: 1px solid rgba(255, 255, 255, 0.09);
	/* Specific, not decorative: the bar sits on a moving video for the whole
	   first viewport, and without the blur the plate reads as dirt on the film. */
	backdrop-filter: blur(14px) saturate(140%);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	/* Paint only. An earlier version also animated padding-block, which relayouts
	   the bar's children on a scroll threshold for no real gain — the state change
	   that matters is the plate going opaque over light content, not 6px of
	   height. */
	transition: background 0.32s ease-out, border-color 0.32s ease-out,
		box-shadow 0.32s ease-out;
}

/* One authored moment: past the hero the plate condenses to solid navy so the
   copy underneath keeps its contrast. The emblem does NOT resize — a logo that
   shrinks while you read draws attention to the chrome instead of the page. */
.fts-hdr.is-stuck {
	background: rgba(11, 24, 48, 0.95);
	border-bottom-color: rgba(255, 255, 255, 0.14);
	box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.65);
}

/* --- Brand lockup --------------------------------------------------------- */

.fts-brand {
	display: flex;
	align-items: center;
	gap: clamp(0.5rem, 1.4vw, 0.8rem);
	flex: none;
	text-decoration: none;
	border-radius: 0.35rem;
}

/* Two selectors deep on purpose. Page stylesheets carry blanket resets — this
   theme's own home.css has `.fts-home img { height: auto }` — which outrank a
   single class and would let the emblem render at its natural 390px, turning a
   64px bar into a 413px one. Measured, not hypothetical. */
.fts-brand .fts-brand__mark {
	height: var(--fts-hdr-mark);
	width: auto;
	max-width: none;
	display: block;
	flex: none;
}

.fts-brand__name {
	display: flex;
	flex-direction: column;
	justify-content: center;
	line-height: 1.05;
	font-family: var(--fts-font-cond);
	text-transform: uppercase;
}

.fts-brand__top {
	font-weight: 800;
	font-size: clamp(0.95rem, 2.4vw, 1.25rem);
	letter-spacing: 0.08em;
	color: #fff;
	/* The brand name never breaks across two lines, at any width. */
	white-space: nowrap;
	/* Tracking is added after the last glyph too, so the box runs wider than the
	   letterforms. Pulling it back is what makes this line and the one below sit
	   on a true shared left edge and share a true width. */
	margin-right: -0.08em;
}

.fts-brand__sub {
	font-weight: 500;
	font-size: clamp(0.6rem, 1.5vw, 0.78rem);
	/* Chosen so SOLUTIONS spans the same measure as FLIGHT TRAINING above it —
	   that equal width is the lockup. 0.4em, the draft's value, overshot by 2-4px
	   at every breakpoint; this measures within 1px from 360 to 1440. */
	letter-spacing: 0.372em;
	color: var(--fts-blue-soft);
	white-space: nowrap;
	margin-right: -0.372em;
}

/* --- Primary nav ---------------------------------------------------------- */

.fts-nav {
	display: flex;
	align-items: center;
	gap: clamp(0.9rem, 2.2vw, 2rem);
	min-width: 0;
}

.fts-nav__list {
	display: flex;
	align-items: center;
	gap: clamp(0.9rem, 2.2vw, 2rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.fts-nav__link {
	position: relative;
	display: block;
	/* Padding, not height: it keeps the text centred and clears the 24px
	   minimum target size without a magic number. */
	padding: 0.5rem 0.1rem;
	font-family: var(--fts-font);
	font-weight: 600;
	font-size: 0.92rem;
	line-height: 1.2;
	letter-spacing: 0.005em;
	color: #dbe3f2;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease-out;
}

/* Underline wipes in from the left rather than fading: a directional cue that
   matches the way the rest of the page moves. */
.fts-nav__link::after {
	content: "";
	position: absolute;
	left: 0.1rem;
	right: 0.1rem;
	bottom: 0.28rem;
	height: 1.5px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

.fts-nav__link:hover,
.fts-nav__link:focus-visible { color: #fff; }
.fts-nav__link:hover::after,
.fts-nav__link:focus-visible::after { transform: scaleX(1); }

/* "You are on this page." Set in PHP, not by a scroll spy — so it is already
   correct in the first paint and on a page nobody has scrolled. */
.fts-nav__link.is-current {
	color: #fff;
}

.fts-nav__link.is-current::after {
	transform: scaleX(1);
	background: var(--fts-blue);
	height: 2px;
}

.fts-menu__link.is-current {
	color: #fff;
	translate: 0.55rem 0;
}

.fts-foot__links a.is-current {
	color: #fff;
	font-weight: 600;
}

/* --- Header CTA ----------------------------------------------------------- */

.fts-nav__cta {
	flex: none;
	padding: 0.62rem 1.35rem;
	border: 1.5px solid rgba(255, 255, 255, 0.7);
	border-radius: 100px;
	font-family: var(--fts-font);
	font-weight: 700;
	font-size: 0.8rem;
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.22s ease-out, color 0.22s ease-out,
		border-color 0.22s ease-out;
}

.fts-nav__cta:hover,
.fts-nav__cta:focus-visible {
	background: #fff;
	border-color: #fff;
	color: var(--fts-navy-deep);
}

/* --- Burger --------------------------------------------------------------- */

.fts-burger {
	display: none;
	flex: none;
	width: 2.75rem;
	height: 2.75rem;
	margin-right: -0.6rem;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	color: #fff;
}

.fts-burger__box {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	gap: 5px;
	width: 100%;
	height: 100%;
}

/* All three bars are the same 24px box, so opening the menu animates transform
   and clip-path only and never relayouts the button.

   The short bar is CLIPPED rather than scaled or narrowed. Scaling needed
   `transform-origin: right`, which then made the two arms rotate about their
   tips instead of their centres — the X came out as a chevron. clip-path leaves
   the origin at centre, where the rotation needs it. */
.fts-burger__box span {
	display: block;
	width: 24px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform 0.26s ease-out, opacity 0.18s ease-out,
		clip-path 0.26s ease-out;
}

/* The short third bar is the resting state — it reads as a mark rather than a
   generic icon, and it is what makes the collapse into an X feel authored. */
.fts-burger__box span:nth-child(3) { clip-path: inset(0 0 0 33.34%); }

.fts-burger[aria-expanded="true"] .fts-burger__box span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
.fts-burger[aria-expanded="true"] .fts-burger__box span:nth-child(2) {
	opacity: 0;
	transform: scaleX(0.2);
}
.fts-burger[aria-expanded="true"] .fts-burger__box span:nth-child(3) {
	clip-path: inset(0);
	transform: translateY(-7px) rotate(-45deg);
}

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

.fts-menu {
	position: fixed;
	inset: 0;
	z-index: 89;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 2rem;
	padding: calc(var(--fts-hdr-h) + clamp(1.5rem, 6vw, 3rem))
		clamp(1.15rem, 4vw, 3rem) clamp(1.75rem, 6vw, 3rem);
	background: var(--fts-navy-deep);
	overflow-y: auto;
	overscroll-behavior: contain;
	/* A curtain, not a slide: the panel is revealed in place, so the links do
	   not travel and then settle. */
	clip-path: inset(0 0 100% 0);
	transition: clip-path 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.fts-menu.is-open { clip-path: inset(0 0 0 0); }

/* `display: flex` above beats the UA's `[hidden] { display: none }` on
   specificity, so a hidden panel would still lay out and swallow taps across the
   whole viewport. This rule is what actually hides it. */
.fts-menu[hidden] { display: none; }

.fts-menu__nav { min-height: 0; }

.fts-menu__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.fts-menu__list li { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }

.fts-menu__link {
	display: flex;
	align-items: center;
	padding: clamp(0.85rem, 3.2vw, 1.15rem) 0;
	font-family: var(--fts-font-cond);
	font-weight: 700;
	font-size: clamp(1.7rem, 8vw, 2.35rem);
	line-height: 1;
	letter-spacing: 0.005em;
	text-transform: uppercase;
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
	/* `translate`, not a growing leading bar: the earlier version animated the
	   marker's width, which relaid out the row on every hover. This nudges the
	   whole label in the direction of travel and touches nothing but the
	   compositor. */
	transition: color 0.2s ease-out,
		translate 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

.fts-menu__link:hover,
.fts-menu__link:focus-visible {
	color: var(--fts-mist);
	translate: 0.55rem 0;
}

/* Stagger, driven by --i on each row. Runs only once the panel is open, so a
   closed menu never animates in the background. */
.fts-menu__list li,
.fts-menu__foot {
	opacity: 0;
	translate: 0 0.75rem;
	transition: opacity 0.34s ease-out, translate 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

.fts-menu.is-open .fts-menu__list li,
.fts-menu.is-open .fts-menu__foot {
	opacity: 1;
	translate: 0 0;
	transition-delay: calc(0.09s + var(--i) * 0.055s);
}

.fts-menu__foot {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 1rem;
}

.fts-menu__cta {
	padding: 1.05rem 1.5rem;
	border-radius: 100px;
	background: #fff;
	color: var(--fts-navy-deep);
	font-family: var(--fts-font);
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: 0.02em;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	transition: transform 0.22s ease-out, box-shadow 0.22s ease-out;
}

.fts-menu__cta:hover,
.fts-menu__cta:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.7);
}

.fts-menu__line {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	text-decoration: none;
	text-align: center;
}

.fts-menu__kick {
	font-family: var(--fts-font);
	font-weight: 700;
	font-size: 0.65rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--fts-blue-soft);
	white-space: nowrap;
}

.fts-menu__num {
	font-family: var(--fts-font-cond);
	font-weight: 700;
	font-size: 1.3rem;
	letter-spacing: 0.03em;
	color: #fff;
	white-space: nowrap;
}

/* From large phones up the panel stops stretching. Full-width hairlines across a
   768px tablet make the list read as thin and unfinished; holding it to a column
   that starts on the same left edge as the brand above keeps it deliberate, and
   the extra room goes into the type instead of the rules. */
@media (min-width: 40rem) {
	.fts-menu__nav,
	.fts-menu__foot { width: min(100%, 32rem); }
	.fts-menu__link { font-size: 2.9rem; }
	.fts-menu__foot { align-items: stretch; }
}

/* --- Footer --------------------------------------------------------------- */

.fts-foot {
	background: var(--fts-navy-deep);
	color: var(--fts-foot-text);
	font-family: var(--fts-font);
}

/* Runway centreline. The same dashed rhythm as the boarding-pass perforation
   and the hero scroll cue — the site's own motif, not a generic divider. */
.fts-foot__rule {
	height: 4px;
	background: repeating-linear-gradient(
		90deg,
		var(--fts-blue) 0 60px,
		transparent 60px 120px
	);
}

.fts-foot__grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1.25fr;
	gap: clamp(2rem, 4vw, 2.75rem);
	width: min(100% - clamp(2.3rem, 8vw, 6rem), 78rem);
	margin-inline: auto;
	padding-block: clamp(2.75rem, 6vw, 4rem) clamp(2rem, 4vw, 3rem);
}

.fts-brand__name--foot .fts-brand__top { font-size: 1.4rem; }
.fts-brand__name--foot .fts-brand__sub { font-size: 0.87rem; }

.fts-foot__blurb {
	margin: 1rem 0 0;
	font-size: 0.9rem;
	line-height: 1.65;
	max-width: 34ch;
}

.fts-foot__cred {
	margin: 1.1rem 0 0;
	font-size: 0.76rem;
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--fts-blue-soft);
}

.fts-foot__cred span { margin-inline: 0.3em; color: var(--fts-blue); }

.fts-foot__h {
	margin: 0 0 1rem;
	font-family: var(--fts-font-cond);
	font-weight: 700;
	font-size: 1.06rem;
	line-height: 1.2;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #fff;
	white-space: nowrap;
}

.fts-foot__links,
.fts-foot__deck {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.9rem;
	line-height: 1.5;
}

.fts-foot__links { gap: 0.1rem; }
.fts-foot__deck { gap: 0.7rem; }

.fts-foot__links a,
.fts-foot__deck a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease-out;
}

/* The row, not the text, is the target: 0.35rem of vertical padding takes each
   link past the 24px minimum without opening gaps in the column. */
.fts-foot__links a {
	display: inline-block;
	padding-block: 0.35rem;
}

.fts-foot__links a:hover,
.fts-foot__links a:focus-visible,
.fts-foot__deck a:hover,
.fts-foot__deck a:focus-visible { color: #fff; }

/* Diamond markers are ornament, so they live in CSS and stay out of the
   accessibility tree. */
.fts-foot__deck li {
	display: flex;
	gap: 0.65rem;
}

.fts-foot__deck li::before {
	content: "◆";
	flex: none;
	color: var(--fts-blue);
	font-size: 0.62rem;
	line-height: 2.1;
}

.fts-foot__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.85rem 1.5rem;
	flex-wrap: wrap;
	width: min(100% - clamp(2.3rem, 8vw, 6rem), 78rem);
	margin-inline: auto;
	padding-block: 1.25rem;
	border-top: 1px solid var(--fts-foot-line);
	font-size: 0.8125rem;
}

.fts-foot__copy,
.fts-foot__by,
.fts-foot__legal { margin: 0; }

.fts-foot__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
}

.fts-foot__legal > span { opacity: 0.5; }

.fts-foot__by a,
.fts-foot__legal a {
	color: var(--fts-blue-soft);
	text-decoration: none;
	border-bottom: 1px solid rgba(159, 176, 207, 0.4);
	transition: color 0.2s ease-out, border-color 0.2s ease-out;
}

.fts-foot__by a:hover,
.fts-foot__by a:focus-visible,
.fts-foot__legal a:hover,
.fts-foot__legal a:focus-visible {
	color: #fff;
	border-bottom-color: #fff;
}

/* --- The floating direct line ---------------------------------------------- */

/* Moved here from home.css when it stopped being homepage furniture: it now
   ships with the footer part, so every page carries it and its styles have to
   travel with the chrome rather than with one page's stylesheet. */

.fts-wa {
	position: fixed;
	right: clamp(0.75rem, 2vw, 1.5rem);
	bottom: clamp(0.75rem, 2vw, 1.5rem);
	z-index: 60;
	display: inline-flex;
	align-items: center;
	gap: 0.8rem;
	padding: 0.55rem 0.55rem 0.55rem 1rem;
	border-radius: 999px;
	background: var(--fts-navy-deep);
	color: #fff;
	text-decoration: none;
	box-shadow: 0 14px 30px -12px rgba(2, 8, 22, 0.85);
	transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.fts-wa:hover, .fts-wa:focus-visible { transform: translateY(-2px); }
.fts-wa__txt { display: grid; line-height: 1.15; }

.fts-wa__kick {
	font-family: var(--fts-font-cond);
	font-weight: 600;
	font-size: 0.6rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--fts-blue-soft);
}

.fts-wa__main { font-weight: 700; font-size: 0.92rem; }

.fts-wa__disc {
	display: grid;
	place-items: center;
	width: 2.3rem;
	height: 2.3rem;
	border-radius: 50%;
	background: #25d366;
	color: #fff;
	flex: none;
}

/* On phones the label spanned half the viewport and sat over the content.
   Collapse to the disc; the accessible name is preserved for screen readers. */
@media (max-width: 40rem) {

	.fts-wa {
		padding: 0.4rem;
		background: transparent;
		box-shadow: none;
	}

	.fts-wa__txt {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.fts-wa__disc {
		width: 3rem;
		height: 3rem;
		box-shadow: 0 10px 22px -8px rgba(2, 8, 22, 0.75);
	}
}

/* Admin bar offset for the fixed widget when logged in. */
body.admin-bar .fts-wa { bottom: clamp(0.75rem, 2vw, 1.5rem); }

/* --- ...and how it gets out of the footer's way --------------------------- */

/* The float is pinned bottom-right, so at the end of the page it sits on top of
   the bottom bar and covers the design credit. It tucks away once the footer
   arrives — where the same contact route is already listed twice, so nothing is
   lost. Class applied by nav.js; without JS the float simply stays put. */
.fts-wa {
	transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
		opacity 200ms ease-out, visibility 200ms;
}

.fts-wa.is-tucked {
	opacity: 0;
	visibility: hidden;
	transform: translateY(120%);
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.fts-wa { transition-duration: 0.01ms; }
	.fts-wa.is-tucked { transform: none; }
}

/* --- Anchor targets under a fixed header ---------------------------------- */

/* The nav no longer points at these — every nav destination is its own page now.
   The homepage's own CTAs still do ("Start your journey", "Watch the simulator",
   the scroll cue), and without this they land with the heading behind the bar.
   Borrowed from the same custom property that sizes the bar, so the two cannot
   drift apart. */
#pathway,
#simulator,
#programs,
#why,
#book { scroll-margin-top: calc(var(--fts-hdr-h) + 1rem); }

/* --- Focus ---------------------------------------------------------------- */

.fts-hdr :focus-visible,
.fts-menu :focus-visible,
.fts-foot :focus-visible {
	outline: 2px solid var(--fts-mist);
	outline-offset: 3px;
	border-radius: 2px;
}

/* --- Breakpoints ---------------------------------------------------------- */

/* Tablet and below: the link row and the pill hand over to the burger. 60rem is
   where the four labels plus the CTA stop clearing the wordmark comfortably. */
@media (max-width: 60rem) {
	.fts-nav__list,
	.fts-nav__cta { display: none; }
	.fts-burger { display: block; }

	/* Four columns become a true two by two. The brand deliberately does NOT span
	   the full width here: spanning it pushes the remaining three into 1 + 2, which
	   strands "Flight deck" beside an empty cell. Four cells over two columns is
	   exactly two full rows. */
	.fts-foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 34rem) {
	.fts-foot__grid { grid-template-columns: 1fr; }
	.fts-foot__blurb { max-width: none; }
	.fts-foot__bar { justify-content: flex-start; }
}

/* Below the smallest phones the wordmark is the first thing to go — the emblem
   still carries the brand, and a cramped lockup reads worse than none. */
@media (max-width: 20.625rem) {
	.fts-brand__name { display: none; }
}

/* --- Reduced motion ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.fts-hdr,
	.fts-skip,
	.fts-nav__link,
	.fts-nav__link::after,
	.fts-nav__cta,
	.fts-burger__box span,
	.fts-menu,
	.fts-menu__link,
	.fts-menu__list li,
	.fts-menu__foot,
	.fts-menu__cta,
	.fts-foot__links a,
	.fts-foot__deck a,
	.fts-foot__by a {
		transition-duration: 0.01ms;
		transition-delay: 0ms;
	}

	/* The curtain is the only thing that would otherwise leave the panel
	   invisible when the transition is stripped out. */
	.fts-menu { clip-path: inset(0 0 0 0); }
}