/* ==========================================================================
   OkieNerd — canonical site footer
   Single source of truth. Every page with a footer links this file and must
   NOT carry footer rules in its inline <style> block.

   Palette is declared as footer-scoped custom properties rather than read
   from each page's global vars: the pages disagree about what --paper and
   --dark mean (gift.html flips --paper dark in dark mode, support.html and
   coverage-check.html never define --dark or --line), so inheriting them
   would render an unreadable footer on those pages. The values below are the
   canonical ones already used by the 14 "full footer" pages, so the rendered
   result there is unchanged.
   ========================================================================== */

footer{
  --foot-bg:#142031;
  --foot-fg:#F2ECE0;
  --foot-muted:#5D6B7E;
  --foot-accent:#D2542A;
  --foot-line:rgba(30,42,58,.14);
  --foot-rule:rgba(242,236,224,.14);
  --foot-ink:#1E2A3A;
  --foot-gutter:clamp(22px,5vw,48px);

  margin-top:48px;
  border-top:1px solid #000;
  padding:40px 0 28px;
  background:var(--foot-bg);
  color:var(--foot-fg);
}

html[data-theme="dark"] footer{
  --foot-bg:#080D16;
  --foot-fg:#EDF2F9;
  --foot-muted:#94A1B5;
  --foot-line:rgba(233,238,246,.14);
  --foot-rule:rgba(233,238,246,.14);
  --foot-ink:#E9EEF6;
  border-top-color:rgba(233,238,246,.12);
}

/* ---------- shell ---------- */
.foot-inner{
  max-width:1080px;
  margin:0 auto;
  padding:0 var(--foot-gutter);
}

.foot{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:40px;
  flex-wrap:wrap;              /* bug B: index.html could never stack */
}

/* ---------- brand column ---------- */
.foot-brand{flex:1 1 320px;min-width:0;max-width:560px}

.foot-brand .brand{
  display:flex;
  align-items:center;
  gap:11px;
  text-decoration:none;
  color:var(--foot-fg);
}
.foot-brand .brand b{
  font-family:"Bricolage Grotesque",sans-serif;
  font-weight:800;
  font-size:22px;
  letter-spacing:-.02em;
  color:var(--foot-fg);
}
.foot .mark{height:40px;width:auto;display:block;flex:none}

.servicearea{
  font-size:13px;
  line-height:1.55;
  color:var(--foot-muted);
  margin-top:8px;
  max-width:60ch;
  overflow-wrap:break-word;    /* bug C: long city names in a narrow column */
  word-break:break-word;
  hyphens:auto;
}

/* ---------- contact column ---------- */
.foot-contact{flex:0 0 auto;min-width:0;text-align:right}

.foot-contact a{
  font-family:"JetBrains Mono",monospace;
  font-weight:700;
  font-size:14px;
  text-decoration:none;
  color:var(--foot-fg);
}
.foot-contact a:hover{color:var(--foot-accent)}

.foot-contact .meta{
  font-family:"JetBrains Mono",monospace;
  font-size:13px;
  color:var(--foot-muted);
  overflow-wrap:break-word;
}

/* ---------- social / app store icons ---------- */
.foot-social{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
  margin-top:16px;
}

.fb-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border:1px solid var(--foot-line);
  border-radius:8px;
  color:var(--foot-fg);
  transition:color .14s ease,border-color .14s ease,background .14s ease;
  /* bug E: no margin-top / adjacent-sibling margin — the parent gap owns spacing */
}
.fb-icon:hover{
  color:var(--foot-ink);
  background:var(--foot-accent);
  border-color:var(--foot-accent);
}
.fb-icon:focus-visible{outline:2px solid var(--foot-accent);outline-offset:2px}

/* ---------- legal row ---------- */
.legal{
  margin-top:30px;
  padding-top:18px;
  border-top:1px solid var(--foot-rule);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px 24px;
  flex-wrap:wrap;
  font-family:"JetBrains Mono",monospace;
  font-size:12px;
  color:var(--foot-muted);
}

.legal .links{
  display:flex;
  gap:18px;
  flex-wrap:wrap;              /* bug A: was inline + margin-left phantom indent */
}
.legal a{
  color:var(--foot-muted);
  text-decoration:none;
  font-family:"JetBrains Mono",monospace;
  font-size:12px;
  font-weight:500;
}
.legal a:hover{color:var(--foot-accent)}

/* ==========================================================================
   Responsive: wide -> tablet -> stacked. One breakpoint set for every page.
   ========================================================================== */

/* Tablet / small laptop: keep the two columns but tighten the gutter between
   them so the service-area paragraph does not get squeezed into a ragged
   ribbon before it actually needs to stack. */
@media(max-width:1000px){
  .foot{gap:28px}
  .foot-brand{flex:1 1 280px}
  .servicearea{max-width:52ch}
}

/* Stacked */
@media(max-width:760px){
  footer{padding:32px 0 26px}
  .foot{flex-direction:column;gap:26px}
  .foot-brand{max-width:none}
  .foot-contact{text-align:left}
  .foot-social{justify-content:flex-start}
  .servicearea{max-width:none}
  .legal{justify-content:flex-start;gap:12px 20px}
}

@media(max-width:420px){
  .legal .links{gap:12px 16px}
}