/*
 * The HDM move notice (parts/site/move-notice.php), on every template while seo.hdm-notice
 * is on; loaded by the component convention when the part renders. Home B look: one square
 * white sheet over a graphite veil (::backdrop), the title in Archivo condensed, yellow only
 * for Call, the close button in ink. Closed (the browser hides a dialog without open) until
 * move-notice.js calls showModal() on ?via=hdm.
 */

@layer components {
	.hdc-move {
		position: fixed;
		inset: 0;
		z-index: 1000;
		width: min(36rem, 100% - 2rem);
		max-height: calc(100% - 2rem);
		margin: auto;
		padding: 0;
		overflow: auto;
		border: 0;
		border-radius: 0;
		background: var(--white);
		color: var(--body);
	}

	.hdc-move::backdrop {
		background: rgb(17 20 24 / 0.72);
	}

	.hdc-move__sheet {
		display: grid;
		gap: 1.25rem;
		padding: 1.5rem 1.25rem;
		border-top: 6px solid var(--ink);
	}

	.hdc-move__title {
		margin: 0;
		color: var(--ink);
		font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem);
		font-stretch: 75%;
		font-weight: 800;
		line-height: 1.05;
		overflow-wrap: anywhere;
	}

	.hdc-move__text {
		display: grid;
		gap: 0.75rem;
		font-size: 1.0625rem;
		line-height: 1.55;
	}

	.hdc-move__text p {
		margin: 0;
	}

	/* The DBA sentence, set apart as the fact it is. */
	.hdc-move__dba {
		padding: 0.75rem 1rem;
		background: var(--panel);
		color: var(--ink);
		font-weight: 600;
	}

	.hdc-move__actions {
		display: grid;
		gap: 0.625rem;
	}

	.hdc-move__call {
		display: grid;
		position: relative;
		margin: 0;
		padding: 0.625rem 1rem;
		background: var(--accent);
		color: var(--ink);
		--link: var(--ink);
		--link-hover: var(--ink);
		--link-line: none;
		--link-hover-line: none;
	}

	.hdc-move__call:hover {
		background: var(--accent-strong);
	}

	.hdc-move__call:has(a:focus-visible) {
		outline: 3px solid var(--ink);
		outline-offset: 2px;
	}

	.hdc-move__label {
		font-size: 0.875rem;
		font-weight: 700;
	}

	.hdc-move__number {
		color: var(--ink);
		font-size: 1.5rem;
		font-weight: 800;
		line-height: 1.15;
		font-variant-numeric: tabular-nums;
		text-decoration: none;
	}

	.hdc-move__number::after {
		content: "";
		position: absolute;
		inset: 0;
	}

	.hdc-move__number:focus-visible {
		outline: none;
	}

	.hdc-move__form {
		display: grid;
		margin: 0;
	}

	.hdc-move__close {
		min-height: 3.25rem;
		padding: 0.5rem 1.25rem;
		border: 2px solid var(--ink);
		border-radius: 0;
		background: var(--ink);
		color: var(--white);
		font: inherit;
		font-size: 1.0625rem;
		font-weight: 700;
		cursor: pointer;
	}

	.hdc-move__close:hover {
		border-color: var(--body);
		background: var(--body);
	}

	.hdc-move__close:focus-visible {
		outline: 3px solid var(--accent);
		outline-offset: 2px;
	}

	@media (min-width: 40rem) {
		.hdc-move__sheet {
			gap: 1.5rem;
			padding: 2.25rem 2.5rem 2.5rem;
		}

		.hdc-move__actions {
			grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
			align-items: stretch;
		}
	}

	@media (prefers-reduced-motion: no-preference) {
		.hdc-move[open] {
			animation: hdc-move-in 160ms ease-out;
		}

		@keyframes hdc-move-in {
			from {
				opacity: 0;
				transform: translateY(0.5rem);
			}
		}
	}
}