/*
 * Site chrome, loaded on every page by inc/assets.php: every site/* part
 * (header with its skip link, drawer, footer, phone bar, call and quote
 * actions). One file keeps the page budget at base.css plus this file, leaving
 * two component files per page (ADR 0009).
 */
@layer components {
	/*
	 * Call and quote come first: the header, drawer and phone bar restyle them
	 * with classes of the same specificity, so those rules must come later.
	 */
	/* Call button (parts/site/call.php). The tracking module's <a> sits inside and stretches over the whole button. */
	.hdc-site-call {
		position: relative;
	}

	.hdc-site-call a::after {
		content: "";
		position: absolute;
		inset: 0;
	}

	@supports selector(:has(a)) {
		.hdc-site-call a:focus-visible {
			outline: none;
		}

		.hdc-site-call:has(a:focus-visible) {
			outline: var(--focus-ring);
			outline-offset: var(--focus-offset);
		}
	}

	/* Call and quote (parts/site/actions.php). */
	.hdc-site-actions {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-3);
	}

	.hdc-site-actions--bar,
	.hdc-site-actions--stack {
		display: grid;
		gap: var(--space-2);
	}

	.hdc-site-actions--bar {
		grid-auto-columns: 1fr;
		grid-auto-flow: column;
	}

	/* Header and skip link (parts/site/header.php). */
	.hdc-site-header__skip {
		--link: var(--white);
		--link-hover: var(--white);
		position: absolute;
		top: var(--space-2);
		left: var(--space-2);
		z-index: 1000;
		padding: var(--space-3) var(--space-4);
		border-radius: var(--radius);
		background: var(--ink);
		font-weight: 650;
		transform: translateY(-200%);
	}

	.hdc-site-header__skip:focus {
		transform: none;
	}

	.hdc-site-header {
		border-bottom: 1px solid var(--line);
		background: var(--white);
	}

	.hdc-site-header__bar {
		display: flex;
		align-items: center;
		gap: var(--space-3) var(--space-5);
		min-height: 4rem;
	}

	.hdc-site-header__brand {
		--link: var(--ink);
		--link-hover: var(--ink);
		--link-line: none;
		--link-hover-line: none;
		display: inline-flex;
		align-items: center;
		min-height: var(--target);
		margin-inline-end: auto;
		font-size: var(--text-md);
		font-weight: 800;
		letter-spacing: -0.02em;
		line-height: 1.1;
	}

	.hdc-site-header__nav {
		display: none;
	}

	.hdc-site-header__menu {
		display: flex;
		gap: var(--space-1);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.hdc-site-header__menu a {
		--link: var(--ink);
		--link-line: none;
		display: inline-flex;
		align-items: center;
		min-height: var(--target);
		padding-inline: var(--space-3);
		font-weight: 600;
	}

	.hdc-site-header__menu [aria-current="page"] {
		--link-line: underline;
	}

	.hdc-site-header__actions {
		display: none;
	}

	.hdc-site-header__toggle {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2);
		min-width: var(--target);
		min-height: var(--target);
		padding-inline: var(--space-3);
		border: 1px solid var(--control);
		border-radius: var(--radius);
		background: var(--white);
		color: var(--ink);
		font-weight: 650;
	}

	.hdc-site-header__toggle:hover {
		border-color: var(--ink);
	}

	/* From 40rem Call and Quote sit in the bar and never stack; the wordmark wraps first. */
	@media (min-width: 40rem) {
		.hdc-site-header__actions {
			display: flex;
			flex: none;
		}
	}

	@media (min-width: 64rem) {
		/* Labels never break; a long menu wraps onto a second line inside the nav. */
		.hdc-site-header__nav {
			display: block;
			flex: 1 1 auto;
			min-width: 0;
		}

		.hdc-site-header__menu {
			flex-wrap: wrap;
			justify-content: flex-end;
		}

		.hdc-site-header__menu a {
			white-space: nowrap;
		}

		.hdc-site-header__brand {
			flex: none;
		}

		.hdc-site-header__toggle {
			display: none;
		}
	}

	/* Drawer (parts/site/drawer.php). A modal <dialog> pinned to the right edge, full height. */
	.hdc-site-drawer {
		width: min(24rem, 100% - 3rem);
		max-width: none;
		height: 100%;
		max-height: none;
		margin: 0 0 0 auto;
		padding: 0;
		border: 0;
		background: var(--white);
		color: var(--body);
	}

	.hdc-site-drawer::backdrop {
		background: var(--scrim);
	}

	.hdc-site-drawer__inner {
		display: flex;
		flex-direction: column;
		min-height: 100%;
	}

	.hdc-site-drawer__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-4);
		min-height: 4rem;
		padding-inline: var(--gutter) var(--space-2);
		border-bottom: 1px solid var(--line);
	}

	.hdc-site-drawer__title {
		font-size: var(--text-md);
	}

	.hdc-site-drawer__close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: var(--target);
		height: var(--target);
		border-radius: var(--radius);
		color: var(--ink);
	}

	.hdc-site-drawer__close .hdc-icon {
		width: 1.5rem;
		height: 1.5rem;
	}

	.hdc-site-drawer__menu,
	.hdc-site-drawer__menu .sub-menu {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.hdc-site-drawer__menu a {
		--link: var(--ink);
		--link-line: none;
		display: flex;
		align-items: center;
		min-height: var(--target);
		padding: var(--space-2) var(--gutter);
		border-bottom: 1px solid var(--line);
		font-weight: 600;
	}

	.hdc-site-drawer__menu .sub-menu a {
		padding-inline-start: calc(var(--gutter) + var(--space-4));
		font-weight: 400;
	}

	.hdc-site-drawer__body {
		display: grid;
		gap: var(--space-5);
		padding: var(--space-5) var(--gutter);
	}

	@keyframes hdc-site-drawer-in {
		from {
			transform: translateX(100%);
		}
	}

	@media (prefers-reduced-motion: no-preference) {
		.hdc-site-drawer[open] {
			animation: hdc-site-drawer-in 0.2s ease-out;
		}
	}

	body:has(.hdc-site-drawer[open]) {
		overflow: hidden;
	}

	/* Footer (parts/site/footer.php). */
	.hdc-site-footer {
		padding-block: var(--space-7);
		border-top: 1px solid var(--line);
		background: var(--panel);
		color: var(--body); /* --mute fails contrast on --panel. */
	}

	.hdc-site-footer__inner {
		display: grid;
		gap: var(--space-6);
	}

	.hdc-site-footer__help {
		display: grid;
		gap: var(--space-4);
	}

	.hdc-site-footer__name {
		color: var(--ink);
		font-size: var(--text-md);
		font-weight: 800;
		letter-spacing: -0.02em;
	}

	.hdc-site-footer__menu {
		display: flex;
		flex-wrap: wrap;
		gap: 0 var(--space-5);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.hdc-site-footer__menu a {
		--link: var(--ink);
		--link-line: none;
		display: inline-flex;
		align-items: center;
		min-height: var(--target);
	}

	.hdc-site-footer__legal {
		font-size: var(--text-sm);
	}

	@media (min-width: 64rem) {
		.hdc-site-footer__inner {
			grid-template-columns: minmax(0, 1fr) auto;
			align-items: start;
		}

		.hdc-site-footer__legal {
			grid-column: 1 / -1;
		}
	}

	/* Phone bar (parts/site/phone-bar.php). Sticky at the end of <body>, so it never covers the footer. */
	.hdc-site-phone-bar {
		position: sticky;
		bottom: 0;
		z-index: 10;
		padding: var(--space-2) var(--gutter);
		border-top: 1px solid var(--line);
		background: var(--white);
	}

	@media (min-width: 40rem) {
		.hdc-site-phone-bar {
			display: none;
		}
	}
}