/*
 * Footer, final call section, and the sticky mobile call bar.
 */

/* ---------------------------------------------------------------------------
 * Final call section
 * ------------------------------------------------------------------------ */

.afc-footer-cta {
	position: relative;
	background: var(--afc-color-surface-dark);
	color: var(--afc-color-text-on-dark);
	padding-block: var(--afc-section-y-tight);
}

.afc-footer-cta::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	block-size: var(--afc-rule-weight);
	background: var(--afc-color-brand-red);
}

.afc-footer-cta__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--afc-space-md);
}

.afc-footer-cta__text {
	flex: 1 1 26rem;
}

.afc-footer-cta__title {
	color: var(--afc-white);
	margin-block-end: 0.4em;
}

.afc-footer-cta__lead {
	margin: 0;
	max-inline-size: 34rem;
	color: var(--afc-color-text-muted-on-dark);
	font-size: var(--afc-text-body-lg);
	text-wrap: pretty;
}

/* ---------------------------------------------------------------------------
 * Footer
 * ------------------------------------------------------------------------ */

.afc-footer {
	background: var(--afc-color-surface-darker);
	color: var(--afc-color-text-muted-on-dark);
	font-size: var(--afc-text-body-sm);
}

.afc-footer__grid {
	display: grid;
	gap: var(--afc-space-lg) var(--afc-gap-grid);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	padding-block: var(--afc-section-y-tight);
}

@media (min-width: 1024px) {
	/* Brand, Contact, Hours, Explore. The brand column carries the lockup and the
	   description, so it earns more room than the three that hold short lines. */
	.afc-footer__grid {
		grid-template-columns: 1.5fr 1fr 1fr 1fr;
	}
}

.afc-footer__logo {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	margin-block-end: var(--afc-space-sm);
}

/*
 * The lockup fills the brand column rather than sitting at a fixed height, so it reads
 * as the anchor of the footer instead of a small badge. Width is driven, height is
 * left to the intrinsic ratio, and the plate is padded proportionally, so the artwork
 * is never distorted at any column width.
 *
 * The cap stops it becoming absurd on a wide viewport, where the brand column can pass
 * 400 pixels.
 */
.afc-logo__img--stacked {
	display: block;
	inline-size: 100%;
	max-inline-size: 17rem;
	block-size: auto;
	object-fit: contain;
	/* The stacked lockup is navy lettering, so it needs a light plate to stay
	   readable on the dark footer. The artwork itself is untouched. */
	align-self: flex-start;
	padding: 0.9rem 1.1rem;
	background: var(--afc-white);
	border-radius: var(--afc-radius-sm);
}

.afc-footer__name {
	margin: 0;
	color: var(--afc-white);
	font-family: var(--afc-font-display);
	font-size: var(--afc-text-h4);
	font-weight: var(--afc-weight-bold);
	font-variation-settings: var(--afc-display-variation);
}

.afc-footer__description {
	color: var(--afc-color-text-muted-on-dark);
	max-inline-size: 34rem;
	text-wrap: pretty;
}

.afc-footer__license {
	margin: 0;
	color: var(--afc-steel-300);
	text-transform: uppercase;
	letter-spacing: var(--afc-tracking-eyebrow);
	font-size: 0.75rem;
}

.afc-footer__heading {
	margin-block-end: var(--afc-space-xs);
	padding-block-end: var(--afc-space-2xs);
	border-block-end: 1px solid var(--afc-color-border-on-dark);
	color: var(--afc-white);
	font-size: var(--afc-text-body-sm);
	text-transform: uppercase;
	letter-spacing: var(--afc-tracking-eyebrow);
}

.afc-footer__subheading {
	margin: var(--afc-space-md) 0 0.5rem;
	color: var(--afc-white);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: var(--afc-tracking-eyebrow);
}

.afc-footer a {
	color: var(--afc-color-text-muted-on-dark);
	text-decoration: none;
}

.afc-footer a:hover {
	color: var(--afc-white);
	text-decoration: underline;
}

.afc-footer__list,
.afc-footer__profiles {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.afc-footer__list li a,
.afc-footer__profiles li a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-block-size: 2.25rem;
}

.afc-footer__phone a,
.afc-footer__email a,
.afc-footer__address a {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	min-block-size: var(--afc-tap-target);
}

.afc-footer__phone a .afc-icon,
.afc-footer__email a .afc-icon,
.afc-footer__address a .afc-icon {
	flex: 0 0 1.125rem;
	inline-size: 1.125rem;
	block-size: 1.125rem;
	vertical-align: 0;
}

.afc-footer__phone a {
	color: var(--afc-white);
	font-family: var(--afc-font-display);
	font-size: var(--afc-text-h4);
	font-variation-settings: var(--afc-display-variation);
}

.afc-footer__email a {
	color: var(--afc-color-text-muted-on-dark);
	font-size: 0.8125rem;
	line-height: 1.45;
	overflow-wrap: anywhere;
}

.afc-footer__email a .afc-icon {
	flex-basis: 1rem;
	inline-size: 1rem;
	block-size: 1rem;
}

.afc-footer__email a:hover {
	color: var(--afc-white);
}

.afc-footer__phone {
	margin: 0;
}

.afc-footer__email {
	margin: 0;
	margin-block-start: var(--afc-space-2xs);
}

.afc-footer__address {
	/* A long street address must wrap rather than push the column sideways. */
	margin: 0;
	margin-block-start: var(--afc-space-2xs);
	overflow-wrap: break-word;
	font-style: normal;
}

/* Hours are written in plain language from a single settings value. */
.afc-footer__hours-block + .afc-footer__hours-block {
	margin-block-start: var(--afc-space-xs);
}

.afc-footer__hours-days,
.afc-footer__hours-time,
.afc-footer__hours-closed {
	margin: 0;
}

.afc-footer__hours-days {
	color: var(--afc-white);
}

.afc-footer__col--contact,
.afc-footer__col--hours {
	display: flex;
	flex-direction: column;
}

.afc-footer__review-badge {
	align-self: center;
	margin-block-start: auto;
	padding-block-start: var(--afc-space-md);
}

.afc-footer__review-badge a {
	display: inline-block;
	line-height: 0;
	border-radius: var(--afc-radius-sm);
	transition:
		opacity 220ms var(--afc-ease-standard),
		transform 220ms var(--afc-ease-standard);
}

.afc-footer__review-badge a:hover {
	color: inherit;
	opacity: 0.92;
	transform: translateY(-1px);
	text-decoration: none;
}

.afc-footer__review-badge-image {
	display: block;
	inline-size: 100%;
	max-inline-size: 10.5rem;
	block-size: auto;
}

/* ---------------------------------------------------------------------------
 * Service areas
 *
 * A full width band under the four columns, so the county groups get a row of their
 * own rather than being squeezed into a quarter of the footer.
 * ------------------------------------------------------------------------ */

.afc-footer__areas {
	border-block-start: 1px solid var(--afc-color-border-on-dark);
	padding-block: var(--afc-space-lg);
}

.afc-footer__areas-heading {
	margin: 0 0 var(--afc-space-md);
	color: var(--afc-white);
	font-size: var(--afc-text-body-sm);
	text-transform: uppercase;
	letter-spacing: var(--afc-tracking-eyebrow);
}

.afc-footer__areas-grid {
	display: grid;
	gap: var(--afc-space-md) var(--afc-gap-grid);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}

/* Four across at the same width the columns above go four across, so the two rows
   line up rather than nearly lining up. */
@media (min-width: 1024px) {
	.afc-footer__areas-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.afc-footer__areas-county {
	margin: 0 0 var(--afc-space-xs);
	padding-block-end: var(--afc-space-2xs);
	border-block-end: 2px solid var(--afc-color-brand-red);
	color: var(--afc-white);
	font-family: var(--afc-font-display);
	font-size: 0.9375rem;
	font-weight: var(--afc-weight-bold);
	letter-spacing: 0.01em;
}

/*
 * Cities run in two short columns inside each county group, which keeps the band to a
 * few lines deep instead of one long list per county.
 */
.afc-footer__areas-cities {
	margin: 0;
	padding: 0;
	list-style: none;
	columns: 2;
	column-gap: var(--afc-space-md);
	font-size: 0.8125rem;
}

.afc-footer__areas-cities li {
	margin: 0;
	break-inside: avoid;
}

/*
 * A city with a page is a link and looks like one. A city without a page is a span,
 * and it is deliberately dimmer so the two states are visibly different rather than
 * looking like a link that failed.
 */
.afc-footer__areas-cities a {
	display: inline-flex;
	align-items: center;
	min-block-size: 1.9rem;
}

.afc-footer__areas-cities span {
	display: inline-flex;
	align-items: center;
	min-block-size: 1.9rem;
	color: var(--afc-steel-300);
}

.afc-footer__bottom {
	border-block-start: 1px solid var(--afc-color-border-on-dark);
}

.afc-footer__bottom-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem var(--afc-space-md);
	padding-block: var(--afc-space-sm);
	color: var(--afc-steel-300);
	font-size: 0.8125rem;
}

.afc-footer__bottom-inner p {
	margin: 0;
}

.afc-footer__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.afc-footer__legal a {
	min-block-size: 2.25rem;
	display: inline-flex;
	align-items: center;
}

/* ---------------------------------------------------------------------------
 * Sticky mobile call bar
 * ------------------------------------------------------------------------ */

.afc-call-bar {
	display: none;
}

@media (max-width: 899px) {
	body {
		/* Reserve space so the bar never covers page content. */
		padding-block-end: calc(var(--afc-call-bar-height) + env(safe-area-inset-bottom, 0px));
	}

	.afc-call-bar {
		display: block;
		position: fixed;
		inset-inline: 0;
		inset-block-end: 0;
		z-index: var(--afc-z-call-bar);
		padding-block-end: env(safe-area-inset-bottom, 0px);
		padding-inline: env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px);
		background: var(--afc-color-brand-red);
		box-shadow: 0 -6px 20px rgba(7, 13, 32, 0.24);
		transform: translateY(0);
		transition: transform var(--afc-duration) var(--afc-ease-standard);
	}

	/* Hidden while the footer call section is on screen, so the two never stack. */
	.afc-call-bar.is-hidden {
		transform: translateY(110%);
	}

	.afc-call-bar__link {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.6rem;
		min-block-size: var(--afc-call-bar-height);
		padding: 0.5rem 1rem;
		color: var(--afc-white);
		font-weight: var(--afc-weight-bold);
		text-decoration: none;
	}

	.afc-call-bar__link:hover {
		color: var(--afc-white);
	}

	.afc-call-bar__label {
		letter-spacing: 0.02em;
	}

	.afc-call-bar__number {
		font-variant-numeric: tabular-nums;
	}
}