/* 06 — Footer
Owns: .fl-page-footer
Depends on: 01-tokens, 02-base
Markup contract (confirmed against the live page — bb-theme's
footer.php / footer-col1.php / footer-col2.php, config
fl-footer-layout: 2-cols, fl-footer-col2-layout: menu):
Two brief-vs-DOM mismatches fixed here:
1. `.fl-page-footer-nav ul` (task-9-brief.md) matches nothing —
`.fl-page-footer-nav` IS the itself (see footer_col2() /
footer-col2.php), not a wrapper div containing one. Written
directly against `.fl-page-footer-nav`.
2. base-4's `.navbar-nav` (also carried on this same ) sets
`flex-direction: column` by default and only flips to `row`
inside `.navbar-expand-*` compound selectors (confirmed in
base-4.min.css) — this has no `.navbar-expand-*` ancestor,
so without an explicit `flex-direction: row` here the footer
menu would stay a vertical list at every width, silently
failing the "menu wraps rather than overflows" requirement.
Added below.
The brief's mobile `text-align: center` on `.fl-page-footer-row` is
dropped: the two column divs above carry Bootstrap's own
`.text-left`/`.text-right` utility classes, hard-coded directly on
them by the PHP templates above, and base-4 defines both at forced
priority (`.text-left{text-align:left` + the bang-important flag`}`,
confirmed in base-4.min.css). A value set directly on an element
always wins over one inherited from an ancestor, so `text-align:
center` on the row could never reach those divs even before
considering specificity — and the forced-priority flag is
off-limits in this file per the harness's important-discipline
check, so it can't be forced either.
RESOLVED 2026-09-12, and no longer an open flag: the override
now lives in 99-utilities.css, the one file permitted
!important, scoped to `.fl-page-footer-row .text-left/.text-right`
inside the same max-width: 767px breakpoint. It wins on
specificity (0-2-0 against base-4's 0-1-0) rather than on load
order. See that file for the full reasoning. Everything said
above about why it cannot be done HERE still holds — do not try
to move it back into this file. */
/* The darker of the two footer bands. The hairline above it is what separates
the two — they are close enough in value that without it they read as one
slab, which is why border-top is no longer `none`. */
.fl-page-footer {
background-color: var(--footer-bar-bg);
border-top: 1px solid var(--footer-rule);
padding: var(--section-narrow-padding) 0;
color: var(--footer-text);
font-size: 0.875rem;
}
/* The copyright block's link (the Radical Webs credit) keeps its underline —
it sits inside a sentence, where an underline is the thing marking it as a
link. The footer MENU below is the opposite case and overrides this. */
.fl-page-footer a { color: var(--footer-text); text-decoration: underline; }
.fl-page-footer a:hover, .fl-page-footer a:focus { color: var(--accent); }
.fl-page-footer-text { line-height: 1.7; }
.fl-page-footer-nav {
display: flex;
flex-direction: row;
flex-wrap: wrap;
/* Pushed to the right edge rather than relying on the column's .text-right
utility: this is a flex container, and text-right cannot position
flex items — the same finding recorded for .fl-social-icons in
03-topbar.css. Without this the buttons bunch at the left of a
right-aligned column, which looks like the alignment simply failed. */
justify-content: flex-end;
gap: var(--gutter);
list-style: none;
margin: 0;
padding: 0;
}
/* ── Footer menu as outlined buttons ────────────────────────
Per the approved mockup: PRIVACY and TERMS as bordered boxes rather than
plain links.
Written for ANY number of items — the menu has one today (Privacy Policy)
and a second is coming. Nothing here counts them, and flex-wrap means a
third or fourth drops to a new line rather than overflowing.
Deliberately NOT reusing .btn / .btn-outline-neutral from 02-base.css. Those
are sized for calls to action and would dominate a footer bar, and applying
them would mean either typing a class into the WordPress menu item's CSS
field — which puts presentation in the database where a clone cannot carry
it — or duplicating the button rules here anyway. This is a smaller, quieter
shape that happens to share an idea with them. */
.fl-page-footer-nav .nav-link {
display: block;
padding: 0.55rem 1.1rem;
border: 1px solid var(--footer-rule);
border-radius: var(--card-border-radius, 4px);
color: var(--footer-text);
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
/* Overrides the underline set on .fl-page-footer a above. These read as
buttons; the border is the affordance. */
text-decoration: none;
white-space: nowrap;
transition: var(--transition-base);
}
.fl-page-footer-nav .nav-link:hover,
.fl-page-footer-nav .nav-link:focus-visible {
border-color: var(--surface);
background-color: var(--surface);
color: var(--footer-bar-bg);
text-decoration: none;
}
@media (max-width: 767px) {
.fl-page-footer-row { flex-direction: column; gap: var(--gutter); }
.fl-page-footer-nav { justify-content: center; }
}