/**
 * Core block overrides and the theme's own dynamic blocks.
 *
 * Loaded last so it wins on equal specificity without needing !important.
 *
 * @package LCA
 */

/* ===================================================================== */
/* Core blocks                                                            */
/* ===================================================================== */

.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 22px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.2px;
	line-height: 1.2;
	border-radius: var(--lca-radius-btn);
	transition: background-color var(--lca-transition);
}

.wp-block-button__link:hover {
	background-color: var(--lca-terracotta-dark);
	color: var(--lca-white);
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--lca-navy);
	border: 1px solid var(--lca-line);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--lca-sand-alt);
	color: var(--lca-navy);
}

/* On navy and teal sections the outline button reverses. */
.has-navy-background-color .wp-block-button.is-style-outline .wp-block-button__link,
.has-teal-background-color .wp-block-button.is-style-outline .wp-block-button__link {
	color: var(--lca-white);
	border-color: rgb(255 255 255 / 0.4);
}

.wp-block-image img {
	border-radius: var(--lca-radius-card);
}

.wp-block-image.is-style-square img {
	border-radius: 0;
}

.wp-block-separator {
	max-width: none;
	height: 0;
	border: 0;
	border-top: 1px solid var(--lca-line);
	opacity: 1;
}

/* The design's dotted section divider, as a block style. */
.wp-block-separator.is-style-lca-dotted {
	border-top: 1px dotted var(--lca-divider-dotted);
}

.wp-block-table {
	overflow-x: auto;
}

.wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--lca-fs-small);
}

.wp-block-table th,
.wp-block-table td {
	padding: 12px var(--lca-space-2);
	border: 0;
	border-bottom: 1px solid var(--lca-line-soft);
	text-align: left;
}

.wp-block-table th {
	background: var(--lca-sand-alt);
	color: var(--lca-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: var(--lca-ls-label);
	text-transform: uppercase;
}

.wp-block-details {
	padding-block: var(--lca-space-2);
	border-bottom: 1px solid var(--lca-line);
}

.wp-block-details summary {
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
}

.wp-block-quote {
	margin: 0;
	padding-left: var(--lca-space-3);
	border-left: 3px solid var(--lca-terracotta);
	font-style: normal;
}

.wp-block-cover {
	border-radius: var(--lca-radius-card);
}

/* Group blocks used as sections pick up the section rhythm automatically. */
.wp-block-group.has-background {
	padding-block: var(--lca-section-y);
}

/* ===================================================================== */
/* Flight board                                                           */
/* ===================================================================== */

.lca-flightboard {
	display: grid;
	gap: var(--lca-space-2);
}

.lca-tabs__list {
	display: flex;
	gap: var(--lca-space-1);
	flex-wrap: wrap;
}

.lca-tabs__tab {
	padding: 12px 20px;
	background: transparent;
	color: var(--lca-muted);
	font-size: 14px;
	font-weight: 700;
	border: 1px solid transparent;
	border-radius: var(--lca-radius-btn);
	cursor: pointer;
	transition: background-color var(--lca-transition), color var(--lca-transition);
}

.lca-tabs__tab:hover {
	color: var(--lca-navy);
}

/* The selected tab is navy-filled, matching the design. The border on the
   unselected state keeps the two the same size so nothing shifts on switch. */
.lca-tabs__tab[aria-selected="true"] {
	background: var(--lca-navy);
	color: var(--lca-white);
}

.lca-tabs__panel:focus-visible {
	outline: var(--lca-focus-width) solid var(--lca-focus-color);
	outline-offset: var(--lca-focus-offset);
}

/* ===================================================================== */
/* Weather                                                                */
/* ===================================================================== */

.lca-weather-now {
	padding: var(--lca-space-3);
	background: var(--lca-white);
	border: 1px solid var(--lca-line);
	border-radius: var(--lca-radius-card);
}

/* ===================================================================== */
/* Editor-only notices                                                    */
/* ===================================================================== */

.lca-block-notice {
	padding: var(--lca-space-2) var(--lca-space-3);
	background: oklch(96% 0.04 85);
	border: 1px dashed oklch(70% 0.12 65);
	border-radius: var(--lca-radius-card);
	color: #7a4a06;
	font-size: var(--lca-fs-small);
}

.lca-block-notice p {
	margin: 0;
	color: inherit;
}

/* ===================================================================== */
/* Search form and pagination                                             */
/* ===================================================================== */

.lca-searchform {
	display: flex;
	gap: var(--lca-space-1);
	max-width: 420px;
}

.lca-searchform__input {
	flex: 1;
	min-width: 0;
	padding: 12px 14px;
	background: var(--lca-white);
	border: 1px solid var(--lca-line);
	border-radius: var(--lca-radius-btn);
}

.lca-pagination {
	display: flex;
	gap: var(--lca-space-2);
	margin-top: var(--lca-space-4);
	font-weight: 600;
}

.lca-single__meta {
	color: var(--lca-muted);
	font-size: var(--lca-fs-small);
}

.lca-single__media {
	margin-block: var(--lca-space-3);
}

.lca-single__media img {
	width: 100%;
	border-radius: var(--lca-radius-card);
}

/* ---- Block style variations ---- */

.wp-block-group.is-style-lca-card {
	padding: var(--lca-space-3);
	background: var(--lca-white);
	border: 1px solid var(--lca-line);
	border-radius: var(--lca-radius-card);
}

.wp-block-group.is-style-lca-alert {
	padding: var(--lca-space-3) 28px;
	background: oklch(93% 0.03 250);
	border-radius: var(--lca-radius-card);
}

.wp-block-group.is-style-lca-alert p {
	max-width: var(--lca-measure);
	color: var(--lca-navy);
}

.wp-block-list.is-style-lca-inline {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lca-space-1) 0;
	padding: 0;
	list-style: none;
	font-family: var(--lca-font-serif);
	font-size: var(--lca-fs-lead);
}

.wp-block-list.is-style-lca-inline li + li::before {
	margin-inline: 10px;
	content: "·";
	opacity: 0.5;
}

/* ===================================================================== */
/* Pattern block styles                                                   */
/*                                                                        */
/* These back the section patterns. Each is a core block plus a style      */
/* variation, so an editor edits normal blocks — no custom HTML, no        */
/* shortcodes, and nothing that breaks when the pattern is rearranged.     */
/* ===================================================================== */

/* ---- Colour card (transportation row, parking rates) ---- */

.wp-block-group.is-style-lca-colorcard {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--lca-space-1);
	padding: 28px;
	overflow: hidden;
}

/*
 * Hover darkens the ground only. The design faded the whole card with
 * opacity, which fades the white label with it — measured, that dropped
 * four of the five transportation cards below AA, including two that pass
 * at rest. An overlay under the content leaves the label at full contrast.
 */
.wp-block-group.is-style-lca-colorcard {
	transition: box-shadow var(--lca-transition);
}

.wp-block-group.is-style-lca-colorcard:hover,
.wp-block-group.is-style-lca-colorcard:focus-within {
	box-shadow: inset 0 0 0 999px rgb(0 0 0 / 0.14);
}

.wp-block-group.is-style-lca-colorcard > * {
	position: relative;
	z-index: 1;
	margin: 0;
}

/*
 * Core's "constrained" group layout gives every child auto side margins to
 * centre it in the container. Inside these flex-column cards that centres the
 * heading and text, which is not the design. Both styles set their own
 * alignment, so the auto margins are cancelled here rather than by asking
 * every pattern to pick a different layout type.
 */
.wp-block-group.is-style-lca-colorcard > *,
.wp-block-group.is-style-lca-step > * {
	margin-inline: 0;
}

/* In a columns row the cards should end level with each other even when one
   description runs a line shorter. Columns already stretch; the card just has
   to fill the height it is given. */
.wp-block-column > .wp-block-group.is-style-lca-colorcard:only-child,
.wp-block-column > .wp-block-group.is-style-lca-card:only-child {
	height: 100%;
}

.wp-block-group.is-style-lca-colorcard :where(h2, h3, h4) {
	font-family: var(--lca-font-sans);
	font-size: var(--lca-fs-h4);
	font-weight: 700;
}

.wp-block-group.is-style-lca-colorcard p {
	font-size: var(--lca-fs-small);
}

/* ---- Numbered step ---- */

.wp-block-group.is-style-lca-step {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: flex-start;
	text-align: left;
}

.wp-block-group.is-style-lca-step > :first-child {
	display: inline-block;
	width: fit-content;
	margin: 0;
	padding: 4px 10px;
	background: var(--lca-navy);
	border-radius: 999px;
	color: var(--lca-white);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: var(--lca-ls-label);
	text-transform: uppercase;
}

.wp-block-group.is-style-lca-step > * {
	margin: 0;
}

/* ---- Quick-link tile ---- */

.wp-block-cover.is-style-lca-tile {
	aspect-ratio: 1 / 1;
	min-height: 0;
	padding: var(--lca-space-2);
	border-radius: 0;
	align-items: flex-end;
	justify-content: flex-start;
}

/*
 * The design put a white 14px label over a flat colour overlay on a
 * photograph. Measured over bright imagery that lands at 3.35–3.60:1 —
 * below AA, and the exact ratio depends on which photo is chosen, so it
 * could not be guaranteed. This scrim sits under the label and makes the
 * ratio independent of the image.
 */
.wp-block-cover.is-style-lca-tile::after {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	height: 60%;
	background: linear-gradient(180deg, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 0.55) 100%);
	content: "";
	pointer-events: none;
	transition: opacity var(--lca-transition);
}

.wp-block-cover.is-style-lca-tile .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
	width: 100%;
}

.wp-block-cover.is-style-lca-tile p {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
}

/* ---------------------------------------------------------------------
   Making the cards clickable

   The label carries the real link, so the accessible name is just "Flight
   Status" rather than the whole card read aloud, and the click target is
   then stretched over the card.

   The trap here is the containing block. An absolutely positioned pseudo
   resolves against its nearest POSITIONED ancestor, so giving the link — or
   the paragraph around it — `position: relative` to lift it above the scrim
   makes that element the containing block and traps the target inside the
   label. The tile therefore turns the link itself into the overlay: it is
   absolutely positioned across the whole cover and lays its own text out at
   the bottom, which is where the label sat anyway.
   --------------------------------------------------------------------- */

.wp-block-cover.is-style-lca-tile:has( a ) .wp-block-cover__inner-container {
	position: static;
}

.wp-block-cover.is-style-lca-tile a {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	align-items: flex-end;
	padding: var(--lca-space-2);
	color: inherit;
	text-decoration: none;
}

/* The prose rule underlines any link inside a paragraph and out-specifies a
   bare tile selector, so the tile's own chain is spelled out beside it. */
.wp-block-cover.is-style-lca-tile a,
.lca-prose .wp-block-cover.is-style-lca-tile p > a:not( .lca-btn ) {
	text-decoration: none;
}

/* The image lifts and the scrim deepens together, so the label stays legible
   at the moment the picture brightens under it. */
.wp-block-cover.is-style-lca-tile:has( a ) img {
	transition: transform var(--lca-transition);
}

.wp-block-cover.is-style-lca-tile:has( a:hover ) img,
.wp-block-cover.is-style-lca-tile:has( a:focus-visible ) img {
	transform: scale(1.06);
}

.wp-block-cover.is-style-lca-tile:has( a:hover )::after,
.wp-block-cover.is-style-lca-tile:has( a:focus-visible )::after {
	height: 78%;
}

.wp-block-cover.is-style-lca-tile:has( a:hover ) a,
.lca-prose .wp-block-cover.is-style-lca-tile:has( a:hover ) p > a:not( .lca-btn ) {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* The focus ring belongs on the tile, not on the few words inside it. */
.wp-block-cover.is-style-lca-tile:has( a:focus-visible ) {
	outline: 3px solid var(--lca-white);
	outline-offset: -3px;
}

.wp-block-cover.is-style-lca-tile a:focus-visible {
	outline: none;
}

/* Colour cards take the same route, and for the same reason their heading
   gives up its own positioning so the stretched pseudo can reach the card. */
.wp-block-group.is-style-lca-colorcard :where( h2, h3, h4 ):has( a ) {
	position: static;
}

.wp-block-group.is-style-lca-colorcard a {
	color: inherit;
	text-decoration: none;
}

.wp-block-group.is-style-lca-colorcard a::after {
	position: absolute;
	inset: 0;
	z-index: 2;
	content: "";
}

/* The children were lifted onto their own layer only to stay clear of the old
   hover overlay. That overlay is now an inset shadow, which paints under the
   content anyway — so on a linked card they go back to the normal flow, and
   stop sitting above the click target that has to cover them. */
.wp-block-group.is-style-lca-colorcard:has( a ) > * {
	position: static;
	z-index: auto;
}

.wp-block-group.is-style-lca-colorcard:has( a:hover ) a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wp-block-group.is-style-lca-colorcard:has( a:focus-visible ) {
	outline: 3px solid var(--lca-white);
	outline-offset: -3px;
}

.wp-block-group.is-style-lca-colorcard a:focus-visible {
	outline: none;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-cover.is-style-lca-tile:has( a ) img,
	.wp-block-cover.is-style-lca-tile::after {
		transition: none;
	}

	.wp-block-cover.is-style-lca-tile:has( a:hover ) img,
	.wp-block-cover.is-style-lca-tile:has( a:focus-visible ) img {
		transform: none;
	}
}


/* ---- Framed data table ---- */

.wp-block-table.is-style-lca-data {
	overflow-x: auto;
	background: var(--lca-white);
	border: 1px solid var(--lca-line);
	border-radius: var(--lca-radius-card);
}

.wp-block-table.is-style-lca-data table {
	min-width: 520px;
}

.wp-block-table.is-style-lca-data td:not(:first-child),
.wp-block-table.is-style-lca-data th:not(:first-child) {
	font-variant-numeric: tabular-nums;
}

.wp-block-table.is-style-lca-data figcaption {
	padding: 0 var(--lca-space-2) var(--lca-space-2);
	color: var(--lca-muted);
	font-size: var(--lca-fs-small);
}

/* ===================================================================== */
/* Flight search                                                          */
/*                                                                        */
/* The design floats this white card over the lower edge of the hero and  */
/* insets it from the hero's sides. The direction toggles are radios       */
/* dressed as tabs, so the choice stays lit after a click, and the submit   */
/* carries the visitor to the flight board at #arrivals or #departures.     */
/* ===================================================================== */

.lca-flightsearch {
	position: relative;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	gap: var(--lca-space-2);
	align-items: center;
	margin: calc(var(--lca-space-3) * -1) var(--lca-space-2) 0;
	padding: var(--lca-space-2);
	background: var(--lca-white);
	border-radius: 12px;
	box-shadow: 0 20px 48px rgb(30 27 75 / 0.14);
}

@media (min-width: 900px) {
	.lca-flightsearch {
		flex-wrap: nowrap;
		margin: -40px 32px 0;
	}
}

.lca-flightsearch__tabs {
	display: flex;
	gap: var(--lca-space-1);
	min-width: 0;
	margin: 0;
	padding: 0 0 0 var(--lca-space-1);
	border: 0;
}

/* The radio itself is the state; the label is the visible tab. It is taken
   out of the flow rather than display:none, so it keeps its place in the tab
   order and its focus ring can be drawn on the label. */
.lca-flightsearch__radio {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.lca-flightsearch__tab {
	padding: 11px 18px;
	color: var(--lca-muted);
	font-size: 14px;
	font-weight: 700;
	border-radius: 10px;
	cursor: pointer;
}

.lca-flightsearch__tab:hover {
	color: var(--lca-navy);
}

.lca-flightsearch__radio:checked + .lca-flightsearch__tab,
.lca-flightsearch__tab.is-current {
	background: var(--lca-navy);
	color: var(--lca-white);
}

.lca-flightsearch__radio:focus-visible + .lca-flightsearch__tab {
	outline: 3px solid var(--lca-terracotta);
	outline-offset: 2px;
}

.lca-flightsearch__form {
	display: flex;
	flex: 1;
	gap: var(--lca-space-2);
	align-items: center;
	min-width: 0;
}

.lca-flightsearch__input {
	flex: 1;
	min-width: 0;
	padding: 14px 18px;
	background: var(--lca-white);
	color: var(--lca-navy);
	font: inherit;
	font-size: 15px;
	/* --lca-line is 1.27:1 against the white field it sits on, which fails
	   WCAG 1.4.11 for a form control's boundary (needs 3:1). --lca-muted
	   clears it with room to spare and reads as an ordinary field border. */
	border: 1.5px solid var(--lca-muted);
	border-radius: 12px;
}

/* The homepage search bar links to #arrivals / #departures. The board's
   heading is a sibling above it, so the jump has to stop far enough back to
   keep that heading on screen — otherwise the visitor lands on a bare table
   and has to scroll up to learn which one they are looking at. The header
   does not stick, so this only has to clear the heading and its margin. */
.lca-flightboard[id] {
	scroll-margin-top: 96px;
}

/* A search that arrives from the homepage bar says what it filtered by, so a
   short list reads as a result rather than as a broken board. */
.lca-flightboard__summary {
	margin: 0 0 var(--lca-space-2);
	color: var(--lca-muted);
	font-size: var(--lca-fs-small);
}

.lca-flightboard__summary a {
	color: var(--lca-terracotta);
}

.lca-flightsearch__submit {
	flex-shrink: 0;
	padding: 14px 28px;
	font-size: 15px;
}

/* The homepage hero and its search bar are one unit: the bar overlaps the
   hero, so the wrapper must not clip it. */
.lca-hero-home {
	overflow: visible;
}

/* Hero height lives here rather than as an inline min-height on the cover, so
   it can change with the viewport. The handoff was drawn at a fixed 1280 with
   no mobile treatment, and a 600px band on a 667px-tall phone leaves nothing
   else in the first screen. */
.lca-hero-home .wp-block-cover {
	min-height: 380px;
}

@media (min-width: 600px) {
	.lca-hero-home .wp-block-cover {
		min-height: 460px;
	}
}

@media (min-width: 900px) {
	.lca-hero-home .wp-block-cover {
		min-height: 600px;
	}
}

/* Measure, from the design: the heading wraps at 760px, the standfirst at
   560px, so neither runs the full width of a 1280px hero. */
.lca-hero-home .wp-block-cover h1 {
	max-width: 760px;
}

.lca-hero-home .wp-block-cover p {
	max-width: 560px;
}

/* ---- Interior page hero ---- */

.lca-hero-page .wp-block-cover {
	min-height: 220px;
}

@media (min-width: 600px) {
	.lca-hero-page .wp-block-cover {
		min-height: 260px;
	}
}

/* The design sets the eyebrow as a terracotta pill rather than plain text. */
.lca-eyebrow-pill {
	display: inline-block;
	width: fit-content;
	margin-bottom: 12px;
	padding: 6px 14px;
	background: var(--lca-terracotta);
	border-radius: 6px;
}

/* A cover block with no photograph gets the same treatment, so an unfilled
   hero reads as "needs an image" rather than as a flat navy band. The
   quick-link tiles are excluded: a solid colour tile is a valid design. */
.lca-hero-home .wp-block-cover:not( :has( .wp-block-cover__image-background ) )::after,
.lca-hero-page .wp-block-cover:not( :has( .wp-block-cover__image-background ) )::after {
	position: absolute;
	top: 50%;
	right: 0;
	left: 0;
	transform: translateY(-50%);
	color: rgb(255 255 255 / 0.8);
	font-family: var(--lca-font-sans);
	font-size: 48px;
	font-weight: 700;
	letter-spacing: 2px;
	text-align: center;
	content: "FPO";
	pointer-events: none;
}

.lca-hero-home .wp-block-cover:not( :has( .wp-block-cover__image-background ) ),
.lca-hero-page .wp-block-cover:not( :has( .wp-block-cover__image-background ) ) {
	background-color: var(--lca-navy);
}

/* ===================================================================== */
/* FPO placeholders                                                       */
/*                                                                        */
/* A pattern ships its picture slots already filled with a placeholder    */
/* SVG from assets/img/ — a navy box with FPO across it and the size that */
/* slot expects underneath. An editor replaces it with the ordinary       */
/* "Replace" button, exactly like any other image.                        */
/*                                                                        */
/* This used to be done in CSS, styling a core/image block whose <img>    */
/* carried no src. That never reached the front end: WordPress drops an   */
/* empty image block at render, and the site's lazy-loader rewrites every */
/* src that survives, so the placeholder appeared on no page at all. A    */
/* real file cannot be erased by either.                                  */
/*                                                                        */
/* The slot's own aspect-ratio rules crop the placeholder to the shape    */
/* the real photograph will take, so nothing shifts when it is swapped.   */
/* ===================================================================== */

.lca-fpo {
	display: block;
	width: 100%;
	height: auto;
	background: var(--lca-navy);
}

/* ===================================================================== */
/* Homepage sections, matching the client's rendered PDF                  */
/* ===================================================================== */

/* The search bar is half the hero's width and centred, per the PDF. */
@media (min-width: 900px) {
	.lca-flightsearch {
		max-width: 50%;
		margin-inline: auto;
	}
}

/* The curb-to-gate steps sit inside the Terminal Map column as labelled
   rows, not as a separate band below it. */
.lca-stepdot {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	margin-top: 4px;
	border-radius: 6px;
}

.lca-stepdot.wp-block-group {
	min-height: 22px;
	padding: 0;
}

/* Airport News: tag and headline on one row, ruled between, no dates. */
.lca-newslist .wp-block-post-template {
	margin: 0;
	padding: 0;
	list-style: none;
}

.lca-newslist .wp-block-post {
	display: grid;
	gap: 4px var(--lca-space-3);
	grid-template-columns: 1fr;
	align-items: baseline;
	padding-block: 18px;
	border-bottom: 1px solid var(--lca-line);
}

@media (min-width: 600px) {
	.lca-newslist .wp-block-post {
		grid-template-columns: 150px 1fr;
	}
}

.lca-newslist__tag,
.lca-newslist__tag a {
	margin: 0;
	color: var(--lca-terracotta);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: var(--lca-ls-label);
	text-transform: uppercase;
	text-decoration: none;
}

.lca-newslist .wp-block-post-title {
	margin: 0;
	font-family: var(--lca-font-sans);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
}

.lca-newslist .wp-block-post-title a {
	color: var(--lca-navy);
	text-decoration: none;
}

.lca-newslist .wp-block-post-title a:hover {
	color: var(--lca-terracotta);
}

/* A section heading with its "see all" link opposite. */
.wp-block-group.is-layout-flex > .wp-block-heading {
	margin: 0;
}

/* ===================================================================== */
/* Parking rate cards                                                     */
/* ===================================================================== */

.lca-rate {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.lca-rate > * {
	margin-inline: 0;
}

/* Scoped to .lca-rate so it outranks the core block rule that gives any
   group with a background 1.25em of block padding — which was inflating this
   44px chip to 112px and turning the comp's icon tile into a tall slab. */
.lca-rate .lca-rate__icon {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	min-height: 0;
	margin-bottom: var(--lca-space-3);
	padding: 0;
	border-radius: 10px;
}

.lca-rate .wp-block-separator {
	margin-block: var(--lca-space-2) 12px;
}

.lca-rate__price {
	display: flex;
	gap: 6px;
	align-items: baseline;
	justify-content: space-between;
	margin-top: auto;
}

.lca-rate__from {
	color: var(--lca-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: var(--lca-ls-label);
	text-transform: uppercase;
}

.lca-rate__price strong {
	font-family: var(--lca-font-serif);
	font-size: 28px;
	font-variant-numeric: tabular-nums;
}

.lca-rate__unit {
	color: var(--lca-muted);
	font-size: 13px;
}

/* ===================================================================== */
/* Question and answer list, and the dark side panel                      */
/* ===================================================================== */

.lca-qa {
	padding-block: var(--lca-space-3);
	border-bottom: 1px solid var(--lca-line);
}

.lca-qa > * {
	margin-inline: 0;
}

.lca-qa p + p {
	margin-top: 6px;
}

.lca-panel {
	padding: var(--lca-space-4);
	border-radius: var(--lca-radius-card);
}

.lca-panel > * {
	margin-inline: 0;
}

/* This form renders in Gravity Forms' LEGACY markup, whose own rule
   `.gform_legacy_markup_wrapper label.gfield_label { font-size: inherit }`
   ties on specificity with a plain `.lca-panel .gform_wrapper label` and wins
   on load order — so the labels inherited 17px from the panel and came out
   larger than the panel's heading. Both of the plugin's wrapper classes are
   spelled out here so the rule lands whichever markup mode a form uses. */
.lca-panel .gform_wrapper label,
.lca-panel .gform_wrapper legend,
.lca-panel .gform_wrapper.gravity-theme .gfield_label,
.lca-panel .gform_wrapper.gravity-theme legend.gfield_label,
.lca-panel .gform_legacy_markup_wrapper label.gfield_label,
.lca-panel .gform_legacy_markup_wrapper legend.gfield_label {
	color: rgb(255 255 255 / 0.75);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: var(--lca-ls-label);
	text-transform: uppercase;
}

/* The sub-labels under a split field (First / Last) and the descriptions under
   a single one are hints, not headings: same size, but plain, so the eye stops
   at the real label. */
.lca-panel .gform_wrapper.gravity-theme .ginput_complex label,
.lca-panel .gform_wrapper.gravity-theme .gfield_description,
.lca-panel .gform_legacy_markup_wrapper .ginput_complex label,
.lca-panel .gform_legacy_markup_wrapper .gfield_description,
.lca-panel .gform_wrapper .ginput_complex label,
.lca-panel .gform_wrapper .gfield_description {
	color: rgb(255 255 255 / 0.62);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

.lca-panel .gform_wrapper input[type="text"],
.lca-panel .gform_wrapper input[type="email"],
.lca-panel .gform_wrapper input[type="tel"],
.lca-panel .gform_wrapper input[type="date"],
.lca-panel .gform_wrapper select,
.lca-panel .gform_wrapper textarea {
	background: rgb(255 255 255 / 0.08);
	color: var(--lca-white);
	/* 0.25 white over the navy panel is about 1.6:1 — a field boundary needs
	   3:1 to pass WCAG 1.4.11, and at that weight the inputs read as navy
	   rectangles on navy. 0.5 lands near 4.2:1 and looks like a field. */
	border: 1px solid rgb(255 255 255 / 0.5);
	border-radius: 8px;
}

.lca-panel .gform_wrapper ::placeholder {
	color: rgb(255 255 255 / 0.5);
}

.lca-panel .gform_wrapper .gform_button {
	width: 100%;
	padding: 14px 22px;
	background: var(--lca-terracotta);
	color: var(--lca-white);
	font-weight: 700;
	border: 0;
	border-radius: 8px;
	cursor: pointer;
}

.lca-panel .gform_wrapper .gform_button:hover {
	background: var(--lca-terracotta-dark);
}

/* ===================================================================== */
/* Terminal timing card on the flights page                               */
/* ===================================================================== */

.lca-timing > .wp-block-group {
	justify-content: space-between;
	padding-block: 10px;
}

.lca-timing > .wp-block-group + .wp-block-group {
	border-top: 1px solid var(--lca-line-soft);
}

.lca-timing p {
	margin: 0;
}

.lca-timing__value {
	color: var(--lca-terracotta);
	font-weight: 700;
}

/* ===================================================================== */
/* Flight tables, per the Arrivals & Departures design                     */
/* ===================================================================== */

/* The flight number is the thing people scan for, so it carries the brand
   colour and the weight. */
.lca-table tbody th[scope="row"] {
	color: var(--lca-terracotta);
	font-weight: 700;
}

/* Status reads as a filled block across its column in the design, not as a
   small chip floating in white space. */
.lca-table td:last-child {
	width: 160px;
}

.lca-table .lca-pill {
	display: flex;
	width: 100%;
	padding: 7px 12px;
	font-size: 12.5px;
}

.lca-table tbody tr:hover {
	background: var(--lca-sand-alt);
}

/* ===================================================================== */
/* Image slots crop to their slot, not to the file                        */
/*                                                                        */
/* Patterns reference the full-size file so the same markup keeps working  */
/* whatever an editor swaps in. Without this a 3563x1627 photo and a       */
/* 1920x1218 one in the same row render at different heights and the row   */
/* stops being a row. The slot decides the crop.                           */
/* ===================================================================== */

/* The image optimiser wraps every optimised image in a <picture>, which is
   an inline element with no size of its own. A percentage width or height on
   the <img> then resolves against that shrink-to-fit box instead of the slot,
   so every object-fit rule below silently did nothing. Making the wrapper a
   block that fills its parent restores them. */
.wp-block-image picture {
	display: block;
	width: 100%;
}

.wp-block-image[class*="size-lca-"] img {
	width: 100%;
	height: auto;
	object-fit: cover;
}

.wp-block-image.size-lca-hero img {
	aspect-ratio: 1600 / 600;
}

.wp-block-image.size-lca-hero-page img {
	aspect-ratio: 1600 / 320;
}

.wp-block-image.size-lca-card img {
	aspect-ratio: 640 / 200;
}

.wp-block-image.size-lca-tile img {
	aspect-ratio: 1 / 1;
}

.wp-block-image.size-lca-media img {
	aspect-ratio: 900 / 460;
}

/* The step marker aligns with the first line of its label, not with the
   middle of a two-line block. */
.wp-block-group:has( > .lca-stepdot ) {
	align-items: flex-start;
}

/* ===================================================================== */
/* Plugin bundles                                                         */
/*                                                                        */
/* The booking widget ships a React build whose stylesheet is enqueued     */
/* after every theme sheet and resets body's font-family at the same       */
/* specificity, so the one page carrying that widget rendered in the OS UI */
/* stack while its headings stayed on the brand serif. `html body` is one  */
/* step higher and takes the brand face back without !important.          */
/* ===================================================================== */

html body {
	font-family: var(--lca-font-sans);
}

/* ===================================================================== */
/* Mobile: search bar, tiles and the flight board                         */
/* ===================================================================== */

@media (max-width: 599px) {
	/* The bar was one flex row with three children on a 390px screen, so the
	   input collapsed to a stub and the Search button ran off the edge.
	   Stacked, each control gets the full width and a real touch target. */
	.lca-flightsearch {
		flex-direction: column;
		align-items: stretch;
		gap: var(--lca-space-2);
		margin-inline: var(--lca-space-2);
		padding: var(--lca-space-2);
	}

	.lca-flightsearch__tabs {
		gap: 6px;
		padding-left: 0;
	}

	.lca-flightsearch__tab {
		flex: 1;
		padding: 10px 12px;
		text-align: center;
	}

	.lca-flightsearch__form {
		flex-direction: column;
		align-items: stretch;
		gap: var(--lca-space-2);
	}

	.lca-flightsearch__submit {
		justify-content: center;
		width: 100%;
	}

	/* Six square tiles stacked one per row is six screens of scrolling before
	   the page begins. Two across keeps the row readable and the label legible. */
	.lca-grid--6 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.is-style-lca-tile {
		min-height: 108px;
	}

	.is-style-lca-tile p {
		font-size: 13px;
		line-height: 1.25;
	}
}

/* ---- Flight board on a phone ----

   A five-column table cannot be read on a 390px screen: either it scrolls
   sideways, which hides the status a passenger came for, or the columns
   crush. Below 600px each row becomes its own labelled block, with the
   column headings supplied from data attributes. The table semantics are
   untouched, so a screen reader still gets a real table with row and column
   headers — the change is presentational only. */

@media (max-width: 599px) {
	.lca-flighttable thead {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.lca-flighttable,
	.lca-flighttable tbody,
	.lca-flighttable tr,
	.lca-flighttable th,
	.lca-flighttable td {
		display: block;
		width: auto;
	}

	.lca-flighttable tr {
		margin-bottom: var(--lca-space-2);
		padding: var(--lca-space-2) var(--lca-space-3);
		background: var(--lca-white);
		border: 1px solid var(--lca-line);
		border-radius: var(--lca-radius-card);
	}

	.lca-flighttable td,
	.lca-flighttable th {
		display: flex;
		gap: var(--lca-space-2);
		align-items: baseline;
		justify-content: space-between;
		padding: 5px 0;
		text-align: right;
		border: 0;
	}

	.lca-flighttable td::before,
	.lca-flighttable th::before {
		flex-shrink: 0;
		color: var(--lca-muted);
		font-size: 12px;
		font-weight: 600;
		letter-spacing: var(--lca-ls-label);
		text-align: left;
		text-transform: uppercase;
		content: attr(data-label);
	}

	/* The flight number leads the card, so it gets the full width and drops
	   its own label — a number that large is self-evidently the flight. */
	.lca-flighttable th[scope="row"] {
		padding-top: 0;
		font-size: var(--lca-fs-h4);
	}

	.lca-flighttable th[scope="row"]::before {
		content: none;
	}

	.lca-flighttable tr + tr {
		margin-top: 0;
	}

	.lca-table-wrap {
		overflow: visible;
	}
}

/* The cover block prints its gradient as an inline style, which no selector
   can outrank. !important is the documented way to re-theme a core block's
   inline gradient at a breakpoint, and it is scoped to these two heroes. */
@media (max-width: 599px) {
	.lca-hero-home .wp-block-cover__background {
		background: var(--lca-scrim-hero-sm) !important;
	}

	.lca-hero-page .wp-block-cover__background {
		background: var(--lca-scrim-hero-sm) !important;
	}

	.lca-hero__scrim {
		background: var(--lca-scrim-hero-sm);
	}
}

/* ===================================================================== */
/* Corrections from the design review                                     */
/* ===================================================================== */

@media (max-width: 599px) {
	/* .lca-table carries min-width: 560px so a wide schedule scrolls inside
	   its own frame. That was never released below 600px, so on a 390px
	   screen the table forced its whole column to 562px and everything to
	   the right of 358px was clipped — invisibly, because the body was also
	   hiding the overflow. The phone layout stacks each row into a card and
	   needs no minimum at all. */
	.lca-flighttable,
	.lca-flighttable caption {
		min-width: 0;
	}

	.lca-flighttable caption {
		display: block;
		width: auto;
		text-align: left;
	}

	.lca-page__body,
	.entry-content.lca-entry--measured,
	.lca-entry--measured .wp-block-table,
	.lca-table-wrap {
		min-width: 0;
	}

	/* A schedule that genuinely is wide keeps its minimum, but scrolls
	   inside its own frame instead of pushing the page sideways. */
	.lca-entry--measured .wp-block-table {
		overflow-x: auto;
	}

	/* Two 169px cards break a phone number across two lines, which is a
	   functional failure on the page a traveller reads at the curb. */
	.lca-directory {
		grid-template-columns: minmax(0, 1fr);
	}

	.lca-dircard__body a[href^="tel"],
	.lca-dircard > :not( .lca-dircard__logo ) a[href^="tel"] {
		display: inline-block;
		padding-block: 6px;
		white-space: nowrap;
	}

	/* The flat brand overlay at 0.78 plus the label gradient buried the
	   photographs entirely. Half the flat colour keeps the comp's rhythm
	   and gives the pictures back. */
	.is-style-lca-tile .wp-block-cover__background {
		opacity: 0.55;
	}
}

/* The written spec says no pill shapes anywhere and no numbered badges.
   This was the only pill on the site, on the one element the spec named. */
.lca-stepdot {
	padding: 0;
	background: none;
	color: var(--lca-terracotta);
	border-radius: 0;
}

/* The homepage search bar is the page's primary control and the comp runs
   it the full width of the container, overlapping the hero. It was sitting
   at 640px, centred, with a 252px input that truncated its own placeholder. */
@media (min-width: 900px) {
	.lca-flightsearch {
		max-width: none;
		margin-inline: 32px;
	}
}

/* ---- Flight board, empty ----

   A board with nothing on it still has to be useful. This says what is
   happening, in the direction the visitor asked for, and offers the one
   thing that does work: the airline directory, with a number for each. */

.lca-flightempty {
	display: flex;
	flex-direction: column;
	gap: var(--lca-space-2);
	align-items: flex-start;
	padding: var(--lca-space-4);
	background: var(--lca-white);
	border: 1px solid var(--lca-line);
	border-radius: var(--lca-radius-card);
}

.lca-flightempty__head {
	margin: 0;
	color: var(--lca-ink);
	font-family: var(--lca-font-serif);
	font-size: var(--lca-fs-h4);
	font-weight: 600;
}

.lca-flightempty__body {
	max-width: 58ch;
	margin: 0;
	color: var(--lca-body);
	font-size: var(--lca-fs-small);
}

.lca-flightempty__actions {
	display: flex;
	gap: var(--lca-space-3);
	align-items: center;
	margin: var(--lca-space-1) 0 0;
}

.lca-flightempty__clear {
	color: var(--lca-terracotta);
	font-size: var(--lca-fs-small);
}

/* The comp draws a small white glyph inside each rate chip. Drawn in CSS
   rather than shipped as icon files: three abstract marks that read at 44px,
   with no extra request and no font dependency. The chips are decorative —
   the card's heading carries the meaning — so they are hidden from
   assistive technology by the empty group they sit in. */
.lca-rate .lca-rate__icon {
	position: relative;
}

.lca-rate .lca-rate__icon::after {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 14px;
	transform: translate(-50%, -50%);
	border: 2px solid var(--lca-white);
	border-radius: 4px;
	content: "";
}

/* Second card: a ring. Third: a rounded square with a notch, which reads as
   a tag. Nothing depends on the order beyond these two overrides. */
.wp-block-column:nth-child(2) .lca-rate .lca-rate__icon::after {
	width: 16px;
	height: 16px;
	border-radius: 50%;
}

.wp-block-column:nth-child(3) .lca-rate .lca-rate__icon::after {
	width: 16px;
	height: 16px;
	border-radius: 4px 4px 4px 10px;
}

/* The interior hero and the paragraph beneath it were touching, because the
   pattern's block padding is carried on an inline style the generated markup
   did not reproduce. */
.lca-page--flex .lca-hero-page {
	margin-bottom: var(--lca-space-4);
}

.lca-page--flex .lca-hero-page + .wp-block-group {
	padding-top: 0;
}

/* Vertical rhythm for pattern-built pages whose top-level groups carry no
   inline padding of their own. Patterns that do set their own spacing are
   excluded by the attribute selector, so nothing doubles up. */
.lca-page--flex .entry-content > .wp-block-group:not([style]) {
	padding-block: var(--lca-space-4);
}

.lca-page--flex .entry-content > .wp-block-group:not([style]) > :first-child {
	margin-top: 0;
}

/* ===================================================================== */
/* The pa-flight-api departures and arrivals table                        */
/*                                                                        */
/* The plugin ships an unstyled nine-column table whose heading cells are */
/* empty, inside no wrapper, so on a phone it runs 460px wide and pushes   */
/* the page sideways. inc/flight-api.php supplies the headings, a real     */
/* thead, a label on every cell and this wrapper; the rules below are      */
/* presentation only, so the table keeps real table semantics at every     */
/* width.                                                                  */
/*                                                                        */
/* The selectors carry the plugin's own descendant chain on purpose: its   */
/* stylesheet targets `table.x tbody tr.y td`, which outweighs anything    */
/* shorter, and it loads after the theme.                                  */
/* ===================================================================== */

/* Eight columns do not fit the reading measure: capped there, the status -
   the one column a passenger came for - falls off the right edge behind a
   scrollbar. The board takes the full content column instead. */
.entry-content .lca-flightapi,
.entry-content.lca-entry--measured > .lca-flightapi {
	max-width: none;
}

.lca-flightapi {
	width: 100%;
	margin-block: var(--lca-space-4);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	background: var(--lca-white);
	border: 1px solid var(--lca-line);
	border-radius: var(--lca-radius-card);
}

.lca-flightapi:focus-visible {
	outline: 3px solid var(--lca-terracotta);
	outline-offset: 3px;
}

.lca-flightapi table.pa-flight-api-table {
	width: 100%;
	min-width: 640px;
	border-collapse: collapse;
}

/* The plugin reads its font from two variables it writes inline on the
   table, and this site's stored values are "Roboto" and "Roboto bold" - the
   second is not a valid family name, so the cells fall back to the browser
   default and the table reads in a different typeface from the page. Inline
   variables cannot be overridden from a stylesheet, so the family is set on
   the cells directly. */
.lca-flightapi table.pa-flight-api-table thead tr.pa-flight-api-table-header th,
.lca-flightapi table.pa-flight-api-table tbody tr.pa-flight-api-table-row td {
	font-family: var(--lca-font-sans);
}

.lca-flightapi table.pa-flight-api-table thead tr.pa-flight-api-table-header th {
	padding: 10px 12px;
	background: var(--lca-navy);
	color: var(--lca-white);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: var(--lca-ls-label);
	text-align: left;
	text-transform: uppercase;
	white-space: nowrap;
}

.lca-flightapi table.pa-flight-api-table tbody tr.pa-flight-api-table-row td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--lca-line);
	color: var(--lca-body);
	font-size: var(--lca-fs-small);
	vertical-align: middle;
}

.lca-flightapi table.pa-flight-api-table tbody tr.pa-flight-api-table-row:nth-child(even) td {
	background: var(--lca-sand);
}

.lca-flightapi table.pa-flight-api-table tbody tr.pa-flight-api-table-row td.flight-number {
	font-weight: 700;
	white-space: nowrap;
}

.lca-flightapi table.pa-flight-api-table tbody tr.pa-flight-api-table-row td.origin-code,
.lca-flightapi table.pa-flight-api-table tbody tr.pa-flight-api-table-row td.destination-code {
	font-weight: 600;
	letter-spacing: 0.5px;
}

.lca-flightapi table.pa-flight-api-table tbody tr.pa-flight-api-table-row td.airline {
	white-space: nowrap;
}

.lca-flightapi table.pa-flight-api-table tbody tr.pa-flight-api-table-row td.airline .airline-image {
	width: auto;
	max-width: 68px;
	height: auto;
	max-height: 22px;
}

.lca-flightapi table.pa-flight-api-table tbody tr.pa-flight-api-table-row td.status {
	white-space: nowrap;
	font-weight: 600;
}

/* Status colours from the plugin are decorative only - the word itself
   carries the meaning, so colour is never the sole signal. */
.lca-flightapi table.pa-flight-api-table tbody tr.pa-flight-api-table-row td.status.cancelled,
.lca-flightapi table.pa-flight-api-table tbody tr.pa-flight-api-table-row td.status.delayed {
	color: #8a2b16;
	font-weight: 700;
}

/* Each row becomes a labelled card, the same treatment the theme's own
   flight board uses. The heading row leaves the flow but stays in the
   accessibility tree; display:block as well as the clip because overflow
   has no effect on a table-header-group, and without it the hidden row
   still sets the table's width. */
@media (max-width: 781px) {
	.lca-flightapi {
		overflow-x: visible;
		background: none;
		border: 0;
	}

	.lca-flightapi table.pa-flight-api-table {
		width: 100%;
		min-width: 0;
		max-width: 100%;
	}

	.lca-flightapi thead {
		display: block;
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.lca-flightapi table.pa-flight-api-table,
	.lca-flightapi table.pa-flight-api-table tbody,
	.lca-flightapi table.pa-flight-api-table tbody tr.pa-flight-api-table-row,
	.lca-flightapi table.pa-flight-api-table tbody tr.pa-flight-api-table-row td {
		display: block;
		width: auto;
	}

	.lca-flightapi table.pa-flight-api-table tbody tr.pa-flight-api-table-row {
		margin-bottom: var(--lca-space-2);
		padding: var(--lca-space-2) var(--lca-space-3);
		background: var(--lca-white);
		border: 1px solid var(--lca-line);
		border-radius: var(--lca-radius-card);
	}

	/* The zebra striping is for scanning a wide grid; behind a stack of
	   cards it just tints every second card. Matched to the striping rule's
	   own weight so it actually lands. */
	.lca-flightapi table.pa-flight-api-table tbody tr.pa-flight-api-table-row:nth-child(even) td {
		background: transparent;
	}

	.lca-flightapi table.pa-flight-api-table tbody tr.pa-flight-api-table-row td {
		display: flex;
		gap: var(--lca-space-2);
		align-items: baseline;
		justify-content: space-between;
		padding: 5px 0;
		background: transparent;
		text-align: right;
		border: 0;
	}

	.lca-flightapi table.pa-flight-api-table tbody tr.pa-flight-api-table-row td::before {
		flex-shrink: 0;
		color: var(--lca-muted);
		font-size: 12px;
		font-weight: 600;
		letter-spacing: var(--lca-ls-label);
		text-align: left;
		text-transform: uppercase;
		content: attr(data-label);
	}

	/* The flight number leads the card and needs no label. */
	.lca-flightapi table.pa-flight-api-table tbody tr.pa-flight-api-table-row td.flight-number {
		padding-top: 0;
		font-size: var(--lca-fs-h4);
	}

	.lca-flightapi table.pa-flight-api-table tbody tr.pa-flight-api-table-row td.airline {
		justify-content: flex-start;
	}
}