/*
 * DC Logistics — section styles.
 *
 * Tokens come from theme.json as --wp--preset--* variables; the short aliases below keep
 * this sheet readable and match the design-system names (design_handoff/tokens.json).
 * The tracking plugin's skin is a separate sheet, css/dcl-tracking.css.
 */

:root {
	--dcl-blue: var(--wp--preset--color--brand-blue);
	--dcl-blue-deep: var(--wp--preset--color--brand-blue-deep);
	--dcl-blue-soft: var(--wp--preset--color--brand-blue-soft);
	--dcl-on-brand: var(--wp--preset--color--on-brand);
	--dcl-on-brand-muted: var(--wp--preset--color--on-brand-muted);
	--dcl-surface: var(--wp--preset--color--surface);
	--dcl-surface-alt: var(--wp--preset--color--surface-alt);
	--dcl-ink: var(--wp--preset--color--ink);
	--dcl-ink-muted: var(--wp--preset--color--ink-muted);
	--dcl-border: var(--wp--preset--color--border);
	--dcl-space-1: var(--wp--preset--spacing--1);
	--dcl-space-2: var(--wp--preset--spacing--2);
	--dcl-space-3: var(--wp--preset--spacing--3);
	--dcl-space-4: var(--wp--preset--spacing--4);
	--dcl-space-5: var(--wp--preset--spacing--5);
	--dcl-radius-sm: var(--wp--custom--radius--sm);
	--dcl-radius-md: var(--wp--custom--radius--md);
	--dcl-shadow-raised: var(--wp--preset--shadow--raised);
}

/* Header, main and footer butt together — no block-gap between the top-level parts. */
.wp-site-blocks > * { margin-block: 0; }
.dcl-main > * { margin-block-start: 0; }

/* Eyebrow: echoes the all-caps LOGISTICS in the wordmark. */
.dcl-eyebrow {
	margin: 0 0 var(--dcl-space-2);
	font-size: var(--wp--preset--font-size--eyebrow);
	line-height: 16px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--dcl-blue);
}

/* ── Header ───────────────────────────────────────────────────────────────
 * White only: the logo has no reversed version, so it never sits on blue. */
.dcl-header {
	background: var(--dcl-surface);
	border-bottom: 1px solid var(--dcl-border);
	padding-top: var(--dcl-space-2);
	padding-bottom: var(--dcl-space-2);
}
.dcl-header__home { display: inline-block; line-height: 0; }
.dcl-header__home:focus-visible { outline: 3px solid var(--dcl-blue); outline-offset: 4px; }
.dcl-header__logo { display: block; width: 180px; height: auto; }
@media (max-width: 640px) {
	.dcl-header__logo { width: 140px; }
}

/* ── Hero ─────────────────────────────────────────────────────────────────
 * brand-blue-deep band. When a photo exists, functions.php sets --dcl-hero-photo and
 * the band becomes a left-weighted overlay on it: dense where the text sits (left), so
 * on-brand-muted copy keeps its 7.5:1, lighter on the right so the photo reads. */
.dcl-hero {
	position: relative;
	min-height: min(78vh, 760px);
	padding-top: var(--dcl-space-5);
	padding-bottom: var(--dcl-space-5);
	color: var(--dcl-on-brand);
	background-color: var(--dcl-blue-deep);
	background-image:
		linear-gradient(90deg, rgba(0, 59, 102, 0.95) 0%, rgba(0, 59, 102, 0.86) 50%, rgba(0, 59, 102, 0.6) 100%),
		var(--dcl-hero-photo, none);
	background-size: cover;
	background-position: center;
}
/* The one gradient in the brand: the logo arrow's blue-to-white fade, as a 6px edge. */
.dcl-hero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 6px;
	background: linear-gradient(90deg, var(--dcl-blue) 0%, var(--dcl-blue) 60%, var(--dcl-surface) 100%);
}
.dcl-hero .dcl-eyebrow { color: var(--dcl-on-brand-muted); }
.dcl-hero__copy { max-width: 40rem; }

/* Temporary "under construction" notice under the hero title. It is an ordinary paragraph
 * block in the page content: delete it in the editor when the full site launches. */
.dcl-notice {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--dcl-space-1) var(--dcl-space-2);
	margin: 0 0 var(--dcl-space-3);
	color: var(--dcl-on-brand);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 600;
}
.dcl-tag {
	display: inline-block;
	padding: 4px 12px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--dcl-blue-soft);
	color: var(--dcl-blue-deep);
	font-size: var(--wp--preset--font-size--eyebrow);
	line-height: 16px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.dcl-hero__title.wp-block-heading {
	margin: 0 0 var(--dcl-space-3);
	color: var(--dcl-on-brand);
	font-size: var(--wp--preset--font-size--display);
	line-height: 1.07;
	letter-spacing: -0.01em;
}
.dcl-hero__lede {
	margin: 0;
	color: var(--dcl-on-brand-muted);
	font-size: var(--wp--preset--font-size--lede);
	line-height: 30px;
}
@media (max-width: 720px) {
	.dcl-hero { min-height: 0; }
	.dcl-hero__lede { font-size: var(--wp--preset--font-size--body); line-height: 26px; }
}

/* ── Tracking card ────────────────────────────────────────────────────────
 * White card inside the hero. Wide enough (880px) for the plugin's five-step progress
 * labels; the plugin's own markup is skinned in css/dcl-tracking.css. */
.dcl-track {
	max-width: 880px;
	margin-top: var(--dcl-space-4);
	padding: var(--dcl-space-4);
	background: var(--dcl-surface);
	color: var(--dcl-ink);
	border-radius: var(--dcl-radius-md);
	box-shadow: var(--dcl-shadow-raised);
	scroll-margin-top: var(--dcl-space-3);
}
.dcl-track > * { margin-block: 0; }
.dcl-track__title.wp-block-heading { margin: 0 0 var(--dcl-space-1); color: var(--dcl-ink); }
.dcl-track__help { margin: 0 0 var(--dcl-space-3); color: var(--dcl-ink-muted); }
.dcl-track__unavailable { margin: 0; font-weight: 600; }
.dcl-track__admin-note {
	margin: var(--dcl-space-2) 0 0;
	padding: var(--dcl-space-2);
	background: var(--dcl-blue-soft);
	border-radius: var(--dcl-radius-sm);
	font-size: var(--wp--preset--font-size--small);
}
@media (max-width: 720px) {
	.dcl-track { padding: var(--dcl-space-3); margin-top: var(--dcl-space-3); }
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.dcl-footer {
	background: var(--dcl-blue-deep);
	color: var(--dcl-on-brand-muted);
	padding-top: var(--dcl-space-4);
	padding-bottom: var(--dcl-space-4);
	font-size: var(--wp--preset--font-size--small);
	line-height: 20px;
}
.dcl-footer p { margin: 0; }
.dcl-footer a { color: var(--dcl-on-brand); }
.dcl-footer__name { color: var(--dcl-on-brand); font-weight: 700; font-size: var(--wp--preset--font-size--body); }