/**
 * DFW Airport Taxi Limo — Homepage content sections
 *
 * 2026-09 premium redesign. Styles the sections that previously had zero
 * custom CSS of their own (Why Choose Us, Pricing, Local Expertise/About,
 * Service Area, How It Works), plus the shared hand-drawn icon system and
 * the booking feature list. Loaded after dfw-home.css, before dfw-fleet.css
 * and dfw-faq.css (see dfw_home_enqueue_assets() in functions.php).
 *
 * Design approach: dividers and whitespace instead of another row of boxed
 * cards (the fleet section already uses cards; repeating that pattern in
 * every section below it reads as templated). Grids use a hairline top
 * border between items rather than a bordered/shadowed box per item.
 */

/* ---------------------------------------------------------------------- */
/* Shared icon system                                                      */
/* ---------------------------------------------------------------------- */

.dfw-icon {
	display: block;
	width: 22px;
	height: 22px;
	color: var(--dfw-color-accent);
}

.dfw-icon-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: 16px;
	background-color: var(--dfw-color-accent-soft);
	border-radius: var(--dfw-radius-control);
	flex: none;
}

.dfw-icon-badge--standalone {
	width: 52px;
	height: 52px;
	margin-bottom: 20px;
}

.dfw-icon-badge--standalone .dfw-icon {
	width: 26px;
	height: 26px;
}

.dfw-icon-badge--small {
	width: 22px;
	height: 22px;
	margin: 2px 10px 0 0;
	background-color: transparent;
	border-radius: 0;
	vertical-align: top;
}

.dfw-icon-badge--small .dfw-icon {
	width: 16px;
	height: 16px;
	color: var(--dfw-color-accent);
}

/* ---------------------------------------------------------------------- */
/* Section header — shared rhythm for Why / Pricing / About / Service Area /
   How. 2026-09 art direction: left-aligned on the page grid, headline on
   the left, description in a narrow column — the same editorial system as
   Reservations and Fleet, instead of eight centered stacks. */
/* ---------------------------------------------------------------------- */

.dfw-why .dfw-why__header,
.dfw-pricing .dfw-pricing__header,
.dfw-service-area .dfw-service-area__header,
.dfw-how .dfw-how__header {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--dfw-grid-gap);
	align-items: start;
	max-width: calc(var(--dfw-container) + 2 * var(--dfw-gutter));
	margin: 0 auto var(--dfw-space-lg);
	padding: 0 var(--dfw-gutter);
	text-align: left;
}

.dfw-why .dfw-why__header > *,
.dfw-pricing .dfw-pricing__header > *,
.dfw-service-area .dfw-service-area__header > *,
.dfw-how .dfw-how__header > * {
	grid-column: 1 / span 6;
}

.dfw-why .dfw-why__header > [class$="__description"],
.dfw-pricing .dfw-pricing__header > [class$="__description"],
.dfw-service-area .dfw-service-area__header > [class$="__description"],
.dfw-how .dfw-how__header > [class$="__description"] {
	grid-column: 8 / -1;
	grid-row: 2;
	padding-top: 6px;
}

.dfw-why .dfw-why__eyebrow,
.dfw-pricing .dfw-pricing__eyebrow,
.dfw-about .dfw-about__eyebrow,
.dfw-service-area .dfw-service-area__eyebrow,
.dfw-how .dfw-how__eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 var(--dfw-space-md);
	color: var(--dfw-text-primary);
	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;
}

.dfw-why .dfw-why__eyebrow .dfw-index__num {
	color: var(--dfw-accent);
}

.dfw-why .dfw-why__eyebrow .dfw-index__num::after {
	content: "";
	display: inline-block;
	width: 40px;
	height: 1px;
	margin-left: 14px;
	vertical-align: middle;
	background-color: var(--dfw-border-strong);
}

.dfw-why .dfw-why__title,
.dfw-pricing .dfw-pricing__title,
.dfw-about .dfw-about__title,
.dfw-service-area .dfw-service-area__title,
.dfw-how .dfw-how__title {
	margin: 0;
	color: var(--dfw-text-primary);
	font-size: clamp(1.75rem, 1.15rem + 1.9vw, 2.75rem);
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1.04;
	text-wrap: balance;
}

.dfw-why .dfw-why__description,
.dfw-pricing .dfw-pricing__description,
.dfw-about .dfw-about__description,
.dfw-service-area .dfw-service-area__description,
.dfw-how .dfw-how__description {
	margin: 0;
	font-size: var(--dfw-fs-body);
	line-height: 1.65;
}

@media (max-width: 900px) {
	.dfw-why .dfw-why__header > *,
	.dfw-pricing .dfw-pricing__header > *,
	.dfw-service-area .dfw-service-area__header > *,
	.dfw-how .dfw-how__header > *,
	.dfw-why .dfw-why__header > [class$="__description"],
	.dfw-pricing .dfw-pricing__header > [class$="__description"],
	.dfw-service-area .dfw-service-area__header > [class$="__description"],
	.dfw-how .dfw-how__header > [class$="__description"] {
		grid-column: 1 / -1;
		grid-row: auto;
	}

	.dfw-why .dfw-why__header > [class$="__description"],
	.dfw-pricing .dfw-pricing__header > [class$="__description"],
	.dfw-service-area .dfw-service-area__header > [class$="__description"],
	.dfw-how .dfw-how__header > [class$="__description"] {
		margin-top: var(--dfw-space-sm);
	}
}

/* ---------------------------------------------------------------------- */
/* Why Choose Us / Pricing / Service Area grids — divider rows, not cards. */
/* ---------------------------------------------------------------------- */

.dfw-why {
	--dfw-section-pad-top: clamp(64px, 8vw, 104px);
	--dfw-section-pad-bottom: clamp(48px, 6vw, 80px);
	background-color: var(--dfw-color-surface);
	color: var(--dfw-color-body);
}

.dfw-pricing {
	--dfw-section-pad-top: clamp(48px, 6vw, 80px);
	--dfw-section-pad-bottom: clamp(64px, 8vw, 104px);
	background-color: var(--dfw-color-surface);
	color: var(--dfw-color-body);
}

.dfw-service-area {
	--dfw-section-pad-top: clamp(64px, 8vw, 104px);
	--dfw-section-pad-bottom: clamp(64px, 8vw, 104px);
	background-color: var(--dfw-color-surface);
	color: var(--dfw-color-body);
}

.dfw-why .dfw-why__grid,
.dfw-pricing .dfw-pricing__grid,
.dfw-service-area .dfw-service-area__grid {
	box-sizing: border-box;
	max-width: var(--dfw-container);
	margin: 0 auto;
	padding: 0 var(--dfw-gutter);
	border-top: 1px solid var(--dfw-color-hairline);
}

.dfw-why .dfw-why__grid:last-of-type,
.dfw-pricing .dfw-pricing__grid:last-of-type,
.dfw-service-area .dfw-service-area__grid:last-of-type {
	border-bottom: 1px solid var(--dfw-color-hairline);
}

.dfw-why .dfw-why__item,
.dfw-pricing .dfw-pricing__item,
.dfw-service-area .dfw-service-area__item {
	padding: var(--dfw-space-lg) 0;
}

.dfw-why .wp-block-column.dfw-why__item:first-child,
.dfw-pricing .wp-block-column.dfw-pricing__item:first-child,
.dfw-service-area .wp-block-column.dfw-service-area__item:first-child {
	border-right: 1px solid var(--dfw-color-hairline);
}

@media (min-width: 782px) {
	.dfw-why .wp-block-column.dfw-why__item:first-child,
	.dfw-pricing .wp-block-column.dfw-pricing__item:first-child,
	.dfw-service-area .wp-block-column.dfw-service-area__item:first-child {
		padding-right: var(--dfw-space-xl);
	}

	.dfw-why .wp-block-column.dfw-why__item:last-child,
	.dfw-pricing .wp-block-column.dfw-pricing__item:last-child,
	.dfw-service-area .wp-block-column.dfw-service-area__item:last-child {
		padding-left: var(--dfw-space-xl);
	}
}

.dfw-why .dfw-why__item-title,
.dfw-pricing .dfw-pricing__item-title,
.dfw-service-area .dfw-service-area__item-title {
	margin: 0 0 10px;
	color: var(--dfw-color-ink);
	font-size: 1.1875rem;
	font-weight: 600;
	line-height: 1.3;
}

.dfw-why .dfw-why__item p,
.dfw-pricing .dfw-pricing__item p,
.dfw-service-area .dfw-service-area__item p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
}

.dfw-why .dfw-why__item a,
.dfw-pricing .dfw-pricing__item a,
.dfw-service-area .dfw-service-area__item a {
	color: var(--dfw-color-accent-strong);
	text-decoration-color: var(--dfw-color-border);
	text-underline-offset: 3px;
}

.dfw-pricing .dfw-pricing__note {
	box-sizing: border-box;
	max-width: var(--dfw-container-narrow);
	margin: var(--dfw-space-lg) auto 0;
	padding: var(--dfw-space-md) var(--dfw-gutter);
	border-left: 2px solid var(--dfw-accent);
	color: var(--dfw-color-body);
	font-size: 0.9375rem;
	line-height: 1.65;
	text-align: left;
}

@media (max-width: 781px) {
	.dfw-why .wp-block-column.dfw-why__item:first-child,
	.dfw-pricing .wp-block-column.dfw-pricing__item:first-child,
	.dfw-service-area .wp-block-column.dfw-service-area__item:first-child {
		border-right: none;
		border-bottom: 1px solid var(--dfw-color-hairline);
	}
}

/* ---------------------------------------------------------------------- */
/* Local Expertise / About — asymmetric, left-aligned editorial block      */
/* rather than a centered paragraph stack.                                */
/* ---------------------------------------------------------------------- */

.dfw-about {
	--dfw-section-pad-top: clamp(64px, 8vw, 104px);
	--dfw-section-pad-bottom: clamp(64px, 8vw, 104px);
	background-color: var(--dfw-color-sage-mist);
	color: var(--dfw-color-body);
}

.dfw-about .dfw-about__header {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
	gap: var(--dfw-space-xl);
	max-width: var(--dfw-container);
	margin: 0 auto;
	padding: 0 var(--dfw-gutter);
	text-align: left;
	align-items: start;
}

.dfw-about .dfw-about__title {
	margin: 0;
	position: sticky;
	top: var(--dfw-space-lg);
}

.dfw-about .dfw-about__description {
	margin: 0 0 var(--dfw-space-sm);
}

.dfw-about .dfw-about__description:last-child {
	margin-bottom: 0;
}

.dfw-about .dfw-about__description a {
	color: var(--dfw-color-accent-strong);
	text-decoration-color: var(--dfw-color-border);
	text-underline-offset: 3px;
}

@media (max-width: 900px) {
	.dfw-about .dfw-about__header {
		grid-template-columns: 1fr;
		text-align: left;
	}

	.dfw-about .dfw-about__title {
		position: static;
	}

	.dfw-about .dfw-about__eyebrow {
		justify-content: flex-start;
	}
}

/* ---------------------------------------------------------------------- */
/* How It Works — large typographic step numerals, deliberately icon-free */
/* (restraint: nothing decorative just because).                          */
/* ---------------------------------------------------------------------- */

.dfw-how {
	--dfw-section-pad-top: clamp(64px, 8vw, 104px);
	--dfw-section-pad-bottom: clamp(64px, 8vw, 104px);
	background-color: var(--dfw-color-surface);
	color: var(--dfw-color-body);
}

.dfw-how .dfw-how__steps {
	box-sizing: border-box;
	display: grid;
	/* Fixed at 3 columns (not auto-fit) so six steps land 3-over-3 instead
	   of wrapping 4-over-2. */
	grid-template-columns: repeat(3, 1fr);
	gap: var(--dfw-space-xl) var(--dfw-space-lg);
	max-width: var(--dfw-container);
	margin: 0 auto;
	padding: 0 var(--dfw-gutter);
	list-style: none;
	counter-reset: dfw-how-step;
}

@media (max-width: 900px) {
	.dfw-how .dfw-how__steps {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.dfw-how .dfw-how__steps {
		grid-template-columns: 1fr;
	}
}

.dfw-how .dfw-how__steps > li {
	position: relative;
	padding-top: var(--dfw-space-md);
	border-top: 1px solid var(--dfw-color-hairline);
	counter-increment: dfw-how-step;
	font-size: 0.9375rem;
	line-height: 1.6;
}

.dfw-how .dfw-how__steps > li::before {
	content: counter(dfw-how-step, decimal-leading-zero);
	display: block;
	margin-bottom: 12px;
	color: var(--dfw-color-accent);
	font-family: var(--dfw-font-display);
	font-size: 2rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.dfw-how .dfw-how__steps > li strong {
	display: block;
	margin-bottom: 4px;
	color: var(--dfw-color-ink);
	font-size: 1.0625rem;
}

.dfw-how .dfw-how__steps > li a {
	color: var(--dfw-color-accent-strong);
	text-decoration-color: var(--dfw-color-border);
	text-underline-offset: 3px;
}

/* ---------------------------------------------------------------------- */
/* Booking feature list — icon-check bullets replacing the default marker */
/* ---------------------------------------------------------------------- */

.dfw-booking .dfw-booking__features {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--dfw-space-sm) var(--dfw-space-lg);
	margin: var(--dfw-space-lg) 0 0;
	padding: 0;
	list-style: none;
}

.dfw-booking .dfw-booking__features li {
	display: flex;
	align-items: flex-start;
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.55;
}

/* ---------------------------------------------------------------------- */
/* 2026-09: the tinted icon badges read as a generic component library.    */
/* The content keeps its SVG sprite references; the badges are simply not */
/* displayed inside the editorial grids.                                   */
/* ---------------------------------------------------------------------- */

.dfw-why .dfw-icon-badge,
.dfw-pricing .dfw-icon-badge,
.dfw-service-area .dfw-icon-badge,
.dfw-about .dfw-icon-badge {
	display: none;
}

/* ---------------------------------------------------------------------- */
/* 05 — Final conversion: the page's one ink band.                         */
/* ---------------------------------------------------------------------- */

.dfw-cta {
	box-sizing: border-box;
	padding: var(--dfw-space-2xl) 0;
	background-color: var(--dfw-bg-inverse);
	color: var(--dfw-text-inverse);
}

/* Aperture (motion-OK only; dfw-reveal.js sets [data-dfw-aperture] and
   scrubs --dfw-aperture 1 -> 0). The ink moves to a ::before plate that
   opens out of the white FAQ above; the section box itself shows the FAQ's
   surface colour, so nothing from behind the page ever peeks through. */
.dfw-cta[data-dfw-aperture] {
	position: relative;
	isolation: isolate;
	background-color: var(--dfw-surface);
}

.dfw-cta[data-dfw-aperture]::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: var(--dfw-bg-inverse);
	clip-path: inset(
		calc(var(--dfw-aperture, 0) * 14%)
		calc(var(--dfw-aperture, 0) * 2.5%)
		0
		calc(var(--dfw-aperture, 0) * 2.5%)
	);
	pointer-events: none;
}

.dfw-cta .dfw-cta__inner {
	box-sizing: border-box;
	max-width: calc(var(--dfw-container) + 2 * var(--dfw-gutter));
	margin: 0 auto;
	padding: 0 var(--dfw-gutter);
}

.home .entry-content .dfw-cta .dfw-index {
	color: var(--dfw-text-inverse);
}

.home .entry-content .dfw-cta .dfw-index__num {
	color: #5EC4B6;
}

.home .entry-content .dfw-cta .dfw-index__rule {
	background-color: rgba(244, 251, 247, 0.4);
}

.dfw-cta .dfw-cta__title {
	max-width: 16ch;
	margin: 0 0 var(--dfw-space-lg);
	color: var(--dfw-text-inverse);
	font-family: var(--dfw-font-display);
	font-size: var(--dfw-fs-h2);
	font-stretch: var(--dfw-stretch-display);
	font-weight: 600;
	letter-spacing: -0.035em;
	line-height: 1;
}

.dfw-cta .dfw-cta__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px 32px;
	margin: 0;
}

.home .entry-content .dfw-cta a.dfw-link {
	color: var(--dfw-text-inverse);
}

.home .entry-content .dfw-cta a.dfw-link:hover {
	color: #FFFFFF;
}

.home .entry-content .dfw-cta :is(a.dfw-btn, a.dfw-link):focus-visible {
	outline-color: #5EC4B6;
}