/*
 * Brightway Consultancy — footer.css
 * Site footer — 4-column block + hairline divider + bottom strip.
 * Depends on tokens.css, layout.css, components.css. MASTER.md §10
 * (Section patterns: Footer).
 *
 * Scope (strictly what cannot be expressed with existing primitives):
 *   1. .bwc-footer-brand        — wordmark typography (mirrors the visual
 *                                 treatment of .bwc-nav-brand; duplicated
 *                                 locally to keep nav.css single-purpose —
 *                                 fold into a shared helper in Phase 8 if
 *                                 reused beyond header + footer)
 *   2. .bwc-footer-list         — vertical rhythm for wp_nav_menu output.
 *                                 list-style + padding reset already come
 *                                 from base.css ul[role='list'].
 *   3. .bwc-footer-bottom       — flex row for bottom strip (copyright /
 *                                 group link / LinkedIn icon)
 *
 * Universal contract:
 *   - Logical properties everywhere (margin-block-start, etc.)
 *   - No transitions / animations at this phase (footer is static).
 *   - prefers-reduced-motion handled globally in utilities.css.
 */

/* ===========================================================================
 * 1. Brand wordmark — Fraunces SOFT 10, premium editorial anchor
 * ========================================================================= */

.bwc-footer-brand {
	display: flex;
	align-items: center;
	gap: 0.5rem; /* picto → wordmark rhythm, mirrors .bwc-nav-brand */
}

/* Brand mark — square padlock picto left of the Fraunces wordmark. 26px to
 * sit proportionate to the base-size wordmark; stays beside the text at all
 * widths (flex row, never stacks). Square asset → height drives width. */
.bwc-footer-brand__mark {
	display: block;
	flex: 0 0 auto;
	inline-size: 1.625rem;
	block-size: 1.625rem;
}

.bwc-footer-brand__text {
	font-family: var(--bwc-font-display);
	font-size: var(--bwc-fs-base);
	font-weight: 520;
	font-optical-sizing: auto;
	font-variation-settings: 'SOFT' 10;
	letter-spacing: -0.01em;
	color: var(--bwc-text);
}

/* ===========================================================================
 * 2. Footer menu list — compact vertical rhythm between items
 * ========================================================================= */

.bwc-footer-list li + li {
	margin-block-start: var(--bwc-space-2);
}

.bwc-footer-list a {
	color: var(--bwc-text-muted);
	font-family: var(--bwc-font-body);
	font-size: var(--bwc-fs-sm);
	transition: color var(--bwc-dur-tooltip) var(--bwc-ease-out);
}

@media (hover: hover) and (pointer: fine) {
	.bwc-footer-list a:hover {
		color: var(--bwc-accent-gold);
	}
}

.bwc-footer-list a:focus-visible {
	outline: 2px solid var(--bwc-accent-gold);
	outline-offset: 3px;
}

/* ===========================================================================
 * 3. Bottom strip — copyright / group link / LinkedIn icon row
 *    flex-wrap so the strip stacks gracefully below md without media query
 * ========================================================================= */

.bwc-footer-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--bwc-space-3);
	flex-wrap: wrap;
	margin-block-start: var(--bwc-space-4);
}