/* ─────────────────────────────────────────────────────────────────────────────
   ARCANE — SHARED PUBLIC FOOTER STYLES

   Owns the footer bar, its column grid, headings, links and the note line.
   NOTHING ELSE.

   CSS ONLY — THE MARKUP STAYS IN EACH PAGE. There is deliberately no
   footer.js. The footer is the recovery path when the header fails: with
   nav.js blocked, the footer is the only remaining route to Get Started, and
   the only place the phone, email and address appear. A footer that needed
   JavaScript would leave a page with no header, no footer and no way out.
   Each page's Explore column also differs — every footer omits its own page —
   which a single injected footer could not express.

   Tokens are prefixed --foot- and declared here, so this file is
   self-contained and cannot be broken by a page that defines --red or
   --charcoal for its own use.

   ONE DEPENDENCY ON THE HOST PAGE: the markup's inner container is
   <div class="wrap">, and .wrap is the PAGE's layout container — used 8-10
   times per page — so it is not defined here. A page linking this file must
   define .wrap (max-width + horizontal gutter) or the footer will run to the
   viewport edge. That is what keeps the footer aligned with the content above
   it.

   Font families are referenced, never loaded, exactly as nav.css does.
   ───────────────────────────────────────────────────────────────────────── */
:root{
  --foot-charcoal:#1b1d22;
  --foot-red:#b61625;
}

.site-footer{background:var(--foot-charcoal);color:rgba(255,255,255,.72);padding:40px 0 48px;font-size:15px}
.foot-grid{display:grid;gap:22px;grid-template-columns:1fr}
.foot-h{font-family:'Barlow Condensed',Arial,sans-serif;font-size:12px;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.5);margin:0 0 8px}
.site-footer a{color:#fff;text-decoration:none}
/* HOVER/FOCUS: the text stays white and the red moves to the underline.
   As a colour, #b61625 on charcoal is 2.51:1 — it was unreadable as link text
   and only looked deliberate because the links are short. White is 16.86:1 and
   the red still reads as the accent, just carrying no meaning on its own.
   The focus ring is WHITE, not red, unlike the :focus-visible rules on the
   light sections of these pages: a focus indicator is the only thing a
   keyboard user gets, and a 2.51:1 ring on charcoal is not an indicator. */
.site-footer a:hover,
.site-footer a:focus-visible{color:#fff;text-decoration:underline;
  text-decoration-color:var(--foot-red);text-decoration-thickness:2px;text-underline-offset:3px}
.site-footer a:focus-visible{outline:3px solid #fff;outline-offset:3px}
.foot-note{margin-top:28px;padding-top:18px;border-top:1px solid rgba(255,255,255,.1);
  font-size:13px;color:rgba(255,255,255,.46)}

/* Three columns from 620px — the same breakpoint both pages already use for
   their own grids. This rule previously lived MID-WAY through each page's
   620px block, surrounded by unrelated page rules, which is exactly how a
   footer rule gets left behind when the rest is moved. */
@media (min-width:620px){
  .foot-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}