/*
 * About Contact page footer section — US-ABO-05
 *
 * A deep-slate band that closes the About & Contact page, deliberately
 * contrasting with the light Contact band directly above it. The provisioned
 * shop photo sits faded behind the band so it reads as a designed surface
 * rather than a flat colour block.
 *
 *   Desktop (>1024px): wide brand row (brand/tagline | menu button), then a
 *                      4-column grid — about+social (wider) | visit | hours |
 *                      explore — closed by a slim bottom bar.
 *   Tablet (<=1024px): 2-column grid, the about column spanning both columns.
 *   Mobile (<=640px):  fully stacked, full-width button, bottom bar stacked.
 *
 * 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 (brand brief: 15/100): hover and focus transitions only,
 * all disabled under prefers-reduced-motion.
 */

.amber-footer-abo {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp(var(--space-12), 6vw, var(--space-20)) 0 var(--space-8);
	/* Cool-slate dark band, straight off the primary ramp, so the footer closes
	   the page in the same hue family as the About Contact hero that opens it.
	   Both layers are tokens — no hardcoded hex, and no warm/cool seam. */
	background-color: var(--color-primary-900);
	background-image: linear-gradient(
		180deg,
		var(--color-primary-800) 0%,
		var(--color-primary-900) 62%
	);
	color: var(--color-text-on-dark);
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: var(--leading-normal);
}

/* Amber hairline along the top edge, tying the band to the brand highlight. */
.amber-footer-abo::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: var(--space-1);
	background: linear-gradient(
		90deg,
		var(--color-highlight-500) 0%,
		var(--color-accent-500) 55%,
		var(--color-primary-600) 100%
	);
	z-index: 2;
}

/* The faded shop photo. Added only when the theme actually ships the file.
   A negative z-index pseudo-element paints above the band's own background but
   below all content, so the photo sits between the slate surface and the text.
   It is held at a low opacity and masked away toward the bottom bar, which
   keeps every line of copy comfortably above AA contrast on the slate. */
.amber-footer-abo.has-backdrop::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--amber-footer-abo-backdrop);
	background-size: cover;
	background-position: center;
	opacity: 0.14;
	-webkit-mask-image: linear-gradient(180deg, var(--color-text) 0%, transparent 86%);
	mask-image: linear-gradient(180deg, var(--color-text) 0%, transparent 86%);
	z-index: -1;
}

.amber-footer-abo__container {
	position: relative;
	z-index: 1;
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--container-padding);
}

/* ---------- brand row ---------- */

.amber-footer-abo__lede {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-6);
	padding-bottom: clamp(var(--space-8), 4vw, var(--space-12));
	border-bottom: 1px solid var(--color-primary-700);
}

.amber-footer-abo__lede-text {
	min-width: 0;
}

.amber-footer-abo__brand {
	margin: 0;
	font-family: var(--font-heading);
	font-size: var(--text-2xl);
	font-weight: 700;
	letter-spacing: var(--letter-tight);
	line-height: var(--leading-tight);
	color: var(--color-text-on-dark);
}

.amber-footer-abo__tagline {
	margin: var(--space-2) 0 0;
	font-size: var(--text-lg);
	color: var(--color-text-muted-on-dark);
	line-height: var(--leading-snug);
	max-width: var(--measure);
}

.amber-footer-abo__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	flex: 0 0 auto;
	padding: var(--space-3) var(--space-6);
	border: 1px solid transparent;
	border-radius: var(--radius-md);
	background: var(--color-accent-500);
	color: var(--color-primary-900);
	font-family: var(--font-heading);
	font-size: var(--text-base);
	font-weight: 600;
	letter-spacing: var(--letter-normal);
	text-decoration: none;
	box-shadow: var(--shadow-md);
	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-footer-abo__button:hover,
.amber-footer-abo__button:focus-visible {
	background: var(--color-accent-400);
	transform: translateY(-2px);
	box-shadow: var(--shadow-lg);
}

.amber-footer-abo__button:focus-visible {
	outline: 2px solid var(--color-highlight-400);
	outline-offset: 2px;
}

/* ---------- column grid ---------- */

.amber-footer-abo__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: clamp(var(--space-8), 4vw, var(--space-12));
	padding: clamp(var(--space-10), 5vw, var(--space-16)) 0;
}

.amber-footer-abo__col {
	min-width: 0;
}

.amber-footer-abo__title {
	margin: 0 0 var(--space-4);
	font-family: var(--font-heading);
	font-size: var(--text-sm);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--letter-wide);
	color: var(--color-highlight-300);
}

.amber-footer-abo__about {
	margin: 0;
	max-width: var(--measure);
	color: var(--color-text-muted-on-dark);
	font-size: var(--text-base);
	line-height: var(--leading-normal);
}

.amber-footer-abo__address {
	margin: 0 0 var(--space-3);
	font-style: normal;
	color: var(--color-text-on-dark);
	line-height: var(--leading-snug);
}

/* ---------- links ---------- */

.amber-footer-abo__nav,
.amber-footer-abo__social {
	list-style: none;
	margin: 0;
	padding: 0;
}

.amber-footer-abo__nav-item + .amber-footer-abo__nav-item {
	margin-top: var(--space-2);
}

.amber-footer-abo__link,
.amber-footer-abo__social-link,
.amber-footer-abo__nav a,
.amber-footer-abo__top {
	display: inline-block;
	color: var(--color-text-muted-on-dark);
	font-size: var(--text-base);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition:
		color var(--duration-normal) var(--ease-default),
		border-color var(--duration-normal) var(--ease-default);
}

.amber-footer-abo__link:hover,
.amber-footer-abo__link:focus-visible,
.amber-footer-abo__social-link:hover,
.amber-footer-abo__social-link:focus-visible,
.amber-footer-abo__nav a:hover,
.amber-footer-abo__nav a:focus-visible,
.amber-footer-abo__top:hover,
.amber-footer-abo__top:focus-visible {
	color: var(--color-text-on-dark);
	border-bottom-color: var(--color-highlight-400);
}

.amber-footer-abo__link:focus-visible,
.amber-footer-abo__social-link:focus-visible,
.amber-footer-abo__nav a:focus-visible,
.amber-footer-abo__top:focus-visible {
	outline: 2px solid var(--color-accent-500);
	outline-offset: 3px;
	border-radius: var(--radius-sm);
}

/* A footer menu assigned in wp-admin renders through wp_nav_menu(); reset the
   list chrome WordPress adds so it matches the fallback list exactly. */
.amber-footer-abo__nav li {
	list-style: none;
}

.amber-footer-abo__nav li + li {
	margin-top: var(--space-2);
}

.amber-footer-abo__social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	margin-top: var(--space-5);
}

/* ---------- hours ---------- */

.amber-footer-abo__badge {
	display: inline-block;
	margin: 0 0 var(--space-4);
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-full);
	font-size: var(--text-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--letter-wide);
}

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

.amber-footer-abo__badge--closed {
	background: var(--color-primary-700);
	color: var(--color-primary-100);
}

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

.amber-footer-abo__hours-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-2) 0;
	border-bottom: 1px solid var(--color-primary-700);
}

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

.amber-footer-abo__hours-row.is-today .amber-footer-abo__hours-day,
.amber-footer-abo__hours-row.is-today .amber-footer-abo__hours-time {
	color: var(--color-text-on-dark);
	font-weight: 700;
}

.amber-footer-abo__hours-day {
	margin: 0;
	font-size: var(--text-sm);
	color: var(--color-text-muted-on-dark);
}

.amber-footer-abo__hours-time {
	margin: 0;
	font-size: var(--text-sm);
	font-variant-numeric: tabular-nums;
	color: var(--color-text-muted-on-dark);
	white-space: nowrap;
}

/* ---------- bottom bar ---------- */

.amber-footer-abo__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding-top: var(--space-6);
	border-top: 1px solid var(--color-primary-700);
}

.amber-footer-abo__copyright {
	margin: 0;
	font-size: var(--text-sm);
	color: var(--color-primary-200);
}

.amber-footer-abo__top {
	font-size: var(--text-sm);
}

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

@media (max-width: 1024px) {
	.amber-footer-abo__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.amber-footer-abo__col--about {
		grid-column: 1 / -1;
	}

	.amber-footer-abo__brand {
		font-size: var(--text-xl);
	}

	.amber-footer-abo__tagline {
		font-size: var(--text-base);
	}
}

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

@media (max-width: 640px) {
	.amber-footer-abo__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-8);
	}

	.amber-footer-abo__lede {
		align-items: flex-start;
	}

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

	.amber-footer-abo__bar {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.amber-footer-abo__button,
	.amber-footer-abo__link,
	.amber-footer-abo__social-link,
	.amber-footer-abo__nav a,
	.amber-footer-abo__top {
		transition: none;
	}

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