/**
 * The call to action, and the footer under it.
 *
 * The two are designed as one closing movement: a light band carrying the shop's
 * best offer over a photograph, resolving into the dark footer that answers
 * every remaining question. They meet at a horizon rather than at a cut — the
 * foot of the picture fades into the footer's own colour, so the aircraft flies
 * out of the frame into the dark instead of being sliced off by it.
 *
 * The CTA carries no top margin of its own; the footer's margin above it is
 * what separates the pair from the page.
 */

/* ---- the palette these two bands use ----
 *
 * Every colour here is named in this one block and nowhere else, so tuning the
 * pair against whatever picture ends up in the band is an edit to twenty lines
 * rather than a hunt through four hundred. They are scoped to the two roots
 * rather than declared on :root because they are this band's colours and not
 * the site's — a custom property inherits, so everything inside both elements
 * can read them.
 *
 * Every value below was measured off the shop's own aircraft banner rather than
 * chosen by eye. The banner's ground is a blush at hsl(18 39% 79%), its gold
 * rule is hsl(34 33% 64%) and its clouds are hsl(20 37% 97%) — one warm hue
 * family, around 18-34 degrees, which is where the theme's accent (#c28565)
 * already lives. That is why the picture sits in this theme without a fight.
 *
 * Two consequences worth stating, because they are the reason the band looks
 * the way it does:
 *
 *  - The CTA is LIGHT. The photograph is a bright blush plate, luminance ~200
 *    of 255. A dark scrim over it, which is the usual treatment, would have
 *    turned it to mud. So the band takes the picture's own ground colour and
 *    the text on it is dark.
 *  - The footer's black is WARM, not neutral. `#0d0d0d` under a blush band
 *    reads blue by comparison and the seam between them shows as a colour
 *    shift rather than an edge. These blacks carry the same 20-degree hue as
 *    the picture, so the cut reads as one deliberate line.
 *
 * To put a dark photograph in the band instead, most of the job is here: raise
 * `--hp-cta-ink` and `--hp-cta-ink-soft` towards white and drop
 * `--hp-cta-ground` to the picture's own shadow tone. The one thing this block
 * cannot reach is the secondary button — `.hp-btn--outline` draws near-black on
 * near-black — so that would need a light-bordered variant alongside it.
 */

.hp-cta,
.hp-footer {
	/* -- the light band -- */

	/* Sampled from the banner, not approximated: the band and the photograph
	 * are the same colour, so the image has no visible edge on any side and a
	 * viewport wider than the picture shows no seam. */
	--hp-cta-ground: 223 194 182;
	/* The lighter tint the band lifts towards away from the text — the
	 * banner's own cloud colour. */
	--hp-cta-ground-lift: 250 246 244;
	--hp-cta-ink: var(--hp-text);
	--hp-cta-ink-soft: #5c4a41;
	/* The banner's gold rule, which the eyebrow pill borrows. */
	--hp-cta-gold: #c2a886;
	--hp-cta-gold-deep: #9c8259;

	/* -- the dark footer -- */

	/* Warm near-blacks: the same hue as the picture above them, so the cut
	 * between the two bands reads as an edge and not as a colour cast. */
	--hp-footer-bg: #16120f;
	--hp-footer-ink: var(--hp-text-inverse);
	/* Body text on the dark ground. Warm grey rather than neutral, so it sits
	 * with the brand's browns instead of cooling them. */
	--hp-footer-ink-muted: #cdc3bc;
	--hp-footer-ink-faint: #948a84;
	--hp-footer-accent: var(--hp-accent);
	/* Two rules: the strong one closes the footer above the base row, the soft
	 * one only separates the brand bar and must barely register. */
	--hp-footer-rule: #2b2320;
	--hp-footer-rule-soft: rgb(255 255 255 / 0.09);
	/* The newsletter field, which is the one lit surface in the whole band. */
	--hp-footer-field: #1d1815;
	--hp-footer-field-border: #3c332e;
}

/* ---- call to action ----
 *
 * A full-bleed light band with the aircraft in it. The picture is an <img>
 * rather than a background-image so it can be lazy-loaded and so the browser
 * can pick a size; `object-fit: cover` gives it the same behaviour a background
 * would have had.
 *
 * The band's own colour is the picture's colour, so at any viewport wider or
 * taller than the crop there is no edge to see — the photograph simply stops
 * being a photograph and goes on being the band.
 */

.hp-cta {
	position: relative;
	isolation: isolate;
	margin-block-start: var(--hp-space-16);
	overflow: hidden;
	background: rgb(var(--hp-cta-ground));
	color: var(--hp-cta-ink);
}

/**
 * The horizon.
 *
 * The band and the footer met at a hard line: blush, then black, with nothing
 * between them. Two finished pieces stacked, rather than one ending.
 *
 * This is a short gradient at the foot of the picture that resolves into the
 * footer's exact colour, so the aircraft flies out of the frame into the dark
 * instead of being cut off by it. It is drawn over the photograph and under the
 * text, which is why it is a second pseudo-element rather than another stop on
 * the scrim: the scrim is behind the content, and this has to cover the image
 * at every viewport width whether or not the scrim reaches that far.
 */
.hp-cta::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	height: 7rem;
	z-index: -1;
	background: linear-gradient(
		to bottom,
		rgb(var(--hp-cta-ground) / 0) 0%,
		color-mix(in srgb, var(--hp-footer-bg) 45%, transparent) 62%,
		var(--hp-footer-bg) 100%
	);
	pointer-events: none;
}

@media (max-width: 45rem) {
	.hp-cta::after {
		height: 4rem;
	}
}

.hp-cta__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* The aircraft fills the crop nose to tail, with open sky only above it.
	 * Holding just above centre keeps the nose in frame when the band is
	 * shorter than the picture — which it is at every desktop width. */
	object-position: 42% 42%;
	z-index: -2;
}

/**
 * The scrim.
 *
 * Not a darkening wash — the picture is already light, and dulling it would
 * waste it. This is the band's own ground colour brought back over the half the
 * text sits on, so the words are on near-flat colour while the aircraft stays
 * untouched on the other side.
 *
 * A gradient takes no logical direction keyword, so the direction is stated
 * twice. The base rule is the LTR case, where the text is at the left: the
 * gradient must be opaque at the left, which is `to right` — a gradient's 0%
 * is at the edge it starts from, not the one it points at.
 */
.hp-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		to right,
		rgb(var(--hp-cta-ground) / 0.98) 0%,
		rgb(var(--hp-cta-ground) / 0.94) 38%,
		rgb(var(--hp-cta-ground) / 0) 78%
	);
}

[dir="rtl"] .hp-cta::before {
	background: linear-gradient(
		to left,
		rgb(var(--hp-cta-ground) / 0.98) 0%,
		rgb(var(--hp-cta-ground) / 0.94) 38%,
		rgb(var(--hp-cta-ground) / 0) 78%
	);
}

/* With no photograph the band is flat blush, and a flat band this tall reads as
 * unfinished. A soft lift towards the picture's cloud colour gives it the same
 * light as the photograph would have. */
.hp-cta--plain::before {
	background: radial-gradient(
		110% 130% at 20% 110%,
		rgb(var(--hp-cta-ground-lift) / 0.75) 0%,
		rgb(var(--hp-cta-ground-lift) / 0) 62%
	);
}

[dir="rtl"] .hp-cta--plain::before {
	background: radial-gradient(
		110% 130% at 80% 110%,
		rgb(var(--hp-cta-ground-lift) / 0.75) 0%,
		rgb(var(--hp-cta-ground-lift) / 0) 62%
	);
}

.hp-cta__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--hp-space-4);
	/* Tall enough that the aircraft is a photograph rather than a strip. At
	 * 1440 wide this shows about four fifths of the crop's height. */
	min-height: 26rem;
	padding-block: var(--hp-space-14);
	justify-content: center;
}

/* The eyebrow is the banner's own gold rule, reduced to a pill. It is the one
 * place the picture's second colour appears in type. */
.hp-cta__eyebrow {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 0.3rem var(--hp-space-4);
	border: 1px solid var(--hp-cta-gold);
	border-radius: var(--hp-radius-pill);
	background: var(--hp-cta-gold);
	font-family: var(--hp-font-ui);
	font-size: var(--hp-text-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hp-cta-ink);
}

.hp-cta__title {
	max-width: 20ch;
	margin: 0;
	font-family: var(--hp-font-display);
	/* Fluid, so the headline is a headline on a phone and a statement on a
	 * desktop without a breakpoint for each. */
	font-size: clamp(2rem, 1.2rem + 3.2vw, 3.5rem);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: var(--hp-cta-ink);
	text-wrap: balance;
}

.hp-cta__text {
	max-width: 40ch;
	margin: 0;
	font-size: var(--hp-text-md);
	line-height: var(--hp-leading-body);
	color: var(--hp-cta-ink-soft);
}

.hp-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hp-space-3);
	margin-block-start: var(--hp-space-2);
}

/**
 * The phone.
 *
 * A 390px column is too narrow to hold a photograph beside a headline, so the
 * band stops trying: it stacks. The aircraft takes the top third and the words
 * sit under it on solid colour, which is why the scrim runs vertically here and
 * why the content is pushed to the bottom of the band rather than centred.
 *
 * The first version kept the horizontal scrim and simply let it cover more, and
 * the result was a flat blush panel with the aircraft invisible behind it —
 * paying for the image's bytes and showing none of it.
 */
@media (max-width: 45rem) {
	.hp-cta__inner {
		min-height: 27rem;
		padding-block: var(--hp-space-10);
		justify-content: flex-end;
	}

	.hp-cta::before,
	[dir="rtl"] .hp-cta::before {
		background: linear-gradient(
			to top,
			rgb(var(--hp-cta-ground) / 0.99) 0%,
			rgb(var(--hp-cta-ground) / 0.97) 50%,
			rgb(var(--hp-cta-ground) / 0.25) 82%,
			rgb(var(--hp-cta-ground) / 0) 100%
		);
	}

	/* Framed on the nose and the forward fuselage: at this width the whole
	 * aircraft would be a two-centimetre smudge, so the band shows a part of it
	 * at a legible size instead. */
	.hp-cta__image {
		object-position: 18% center;
	}

	.hp-cta__actions > .hp-btn {
		flex: 1 1 12rem;
	}
}

/* ---- footer ---- */

.hp-footer {
	margin-block-start: var(--hp-space-16);
	background: var(--hp-footer-bg);
	color: var(--hp-footer-ink);
}

/* The CTA already ends on the footer's own colour, so when it is there the two
 * must not be separated — they read as one dark block with a photograph at its
 * top. The margin above stays for the case where the band is switched off. */
.hp-cta + .hp-footer {
	margin-block-start: 0;
}

/* ---- the shop's mark ---- */




.hp-footer__logo {
	display: inline-flex;
	align-items: center;
	color: var(--hp-footer-ink);
	transition: opacity var(--hp-duration-fast) var(--hp-ease);
}

.hp-footer__logo:hover {
	opacity: 0.82;
}

/* Capped by height, not width: a wordmark and a stacked lockup are different
 * shapes and only the height should be the same. */
.hp-footer__logo-image {
	width: auto;
	height: 2.5rem;
	max-height: 2.5rem;
	object-fit: contain;
}

.hp-footer__inner {
	display: grid;
	grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr));
	gap: var(--hp-space-12) var(--hp-space-10);
	padding-block: var(--hp-space-14) var(--hp-space-12);
	font-size: 0.9375rem;
}

/* Fewer than four columns should not leave the brand column stretched across
 * the page, so the grid only takes the tracks it has content for.
 *
 * The one-child case is not hypothetical: a shop with no footer menus and no
 * contact details configured renders the brand column alone, and without this it
 * was laid into a 1.5fr track with three empty ones beside it — a paragraph
 * pinned to one edge of an otherwise blank band. */
.hp-footer__inner:has(> :first-child:last-child) {
	grid-template-columns: minmax(0, 1fr);
	max-width: 34rem;
	margin-inline: auto;
	text-align: center;
}

.hp-footer__inner:has(> :first-child:last-child) .hp-footer__tagline {
	max-width: none;
}

.hp-footer__inner:has(> :first-child:last-child) .hp-footer__promises {
	align-items: center;
}

.hp-footer__inner:has(> :nth-child(2):last-child) {
	grid-template-columns: 1.4fr minmax(0, 1fr);
}

.hp-footer__inner:has(> :nth-child(3):last-child) {
	grid-template-columns: 1.4fr repeat(2, minmax(0, 1fr));
}

/* The mark, the tagline, the promises and the social row are one block about
 * the shop, so the column has a rhythm of its own rather than the grid's. */
.hp-footer__brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--hp-space-4);
}

.hp-footer__wordmark {
	font-family: var(--hp-font-display);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: 0.01em;
}

.hp-footer__tagline {
	max-width: 19rem;
	margin: 0;
	color: var(--hp-footer-ink-faint);
	line-height: var(--hp-leading-body);
}

.hp-footer__column {
	display: flex;
	flex-direction: column;
	gap: var(--hp-space-3);
	min-width: 0;
}

.hp-footer__column-title {
	margin: 0;
	font-family: var(--hp-font-ui);
	font-size: var(--hp-text-base);
	font-weight: 700;
	color: var(--hp-footer-ink);
	letter-spacing: normal;
}

.hp-footer__menu,
.hp-footer__contact {
	display: flex;
	flex-direction: column;
	gap: var(--hp-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hp-footer__menu a,
.hp-footer__contact,
.hp-footer__contact a {
	color: var(--hp-footer-ink-muted);
}

/* A footer link is set on near-black, where a colour change alone is a weak
 * signal. It also gains an underline and steps one notch towards the start of
 * its line, which reads as a list item being picked up. `translate` rather than
 * `margin` so the column's rhythm does not shift with the pointer.
 */
.hp-footer__menu a,
.hp-footer__contact a {
	display: inline-block;
	text-decoration: none;
	text-underline-offset: 0.3em;
	transition:
		color var(--hp-duration-fast) var(--hp-ease),
		translate var(--hp-duration) var(--hp-ease-out);
}

.hp-footer__menu a:hover,
.hp-footer__menu a:focus-visible,
.hp-footer__contact a:hover,
.hp-footer__contact a:focus-visible {
	color: var(--hp-footer-ink);
	text-decoration: underline;
	text-decoration-color: var(--hp-footer-accent);
	text-decoration-thickness: 1px;
	/* Towards the reading start. LTR is the default so an LTR document with no
	 * dir attribute is still right; RTL is stated below. */
	translate: 3px 0;
}

[dir="rtl"] .hp-footer__menu a:hover,
[dir="rtl"] .hp-footer__menu a:focus-visible,
[dir="rtl"] .hp-footer__contact a:hover,
[dir="rtl"] .hp-footer__contact a:focus-visible {
	translate: -3px 0;
}

/* Widgets dropped into the footer area inherit the column treatment rather
 * than arriving with the admin's own default markup styling. */
.hp-footer__widgets .hp-footer__widget-title {
	margin: 0 0 var(--hp-space-3);
	font-family: var(--hp-font-ui);
	font-size: var(--hp-text-base);
	font-weight: 700;
	color: var(--hp-footer-ink);
}

.hp-footer__widgets ul {
	display: flex;
	flex-direction: column;
	gap: var(--hp-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hp-footer__widgets a {
	color: var(--hp-footer-ink-muted);
}

/* ---- promises ----
 * Three short reassurances under the tagline. Each is a tick and a line; the
 * tick is the accent so the column has one point of colour in a dark field.
 */

.hp-footer__promises {
	display: flex;
	flex-direction: column;
	gap: var(--hp-space-3);
	margin: var(--hp-space-2) 0 0;
	padding: 0;
	list-style: none;
}

.hp-footer__promises li {
	display: flex;
	align-items: center;
	gap: var(--hp-space-3);
	color: var(--hp-footer-ink-muted);
	line-height: 1.4;
}

.hp-footer__promises svg {
	flex: none;
	color: var(--hp-footer-accent);
}

/* ---- base ---- */

.hp-footer__base {
	border-block-start: 1px solid var(--hp-footer-rule);
}

.hp-footer__base-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--hp-space-3) var(--hp-space-6);
	padding-block: var(--hp-space-5);
	font-size: var(--hp-text-xs);
	color: var(--hp-footer-ink-faint);
}

.hp-footer__copyright {
	margin: 0;
}

.hp-footer__secure {
	display: inline-flex;
	align-items: center;
	gap: var(--hp-space-2);
	margin: 0;
}

.hp-footer__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--hp-space-2) var(--hp-space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hp-footer__legal a {
	color: var(--hp-footer-ink-faint);
	transition: color var(--hp-duration-fast) var(--hp-ease);
}

.hp-footer__legal a:hover,
.hp-footer__legal a:focus-visible {
	color: var(--hp-footer-ink);
}

@media (max-width: 45rem) {
	.hp-footer__base-inner {
		justify-content: center;
		text-align: center;
	}
}

@media (max-width: 55rem) {
	.hp-footer__inner,
	.hp-footer__inner:has(> :nth-child(2):last-child),
	.hp-footer__inner:has(> :nth-child(3):last-child) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--hp-space-8);
		padding-block: var(--hp-space-10) var(--hp-space-8);
	}
}

@media (max-width: 34rem) {
	.hp-footer__inner,
	.hp-footer__inner:has(> :nth-child(2):last-child),
	.hp-footer__inner:has(> :nth-child(3):last-child) {
		grid-template-columns: 1fr;
	}

}

/* ---- social ---- */

.hp-footer__social {
	display: flex;
	gap: var(--hp-space-3);
	margin-block-start: var(--hp-space-1);
}

.hp-footer__social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border: 1px solid var(--hp-footer-field-border);
	border-radius: var(--hp-radius-pill);
	color: var(--hp-footer-ink);
	transition: border-color var(--hp-duration-fast) var(--hp-ease);
}

.hp-footer__social-link:hover {
	border-color: var(--hp-footer-ink);
	color: var(--hp-footer-ink);
}

/* ---- newsletter ---- */

.hp-footer__signup-text {
	margin: 0;
	font-size: var(--hp-text-sm);
	line-height: 1.5;
	color: var(--hp-footer-ink-faint);
}

/* The form comes from whatever plugin the shortcode belongs to, so this styles
 * its parts by element rather than by a class the theme does not own. */
.hp-footer__form input[type="email"],
.hp-footer__form input[type="text"] {
	flex: 1;
	min-width: 0;
	height: 2.875rem;
	padding-inline: var(--hp-space-4);
	background: var(--hp-footer-field);
	border: 1px solid var(--hp-footer-field-border);
	border-radius: var(--hp-radius-pill);
	color: var(--hp-footer-ink);
	font-size: var(--hp-text-sm);
}

.hp-footer__form input::placeholder {
	color: var(--hp-footer-ink-faint);
	opacity: 1;
}

.hp-footer__form input[type="submit"],
.hp-footer__form button {
	height: 2.875rem;
	padding-inline: var(--hp-space-6);
	background: var(--hp-footer-accent);
	border: none;
	border-radius: var(--hp-radius-pill);
	color: var(--hp-footer-ink);
	font-family: var(--hp-font-ui);
	font-size: 0.9375rem;
	font-weight: 700;
	cursor: pointer;
}

.hp-footer__form form,
.hp-footer__form p {
	display: flex;
	gap: var(--hp-space-2);
	margin: 0;
	align-items: center;
}