/* ============================================================
   Army NCO Prep — marketing site — THE FOOTER'S STYLES. Claude-PE-993.

   One stylesheet for the one footer. The markup is footer.html; sync-footer.js
   writes it into every page, and check-footer.js (workspace) fails if a page
   carries footer markup or footer rules of its own.

   BLOCK 1 is index.html's footer rules, lifted verbatim.
   BLOCK 2 is the landing page's base rules that the footer inherits there
   (links, paragraph margin, the brand, the wrap, line height), scoped to
   footer.site so the footer renders the same on a page whose base rules
   differ. .wrap is SCOPED, never global: index.html uses it all over the page.
   BLOCK 3 is .fcopy, the one new class (the copyright line).
   ============================================================ */

/* ---------- 1 · lifted from index.html ---------- */
footer.site{border-top:1px solid var(--line);background:var(--bg);padding:44px 0 40px;font-size:13.5px;color:var(--muted)}
.foot-top{margin-bottom:28px}
.foot-top .brand{font:500 20px/1.2 var(--serif);color:var(--ink)}
.foot-top .tagline{color:var(--muted);font-size:13.5px;margin-top:6px}
.foot-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;border-top:1px solid var(--line);padding-top:22px}
.legal{font-size:12.5px;line-height:1.5;max-width:62ch;color:var(--muted)}
.flinks{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;justify-content:flex-end;flex:none}
.flinks a{padding:2px 0} .flinks a:hover{color:var(--ink)}

/* ---------- 2 · the landing page's base rules, as the footer sees them ---------- */
footer.site{font-family:var(--sans);line-height:1.55}
footer.site a{color:inherit;text-decoration:none}
footer.site p{margin:0}
footer.site .brand{letter-spacing:-.015em;white-space:nowrap;flex:none}
footer.site .wrap{width:min(var(--content, 1400px), calc(100% - var(--edge, 40px)*2));max-width:none;margin:0 auto;padding:0}

/* ---------- 3 · the copyright line ---------- */
.fcopy{flex:none;white-space:nowrap}

@media (max-width:900px){
  .foot-bottom{flex-direction:column;align-items:flex-start;gap:20px}
  .flinks{justify-content:flex-start}
  footer.site .wrap{width:min(var(--content, 1400px), calc(100% - var(--edge, 40px)*2))}
}