/* ==========================================================================
   Site footer — template-parts/hh-site-footer.php
   Registered in inc/hh-site-footer.php and printed by the template part
   right before the footer markup (not in <head>), on every page.

   LIGHT ONLY: Pearl, the same canvas as the Locations page, the metro hubs
   and the 404. Mint is the accent line (owner's choice, 2026-10-08: no gold).

   Colour model: every colour resolves through a DESIGN_TOKENS.md (v3.6)
   semantic token with its literal value as the fallback, and the local
   --hh-ft-* aliases are what the rules below consume. Mint is the site's
   newer --color-selection-bg (as in hh-404.css); it is not in v3.6.
   Spacing, type sizes and radii use the v3.6 --space-*, --text-* and
   --radius-* tokens directly, with their literal values as fallbacks.

   Everything is scoped under #footer-outer .hh-footer. Nothing is declared
   on :root and there is no bare element selector, so nothing here leaks.

   Inherited behaviour this file has to defend against:
     1. salient-dynamic-styles.css sets
          #footer-outer, #footer-outer a:not(.nectar-button) { color:#666 !important }
        and #footer-outer { background-color:#fff !important }. The link
        colours below therefore carry !important at a higher specificity
        (1,2,1); the background sits on .hh-footer, which fills the wrapper.
     2. Salient styles bare headings hard (h2 = DM Serif Display 70px, h3
        28px). Every heading below sets family, size, weight, transform,
        spacing and margin explicitly.
     3. A site-wide inline WPCode snippet forces h2 to 40px !important below
        1000px (see hh-metro-hub.css). The group titles undo it with the
        only other !important declarations in this file.
     4. skin-material.css gives every p a bottom padding, and style.css sets
        list-style on the li. Both are reset below.
     5. skin-material.css pads `body #footer-outer .row` 75px, so no element
        here uses the .row, .col or .container classes.

   Fonts are the site's loaded families: Nunito Sans for text, DM Serif
   Display for the tagline (Salient's heading face).
   ========================================================================== */

#footer-outer .hh-footer {

	/* ── Surfaces ────────────────────────────────────────────────── */
	--hh-ft-canvas:     var(--color-pearl,         #f5f0e8);  /* Pearl          */

	/* ── Text ────────────────────────────────────────────────────── */
	--hh-ft-text:       var(--color-text,          #1a1a1a);  /* Primary text   */
	--hh-ft-muted:      var(--color-text-muted,    #666666);  /* Muted, 5.1:1   */
	--hh-ft-heading:    var(--color-primary-dk,    #1e5c41);  /* Forest Shadow  */

	/* ── Action ──────────────────────────────────────────────────── */
	--hh-ft-action:     var(--color-primary,       #277253);  /* Hughston Green */
	--hh-ft-action-fg:  var(--color-pearl,         #f5f0e8);

	/* ── Lines, focus, accent ────────────────────────────────────── */
	--hh-ft-border:     var(--color-border,        #d8d8d8);
	--hh-ft-mint:       var(--color-selection-bg,  #a1d2b9);  /* Mint           */
	--hh-ft-focus:      var(--color-primary-dk,    #1e5c41);

	/* ── Geometry ────────────────────────────────────────────────── */
	--hh-ft-max:        1400px;
	--hh-ft-gutter:     24px;

	/* ── Fonts ───────────────────────────────────────────────────── */
	--hh-ft-sans:       'Nunito Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
	--hh-ft-serif:      'DM Serif Display', Georgia, serif;

	display: block;
	background: var(--hh-ft-canvas);
	border-top: 3px solid var(--hh-ft-mint);
	color: var(--hh-ft-text);
	font-family: var(--hh-ft-sans);
	font-size: var(--text-base, 1rem);
	line-height: 1.5rem;
	text-align: left;
}

#footer-outer .hh-footer *,
#footer-outer .hh-footer *::before,
#footer-outer .hh-footer *::after {
	box-sizing: border-box;
}

/* ── Resets (see 4) ────────────────────────────────────────────── */
#footer-outer .hh-footer ul,
#footer-outer .hh-footer li {
	margin: 0;
	padding: 0;
	list-style: none;
}

#footer-outer .hh-footer li::marker {
	content: '';
}

#footer-outer .hh-footer p {
	margin: 0;
	padding: 0;
}

#footer-outer .hh-footer .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

#footer-outer .hh-footer .hh-ft__inner {
	max-width: var(--hh-ft-max);
	margin-inline: auto;
	padding-inline: var(--hh-ft-gutter);
}

/* ── Links (see 1) ─────────────────────────────────────────────── */
#footer-outer .hh-footer a {
	text-decoration: none;
	transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}

#footer-outer .hh-footer a.hh-ft__link,
#footer-outer .hh-footer a.hh-ft__contact-link {
	color: var(--hh-ft-text) !important;
	text-decoration-line: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

#footer-outer .hh-footer a.hh-ft__link:hover,
#footer-outer .hh-footer a.hh-ft__link:focus-visible,
#footer-outer .hh-footer a.hh-ft__contact-link:hover,
#footer-outer .hh-footer a.hh-ft__contact-link:focus-visible {
	color: var(--hh-ft-action) !important;
	text-decoration-color: var(--hh-ft-mint);
}

#footer-outer .hh-footer a:focus-visible {
	outline: 2px solid var(--hh-ft-focus);
	outline-offset: 3px;
	border-radius: var(--radius-sm, 4px);
}

/* Group titles: small caps-style labels in Forest Shadow (see 2 and 3). */
#footer-outer .hh-footer .hh-ft__title {
	margin: 0 0 var(--space-4, 1rem);
	padding: 0;
	color: var(--hh-ft-heading);
	font-family: var(--hh-ft-sans);
	font-size: var(--text-xs, .75rem);
	font-weight: 700;
	line-height: 1rem;
	letter-spacing: .12em;
	text-transform: uppercase;
}

@media (max-width: 1000px) {
	#footer-outer .hh-footer .hh-ft__title {
		font-size: var(--text-xs, .75rem) !important;
		line-height: 1rem !important;
	}
}

/* ==========================================================================
   Top: brand and contact beside the four link groups
   ========================================================================== */

#footer-outer .hh-footer .hh-ft__top {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-12, 3rem);
	padding-block: var(--space-12, 3rem) var(--space-10, 2.5rem);
}

#footer-outer .hh-footer .hh-ft__brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-4, 1rem);
	min-width: 0;
}

#footer-outer .hh-footer .hh-ft__logo {
	display: inline-block;
	line-height: 0;
}

#footer-outer .hh-footer .hh-ft__logo-img {
	display: block;
	width: 220px;
	max-width: 100%;
	height: auto;
}

#footer-outer .hh-footer .hh-ft__tagline {
	color: var(--hh-ft-heading);
	font-family: var(--hh-ft-serif);
	font-size: var(--text-2xl, 1.5rem);
	font-weight: 400;
	line-height: 2rem;
}

#footer-outer .hh-footer .hh-ft__about {
	max-width: 34ch;
	color: var(--hh-ft-muted);
	font-size: var(--text-sm, .875rem);
	line-height: 1.5;
}

#footer-outer .hh-footer .hh-ft__contact {
	display: grid;
	gap: var(--space-1, .25rem);
	min-width: 0;
	max-width: 100%;
}

#footer-outer .hh-footer a.hh-ft__contact-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2, .5rem);
	min-height: 32px;
	font-size: var(--text-sm, .875rem);
	font-weight: 600;
	overflow-wrap: break-word;
}

#footer-outer .hh-footer .hh-ft__icon {
	flex: none;
	display: block;
	width: 18px;
	height: 18px;
}

#footer-outer .hh-footer a.hh-ft__contact-link .hh-ft__icon {
	color: var(--hh-ft-action);
}

#footer-outer .hh-footer a.hh-ft__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	margin-top: var(--space-2, .5rem);
	padding: 0 var(--space-6, 1.5rem);
	border-radius: var(--radius-pill, 9999px);
	background: var(--hh-ft-action);
	color: var(--hh-ft-action-fg) !important;
	font-size: var(--text-sm, .875rem);
	font-weight: 700;
	letter-spacing: .02em;
	line-height: 1;
}

#footer-outer .hh-footer a.hh-ft__button:hover,
#footer-outer .hh-footer a.hh-ft__button:focus-visible {
	background: var(--hh-ft-heading);
	color: var(--hh-ft-action-fg) !important;
}

/* The four groups: two columns on phones, four from tablet up. */
#footer-outer .hh-footer .hh-ft__nav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-10, 2.5rem) var(--space-6, 1.5rem);
	min-width: 0;
}

#footer-outer .hh-footer .hh-ft__list {
	display: grid;
	gap: var(--space-2, .5rem);
}

#footer-outer .hh-footer .hh-ft__list a.hh-ft__link {
	display: inline-block;
	padding-block: 2px;
	font-size: var(--text-base, 1rem);
	line-height: 1.375;
}

/* ==========================================================================
   Where We Build: the metro hubs by state
   ========================================================================== */

/* The Mint rule is drawn as a background so it stops at the gutters. */
#footer-outer .hh-footer .hh-ft__areas {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-6, 1.5rem);
	padding-block: var(--space-10, 2.5rem);
	background-image: linear-gradient(var(--hh-ft-mint), var(--hh-ft-mint));
	background-size: calc(100% - 2 * var(--hh-ft-gutter)) 2px;
	background-position: top center;
	background-repeat: no-repeat;
}

#footer-outer .hh-footer .hh-ft__areas .hh-ft__title {
	margin: 0;
}

#footer-outer .hh-footer .hh-ft__states {
	display: grid;
	gap: var(--space-6, 1.5rem);
	min-width: 0;
}

#footer-outer .hh-footer .hh-ft__state {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-2, .5rem);
	align-items: baseline;
}

#footer-outer .hh-footer .hh-ft__state-name {
	margin: 0;
	padding: 0;
	color: var(--hh-ft-muted);
	font-family: var(--hh-ft-sans);
	font-size: var(--text-xs, .75rem);
	font-weight: 700;
	line-height: 1rem;
	letter-spacing: .12em;
	text-transform: uppercase;
}

#footer-outer .hh-footer .hh-ft__metros {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2, .5rem) var(--space-6, 1.5rem);
}

/* A Mint dot before every metro, drawn rather than typed so screen readers
   don't announce it. Every item carries one (not just the second onward),
   so a wrapped line never starts with a stray separator. */
#footer-outer .hh-footer .hh-ft__metros li {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2, .5rem);
}

#footer-outer .hh-footer .hh-ft__metros li::before {
	content: '';
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: var(--radius-pill, 9999px);
	background: var(--hh-ft-mint);
}

#footer-outer .hh-footer .hh-ft__metros a.hh-ft__link {
	padding-block: 2px;
	font-size: var(--text-base, 1rem);
	line-height: 1.375;
	white-space: nowrap;
}

#footer-outer .hh-footer a.hh-ft__all {
	justify-self: start;
	color: var(--hh-ft-action) !important;
	font-size: var(--text-sm, .875rem);
	font-weight: 700;
	white-space: nowrap;
	text-decoration-line: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

#footer-outer .hh-footer a.hh-ft__all:hover,
#footer-outer .hh-footer a.hh-ft__all:focus-visible {
	color: var(--hh-ft-heading) !important;
	text-decoration-color: var(--hh-ft-mint);
}

/* ==========================================================================
   Legal bar (the whole footer on the map)
   ========================================================================== */

#footer-outer .hh-footer .hh-ft__legal {
	border-top: 1px solid var(--hh-ft-border);
}

#footer-outer .hh-footer .hh-ft__legal-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-4, 1rem);
	padding-block: var(--space-6, 1.5rem);
}

#footer-outer .hh-footer .hh-ft__copy {
	color: var(--hh-ft-muted);
	font-size: var(--text-sm, .875rem);
	line-height: 1.25rem;
}

/* Equal Housing Opportunity: HUD's logo with the words as real text. */
#footer-outer .hh-footer .hh-ft__eho,
#footer-outer .hh-footer a.hh-ft__eho-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2, .5rem);
}

#footer-outer .hh-footer .hh-ft__eho-logo {
	display: block;
	flex: none;
	width: 38px;
	height: 40px;
}

#footer-outer .hh-footer .hh-ft__eho-text {
	color: var(--hh-ft-text);
	font-size: var(--text-sm, .875rem);
	font-weight: 600;
	line-height: 1.25rem;
}

#footer-outer .hh-footer a.hh-ft__eho-link {
	color: var(--hh-ft-text) !important;
	text-decoration-line: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

#footer-outer .hh-footer a.hh-ft__eho-link:hover .hh-ft__eho-text,
#footer-outer .hh-footer a.hh-ft__eho-link:focus-visible .hh-ft__eho-text {
	color: var(--hh-ft-action);
}

#footer-outer .hh-footer .hh-ft__legal-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2, .5rem) var(--space-6, 1.5rem);
}

#footer-outer .hh-footer .hh-ft__legal-links a.hh-ft__link {
	display: inline-block;
	padding-block: 2px;
	color: var(--hh-ft-muted) !important;
	font-size: var(--text-sm, .875rem);
	line-height: 1.25rem;
}

#footer-outer .hh-footer .hh-ft__legal-links a.hh-ft__link:hover,
#footer-outer .hh-footer .hh-ft__legal-links a.hh-ft__link:focus-visible {
	color: var(--hh-ft-action) !important;
}

#footer-outer .hh-footer .hh-ft__social {
	display: flex;
	gap: var(--space-2, .5rem);
}

#footer-outer .hh-footer a.hh-ft__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--hh-ft-border);
	border-radius: var(--radius-pill, 9999px);
	background: transparent;
	color: var(--hh-ft-heading) !important;
}

#footer-outer .hh-footer a.hh-ft__social-link:hover,
#footer-outer .hh-footer a.hh-ft__social-link:focus-visible {
	border-color: var(--hh-ft-action);
	background: var(--hh-ft-action);
	color: var(--hh-ft-action-fg) !important;
}

/* The map: only the legal bar, kept short because map.js sizes the desktop
   map to the window minus #footer-outer. */
#footer-outer .hh-footer--slim .hh-ft__legal {
	border-top: 0;
}

#footer-outer .hh-footer--slim .hh-ft__legal-inner {
	padding-block: var(--space-3, .75rem);
}

/* ==========================================================================
   Tablet (md, 768px): four link columns, legal bar on one line
   ========================================================================== */

@media (min-width: 768px) {

	#footer-outer .hh-footer .hh-ft__nav {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--space-8, 2rem);
	}

	#footer-outer .hh-footer .hh-ft__state {
		grid-template-columns: 7.5rem minmax(0, 1fr);
		gap: var(--space-4, 1rem);
	}

	#footer-outer .hh-footer .hh-ft__legal-inner {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		column-gap: var(--space-8, 2rem);
	}

	#footer-outer .hh-footer .hh-ft__social {
		margin-left: auto;
	}
}

/* Tablet and small laptop (md to below xl): the brand block runs across the
   top in two columns (story left, contact right) so the four link groups
   below get the full width instead of wrapping every label. */
@media (min-width: 768px) and (max-width: 1279px) {

	#footer-outer .hh-footer .hh-ft__brand {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"logo    contact"
			"tagline contact"
			"about   button";
		column-gap: var(--space-12, 3rem);
		row-gap: var(--space-4, 1rem);
		align-items: start;
	}

	#footer-outer .hh-footer .hh-ft__logo     { grid-area: logo; }
	#footer-outer .hh-footer .hh-ft__tagline  { grid-area: tagline; }
	#footer-outer .hh-footer .hh-ft__about    { grid-area: about; }
	#footer-outer .hh-footer .hh-ft__contact  { grid-area: contact; }

	#footer-outer .hh-footer a.hh-ft__button {
		grid-area: button;
		justify-self: start;
		margin-top: 0;
	}
}

/* lg, 1024px: wider gutters. */
@media (min-width: 1024px) {

	#footer-outer .hh-footer {
		--hh-ft-gutter: 40px;
	}
}

/* ==========================================================================
   Desktop (xl, 1280px): brand beside the groups; areas in three columns
   ========================================================================== */

@media (min-width: 1280px) {

	#footer-outer .hh-footer .hh-ft__top {
		grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
		gap: var(--space-16, 4rem);
		padding-block: var(--space-16, 4rem) var(--space-12, 3rem);
	}

	#footer-outer .hh-footer .hh-ft__areas {
		grid-template-columns: minmax(280px, 340px) minmax(0, 1fr) auto;
		column-gap: var(--space-16, 4rem);
		align-items: baseline;
	}
}

/* Phones: a slightly tighter gutter. */
@media (max-width: 767px) {

	#footer-outer .hh-footer {
		--hh-ft-gutter: 20px;
	}
}

@media (prefers-reduced-motion: reduce) {

	#footer-outer .hh-footer a {
		transition: none;
	}
}