/*
 * The Contact us page (page-templates/contact.php, parts/contact/body.php), in the Home B
 * shell. The About page's look: a white top with the breadcrumb, the condensed h1 and one
 * line, then the light grey ground with square white boxes, two columns from 64rem (ways to
 * reach us and what to send on the left, the quote form on the right). Yellow only as the
 * Call block and the icons' spot, no shadows. Every rule under body.hdc-contact.
 */

@layer tokens {
	body.hdc-contact {
		--ct-ground: #eef1f5;
		--ct-tint: #f5f7fa;
		--ct-line: #dfe3e8;
		/* 5.2:1 on the ground, 5.8:1 on white. */
		--ct-mute: #5b6571;
		--ct-spot: #ffdb5c;
		--ct-r: 2px;
		--ct-pad: 1.25rem;
		--ct-space: 2.5rem;
	}

	@media (min-width: 48rem) {
		body.hdc-contact {
			--ct-pad: 2rem;
			--ct-space: 3.5rem;
		}
	}
}

@layer components {
	.hdc-contact .hdc-ct-main {
		overflow-x: clip;
	}

	/* Solid icons (the Call block) and line icons over the yellow spot. */
	.hdc-contact .hdc-v1-ico {
		flex: none;
		width: 1.5rem;
		height: 1.5rem;
		fill: currentColor;
	}

	.hdc-contact .hdc-v1-line {
		flex: none;
		width: 1.25em;
		height: 1.25em;
		overflow: visible;
		fill: none;
		stroke: currentColor;
		stroke-width: 2;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	.hdc-contact .hdc-v1-line--spot {
		width: 1.75rem;
		height: 1.75rem;
		color: var(--ink);
		stroke-width: 1.5;
	}

	.hdc-contact .hdc-v1-line__ink * {
		vector-effect: non-scaling-stroke;
	}

	.hdc-contact .hdc-v1-line__spot {
		fill: var(--ct-spot);
		stroke: none;
	}

	/* ---------------------------------------------------------------- Top */
	.hdc-contact .hdc-ct-top {
		padding-bottom: 2rem;
		background: var(--white);
	}

	.hdc-contact .hdc-ct-crumbs__list {
		display: flex;
		flex-wrap: wrap;
		margin: 0;
		padding: 1rem 0 0;
		list-style: none;
		color: var(--steel);
		font-size: 0.875rem;
		--link: var(--steel);
		--link-hover: var(--ink);
		--link-line: none;
		--link-hover-line: underline;
	}

	.hdc-contact .hdc-ct-crumbs__item + .hdc-ct-crumbs__item::before {
		content: "/";
		margin-inline: 0.5rem;
		color: var(--control);
	}

	.hdc-contact .hdc-ct-crumbs__item [aria-current] {
		color: var(--ink);
		font-weight: 600;
	}

	.hdc-contact .hdc-ct-h1 {
		margin: 1.25rem 0 0.75rem;
		color: var(--ink);
		font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem);
		font-stretch: 75%;
		font-weight: 800;
		line-height: 1;
	}

	.hdc-contact .hdc-ct-lead {
		max-width: 42rem;
		margin: 0;
		color: var(--body);
		font-size: 1.0625rem;
		line-height: 1.55;
	}

	/* ---------------------------------------------------------------- Ground */
	.hdc-contact .hdc-ct-ground {
		padding-block: var(--ct-space);
		background: var(--ct-ground);
	}

	.hdc-contact .hdc-ct-grid {
		display: grid;
		gap: 1rem;
	}

	.hdc-contact .hdc-ct-side {
		display: grid;
		align-content: start;
		gap: 1rem;
		min-width: 0;
	}

	.hdc-contact .hdc-ct-box {
		min-width: 0;
		margin: 0;
		padding: var(--ct-pad);
		border-radius: var(--ct-r);
		background: var(--white);
	}

	.hdc-contact .hdc-ct-h2 {
		margin: 0 0 1rem;
		color: var(--ink);
		font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
		font-stretch: 75%;
		font-weight: 800;
		line-height: 1.05;
	}

	/* Call: the yellow block, the whole block dials (the number's link stretches over it). */
	.hdc-contact .hdc-ct-call {
		display: flex;
		position: relative;
		align-items: center;
		gap: 1rem;
		min-height: 5rem;
		padding: 0.875rem 1.25rem;
		border-radius: var(--ct-r);
		background: var(--accent);
		color: var(--ink);
		--link: var(--ink);
		--link-hover: var(--ink);
		--link-line: none;
		--link-hover-line: none;
	}

	.hdc-contact .hdc-ct-call:hover {
		background: var(--accent-strong);
	}

	.hdc-contact .hdc-ct-call:has(.hdc-ct-call__number:focus-visible) {
		outline: var(--focus-ring);
		outline-offset: var(--focus-offset);
	}

	.hdc-contact .hdc-ct-call__icon .hdc-v1-ico {
		width: 2rem;
		height: 2rem;
	}

	.hdc-contact .hdc-ct-call__words {
		display: grid;
		gap: 0.125rem;
	}

	.hdc-contact .hdc-ct-call__label {
		font-size: 0.9375rem;
		font-weight: 700;
	}

	.hdc-contact .hdc-ct-call__number {
		font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem);
		font-weight: 800;
		line-height: 1.05;
		font-variant-numeric: tabular-nums;
		text-decoration: none;
	}

	.hdc-contact .hdc-ct-call__number::after {
		content: "";
		position: absolute;
		inset: 0;
	}

	.hdc-contact .hdc-ct-call__number:focus-visible {
		outline: none;
	}

	.hdc-contact .hdc-ct-person {
		margin: 0.625rem 0 0;
		color: var(--ct-mute);
		font-size: 0.9375rem;
		font-weight: 600;
	}

	/* Email and the mailing address. */
	.hdc-contact .hdc-ct-list {
		display: grid;
		gap: 1.25rem;
		margin: 1.5rem 0 0;
		padding-top: 1.25rem;
		border-top: 1px solid var(--line);
	}

	.hdc-contact .hdc-ct-list__item {
		display: grid;
		gap: 0.375rem;
		min-width: 0;
	}

	.hdc-contact .hdc-ct-list dt {
		display: flex;
		align-items: center;
		gap: 0.625rem;
		color: var(--ct-mute);
		font-size: 0.875rem;
		font-weight: 600;
	}

	.hdc-contact .hdc-ct-list dd {
		margin: 0;
		min-width: 0;
		color: var(--ink);
		font-size: 1.0625rem;
		font-weight: 700;
	}

	.hdc-contact .hdc-ct-list__value {
		--link: var(--ink);
		--link-hover: var(--ink);
		--link-line: underline;
		--link-hover-line: underline;
		text-underline-offset: 0.2em;
	}

	.hdc-contact .hdc-ct-list__post {
		display: grid;
		font-weight: 600;
		line-height: 1.45;
	}

	/* What to send: one fact per line under its spot icon. */
	.hdc-contact .hdc-ct-send__list {
		display: grid;
		gap: 0.75rem;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.hdc-contact .hdc-ct-send__list li {
		display: flex;
		align-items: center;
		gap: 0.875rem;
		color: var(--body);
		font-size: 1rem;
		line-height: 1.4;
	}

	.hdc-contact .hdc-ct-send__note {
		margin: 1.25rem 0 0;
		color: var(--body);
		font-size: 1rem;
	}

	.hdc-contact .hdc-ct-send__quote {
		margin: 1rem 0 0;
		padding-top: 1rem;
		border-top: 1px solid var(--line);
		color: var(--ink);
		font-size: 1rem;
		font-weight: 700;
	}

	/* The form box: the leads form at full width of its box. */
	.hdc-contact .hdc-ct-form .hdc-forms-lead {
		margin: 0;
	}

	@media (min-width: 64rem) {
		.hdc-contact .hdc-ct-grid {
			grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
			align-items: start;
			gap: 1.25rem;
		}

		.hdc-contact .hdc-ct-box {
			padding: 2rem;
		}
	}
}