/*
Shared components for the Airworthy website: bands, button, link line, label, caps, voice, outline.
Class names follow contract C5 in the parallel build plan. Every value comes from tokens.css; no hex here.
.aw-wrap and .aw-sr live in base.css.
A class can land on the element itself (a custom widget's link) or on an Elementor widget wrapper, so each
component styles both. Where a native widget's inner element is styled by Elementor's own CSS, the selector
is one class stronger (.aw-x.elementor-widget .inner), which still loses to a setting Nai changes in the panel.
The arrow circle is drawn with pseudo-elements, so a native Button widget gets it without child markup;
a link that carries .aw-btn__arrow keeps only that one.
Last task: T-013. Date: 2026-10-21.
*/

/* Bands: paper is the default page background, ink and signal are the strong bands. */
.aw-band-paper {
	background: var(--paper);
	color: var(--ink);
}

.aw-band-ink {
	background: var(--ink);
	color: var(--paper);
}

.aw-band-signal {
	background: var(--signal);
	color: var(--ink);
}

/* Native text inside a band takes the band's colour unless its widget sets one.
   Elementor 4 has no .elementor-text-editor wrapper: a Text Editor widget's paragraphs sit inside
   .elementor-widget-text-editor and inherit its colour. */
.aw-band-paper.elementor-element .elementor-heading-title,
.aw-band-paper.elementor-element .elementor-widget-text-editor,
.aw-band-ink.elementor-element .elementor-heading-title,
.aw-band-ink.elementor-element .elementor-widget-text-editor,
.aw-band-signal.elementor-element .elementor-heading-title,
.aw-band-signal.elementor-element .elementor-widget-text-editor {
	color: inherit;
}

/* Label: section number and eyebrow text ("02 · The Pre-flight"). */
.aw-label {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--fs-label);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
}

/* Small type utilities ported from the prototype's .caps, .voice and .outline. */
.aw-caps {
	font-family: var(--font-display);
	text-transform: uppercase;
}

.aw-voice {
	font-family: var(--voice);
	font-weight: 300;
	text-transform: none;
}

.aw-outline {
	color: transparent;
	-webkit-text-stroke: 2px var(--ink);
}

/* A native Heading widget's inner title inherits the utility's type instead of the kit's.
   A Text Editor widget needs nothing extra: its paragraphs inherit from the widget itself. */
.aw-label.elementor-widget .elementor-heading-title,
.aw-caps.elementor-widget .elementor-heading-title,
.aw-voice.elementor-widget .elementor-heading-title,
.aw-outline.elementor-widget .elementor-heading-title {
	font: inherit;
	letter-spacing: inherit;
	color: inherit;
	text-transform: inherit;
}

.aw-band-ink .aw-label {
	color: var(--signal);
}

.aw-band-signal .aw-label {
	color: var(--ink);
}

.aw-band-ink .aw-outline {
	-webkit-text-stroke-color: var(--paper);
}

.aw-band-signal .aw-outline {
	-webkit-text-stroke-color: var(--ink);
}

/* Button: orange fill, ink uppercase text, round ink circle with an orange arrow on the right.
   Colours are custom properties so the ink variant only sets four values. */
.aw-btn:not(:has(.elementor-button)),
.aw-btn.elementor-widget .elementor-button {
	--aw-btn-bg: var(--signal);
	--aw-btn-fg: var(--ink);
	--aw-btn-circle: var(--ink);
	--aw-btn-arrow: var(--signal);

	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 18px;
	max-width: 100%;
	min-height: 58px;
	padding: 0 68px 0 24px;
	background-color: var(--aw-btn-bg);
	color: var(--aw-btn-fg);
	border: 0;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--fs-button);
	font-style: normal;
	letter-spacing: 0.05em;
	line-height: 1.1;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: transform var(--t-press) var(--ease-out), background-color 200ms ease;
}

/* The circle and the arrow, for a native Button widget that has no child markup.
   The mask is alpha only, so both colours still come from tokens. */
.aw-btn:not(:has(.elementor-button))::before,
.aw-btn.elementor-widget .elementor-button::before {
	content: "";
	position: absolute;
	top: 50%;
	right: 8px;
	width: 42px;
	height: 42px;
	transform: translateY(-50%);
	border-radius: 50%;
	background-color: var(--aw-btn-circle);
	pointer-events: none;
}

.aw-btn:not(:has(.elementor-button))::after,
.aw-btn.elementor-widget .elementor-button::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 20px;
	width: 18px;
	height: 18px;
	transform: translateY(-50%);
	transition: transform var(--t-press) var(--ease-out);
	background-color: var(--aw-btn-arrow);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 12L12 4M6 4h6v6' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 12L12 4M6 4h6v6' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
	pointer-events: none;
}

/* Arrow nudge on hover: 2px along the arrow's own direction, under the same 160ms press timing.
   Pointer devices only, so a touch tap never leaves the arrow nudged. */
@media (hover: hover) and (pointer: fine) {
	.aw-btn:not(:has(.elementor-button)):hover::after,
	.aw-btn.elementor-widget .elementor-button:hover::after {
		transform: translate(2px, calc(-50% - 2px));
	}

	.aw-btn__arrow svg {
		transition: transform var(--t-press) var(--ease-out);
	}

	.aw-btn:hover .aw-btn__arrow svg {
		transform: translate(2px, -2px);
	}
}

/* A link that carries its own arrow markup keeps only that one. */
.aw-btn:not(:has(.elementor-button)):has(.aw-btn__arrow) {
	padding-right: 8px;
}

.aw-btn:not(:has(.elementor-button)):has(.aw-btn__arrow)::before,
.aw-btn:not(:has(.elementor-button)):has(.aw-btn__arrow)::after {
	content: none;
}

.aw-btn:not(:has(.elementor-button)):active,
.aw-btn.elementor-widget .elementor-button:active {
	transform: scale(0.97);
}

/* Arrow markup, for a link or button that carries its own circle. */
.aw-btn__arrow {
	display: grid;
	place-items: center;
	flex: none;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background-color: var(--ink);
}

.aw-btn__arrow svg {
	stroke: var(--signal);
}

/* Button, ink: for the orange band. */
.aw-btn--ink:not(:has(.elementor-button)),
.aw-btn--ink.elementor-widget .elementor-button {
	--aw-btn-bg: var(--ink);
	--aw-btn-fg: var(--paper);
	--aw-btn-circle: var(--signal);
	--aw-btn-arrow: var(--ink);
}

.aw-btn--ink .aw-btn__arrow {
	background-color: var(--signal);
}

.aw-btn--ink .aw-btn__arrow svg {
	stroke: var(--ink);
}

/* Button, ghost: secondary action, no arrow circle, stands on its own. */
.aw-btn--ghost:not(:has(.elementor-button)),
.aw-btn--ghost.elementor-widget .elementor-button {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 0 18px;
	background: transparent;
	color: inherit;
	border: 1px solid currentColor;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 16px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: normal;
	cursor: pointer;
	transition: transform var(--t-press) var(--ease-out), background-color 200ms ease;
}

.aw-btn--ghost:not(:has(.elementor-button))::before,
.aw-btn--ghost:not(:has(.elementor-button))::after,
.aw-btn--ghost.elementor-widget .elementor-button::before,
.aw-btn--ghost.elementor-widget .elementor-button::after {
	content: none;
}

.aw-btn--ghost:not(:has(.elementor-button)):active,
.aw-btn--ghost.elementor-widget .elementor-button:active {
	transform: scale(0.97);
}

/* Link line: uppercase display text with a 3px orange underline, in the colour of its band. */
.aw-linkline:not(:has(a)),
.aw-linkline a {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	min-height: 44px;
	padding-bottom: 2px;
	border-bottom: 3px solid var(--signal);
	color: inherit;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 17px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
}

/* Focus ring: base.css draws it, but the theme's own a:focus-visible rule is more specific than a
   bare :focus-visible, so the components restate it from tokens. */
.aw-btn:focus-visible,
.aw-btn .elementor-button:focus-visible,
.aw-btn--ghost:focus-visible,
.aw-btn--ghost .elementor-button:focus-visible,
.aw-linkline:focus-visible,
.aw-linkline a:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 3px;
}

/* On the orange band an orange ring disappears, so it turns ink. */
.aw-band-signal :is(.aw-btn, .aw-btn--ghost, .aw-linkline):focus-visible,
.aw-band-signal :is(.aw-btn, .aw-btn--ghost) .elementor-button:focus-visible {
	outline-color: var(--ink);
}

/* On the narrowest phones a long label plus the arrow circle cannot fit at 21px, so the button
   steps down to the bottom of the 18 to 21px range in 02-brand-and-design-system.md. */
@media (max-width: 379px) {
	.aw-btn:not(:has(.elementor-button)),
	.aw-btn.elementor-widget .elementor-button {
		font-size: 18px;
	}
}

@media (hover: hover) and (pointer: fine) {
	.aw-btn:not(:has(.elementor-button)):hover,
	.aw-btn.elementor-widget .elementor-button:hover {
		background-color: color-mix(in srgb, var(--signal) 83%, var(--paper));
	}

	.aw-btn--ink:not(:has(.elementor-button)):hover,
	.aw-btn--ink.elementor-widget .elementor-button:hover {
		background-color: var(--char);
	}

	.aw-band-ink .aw-btn--ghost:not(:has(.elementor-button)):hover,
	.aw-band-signal .aw-btn--ghost:not(:has(.elementor-button)):hover,
	.aw-band-ink .aw-btn--ghost .elementor-button:hover,
	.aw-band-signal .aw-btn--ghost .elementor-button:hover {
		background-color: color-mix(in srgb, var(--paper) 8%, transparent);
	}
}

/* ===========================================================================
   Header template (T-020). The one header for the whole site: wordmark, the
   four section links from 1440px up, the Calm toggle and the Pre-flight button.
   It is static and ink on a page with no hero, and absolute over the hero photo
   once the hero widget (T-031) adds .aw-has-hero to <body>.
   Phone first: the base rules are for phones, min-width queries add 1024 and 1440.
   Colours and fonts are tokens. The pixel sizes the pack fixes (84px header,
   132/176px logo, 44/50px button) have no token and are set here.
   Last task: T-020. Date: 2026-10-21.
   =========================================================================== */

.aw-head {
	--aw-head-h: 84px;
	--aw-logo-w: 132px;
	--aw-cta-h: 44px;
	--aw-cta-fs: 16px;
	--aw-cta-pad: 0 14px;
	--aw-nav-gap: 28px;
}

/* Root of the template: a row, gutters from --pad, 84px tall, never wider than the page. */
.aw-head.elementor-element {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	max-width: none;
	height: var(--aw-head-h);
	padding-top: env(safe-area-inset-top, 0px);
	padding-bottom: 0;
	padding-left: max(var(--pad), env(safe-area-inset-left, 0px));
	padding-right: max(var(--pad), env(safe-area-inset-right, 0px));
	background: none;
	position: relative;
	z-index: 6;
}

/* Over the hero the header floats on the photo. Once the hero has scrolled out of view it is
   fixed to the top instead (the sticky block below, T-099). */
body.aw-has-hero .aw-head.elementor-element {
	position: absolute;
	inset: 0 0 auto;
}

/* Sticky header (home page only, T-099). header-stick.js sets aw-stuck on <html> once the hero is
   wholly above the viewport, and aw-unstick for the short exit when it comes back. The bar is paper
   and 64px, and it reuses the on-paper looks the header already has for a page with no hero: the ink
   wordmark and the ink Calm toggle. It slides in 260ms and out 180ms on transform, ease-out; Calm
   mode and reduced motion drop both (base.css), so it simply appears and disappears.
   Without the script, or without IntersectionObserver, the header stays the floating overlay. */
html.aw-stuck body.aw-has-hero .aw-head.elementor-element {
	--aw-head-h: 64px;
	position: fixed;
	inset: 0 0 auto;
	background: var(--paper);
	border-bottom: 1px solid var(--sand);
	animation: aw-head-in 260ms var(--ease-out);
}

html.aw-unstick body.aw-has-hero .aw-head.elementor-element {
	animation: aw-head-out 180ms var(--ease-out) forwards;
}

@keyframes aw-head-in {
	from {
		transform: translateY(-100%);
	}

	to {
		transform: translateY(0);
	}
}

@keyframes aw-head-out {
	from {
		transform: translateY(0);
	}

	to {
		transform: translateY(-100%);
	}
}

html.aw-stuck body.aw-has-hero .aw-head {
	--focus: var(--signal-text);
}

html.aw-stuck body.aw-has-hero .aw-head .aw-logo--ink {
	display: block;
}

html.aw-stuck body.aw-has-hero .aw-head .aw-logo--paper {
	display: none;
}

html.aw-stuck .aw-head .aw-calm-toggle__btn {
	background: transparent;
	border-color: var(--field-line);
	color: var(--ink);
}

html.aw-stuck .aw-head .aw-calm-toggle__btn[aria-pressed="true"] {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--paper);
}

/* A link, or the keyboard focus moving down the page, lands just under the fixed bar and not behind
   it. On the root so it covers both; the wordmark's link to the top still reaches the very top. */
html:has(body.aw-has-hero) {
	scroll-padding-top: 64px;
}

/* Wordmark: one Image widget per colour, both linked to the top of the page. */
.aw-head .aw-logo {
	flex: none;
	width: auto;
	margin: 0;
}

/* The 44px tap target comes from the link, not from the wordmark, which is about
   24px tall at the size the design fixes. */
.aw-head .aw-logo a {
	display: flex;
	align-items: center;
	min-height: 44px;
}

.aw-head .aw-logo img {
	display: block;
	width: var(--aw-logo-w);
	height: auto;
	max-width: none;
}

/* Paper wordmark on the dark photo band, ink wordmark on paper. On a page with no
   hero the header sits on paper, so the ink wordmark shows at every width. */
.aw-head .aw-logo--paper {
	display: none;
}

body.aw-has-hero .aw-head .aw-logo--ink {
	display: none;
}

body.aw-has-hero .aw-head .aw-logo--paper {
	display: block;
}

/* Nav: hidden below 1440px, where it would run onto the photo. Hidden by this
   stylesheet, not by Elementor's device visibility, so it stays editable.
   The second class is needed: Elementor 4 sets display:flex on a Nav Menu widget
   with (0,3,0) (".elementor-widget-nav-menu:not(:has(.elementor-widget-container))"),
   so this rule carries the same two classes as the widget wrapper to outrank it. */
.aw-head.elementor-element .aw-head-nav.elementor-widget {
	display: none;
	flex: none;
}

/* The Nav Menu widget prints a second, dropdown copy of the same menu. The header
   shows one row, so that copy stays hidden (it is aria-hidden and tabindex -1). */
.aw-head .aw-head-nav .elementor-nav-menu--dropdown,
.aw-head .aw-head-nav .elementor-menu-toggle {
	display: none;
}

@media (min-width: 1440px) {
	.aw-head.elementor-element .aw-head-nav.elementor-widget {
		display: block;
		position: absolute;
		left: clamp(230px, 23vw, 330px);
		top: 50%;
		transform: translateY(-50%);
	}

	.aw-head .aw-head-nav .elementor-nav-menu {
		display: flex;
		align-items: center;
		gap: var(--aw-nav-gap);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.aw-head .aw-head-nav .elementor-nav-menu a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		padding: 0;
		color: var(--ink);
		font-family: var(--font-display);
		font-weight: 600;
		font-size: 17px;
		line-height: 1;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		text-decoration: none;
		/* Elementor Pro gives nav items transition: all .4s, which fades the focus ring in. */
		transition: color 160ms ease;
	}

	/* Scroll-spy underline. Elementor already marks the section in view (.elementor-item-active, plus
	   aria-current="location"), so this is CSS only, and it can be seen now the header stays on screen.
	   The bar wipes in from the left and leaves to the right: transform-origin flips while the bar is at
	   full or zero width, so the flip never shows. It takes --focus, which is the 5:1 colour on paper
	   and the orange on dark surfaces. */
	.aw-head .aw-head-nav .elementor-nav-menu a {
		position: relative;
	}

	.aw-head .aw-head-nav .elementor-nav-menu a::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 9px;
		height: 3px;
		background: var(--focus);
		transform: scaleX(0);
		transform-origin: right center;
		transition: transform 240ms var(--ease-out);
	}

	.aw-head .aw-head-nav .elementor-nav-menu a.elementor-item-active::after {
		transform: scaleX(1);
		transform-origin: left center;
	}
}

/* Focus ring: Hello Elementor's a:focus-visible outranks base.css, so restate it. */
.aw-head .aw-logo a:focus-visible,
.aw-head .aw-head-nav .elementor-nav-menu a:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 3px;
}

/* Over the hero the header spans two backgrounds: from 1024px the photo is the right-hand
   column, so the wordmark and the nav sit on paper while the tools sit on the photo. The
   header's --focus is orange for the photo, but orange on paper is only 2.74:1, short of the
   3:1 WCAG 1.4.11 asks for. The paper side takes --signal-text instead, which is 5.02:1
   there, and it changes nothing for the tools, which are still over the photo. */
@media (min-width: 1024px) {
	body.aw-has-hero .aw-head .aw-logo,
	body.aw-has-hero .aw-head .aw-head-nav {
		--focus: var(--signal-text);
	}
}

/* Tools: the Calm toggle and the button sit together on the right. The auto margin
   is on the toggle's wrapper because the toggle hides itself when JavaScript is off. */
.aw-head .aw-head-toggle {
	flex: none;
	margin-inline-start: auto;
}

/* On a page with no hero the header sits on paper, where the toggle's over-photo
   tone is paper text on a pale grey chip. Until the hero adds .aw-has-hero, the
   toggle takes the on-paper tone from its own design (T-015): no fill, ink text,
   and the pressed state still ink on paper. */
body:not(.aw-has-hero) .aw-head .aw-calm-toggle__btn {
	background: transparent;
	border-color: var(--field-line);
	color: var(--ink);
}

body:not(.aw-has-hero) .aw-head .aw-calm-toggle__btn[aria-pressed="true"] {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--paper);
}

/* Button: compact on phones and tablets, full size with the arrow circle from
   1024px up, where it sits over the photo. .aw-btn sets its padding and size at
   (0,3,0), so this is (0,4,0); panel values could not win. The circle is hidden
   below 1024px by making its two custom properties transparent. */
.aw-head .aw-head-cta {
	flex: none;
}

.aw-head .aw-head-cta.elementor-widget .elementor-button {
	--aw-btn-circle: transparent;
	--aw-btn-arrow: transparent;
	min-height: var(--aw-cta-h);
	padding: var(--aw-cta-pad);
	font-size: var(--aw-cta-fs);
}

@media (min-width: 1024px) {
	.aw-head {
		--aw-logo-w: 176px;
		--aw-cta-h: 50px;
		--aw-cta-fs: 18px;
		--aw-cta-pad: 0 54px 0 20px;
	}

	body.aw-has-hero .aw-head .aw-logo--ink {
		display: block;
	}

	body.aw-has-hero .aw-head .aw-logo--paper {
		display: none;
	}

	/* Full-size button with the arrow circle: 50px tall, 18px, 34px circle with a
	   16px arrow 8px from the right edge, as in the prototype's .head-cta. */
	.aw-head .aw-head-cta.elementor-widget .elementor-button {
		--aw-btn-circle: var(--ink);
		--aw-btn-arrow: var(--signal);
	}

	.aw-head .aw-head-cta.elementor-widget .elementor-button::before {
		width: 34px;
		height: 34px;
	}

	.aw-head .aw-head-cta.elementor-widget .elementor-button::after {
		right: 17px;
		width: 16px;
		height: 16px;
		-webkit-mask-size: 16px 16px;
		mask-size: 16px 16px;
	}
}