/**
 * GVA — site footer. Ported from the prototype's block 11
 * (docs/REFERENCE.md §2). Enqueued as `gva-site-footer` from inc/enqueue.php.
 */

.site-footer {
	background: var(--black);
	color: #CFCFCF;
	padding: 72px 0 30px;
}

/* The footer container is a grid rather than the shared flow container. */
.site-footer__inner {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 40px;
}

/* ==========================================================================
   1. Brand column
   ========================================================================== */

.site-footer__brand {
	/* The footer lockup is left-aligned, unlike the centred header one. */
	align-items: flex-start;
	gap: 5px;
	margin-bottom: 16px;
}

.site-footer__brand .gva-brand__mark {
	height: 30px;
}

.site-footer__brand .gva-brand__sub {
	font-size: 12px;
	color: var(--white);
	padding-left: 2px;
}

.site-footer__blurb {
	max-width: 38ch;
	font-size: 14px;
	line-height: 1.6;
	color: #9A9A9A;
}

.lang-badges--footer {
	gap: 8px;
	margin-top: 14px;
	font-size: 11px;
	letter-spacing: normal;
	color: var(--text-muted);
}

/* Unlike the header, the footer draws every language identically — the
   prototype gives the current one no extra weight or colour here. */
.lang-badges--footer .lang-badges__lang.is-current {
	color: inherit;
	font-weight: inherit;
}

/* ==========================================================================
   2. Columns
   The prototype marks these headings up as <h6> purely for their size. They
   are real section headings, so production uses <h2> and keeps the type.
   ========================================================================== */

.footer-col__title {
	margin: 0 0 16px;
	font-family: var(--font-mono);
	font-weight: 700;
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--white);
}

.footer-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-list--stacked {
	margin-top: 10px;
}

.footer-list a,
.footer-list__pending {
	font-family: var(--font-sans);
	font-size: 14px;
	color: #9A9A9A;
}

.footer-list a:hover {
	color: var(--white);
}

.footer-contact {
	font-style: normal;
}

/* One icon+label pattern for every footer social row (both LinkedIn rows and
   WhatsApp) — no separate rule per platform. */
.footer-social-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	max-width: 100%;
}

.footer-social-link__icon {
	flex: none;
	color: #9A9A9A;
}

.footer-social-link span {
	overflow-wrap: anywhere;
}

.footer-contact__whatsapp {
	margin-top: 10px;
	font-family: var(--font-sans);
	font-size: 14px;
	color: #9A9A9A;
}

.footer-contact__whatsapp a {
	color: inherit;
}

.footer-contact__whatsapp a:hover {
	color: var(--white);
}

/* ==========================================================================
   3. Legal strip
   ========================================================================== */

.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 16px;
	margin-top: 48px;
	padding-top: 22px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--text-muted);
}

/* The prototype renders the legal links in red, which is the global link
   colour. A destination that does not exist yet keeps the muted
   `footer-list__pending` treatment below, because red reads as clickable. */
.site-footer__legal a {
	color: var(--red);
}

.site-footer__legal a:hover {
	color: var(--red-dark);
}

/* Three full document names ("Privacy Policy · Cookie Policy · Legal Notice")
   do not fit one line on the narrowest phones, so the strip wraps rather than
   widening the page. */
.site-footer__legal-links {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.site-footer__legal .footer-list__pending {
	font-family: inherit;
	font-size: inherit;
	color: inherit;
}

/* Draft marker on a legal link. Only ever rendered for a logged-in user who
   can edit that unpublished Page (inc/legal.php); real text, not an
   aria-only annotation. */
.site-footer__legal-state {
	margin-left: 4px;
	padding: 1px 5px;
	border: 1px solid currentColor;
	border-radius: 3px;
	font-size: 0.85em;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.75;
}

/* ==========================================================================
   4. Responsive — the prototype's own two steps
   ========================================================================== */

@media (max-width: 960px) {
	.site-footer__inner {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 620px) {
	.site-footer__inner {
		grid-template-columns: 1fr;
	}
}