/*
 * ATS layout: container, section padding, grids, chrome (utility bar, header, footer).
 * Breakpoints: 900 (navigation collapses, columns stack) and 640 (mobile margins).
 */

:root {
	--ats-margin: var(--wp--custom--layout--margin--desktop);
	--ats-pad-large: var(--wp--custom--section--large--desktop);
	--ats-pad-medium: var(--wp--custom--section--medium--desktop);
	--ats-pad-quiet: var(--wp--custom--section--quiet--desktop);
	--ats-pad-strip: var(--wp--custom--section--strip--desktop);
	--ats-pad-footer-top: var(--wp--custom--section--footer-top--desktop);
	--ats-pad-footer-bottom: var(--wp--custom--section--footer-bottom--desktop);
	--ats-header-height: var(--wp--custom--chrome--header-height);
}

@media (max-width: 900px) {
	:root {
		--ats-margin: var(--wp--custom--layout--margin--tablet);
		--ats-pad-large: var(--wp--custom--section--large--tablet);
		--ats-pad-medium: var(--wp--custom--section--medium--tablet);
		--ats-pad-quiet: var(--wp--custom--section--quiet--tablet);
		--ats-pad-strip: var(--wp--custom--section--strip--tablet);
		--ats-pad-footer-top: var(--wp--custom--section--footer-top--tablet);
		--ats-pad-footer-bottom: var(--wp--custom--section--footer-bottom--tablet);
		--ats-header-height: var(--wp--custom--chrome--header-height-mobile);
	}
}

@media (max-width: 640px) {
	:root {
		--ats-margin: var(--wp--custom--layout--margin--mobile);
		--ats-pad-large: var(--wp--custom--section--large--mobile);
		--ats-pad-medium: var(--wp--custom--section--medium--mobile);
		--ats-pad-quiet: var(--wp--custom--section--quiet--mobile);
		--ats-pad-strip: var(--wp--custom--section--strip--mobile);
		--ats-pad-footer-top: var(--wp--custom--section--footer-top--mobile);
		--ats-pad-footer-bottom: var(--wp--custom--section--footer-bottom--mobile);
	}
}

/* Container: 1280 inside 1440 with 80/40/20 margins. */
.ats-container {
	width: 100%;
	max-width: calc(var(--wp--custom--layout--container) + (2 * var(--ats-margin)));
	margin-inline: auto;
	padding-inline: var(--ats-margin);
}

/* ---------------------------------------------------------------------
 * Sections
 * ------------------------------------------------------------------ */

.ats-section {
	position: relative;
	padding-block: var(--ats-pad-large);
}

.ats-section--split,
.ats-section--process,
.ats-section--photo_band,
.ats-section--person,
.ats-section--routes {
	padding-block: var(--ats-pad-medium);
}

.ats-section--note {
	padding-block: var(--ats-pad-quiet);
}

.ats-section--trust_strip {
	padding-block: var(--ats-pad-strip);
}

.ats-section--hero {
	padding-block: 0;
}

/* ---------------------------------------------------------------------
 * Grids. A row of N divides the container evenly; the gutter follows density.
 * ------------------------------------------------------------------ */

.ats-grid {
	display: grid;
	gap: var(--wp--custom--gutter--three-up);
	align-items: start;
}

.ats-grid--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ats-grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ats-grid--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--custom--gutter--four-up);
}

.ats-grid--text {
	gap: var(--wp--custom--gutter--text-columns);
}

.ats-grid--quotes {
	gap: var(--wp--custom--gutter--three-up);
}

.ats-grid--split {
	gap: var(--wp--custom--gutter--split);
}

@media (max-width: 900px) {
	.ats-grid--4,
	.ats-grid--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.ats-grid--4,
	.ats-grid--3,
	.ats-grid--2 {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Heading row: eyebrow column then headline (services grid, lane). */
.ats-heading-row {
	display: grid;
	grid-template-columns: minmax(0, var(--wp--custom--split--heading-row)) minmax(0, var(--wp--custom--split--heading-row-content));
	gap: var(--wp--custom--gutter--split);
	align-items: start;
	margin-bottom: var(--wp--preset--spacing--40);
}

.ats-heading-row__eyebrow {
	padding-top: var(--wp--preset--spacing--12);
}

@media (max-width: 900px) {
	.ats-heading-row {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--20);
	}

	.ats-heading-row__eyebrow {
		padding-top: 0;
	}
}

/* Two-column split: 520/670, or 440/750 when the content is a panel grid. */
.ats-split__grid {
	display: grid;
	grid-template-columns: minmax(0, var(--wp--custom--split--heading)) minmax(0, var(--wp--custom--split--content));
	gap: var(--wp--custom--gutter--split);
	align-items: start;
}

.ats-split--panels .ats-split__grid {
	grid-template-columns: minmax(0, var(--wp--custom--split--heading-narrow)) minmax(0, var(--wp--custom--split--content-wide));
}

.ats-split.is-reverse .ats-split__grid {
	grid-template-columns: minmax(0, var(--wp--custom--split--content)) minmax(0, var(--wp--custom--split--heading));
}

.ats-split.is-reverse .ats-split__heading {
	order: 2;
}

.ats-split.is-reverse .ats-split__content {
	order: 1;
}

.ats-split__heading > * + *,
.ats-split__content > * + * {
	margin-top: var(--wp--preset--spacing--24);
}

.ats-split__heading .ats-eyebrow + .ats-h2 {
	margin-top: var(--wp--preset--spacing--20);
}

.ats-split__content .ats-cta-row {
	margin-top: var(--wp--preset--spacing--32);
}

.ats-split__panels {
	gap: var(--wp--custom--gutter--three-up);
}

.ats-split__content > .ats-split__paragraphs:first-child,
.ats-split__content > .ats-split__lead:first-child {
	padding-top: var(--wp--preset--spacing--8);
}

@media (max-width: 900px) {
	.ats-split__grid,
	.ats-split--panels .ats-split__grid,
	.ats-split.is-reverse .ats-split__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--32);
	}

	.ats-split.is-reverse .ats-split__heading {
		order: 1;
	}

	.ats-split.is-reverse .ats-split__content {
		order: 2;
	}
}

/* CTA row: button and phone line side by side, or stacked. */
.ats-cta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--28);
}

.ats-cta-row--stack {
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--16);
}

/* ---------------------------------------------------------------------
 * Utility bar
 * ------------------------------------------------------------------ */

.ats-utility {
	min-height: var(--wp--custom--chrome--utility-height);
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--type--small--line-height);
}

.ats-utility__inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	min-height: var(--wp--custom--chrome--utility-height);
}

.ats-utility__prompt {
	color: var(--wp--preset--color--text-on-dark-body);
	margin-right: var(--wp--preset--spacing--4);
}

.ats-utility__link,
.ats-utility__phone {
	color: var(--wp--preset--color--text-on-dark-strong);
	font-weight: var(--wp--custom--type--weight-medium);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	min-height: var(--wp--custom--chrome--utility-height);
}

.ats-utility__link:hover,
.ats-utility__phone:hover {
	text-decoration: underline;
}

.ats-utility__contact {
	color: var(--wp--preset--color--text-on-dark-body);
	white-space: nowrap;
}

.ats-utility__sep {
	margin-inline: var(--wp--preset--spacing--8);
}

.ats-utility__contact--compact {
	display: none;
}

@media (max-width: 640px) {
	.ats-utility__hours,
	.ats-utility__sep,
	.ats-utility__contact--full {
		display: none;
	}

	.ats-utility__contact--compact {
		display: block;
	}

	.ats-utility__prompt {
		display: none;
	}
}

/* ---------------------------------------------------------------------
 * Header
 * ------------------------------------------------------------------ */

.ats-header {
	position: relative;
	z-index: 20;
	background: var(--wp--preset--color--surface-page);
	border-bottom: var(--wp--custom--rule--hairline) solid var(--wp--preset--color--border-hairline);
}

.ats-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--24);
	min-height: var(--ats-header-height);
}

.ats-header__brand {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	color: var(--wp--preset--color--text-strong);
	min-height: var(--wp--custom--chrome--target);
}

.ats-header__logo {
	width: var(--wp--custom--chrome--logo-width);
	height: var(--wp--custom--chrome--logo-height);
	object-fit: contain;
	object-position: left center;
}

.ats-header__wordmark {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--heading-4);
	font-weight: var(--wp--custom--type--weight-bold);
	letter-spacing: var(--wp--custom--type--heading-4--letter-spacing);
}

.ats-nav {
	display: flex;
	align-items: center;
	gap: var(--wp--custom--chrome--nav-gap);
}

.ats-nav__list {
	display: flex;
	align-items: center;
	gap: var(--wp--custom--chrome--nav-gap);
}

.ats-nav__link {
	display: inline-flex;
	align-items: center;
	min-height: var(--wp--custom--chrome--target);
	font-size: var(--wp--preset--font-size--nav-link);
	line-height: var(--wp--custom--type--nav-link--line-height);
	font-weight: var(--wp--custom--type--nav-link--weight);
	color: var(--wp--preset--color--text-strong);
	text-decoration: none;
	position: relative;
}

.ats-nav__link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: var(--wp--preset--spacing--8);
	height: var(--wp--custom--rule--nav-current);
	background: transparent;
	transition: background-color var(--wp--custom--motion--fast) var(--wp--custom--motion--ease);
}

.ats-nav__link:hover::after {
	background: var(--wp--preset--color--border-hairline);
}

.ats-nav__link.is-current::after,
.ats-nav__link[aria-current="page"]::after {
	background: var(--wp--preset--color--border-accent);
}

/* Transparent header over a photo hero. The hero pads for the header height. */
body.has-photo-hero .ats-header {
	position: absolute;
	left: 0;
	right: 0;
	background: transparent;
	border-bottom: 0;
}

body.has-photo-hero .ats-header__brand,
body.has-photo-hero .ats-nav__link,
body.has-photo-hero .ats-header__wordmark {
	color: var(--wp--preset--color--text-on-dark-strong);
}

/* One logo asset only: over a photo hero it is rendered as a white knock-out. */
body.has-photo-hero .ats-nav__link:hover::after {
	background: var(--wp--preset--color--border-on-dark);
}

body.has-photo-hero .ats-header :focus-visible {
	outline-color: var(--wp--preset--color--border-focus-on-dark);
}

@media (max-width: 900px) {
	.ats-nav {
		display: none;
	}

	.ats-header__logo {
		width: var(--wp--custom--chrome--logo-width-mobile);
	}
}

/* ---------------------------------------------------------------------
 * Footer
 * ------------------------------------------------------------------ */

.ats-footer {
	padding-top: var(--ats-pad-footer-top);
	padding-bottom: var(--ats-pad-footer-bottom);
	font-size: var(--wp--preset--font-size--body);
}

.ats-footer__columns {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--custom--gutter--split);
}

.ats-footer__heading {
	font-size: var(--wp--preset--font-size--eyebrow);
	line-height: var(--wp--custom--type--eyebrow--line-height);
	letter-spacing: var(--wp--custom--type--eyebrow--letter-spacing);
	font-weight: var(--wp--custom--type--eyebrow--weight);
	text-transform: uppercase;
	color: var(--wp--preset--color--action-link-on-dark);
	margin-bottom: var(--wp--preset--spacing--12);
}

.ats-footer__list li {
	color: var(--wp--preset--color--text-on-dark-body);
	min-height: var(--wp--preset--spacing--32);
	display: flex;
	align-items: center;
}

.ats-footer__list li + li {
	margin-top: var(--wp--preset--spacing--4);
}

.ats-footer__link,
.ats-footer__list a {
	color: var(--wp--preset--color--text-on-dark-body);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	min-height: var(--wp--preset--spacing--32);
}

.ats-footer__link:hover,
.ats-footer__list a:hover {
	color: var(--wp--preset--color--text-on-dark-strong);
	text-decoration: underline;
}

.ats-footer__legal {
	margin-top: var(--wp--preset--spacing--48);
	padding-top: var(--wp--preset--spacing--24);
	border-top: var(--wp--custom--rule--hairline) solid var(--wp--preset--color--border-on-dark);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--16) var(--wp--preset--spacing--32);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-on-dark-muted);
}

.ats-footer__legal-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--8);
}

.ats-footer__legal-links li + li::before {
	content: "\00b7";
	margin-right: var(--wp--preset--spacing--8);
	color: var(--wp--preset--color--text-on-dark-muted);
}

.ats-footer__legal .ats-footer__link {
	color: var(--wp--preset--color--text-on-dark-muted);
	min-height: 0;
}

.ats-footer__copyright {
	color: var(--wp--preset--color--text-on-dark-muted);
}

@media (max-width: 900px) {
	.ats-footer__columns {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--40);
	}
}

@media (max-width: 640px) {
	.ats-footer__columns {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--32);
	}

	.ats-footer__legal {
		flex-direction: column;
	}
}

/* ---------------------------------------------------------------------
 * Per-device section overrides
 *
 * A section can carry --ats-pad-*, --ats-min-* and --ats-align-* set in the
 * editor, each paired with a has-* class so the override only lands where it
 * was asked for and never disturbs a section that has none. The breakpoints
 * are the ones the rest of the stylesheet already uses: 900 and 640.
 * ------------------------------------------------------------------ */

@media (min-width: 901px) {
	.ats-hide-desktop {
		display: none !important;
	}

	.ats-section.has-pad-desktop {
		padding-block: var(--ats-pad-desktop);
	}

	.ats-section.has-min-desktop {
		min-height: var(--ats-min-desktop);
	}

	.ats-section.has-align-desktop {
		text-align: var(--ats-align-desktop);
	}
}

@media (min-width: 641px) and (max-width: 900px) {
	.ats-hide-tablet {
		display: none !important;
	}

	.ats-section.has-pad-tablet {
		padding-block: var(--ats-pad-tablet);
	}

	.ats-section.has-min-tablet {
		min-height: var(--ats-min-tablet);
	}

	.ats-section.has-align-tablet {
		text-align: var(--ats-align-tablet);
	}
}

@media (max-width: 640px) {
	.ats-hide-mobile {
		display: none !important;
	}

	.ats-section.has-pad-mobile {
		padding-block: var(--ats-pad-mobile);
	}

	.ats-section.has-min-mobile {
		min-height: var(--ats-min-mobile);
	}

	.ats-section.has-align-mobile {
		text-align: var(--ats-align-mobile);
	}
}
