/*
 * About Contact page "contact" section — US-ABO-04
 *
 * A light band placed under the dark Team band, so adjacent sections differ in
 * both background and layout.
 *   Desktop (>1024px): asymmetric 42/58 split (form card | full-height map),
 *                      then a 3-column detail card grid.
 *   Tablet (<=1024px): single-column split (form above map), 2-column detail
 *                      grid with the address card spanning both columns.
 *   Mobile (<=640px):  fully stacked, 1-column grid, full-width button.
 *
 * Every colour / type / spacing / radius / shadow / motion value comes from
 * assets/css/design-tokens.css — no hardcoded hex values, no arbitrary px.
 * Motion is minimal: hover/focus transitions only, disabled under
 * prefers-reduced-motion.
 */

.amber-contact-abo {
	position: relative;
	padding: var(--space-section) 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: var(--leading-normal);
}

.amber-contact-abo__container {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--container-padding);
}

/* ---------- intro ---------- */

.amber-contact-abo__intro {
	max-width: var(--container-narrow);
	margin: 0 0 clamp(var(--space-10), 5vw, var(--space-16));
}

.amber-contact-abo__eyebrow {
	margin: 0 0 var(--space-3);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: 500;
	letter-spacing: var(--letter-wide);
	text-transform: uppercase;
	color: var(--color-accent-700);
}

.amber-contact-abo__heading {
	margin: 0 0 var(--space-5);
	font-family: var(--font-heading);
	font-size: clamp(var(--text-2xl), 4vw, var(--text-3xl));
	font-weight: 700;
	line-height: var(--leading-tight);
	letter-spacing: var(--letter-tight);
	color: var(--color-primary-900);
}

.amber-contact-abo__lead {
	margin: 0;
	max-width: var(--measure);
	font-size: var(--text-lg);
	color: var(--color-text-muted);
}

/* ---------- split: form card | map ---------- */

.amber-contact-abo__split {
	display: grid;
	grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
	gap: clamp(var(--space-6), 3vw, var(--space-10));
	align-items: stretch;
}

.amber-contact-abo__form-card {
	padding: clamp(var(--space-6), 3vw, var(--space-10));
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
}

.amber-contact-abo__form-title {
	margin: 0 0 var(--space-3);
	font-family: var(--font-heading);
	font-size: var(--text-xl);
	font-weight: 600;
	line-height: var(--leading-snug);
	letter-spacing: var(--letter-tight);
	color: var(--color-primary-900);
}

.amber-contact-abo__form-intro {
	margin: 0 0 var(--space-6);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

.amber-contact-abo__alert {
	margin: 0 0 var(--space-5);
	padding: var(--space-3) var(--space-4);
	border-left: 3px solid var(--color-error);
	border-radius: var(--radius-sm);
	background: var(--color-neutral-100);
	font-size: var(--text-sm);
	color: var(--color-neutral-800);
}

/* ---------- form fields ---------- */

.amber-contact-abo__form {
	margin: 0;
}

.amber-contact-abo__field {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin: 0 0 var(--space-5);
}

.amber-contact-abo__label {
	font-size: var(--text-sm);
	font-weight: 500;
	letter-spacing: var(--letter-wide);
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.amber-contact-abo__input {
	width: 100%;
	min-height: 44px;
	padding: var(--space-3) var(--space-4);
	box-sizing: border-box;
	font-family: var(--font-body);
	font-size: var(--text-base);
	color: var(--color-text);
	background: var(--color-bg);
	border: 1px solid var(--color-neutral-300);
	border-radius: var(--radius-md);
	transition:
		border-color var(--duration-fast) var(--ease-default),
		box-shadow var(--duration-fast) var(--ease-default);
}

.amber-contact-abo__textarea {
	min-height: 140px;
	line-height: var(--leading-normal);
	resize: vertical;
}

.amber-contact-abo__input:hover {
	border-color: var(--color-primary-400);
}

.amber-contact-abo__input:focus {
	outline: none;
	border-color: var(--color-primary-600);
	box-shadow: var(--shadow-glow);
}

.amber-contact-abo__input--error {
	border-color: var(--color-error);
}

.amber-contact-abo__error {
	font-size: var(--text-sm);
	color: var(--color-error);
}

/* Honeypot — off-screen rather than display:none, so bots still fill it. */
.amber-contact-abo__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- buttons ---------- */

.amber-contact-abo__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: var(--space-3) var(--space-8);
	font-family: var(--font-heading);
	font-size: var(--text-base);
	font-weight: 600;
	letter-spacing: var(--letter-tight);
	text-decoration: none;
	color: var(--color-neutral-50);
	background: var(--color-primary-600);
	border: 1px solid var(--color-primary-600);
	border-radius: var(--radius-md);
	cursor: pointer;
	transition:
		background-color var(--duration-normal) var(--ease-default),
		transform var(--duration-normal) var(--ease-default),
		box-shadow var(--duration-normal) var(--ease-default);
}

.amber-contact-abo__button:hover,
.amber-contact-abo__button:focus-visible {
	background: var(--color-primary-700);
	border-color: var(--color-primary-700);
	color: var(--color-neutral-50);
	box-shadow: var(--shadow-lg);
	transform: translateY(-1px);
}

.amber-contact-abo__button:focus-visible {
	outline: 2px solid var(--color-accent-500);
	outline-offset: 2px;
}

.amber-contact-abo__button--ghost {
	color: var(--color-primary-700);
	background: transparent;
	border-color: var(--color-primary-300);
}

.amber-contact-abo__button--ghost:hover,
.amber-contact-abo__button--ghost:focus-visible {
	color: var(--color-primary-900);
	background: var(--color-primary-50);
	border-color: var(--color-primary-400);
	box-shadow: var(--shadow-sm);
}

/* ---------- thank-you state ---------- */

.amber-contact-abo__thanks {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-2);
}

.amber-contact-abo__thanks-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--space-12);
	height: var(--space-12);
	margin: 0 0 var(--space-2);
	font-size: var(--text-lg);
	color: var(--color-accent-800);
	background: var(--color-accent-100);
	border-radius: var(--radius-full);
}

.amber-contact-abo__thanks .amber-contact-abo__button {
	margin-top: var(--space-4);
}

/* ---------- map ---------- */

.amber-contact-abo__map-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--color-surface-dark);
	border: 1px solid var(--color-primary-800);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
}

.amber-contact-abo__map {
	display: block;
	flex: 1 1 auto;
	width: 100%;
	min-height: 360px;
	border: 0;
	background: var(--color-neutral-200);
}

.amber-contact-abo__map-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	padding: var(--space-4) var(--space-5);
	background: var(--color-primary-900);
	color: var(--color-text-on-dark);
}

.amber-contact-abo__map-address {
	margin: 0;
	font-size: var(--text-sm);
	color: var(--color-text-muted-on-dark);
}

.amber-contact-abo__maplink {
	font-size: var(--text-sm);
	font-weight: 500;
	text-decoration: none;
	color: var(--color-accent-300);
	border-bottom: 1px solid transparent;
	transition:
		color var(--duration-fast) var(--ease-default),
		border-color var(--duration-fast) var(--ease-default);
}

.amber-contact-abo__maplink:hover,
.amber-contact-abo__maplink:focus-visible {
	color: var(--color-accent-200);
	border-bottom-color: var(--color-accent-300);
}

.amber-contact-abo__maplink:focus-visible {
	outline: 2px solid var(--color-accent-500);
	outline-offset: 3px;
}

/* ---------- detail cards ---------- */

.amber-contact-abo__details {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(var(--space-5), 2.5vw, var(--space-8));
	margin-top: clamp(var(--space-8), 4vw, var(--space-12));
}

.amber-contact-abo__card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	transition:
		box-shadow var(--duration-normal) var(--ease-default),
		transform var(--duration-normal) var(--ease-default);
	/* Moderate motion (DESIGN.md): the detail cards rise in, staggered by
	   --amber-ct-delay set per card in the template. CSS only — this section
	   ships no JavaScript, so there is no scroll observer here.
	   Fill mode is `backwards`, not `both`, on purpose: backwards holds the
	   transparent `from` state through the stagger delay and then releases the
	   properties, where `both` would keep winning over the :hover rule below
	   and kill the card lift. Mirrors .amber-about-sec__card and
	   .amber-team-abo__card. */
	animation: amber-ct-rise var(--duration-slow) var(--ease-out) backwards;
	animation-delay: var(--amber-ct-delay, 0ms);
}

@keyframes amber-ct-rise {
	from {
		opacity: 0;
		transform: translateY(var(--space-4));
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.amber-contact-abo__card:hover {
	box-shadow: var(--shadow-lg);
	transform: translateY(-2px);
}

.amber-contact-abo__card-photo {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background: var(--color-neutral-200);
}

.amber-contact-abo__card-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--space-3);
	padding: clamp(var(--space-5), 2vw, var(--space-6));
}

.amber-contact-abo__card-title {
	margin: 0;
	font-family: var(--font-heading);
	font-size: var(--text-lg);
	font-weight: 600;
	line-height: var(--leading-snug);
	letter-spacing: var(--letter-tight);
	color: var(--color-primary-900);
}

.amber-contact-abo__card-note {
	margin: auto 0 0;
	padding-top: var(--space-3);
	border-top: 1px solid var(--color-border);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

.amber-contact-abo__address {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	margin: 0;
	font-style: normal;
	font-size: var(--text-base);
	color: var(--color-text);
}

.amber-contact-abo__address-brand {
	font-family: var(--font-heading);
	font-weight: 600;
	color: var(--color-primary-700);
}

.amber-contact-abo__address-line {
	color: var(--color-text-muted);
}

/* ---------- badge + hours table ---------- */

.amber-contact-abo__badge {
	align-self: flex-start;
	margin: 0;
	padding: var(--space-1) var(--space-4);
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--color-neutral-700);
	background: var(--color-neutral-100);
	border-radius: var(--radius-full);
}

.amber-contact-abo__badge--open {
	color: var(--color-accent-800);
	background: var(--color-accent-100);
}

.amber-contact-abo__hours {
	margin: 0;
}

.amber-contact-abo__hours-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-3);
	border-bottom: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
}

.amber-contact-abo__hours-row:last-child {
	border-bottom: 0;
}

.amber-contact-abo__hours-row.is-today {
	background: var(--color-primary-50);
}

.amber-contact-abo__hours-day {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

.amber-contact-abo__hours-tag {
	padding: 0 var(--space-2);
	font-size: var(--text-xs);
	font-weight: 500;
	letter-spacing: var(--letter-wide);
	text-transform: uppercase;
	color: var(--color-highlight-800);
	background: var(--color-highlight-100);
	border-radius: var(--radius-full);
}

.amber-contact-abo__hours-time {
	margin: 0;
	font-family: var(--font-heading);
	font-size: var(--text-base);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--color-primary-900);
}

/* ---------- reaching us list ---------- */

.amber-contact-abo__reach {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.amber-contact-abo__reach-item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-2);
	padding-bottom: var(--space-3);
	border-bottom: 1px solid var(--color-border);
}

.amber-contact-abo__reach-item:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.amber-contact-abo__reach-label {
	font-size: var(--text-xs);
	font-weight: 500;
	letter-spacing: var(--letter-wide);
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.amber-contact-abo__reach-value {
	font-size: var(--text-sm);
	font-weight: 500;
	text-decoration: none;
	color: var(--color-primary-700);
	border-bottom: 1px solid transparent;
	transition:
		color var(--duration-fast) var(--ease-default),
		border-color var(--duration-fast) var(--ease-default);
}

a.amber-contact-abo__reach-value:hover,
a.amber-contact-abo__reach-value:focus-visible {
	color: var(--color-primary-900);
	border-bottom-color: var(--color-primary-400);
}

a.amber-contact-abo__reach-value:focus-visible {
	outline: 2px solid var(--color-accent-500);
	outline-offset: 3px;
}

.amber-contact-abo__reach-value--plain {
	color: var(--color-text-muted);
}

/* ---------- dark surface roles ---------- */

/*
 * Quality bar rule 6: every background and text colour in this band comes from
 * a theme token, so the section stays readable when [data-theme="dark"] is set.
 * Without these rules the light cards below would keep painting
 * --color-surface (a light warm grey) while the bands above went dark, which
 * reads as a light-on-light slab dropped into a dark page.
 *
 * The band itself takes --color-bg-dark: the Team band above lifts to
 * --color-surface-dark in dark mode, so this keeps the two sections reading as
 * separate bands, exactly as the light theme alternates them. Mirrors
 * assets/css/about-about.css and assets/css/team-about.css — no hardcoded
 * colour anywhere.
 */

[data-theme="dark"] .amber-contact-abo {
	background: var(--color-bg-dark);
	color: var(--color-text-on-dark);
}

[data-theme="dark"] .amber-contact-abo__heading,
[data-theme="dark"] .amber-contact-abo__form-title,
[data-theme="dark"] .amber-contact-abo__card-title,
[data-theme="dark"] .amber-contact-abo__hours-time,
[data-theme="dark"] .amber-contact-abo__address {
	color: var(--color-text-on-dark);
}

[data-theme="dark"] .amber-contact-abo__lead,
[data-theme="dark"] .amber-contact-abo__form-intro,
[data-theme="dark"] .amber-contact-abo__card-note,
[data-theme="dark"] .amber-contact-abo__label,
[data-theme="dark"] .amber-contact-abo__address-line,
[data-theme="dark"] .amber-contact-abo__reach-label,
[data-theme="dark"] .amber-contact-abo__reach-value--plain,
[data-theme="dark"] .amber-contact-abo__hours-day {
	color: var(--color-text-muted-on-dark);
}

[data-theme="dark"] .amber-contact-abo__eyebrow {
	color: var(--color-accent-300);
}

[data-theme="dark"] .amber-contact-abo__address-brand {
	color: var(--color-accent-300);
}

[data-theme="dark"] .amber-contact-abo__form-card,
[data-theme="dark"] .amber-contact-abo__card {
	background: var(--color-surface-dark);
	border-color: var(--color-primary-700);
}

[data-theme="dark"] .amber-contact-abo__card-photo,
[data-theme="dark"] .amber-contact-abo__map {
	background: var(--color-primary-700);
}

[data-theme="dark"] .amber-contact-abo__map-card {
	border-color: var(--color-primary-700);
}

[data-theme="dark"] .amber-contact-abo__map-foot {
	background: var(--color-surface-dark-elevated);
}

/* Fields: a light input on a dark card is the same light-on-light defect. */
[data-theme="dark"] .amber-contact-abo__input {
	color: var(--color-text-on-dark);
	background: var(--color-surface-dark-elevated);
	border-color: var(--color-primary-700);
}

[data-theme="dark"] .amber-contact-abo__input:hover,
[data-theme="dark"] .amber-contact-abo__input:focus {
	border-color: var(--color-primary-400);
}

[data-theme="dark"] .amber-contact-abo__input--error {
	border-color: var(--color-error);
}

[data-theme="dark"] .amber-contact-abo__alert {
	color: var(--color-text-on-dark);
	background: var(--color-surface-dark-elevated);
}

[data-theme="dark"] .amber-contact-abo__badge {
	color: var(--color-text-muted-on-dark);
	background: var(--color-surface-dark-elevated);
}

[data-theme="dark"] .amber-contact-abo__badge--open {
	color: var(--color-accent-100);
	background: var(--color-accent-900);
}

[data-theme="dark"] .amber-contact-abo__hours-tag {
	color: var(--color-highlight-100);
	background: var(--color-highlight-800);
}

[data-theme="dark"] .amber-contact-abo__hours-row,
[data-theme="dark"] .amber-contact-abo__reach-item,
[data-theme="dark"] .amber-contact-abo__card-note {
	border-color: var(--color-border-dark);
}

[data-theme="dark"] .amber-contact-abo__hours-row.is-today {
	background: var(--color-surface-dark-elevated);
}

[data-theme="dark"] .amber-contact-abo__reach-value {
	color: var(--color-accent-300);
}

[data-theme="dark"] a.amber-contact-abo__reach-value:hover,
[data-theme="dark"] a.amber-contact-abo__reach-value:focus-visible {
	color: var(--color-accent-200);
	border-bottom-color: var(--color-accent-300);
}

[data-theme="dark"] .amber-contact-abo__button--ghost {
	color: var(--color-text-on-dark);
	border-color: var(--color-primary-700);
}

[data-theme="dark"] .amber-contact-abo__button--ghost:hover,
[data-theme="dark"] .amber-contact-abo__button--ghost:focus-visible {
	color: var(--color-text-on-dark);
	background: var(--color-surface-dark-elevated);
	border-color: var(--color-primary-400);
}

/* ---------- tablet ---------- */

@media (max-width: 1024px) {
	.amber-contact-abo__split {
		grid-template-columns: minmax(0, 1fr);
	}

	.amber-contact-abo__map {
		min-height: 320px;
	}

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

	.amber-contact-abo__card--address {
		grid-column: 1 / -1;
	}

	.amber-contact-abo__card--address .amber-contact-abo__card-photo {
		aspect-ratio: 16 / 7;
	}
}

/* ---------- mobile ---------- */

@media (max-width: 640px) {
	.amber-contact-abo__details {
		grid-template-columns: minmax(0, 1fr);
	}

	.amber-contact-abo__card--address .amber-contact-abo__card-photo {
		aspect-ratio: 4 / 3;
	}

	.amber-contact-abo__map {
		min-height: 260px;
	}

	.amber-contact-abo__map-foot {
		flex-direction: column;
		align-items: flex-start;
	}

	.amber-contact-abo__button {
		width: 100%;
	}

	.amber-contact-abo__reach-item,
	.amber-contact-abo__hours-row {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ---------- motion preference ---------- */

@media (prefers-reduced-motion: reduce) {
	.amber-contact-abo__card,
	.amber-contact-abo__button,
	.amber-contact-abo__input,
	.amber-contact-abo__maplink,
	.amber-contact-abo__reach-value {
		transition: none;
	}

	/* No entrance animation at all: the stagger delay must never leave a card
	   holding the animation's transparent `from` state. */
	.amber-contact-abo__card {
		animation: none;
		opacity: 1;
		transform: none;
	}

	.amber-contact-abo__card:hover,
	.amber-contact-abo__button:hover,
	.amber-contact-abo__button:focus-visible {
		transform: none;
	}
}