/* footer.css — canonical site-wide footer styling
*
* Created 2026-06-01 as Phase 1 of the footer-consolidation refactor
* (see docs/decisions/footer-consolidation-plan.md). Replaces 7 divergent
* per-page
*
* This file owns DESKTOP styling. Mobile rules live in mobile-responsive.css
* under the [FOOTER] tag — those @media rules can now match specificity
* with this file (both at the (0,1,1) level) and win on cascade order
* because mobile-responsive.css loads after footer.css.
*
* The !important armor on mobile-responsive.css footer rules can be
* removed in the same commit as this file lands. That's the actual
* payoff.
*/
/* ============================================================
LAYOUT — the .footer-inner grid container
============================================================ */
footer {
padding: 60px 40px 40px;
border-top: 1px solid var(--border, #eee);
}
.footer-inner {
max-width: 1200px;
margin: 0 auto;
/* 2fr for brand + auto-fit link columns. The minmax(140px, 1fr)
means columns are at minimum 140px wide and grow to fill available
space, so pages with 3 / 4 / 5 link columns all render reasonably:
3 cols → wide spacious columns
4 cols → comfortable
5 cols → tighter but still legible
Once Phase 2 content normalization folds Partners into Company,
every page lands on 3 link columns and the layout becomes uniform. */
/* 2026-06-02 (Mack SS1+SS2 hotfix): hardcoded 4-column grid (brand
+ 3 link cols). The previous `2fr repeat(auto-fit, minmax(140px,
1fr))` regressed the desktop layout — auto-fit collapsed the
auto-tracks to 0 in some renders, leaving the entire footer
stacked as one column. The canonical 4-col layout is fixed
(brand + Service + Company + Couriers per founder decision Q1,
locked Phase 2), so we don't need the flexibility auto-fit
provided. */
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 40px;
}
/* ============================================================
BRAND BLOCK — first column with logo / wordmark + tagline
============================================================ */
/* 2026-06-01 (EY P1 followup): CSS variable fallbacks added below.
var(--gold), var(--text-muted), and var(--text-secondary) live in
grailguard-theme.css. If that stylesheet ever fails to load
(CDN hiccup, blocked-resource error, AdBlock-style filter list),
the footer text would otherwise render with the browser default
(black on whatever the background is) — which can become invisible
on dark or off-white backgrounds. Fallback hex values keep the
footer readable in every failure mode. */
.footer-brand h3,
.footer-brand .logo {
color: var(--gold, #c8a84e);
margin: 0 0 8px;
}
.footer-brand p {
font-size: 13px;
color: var(--text-muted, #6b7280);
margin-top: 12px;
line-height: 1.6;
max-width: 280px;
}
/* ============================================================
LINK COLUMNS — headings + the link list under each
============================================================ */
.footer-col h4 {
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
margin: 0 0 16px;
color: var(--text-secondary, #4b5563);
}
.footer-col a {
display: block;
color: var(--text-muted, #6b7280);
text-decoration: none;
font-size: 14px;
margin-bottom: 10px;
transition: color .2s, text-decoration-color .2s;
}
/* Gold-on-hover + underline. The underline does double duty as a
colorblind-safe interactive-state indicator (WCAG 1.4.1) — anyone
who doesn't perceive the gold shift still gets a clear visual
change. :focus-visible covers keyboard navigation parity. */
.footer-col a:hover,
.footer-col a:focus-visible {
color: var(--gold, #c8a84e);
text-decoration: underline;
}
/* ============================================================
FOOTER-BOTTOM — © line + Terms · Privacy · etc.
============================================================ */
.footer-bottom {
max-width: 1200px;
margin: 40px auto 0;
padding-top: 24px;
border-top: 1px solid var(--border, #eee);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
.footer-bottom p {
font-size: 12px;
color: var(--text-muted, #6b7280);
margin: 0;
}
/* 2026-06-02 (Mack SS1+SS2 hotfix): the legal strip
(Terms · Privacy · Insurance Policy · Claims Transparency)
was wrapping with each anchor + each middot text-node on its own
line on narrow widths. Inline anchors with text-node middots
between them were getting split mid-flow at the wrong places.
Wrapping the legal-strip as a flex-wrap row keeps the
anchors + middots flowing as natural groups instead of stacking.
The :nth-of-type(2) targets the second
(the legal-link line),
leaving the first
(© line) alone since it's a single text
block. align-items:baseline keeps the middots visually centered
with the anchor text. row-gap:4px gives multi-line wraps a bit
of breathing room; column-gap:0 because the anchors carry their
own padding for spacing. */
.footer-bottom p:nth-of-type(2) {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: baseline;
row-gap: 4px;
column-gap: 0;
}
.footer-bottom a {
display: inline-block;
/* white-space: nowrap so multi-word link labels like
"Insurance Policy" + "Claims Transparency" never break mid-
label. Each anchor is a single unbreakable token. */
white-space: nowrap;
padding: 0 8px;
color: var(--text-muted, #6b7280);
text-decoration: none;
transition: color .2s, text-decoration-color .2s;
}
.footer-bottom a:hover,
.footer-bottom a:focus-visible {
color: var(--gold, #c8a84e);
text-decoration: underline;
}