/* ==========================================================================
   Footer (UI-14 desktop / UI-15 mobile)
   Figma desktop node 95:222, mobile node 111:126. Consumes tokens from
   tokens.css only.
   Brand mark: real LOA gold wordmark asset (assets/img/logo-wordmark-*)
   reused from the header build in place of Figma's generic placeholder
   logo+text, on both viewports -- Byrne-confirmed, see content.php.
   Social icons + mail icon: BLOCKED, reserved empty slots at spec
   dimensions -- same policy as every other blocked asset this build.
   Desktop (Offerings/Firm/Concierge) and mobile (Services/Inquiry) link
   columns are genuinely different content, not a restyled duplicate --
   both render in the DOM and are toggled via the --desktop/--mobile
   suffix convention already used in process.css, not a fresh pattern.
   ========================================================================== */

.loa-footer {
	background: var(--loa-footer-bg);
	border-top: var(--loa-footer-border-top);
}

.loa-footer__inner {
	max-width: var(--loa-footer-max);
	margin: 0 auto;
	padding: var(--loa-footer-pad-top) var(--loa-footer-pad-x) var(--loa-footer-pad-bottom);
}

.loa-footer__grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: var(--loa-footer-grid-gap);
}

/* -- Brand block (cols 1-4, shared both viewports) ----------------------- */

.loa-footer__brand {
	grid-column: span 4;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--loa-footer-brand-gap);
}

.loa-footer__wordmark {
	max-width: var(--loa-footer-wordmark-max-w);
	height: auto;
	display: block;
}

.loa-footer__tagline {
	margin: 0;
	max-width: var(--loa-footer-tagline-max);
	color: var(--loa-footer-tagline-color);
	font-family: 'Inter', sans-serif;
	font-weight: 300;
	font-size: var(--loa-footer-tagline-size);
	line-height: var(--loa-footer-tagline-line);
}

.loa-footer__social {
	display: flex;
	gap: var(--loa-footer-social-gap);
}

.loa-footer__social-icon {
	/* BLOCKED asset -- reserved empty slot, spec size */
	display: inline-block;
	width: var(--loa-footer-social-icon-w);
	height: var(--loa-footer-social-icon-h);
}

/* -- Desktop link columns (Offerings / The Firm / Global Concierge) ----- */

.loa-footer__col--desktop {
	grid-column: span 2;
	display: flex;
	flex-direction: column;
	gap: var(--loa-footer-col-gap);
}

.loa-footer__concierge--desktop {
	grid-column: span 4;
	display: flex;
	flex-direction: column;
	gap: var(--loa-footer-concierge-gap);
}

.loa-footer__col-heading {
	margin: 0;
	color: var(--loa-footer-heading-color);
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: var(--loa-footer-heading-size);
	text-transform: uppercase;
	letter-spacing: var(--loa-footer-heading-tracking);
}

.loa-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--loa-footer-link-gap);
}

.loa-footer__links a,
.loa-footer__links .loa-footer__link-btn {
	color: var(--loa-footer-link-color);
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: var(--loa-footer-link-size);
	text-transform: uppercase;
	letter-spacing: var(--loa-footer-link-tracking);
	text-decoration: none;
}

.loa-footer__concierge-copy {
	margin: 0;
	color: var(--loa-footer-concierge-copy-color);
	font-family: 'Inter', sans-serif;
	font-weight: 300;
	font-size: var(--loa-footer-concierge-copy-size);
	line-height: var(--loa-footer-concierge-copy-line);
}

.loa-footer__email-row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.loa-footer__mail-icon {
	/* BLOCKED asset -- reserved empty slot, spec size */
	display: inline-block;
	width: var(--loa-footer-mail-icon-w);
	height: var(--loa-footer-mail-icon-h);
	flex: 0 0 auto;
}

.loa-footer__email {
	color: var(--loa-footer-email-color);
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: var(--loa-footer-email-size);
	letter-spacing: var(--loa-footer-email-tracking);
	text-decoration: none;
	white-space: nowrap;
}

/* -- Mobile link columns (Services / Inquiry) — hidden on desktop ------- */

.loa-footer__col-grid--mobile {
	display: none;
}

/* -- Bottom border row ---------------------------------------------------- */

.loa-footer__bottom {
	max-width: var(--loa-footer-max);
	margin: 0 auto;
	padding: 0 var(--loa-footer-pad-x) var(--loa-footer-pad-bottom);
}

.loa-footer__bottom-inner {
	border-top: var(--loa-footer-bottom-border);
	padding-top: var(--loa-footer-bottom-pad-top);
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
}

.loa-footer__bottom-inner--mobile {
	display: none;
}

.loa-footer__copyright {
	margin: 0;
	color: var(--loa-footer-copyright-color);
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: var(--loa-footer-copyright-size);
	text-transform: uppercase;
	letter-spacing: var(--loa-footer-copyright-tracking);
}

.loa-footer__legal {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: var(--loa-footer-legal-gap);
}

.loa-footer__legal a {
	color: var(--loa-footer-copyright-color);
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: var(--loa-footer-copyright-size);
	text-transform: uppercase;
	letter-spacing: var(--loa-footer-copyright-tracking);
	text-decoration: none;
}

/* ==========================================================================
   UI-15 — Mobile footer. Services/Inquiry columns replace Offerings/
   The Firm/Global Concierge entirely (mobile Figma frame has no
   concierge contact block at all — not an omission).
   ========================================================================== */
@media (max-width: 1024px) {
	.loa-footer {
		background: var(--loa-footer-m-bg);
	}

	.loa-footer__inner {
		max-width: none;
		padding: var(--loa-footer-m-pad-top) var(--loa-footer-m-pad-x) 0;
	}

	.loa-footer__grid {
		display: flex;
		flex-direction: column;
		gap: var(--loa-footer-m-block-gap);
	}

	.loa-footer__brand {
		gap: var(--loa-footer-m-brand-gap);
	}

	.loa-footer__wordmark {
		max-width: var(--loa-footer-m-wordmark-max-w);
	}

	.loa-footer__tagline {
		/* Not present in the mobile Figma frame */
		display: none;
	}

	.loa-footer__social {
		gap: var(--loa-footer-m-social-gap);
	}

	.loa-footer__social-icon {
		width: var(--loa-footer-m-social-icon);
		height: var(--loa-footer-m-social-icon);
	}

	.loa-footer__col--desktop,
	.loa-footer__concierge--desktop {
		display: none;
	}

	.loa-footer__col-grid--mobile {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--loa-footer-m-grid-gap);
	}

	.loa-footer__col-grid--mobile .loa-footer__col-heading {
		color: var(--loa-footer-m-heading-color);
		font-family: 'Inter', sans-serif;
		font-weight: 400;
		font-size: var(--loa-footer-m-heading-size);
		letter-spacing: var(--loa-footer-m-heading-tracking);
		text-transform: uppercase;
	}

	.loa-footer__col-grid--mobile .loa-footer__links {
		gap: var(--loa-footer-m-link-gap);
	}

	.loa-footer__col-grid--mobile .loa-footer__links a,
	.loa-footer__col-grid--mobile .loa-footer__links .loa-footer__link-btn {
		color: var(--loa-footer-m-link-color);
		font-family: 'Inter', sans-serif;
		font-weight: 400;
		font-size: var(--loa-footer-m-link-size);
		text-transform: none;
		letter-spacing: normal;
	}

	.loa-footer__bottom {
		max-width: none;
		padding: 0 var(--loa-footer-m-pad-x) var(--loa-footer-m-pad-bottom);
	}

	.loa-footer__bottom-inner--desktop {
		display: none;
	}

	.loa-footer__bottom-inner--mobile {
		display: flex;
		border-top: var(--loa-footer-bottom-border);
		padding-top: var(--loa-footer-m-bottom-pad-top);
		flex-direction: column;
		gap: var(--loa-footer-m-bottom-gap);
	}

	.loa-footer__bottom-inner--mobile .loa-footer__copyright {
		color: var(--loa-footer-m-copyright-color);
		font-weight: 400;
		text-transform: none;
		letter-spacing: normal;
	}

	.loa-footer__bottom-inner--mobile .loa-footer__legal {
		gap: var(--loa-footer-m-legal-gap);
	}

	.loa-footer__bottom-inner--mobile .loa-footer__legal a {
		color: var(--loa-footer-m-copyright-color);
		font-weight: 400;
		text-transform: none;
		letter-spacing: normal;
		text-decoration: underline;
	}
}

/* A footer entry flagged 'modal' => true renders as <button> rather than
   <a> (see loa_footer_link() in footer.php, 2026-09-08). Both selectors
   above were widened to cover it, so it inherits the identical link
   typography at desktop AND mobile; this rule only strips the browser's
   default button chrome so the two are indistinguishable. */
.loa-footer__link-btn {
	appearance: none;
	-webkit-appearance: none;
	background: none;
	border: 0;
	padding: 0;
	text-align: left;
	cursor: pointer;
}