/**
 * DFW Airport Taxi Limo — Homepage foundation
 *
 * Design tokens + shared primitives for every homepage component.
 * Loaded on the front page only, before the section stylesheets
 * (see dfw_home_enqueue_assets() in functions.php).
 *
 * Art direction (2026-09, "quiet precision"):
 *   - Sage Mist (Light) surfaces, one deep ink, one teal accent used sparingly.
 *   - Archivo (variable width) for display + utility type: expanded widths
 *     read like automotive badging and airport signage. Public Sans for
 *     reading text: neutral, very legible, good figures.
 *   - Architecture over decoration: hairline rules, a 12-column grid,
 *     numbered sections (01 Hero, 02 Reservations, 03 Fleet ...), near-square
 *     corners, depth from contrast and layering instead of drop shadows.
 *   - Black-on-white vehicle photography is blended into the page with
 *     mix-blend-mode: multiply, so cars sit on the surface instead of in boxes.
 *     (Any stacking-context ancestor of a blended image must carry the same
 *     background colour, or the white will show — see dfw-fleet.css.)
 */

:root {
	/* ------------------------------------------------------------------ */
	/* Colour — Sage Mist (Light). Base values unchanged from the booking  */
	/* calculator's theme; secondary/deep are tints of the same hue.       */
	/* ------------------------------------------------------------------ */
	--dfw-bg-primary: #F4FBF7;          /* Sage Mist */
	--dfw-bg-secondary: #E8F1EC;        /* Sage, one step deeper */
	--dfw-bg-deep: #DAE7E0;             /* Sage, two steps deeper (plate numerals, tracks) */
	--dfw-surface: #FFFFFF;
	--dfw-bg-inverse: #0F172A;          /* Ink band (final conversion) */

	--dfw-text-primary: #0F172A;        /* Ink */
	--dfw-text-secondary: #334155;
	--dfw-text-tertiary: #536271;       /* 5.9:1 on Sage Mist */
	--dfw-text-inverse: #F4FBF7;

	--dfw-border: rgba(15, 23, 42, 0.12);
	--dfw-border-strong: rgba(15, 23, 42, 0.28);
	--dfw-border-accent: rgba(15, 118, 110, 0.22);

	--dfw-accent: #0F766E;
	--dfw-accent-hover: #0B5F58;
	--dfw-accent-tint: rgba(15, 118, 110, 0.08);

	/* ------------------------------------------------------------------ */
	/* Typography                                                          */
	/* ------------------------------------------------------------------ */
	--dfw-font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
	--dfw-font-body: "Public Sans", "Segoe UI", system-ui, sans-serif;

	--dfw-stretch-display: 112%;        /* headlines */
	--dfw-stretch-wide: 125%;           /* utility caps, wordmark, numerals */

	--dfw-fs-display: clamp(2.625rem, 1.1rem + 5.4vw, 6.5rem);
	--dfw-fs-h2: clamp(1.875rem, 1.15rem + 2.5vw, 3.375rem);
	--dfw-fs-h3: clamp(1.75rem, 1.05rem + 2.3vw, 3.25rem);
	--dfw-fs-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
	--dfw-fs-body: 1rem;
	--dfw-fs-small: 0.9375rem;
	--dfw-fs-utility: 0.6875rem;

	--dfw-tracking-display: -0.035em;
	--dfw-tracking-utility: 0.16em;

	/* ------------------------------------------------------------------ */
	/* Space — 4px base, one rhythm for every component                    */
	/* ------------------------------------------------------------------ */
	--dfw-space-3xs: 4px;
	--dfw-space-2xs: 8px;
	--dfw-space-xs: 12px;
	--dfw-space-sm: 20px;
	--dfw-space-md: 32px;
	--dfw-space-lg: 48px;
	--dfw-space-xl: clamp(64px, 8vw, 112px);
	--dfw-space-2xl: clamp(88px, 11vw, 160px);

	--dfw-container: 1320px;
	--dfw-container-narrow: 720px;
	--dfw-gutter: clamp(20px, 4vw, 56px);
	--dfw-grid-gap: clamp(16px, 2vw, 32px);

	/* Shape — corners are near-square on purpose. */
	--dfw-radius-0: 0;
	--dfw-radius-1: 2px;
	--dfw-radius-2: 4px;

	/* Motion — one easing family for the whole page. */
	--dfw-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--dfw-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--dfw-dur-fast: 180ms;
	--dfw-dur-base: 320ms;

	--dfw-focus-color: var(--dfw-accent);

	/* ------------------------------------------------------------------ */
	/* Legacy aliases — used by dfw-sections.css / dfw-faq.css. Keep.       */
	/* ------------------------------------------------------------------ */
	--dfw-color-sage-mist: var(--dfw-bg-primary);
	--dfw-color-surface: var(--dfw-surface);
	--dfw-color-ink: var(--dfw-text-primary);
	--dfw-color-body: var(--dfw-text-secondary);
	--dfw-color-body-soft: var(--dfw-text-tertiary);
	--dfw-color-accent: var(--dfw-accent);
	--dfw-color-accent-strong: var(--dfw-accent-hover);
	--dfw-color-accent-soft: var(--dfw-accent-tint);
	--dfw-color-border: var(--dfw-border-accent);
	--dfw-color-hairline: var(--dfw-border);
	--dfw-radius-control: var(--dfw-radius-2);
	--dfw-radius-panel: var(--dfw-radius-2);
	--dfw-radius-pill: 999px;
	--dfw-shadow-panel: none;
	--dfw-shadow-lift: none;
	--dfw-focus-ring: 0 0 0 2px var(--dfw-surface), 0 0 0 4px var(--dfw-accent);
}

/* ---------------------------------------------------------------------- */
/* WordPress / Astra integration (front page only)                         */
/* ---------------------------------------------------------------------- */

/* Astra's page-builder template pads the article; sections own their gutters. */
.home.ast-single-post.ast-page-builder-template .site-main > article {
	padding: 0;
}

/* Every homepage section sets its own vertical rhythm. */
.home .entry-content > :is(
	.dfw-hero,
	.dfw-booking,
	.dfw-fleet,
	.dfw-why,
	.dfw-pricing,
	.dfw-about,
	.dfw-service-area,
	.dfw-how,
	.dfw-faq,
	.dfw-cta
) {
	margin-top: 0;
	margin-bottom: 0;
	max-width: none;
}

.home .entry-content > .wp-block-group:is(
	.dfw-why,
	.dfw-pricing,
	.dfw-about,
	.dfw-service-area,
	.dfw-how,
	.dfw-faq
) {
	padding: var(--dfw-section-pad-top, 0) 0 var(--dfw-section-pad-bottom, 0);
}

.home .entry-content {
	font-family: var(--dfw-font-body);
	color: var(--dfw-text-secondary);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* Supporting sections inherit the display face through their class suffix. */
.home .entry-content [class$="__title"],
.home .entry-content [class$="__item-title"],
.home .entry-content [class$="__name"] {
	font-family: var(--dfw-font-display);
	font-stretch: var(--dfw-stretch-display);
	font-weight: 600;
	letter-spacing: -0.02em;
}

/* A third-party widget must never be able to create page-wide sideways scroll. */
.home {
	overflow-x: hidden;
}

@supports (overflow: clip) {
	.home {
		overflow-x: clip;
	}
}

/* ---------------------------------------------------------------------- */
/* Shared primitives                                                        */
/* ---------------------------------------------------------------------- */

.dfw-visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Utility label: expanded caps, used for metadata and category labels.
   Deliberately low specificity (:where) so components can recolour/space it. */
:where(.home .entry-content) .dfw-utility {
	font-family: var(--dfw-font-display);
	font-size: var(--dfw-fs-utility);
	font-stretch: var(--dfw-stretch-wide);
	font-weight: 600;
	letter-spacing: var(--dfw-tracking-utility);
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--dfw-text-tertiary);
}

/* Section index: "02 — Reservations". Numbering is the page's navigation
   system, not decoration: it states where you are in the sequence. */
.home .entry-content .dfw-index {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 var(--dfw-space-md);
	font-family: var(--dfw-font-display);
	font-size: var(--dfw-fs-utility);
	font-stretch: var(--dfw-stretch-wide);
	font-weight: 600;
	letter-spacing: var(--dfw-tracking-utility);
	line-height: 1;
	text-transform: uppercase;
	color: var(--dfw-text-primary);
}

.home .entry-content .dfw-index__num {
	color: var(--dfw-accent);
	font-variant-numeric: tabular-nums;
}

.home .entry-content .dfw-index__rule {
	flex: none;
	width: 40px;
	height: 1px;
	background-color: var(--dfw-border-strong);
	transform-origin: left center;
}

/* Primary button: ink block, square shoulders, arrow that travels. */
.home .entry-content a.dfw-btn {
	--dfw-btn-bg: var(--dfw-text-primary);
	--dfw-btn-fg: var(--dfw-text-inverse);

	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	min-height: 56px;
	padding: 0 22px 0 26px;
	overflow: hidden;
	background-color: var(--dfw-btn-bg);
	border: 0;
	border-radius: var(--dfw-radius-1);
	color: var(--dfw-btn-fg);
	font-family: var(--dfw-font-display);
	font-size: 0.8125rem;
	font-stretch: var(--dfw-stretch-wide);
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
	isolation: isolate;
	transition: color var(--dfw-dur-base) var(--dfw-ease-out);
}

/* Hover: an accent plate slides in from the left behind the label. */
.home .entry-content a.dfw-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: var(--dfw-accent);
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform 520ms var(--dfw-ease-out);
}

.home .entry-content a.dfw-btn:hover::before,
.home .entry-content a.dfw-btn:focus-visible::before {
	transform: scaleX(1);
	transform-origin: left center;
}

.home .entry-content a.dfw-btn:hover,
.home .entry-content a.dfw-btn:focus-visible {
	color: #FFFFFF;
}

.home .entry-content .dfw-btn__arrow {
	flex: none;
	width: 18px;
	height: 18px;
	transition: transform 520ms var(--dfw-ease-out);
}

.home .entry-content a.dfw-btn:hover .dfw-btn__arrow,
.home .entry-content a.dfw-btn:focus-visible .dfw-btn__arrow {
	transform: translateX(4px);
}

.home .entry-content a.dfw-btn:active {
	transform: translateY(1px);
}

.home .entry-content a.dfw-btn--inverse {
	--dfw-btn-bg: var(--dfw-text-inverse);
	--dfw-btn-fg: var(--dfw-text-primary);
}

/* Text link: label + hairline that retracts and redraws on hover. */
.home .entry-content a.dfw-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 6px 0;
	color: var(--dfw-text-primary);
	font-family: var(--dfw-font-display);
	font-size: 0.8125rem;
	font-stretch: var(--dfw-stretch-wide);
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1.2;
	text-decoration: none;
	text-transform: uppercase;
}

.home .entry-content a.dfw-link::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 1px;
	background-color: currentColor;
	transform-origin: right center;
	transition: transform 520ms var(--dfw-ease-out);
}

.home .entry-content a.dfw-link:hover::after {
	transform: scaleX(0);
}

.home .entry-content a.dfw-link:hover {
	color: var(--dfw-accent-hover);
}

.home .entry-content a.dfw-link .dfw-btn__arrow {
	width: 14px;
	height: 14px;
	transition: transform 520ms var(--dfw-ease-out);
}

.home .entry-content a.dfw-link:hover .dfw-btn__arrow {
	transform: translateX(3px);
}

/* One focus treatment for every custom control on the homepage. */
.home .entry-content :is(a.dfw-btn, a.dfw-link, .dfw-fleet button):focus {
	outline: none;
}

.home .entry-content :is(a.dfw-btn, a.dfw-link, .dfw-fleet button):focus-visible {
	outline: 2px solid var(--dfw-focus-color);
	outline-offset: 4px;
}

@media (max-width: 640px) {
	.home .entry-content .dfw-index {
		gap: 10px;
		letter-spacing: 0.12em;
	}

	.home .entry-content .dfw-index__rule {
		width: 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.home .entry-content a.dfw-btn::before,
	.home .entry-content a.dfw-btn,
	.home .entry-content .dfw-btn__arrow,
	.home .entry-content a.dfw-link::after,
	.home .entry-content a.dfw-link .dfw-btn__arrow {
		transition: none;
	}
}

/* ====================================================================== */
/* Site header on the homepage (always on — structure, not motion)         */
/* ====================================================================== */

/*
 * Sticky, so "Book a ride" is always one click away. Over the hero it has
 * no rule and sits on the hero's sage; once the hero has scrolled away
 * dfw-reveal.js adds html.dfw-header-solid and the header gains a hairline
 * and the booking link becomes a solid ink button. The header never hides.
 */
.home {
	--dfw-header-h: 80px; /* measured and updated by dfw-reveal.js */
}

.home #masthead {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 99;
}

.home #masthead .main-header-bar {
	background-color: var(--dfw-bg-primary);
	border-bottom: 1px solid transparent;
	transition: border-color var(--dfw-dur-base) var(--dfw-ease-out);
}

html.dfw-header-solid .home #masthead .main-header-bar {
	border-bottom-color: var(--dfw-border-strong);
}

/* A menu item that links to the booking section reads as the header CTA. */
.home #masthead .main-header-menu a.menu-link[href*="#dfw-booking"] {
	margin-left: 8px;
	padding: 10px 18px;
	border: 1px solid var(--dfw-border-strong);
	border-radius: var(--dfw-radius-1);
	color: var(--dfw-text-primary);
	font-family: var(--dfw-font-display);
	font-size: 0.75rem;
	font-stretch: var(--dfw-stretch-wide);
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1.2;
	text-transform: uppercase;
	transition: background-color var(--dfw-dur-base) var(--dfw-ease-out), border-color var(--dfw-dur-base) var(--dfw-ease-out), color var(--dfw-dur-base) var(--dfw-ease-out);
}

html.dfw-header-solid .home #masthead .main-header-menu a.menu-link[href*="#dfw-booking"],
.home #masthead .main-header-menu a.menu-link[href*="#dfw-booking"]:hover {
	background-color: var(--dfw-text-primary);
	border-color: var(--dfw-text-primary);
	color: var(--dfw-text-inverse);
}

/* Sticky columns and anchor jumps clear the header. */
.home .entry-content > section {
	scroll-margin-top: var(--dfw-header-h);
}

.dfw-booking .dfw-booking__intro,
.dfw-about .dfw-about__title {
	top: calc(var(--dfw-header-h) + var(--dfw-space-md));
}

/* ====================================================================== */
/* Scroll choreography — hairlines that draw (motion-OK visitors only)     */
/* ====================================================================== */

/*
 * html.dfw-scroll is added by dfw-reveal.js only when motion is allowed.
 * Under it, the page's structural hairlines (normally plain borders) are
 * painted by pseudo-elements whose length is a custom property:
 *   --dfw-x   horizontal rule on ::before (0 = undrawn, 1 = drawn)
 *   --dfw-x2  horizontal rule on ::after
 *   --dfw-y   vertical rule on ::after
 * The properties default to 1, so any rule JS never touches is simply drawn.
 * The border keeps its width (transparent) so nothing shifts by a pixel.
 * Without the class — reduced motion, no JS — the original borders show.
 */

/* Section grids: Why choose us / Pricing / Service area */
html.dfw-scroll :is(.dfw-why__grid, .dfw-pricing__grid, .dfw-service-area__grid) {
	position: relative;
	border-top-color: transparent;
}

html.dfw-scroll :is(.dfw-why__grid, .dfw-pricing__grid, .dfw-service-area__grid):last-of-type {
	border-bottom-color: transparent;
}

html.dfw-scroll :is(.dfw-why__grid, .dfw-pricing__grid, .dfw-service-area__grid)::before,
html.dfw-scroll :is(.dfw-why__grid, .dfw-pricing__grid, .dfw-service-area__grid):last-of-type::after {
	content: "";
	position: absolute;
	right: 0;
	left: 0;
	height: 1px;
	background-color: var(--dfw-color-hairline);
	transform-origin: left center;
	pointer-events: none;
}

html.dfw-scroll :is(.dfw-why__grid, .dfw-pricing__grid, .dfw-service-area__grid)::before {
	top: -1px;
	transform: scaleX(var(--dfw-x, 1));
}

html.dfw-scroll :is(.dfw-why__grid, .dfw-pricing__grid, .dfw-service-area__grid):last-of-type::after {
	bottom: -1px;
	transform: scaleX(var(--dfw-x2, 1));
}

/* The divider between a row's two columns: vertical on desktop … */
html.dfw-scroll :is(.dfw-why, .dfw-pricing, .dfw-service-area) .wp-block-column:first-child {
	position: relative;
}

@media (min-width: 782px) {
	html.dfw-scroll :is(.dfw-why, .dfw-pricing, .dfw-service-area) .wp-block-column:first-child {
		border-right-color: transparent;
	}

	html.dfw-scroll :is(.dfw-why, .dfw-pricing, .dfw-service-area) .wp-block-column:first-child::after {
		content: "";
		position: absolute;
		top: 0;
		right: -1px;
		bottom: 0;
		width: 1px;
		background-color: var(--dfw-color-hairline);
		transform: scaleY(var(--dfw-y, 1));
		transform-origin: center top;
		pointer-events: none;
	}
}

/* … and horizontal once the columns stack. */
@media (max-width: 781px) {
	html.dfw-scroll :is(.dfw-why, .dfw-pricing, .dfw-service-area) .wp-block-column:first-child {
		border-bottom-color: transparent;
	}

	html.dfw-scroll :is(.dfw-why, .dfw-pricing, .dfw-service-area) .wp-block-column:first-child::after {
		content: "";
		position: absolute;
		right: 0;
		bottom: -1px;
		left: 0;
		height: 1px;
		background-color: var(--dfw-color-hairline);
		transform: scaleX(var(--dfw-y, 1));
		transform-origin: left center;
		pointer-events: none;
	}
}

/* Pricing note: the section's one accent bar grows downward. */
html.dfw-scroll .dfw-pricing .dfw-pricing__note {
	position: relative;
	border-left-color: transparent;
}

html.dfw-scroll .dfw-pricing .dfw-pricing__note::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -2px;
	width: 2px;
	background-color: var(--dfw-accent);
	transform: scaleY(var(--dfw-y, 1));
	transform-origin: center top;
	pointer-events: none;
}

/* Reservations: the facts list rules. */
html.dfw-scroll .dfw-booking .dfw-booking__facts {
	position: relative;
	border-top-color: transparent;
}

html.dfw-scroll .dfw-booking .dfw-booking__facts::before {
	content: "";
	position: absolute;
	top: -1px;
	right: 0;
	left: 0;
	height: 1px;
	background-color: var(--dfw-border-strong);
	transform: scaleX(var(--dfw-x, 1));
	transform-origin: left center;
	pointer-events: none;
}

html.dfw-scroll .dfw-booking .dfw-booking__fact {
	position: relative;
	border-bottom-color: transparent;
}

html.dfw-scroll .dfw-booking .dfw-booking__fact::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -1px;
	left: 0;
	height: 1px;
	background-color: var(--dfw-border);
	transform: scaleX(var(--dfw-x2, 1));
	transform-origin: left center;
	pointer-events: none;
}

/* Fleet selector: ten rules that fill in like a timetable. Painted by the
   <li> (under the button) so the active bar still sits on top. */
html.dfw-scroll .dfw-fleet .dfw-fleet__nav-list > li {
	position: relative;
}

html.dfw-scroll .dfw-fleet button.dfw-fleet__nav-btn {
	border-top-color: transparent;
}

html.dfw-scroll .dfw-fleet .dfw-fleet__nav-list > li::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 1px;
	background-color: var(--dfw-border-strong);
	transform: scaleX(var(--dfw-x, 1));
	transform-origin: left center;
	pointer-events: none;
}

/* How it works: the route across the grid, and numerals rising out of a
   mask (translate down + clip the same amount = a fixed window). */
html.dfw-scroll .dfw-how .dfw-how__steps > li {
	border-top-color: transparent;
}

html.dfw-scroll .dfw-how .dfw-how__steps > li::after {
	content: "";
	position: absolute;
	top: -1px;
	right: 0;
	left: 0;
	height: 1px;
	background-color: var(--dfw-color-hairline);
	transform: scaleX(var(--dfw-x, 1));
	transform-origin: left center;
	pointer-events: none;
}

html.dfw-scroll .dfw-how .dfw-how__steps > li::before {
	transform: translateY(calc((1 - var(--dfw-rise, 1)) * 100%));
	clip-path: inset(0 0 calc((1 - var(--dfw-rise, 1)) * 100%) 0);
}

/* FAQ: each question/answer pair arrives under its own rule. */
html.dfw-scroll .dfw-faq .dfw-faq__item {
	position: relative;
	border-top-color: transparent;
}

html.dfw-scroll .dfw-faq .dfw-faq__item::before {
	content: "";
	position: absolute;
	top: -1px;
	right: 0;
	left: 0;
	height: 1px;
	background-color: var(--dfw-border);
	transform: scaleX(var(--dfw-x, 1));
	transform-origin: left center;
	pointer-events: none;
}

/* Headline mask reveal: lines are split only while they animate. */
.dfw-line {
	display: block;
	overflow: hidden;
	padding-bottom: 0.08em;
	margin-bottom: -0.08em;
}

.dfw-line__in {
	display: block;
}

/* Local expertise: reading focus. A colour shift between two tokens that
   both pass AA on sage — never transparency. Desktop only (JS decides). */
html.dfw-reading .dfw-about .dfw-about__description {
	color: var(--dfw-text-tertiary);
	transition: color 600ms var(--dfw-ease-out);
}

html.dfw-reading .dfw-about .dfw-about__description.is-focus {
	color: var(--dfw-text-primary);
}