/* ==========================================================================
   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;
  /* Was #5D6B7E, which is 3.0:1 on the --foot-bg band and fails AA. All four
     uses (.servicearea, .foot-contact .meta, .legal a, .foot-hq .hq-note) sit
     on that band, so this only had to get lighter, not warmer: 6.7:1, same
     blue-gray family. */
  --foot-muted:#9AA7BA;
  --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 64px;
  flex-wrap:wrap;              /* bug B: index.html could never stack */
}

/* ---------- brand column ----------
   The column grows into the middle of the footer: a 560px cap and a 60ch paragraph left a
   third of the width empty between the chips and the contact block on a desktop, and the
   left side read as squeezed against the gutter. Only the seam to the contact column is
   fixed; everything on the left runs to it. */
.foot-brand{flex:1 1 320px;min-width:0}

.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}

/* The mark sits beside BOTH lines (wordmark over tagline) rather than above the tagline, so
   the brand reads as one block instead of a logo with a stray sentence under it. Opt-in via
   .brand-stacked on the internal footers only: the customer footer's brand column carries a
   paragraph of service-area copy plus the market chips, which would drag the mark's vertical
   centre halfway down the page. */
.brand-lines{display:flex;flex-direction:column;gap:1px;min-width:0}
.brand-lines .servicearea{margin-top:0}
/* The wordmark inherits the page body's line-height (~1.6), which at 22px hangs ~9px of
   empty leading under the glyphs and reads as a gap the 1px flex gap did not put there.
   Scoped to .brand-lines so only the stacked internal footers tighten. */
.brand-lines b{line-height:1.12}

.servicearea{
  font-size:13px;
  line-height:1.55;
  color:var(--foot-muted);
  margin-top:8px;
  overflow-wrap:break-word;    /* bug C: long city names in a narrow column */
  word-break:break-word;
  hyphens:auto;
  text-wrap:pretty;            /* no near-orphan last word on wide columns */
}

/* ---------- areas we serve ----------
   Replaced the old wall of ~40 plain-text city names. A footer list of city names is the
   textbook keyword-stuffing pattern and search engines discounted it a decade ago; worse,
   it gave a visitor in Tulsa nothing to click. These are links to the per-market pages
   (web/<slug>.html, generated by scripts/build_market_pages.py), so the same footer real
   estate now does internal linking: it gets those pages crawled and passes authority to
   them. Add a chip here when a market page is added, or it will never get discovered. */
.foot-markets{
  /* Inline flow, not flex, so text-wrap:balance can equalize the wrapped rows —
     a flex wrap at wide widths stranded one lone city (Guymon) on the last row. */
  margin-top:14px;
  text-wrap:balance;
}

.foot-markets .fm-label{
  font-family:"Hanken Grotesk",sans-serif;
  font-weight:700;
  font-size:12.5px;
  
  
  color:var(--foot-muted);
  display:block;
  margin-bottom:8px;
}

.foot-markets a{
  font-family:"Hanken Grotesk",sans-serif;
  font-weight:700;
  font-size:13.5px;
  line-height:1;
  text-decoration:none;
  color:var(--foot-fg);
  opacity:.78;
  border:1px solid var(--foot-rule);
  border-radius:999px;
  padding:6px 11px;
  white-space:nowrap;
  display:inline-block;
  margin:0 4px 7px 0;
  transition:color .14s ease,border-color .14s ease,opacity .14s ease;
}
.foot-markets a:hover{opacity:1;color:var(--foot-accent);border-color:var(--foot-accent)}
.foot-markets a:focus-visible{outline:2px solid var(--foot-accent);outline-offset:2px}

/* The market you are currently on renders as a <span>, not a link, because a page linking to
   itself is a crawl dead end. It still has to LOOK like a chip: with no rule at all it fell
   back to bare text and punched a visible hole in the middle of the row. Same geometry as the
   links, accent colouring so it reads as "you are here", and no hover or pointer because it
   is not going anywhere. --foot-accent is the same value in both themes, so the tint is
   hardcoded rather than mixed. */
.foot-markets [aria-current="page"]{
  font-family:"Hanken Grotesk",sans-serif;
  font-weight:700;
  font-size:13.5px;
  line-height:1;
  color:var(--foot-accent);
  border:1px solid var(--foot-accent);
  border-radius:999px;
  padding:6px 11px;
  white-space:nowrap;
  display:inline-block;
  margin:0 4px 7px 0;
  background:rgba(210,84,42,.14);
  cursor:default;
}

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

.foot-contact a{
  font-family:"Hanken Grotesk",sans-serif;
  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:"Hanken Grotesk",sans-serif;
  font-size:15px;
  color:var(--foot-muted);
  overflow-wrap:break-word;
}

/* ---------- social / app store icons ---------- */
/* Two groups, not five loose tiles: .foot-follow (Facebook, Instagram, YouTube) and
   .foot-apps (App Store, Google Play). Only the seam between them is wider, which is enough
   to say they do different things without a label or a divider. Each group is nowrap, so the
   narrowest break this row can take is 3 + 2 at the seam -- never one icon alone on a second
   line, which is what a flat five-tile wrap did on a phone. Five tiles + the seam measure
   212px, inside the 276px a 320px iPhone leaves after the footer gutter, so in practice it
   stays on one line all the way down. */
.foot-social{
  display:flex;
  gap:10px 18px;
  flex-wrap:wrap;
  justify-content:flex-end;
  margin-top:16px;
}

.foot-follow,
.foot-apps{
  display:flex;
  gap:8px;
  flex-wrap:nowrap;
}

.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:"Hanken Grotesk",sans-serif;
  font-size:14px;
  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:"Hanken Grotesk",sans-serif;
  font-size:14px;
  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}
}

/* Stacked */
@media(max-width:760px){
  footer{padding:32px 0 26px}
  .foot{flex-direction:column;gap:26px}
  /* flex-basis follows the MAIN axis, so the 280px above stops being a column
     width here and becomes a column HEIGHT. The customer footer hides it (its
     brand column is taller than 280px anyway), but the hq and backoffice ones
     carry two short lines and were padded out to 280px, leaving ~224px of dead
     space above the phone number. Back to auto so the column is as tall as what
     is in it. */
  .foot-brand{flex:0 1 auto}
  .foot-contact{text-align:left}
  .foot-social{justify-content:flex-start}
  .legal{justify-content:flex-start;gap:12px 20px}
}

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

/* ---------- Nerd HQ line (Nerd HQ + Back Office footers) ----------
   Internal pages, so this is not a marketing number and does not compete with anything: it is
   the one thing on the page somebody might need in a hurry. A Nerd standing on a doorstep and
   a staffer reading the number back down a phone want the same two properties, size and a tap
   target, which is why both footers use it rather than the customer contact block. */
.foot-contact.foot-hq{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:4px;
}

.foot-hq .hq-label{
  font-family:"Hanken Grotesk",sans-serif;
  font-weight:700;
  font-size:12.5px;
  
  
  color:var(--foot-muted);
}

.foot-hq a.hq-number{
  font-family:"Hanken Grotesk",sans-serif;
  font-weight:800;
  /* Deliberately larger than the customer footer's 14px. */
  font-size:clamp(22px,3.4vw,28px);
  line-height:1.05;
  letter-spacing:-.01em;
  text-decoration:none;
  color:var(--foot-fg);
  /* A phone number is the one thing here somebody taps on a phone, so give it a real target
     rather than a text-sized one. */
  display:inline-block;
  padding:6px 0;
  border-bottom:2px solid var(--foot-accent);
}
.foot-hq a.hq-number:hover{color:var(--foot-accent)}
.foot-hq a.hq-number:focus-visible{outline:2px solid var(--foot-accent);outline-offset:3px}

/* Caption for the number, under the number: it says what the line IS, so it is useless
   sitting in the brand column on the other side of the footer. */
.foot-hq .hq-note{
  font-size:13px;
  line-height:1.55;
  color:var(--foot-muted);
  max-width:34ch;
  text-align:right;
}

@media(max-width:760px){
  .foot-contact.foot-hq{align-items:flex-start}
  .foot-hq .hq-note{text-align:left}
}

/* ---------- public lines (back office footer only) ----------
   Three published customer numbers with the market each one reads local to, for a staffer who
   is on a call and being asked which number to hand over. Sits under the two columns as its
   own strip rather than as a third column: three label+number pairs squeezed beside the brand
   and the HQ line is exactly the crowding this is meant to avoid. */
.foot-lines{
  margin-top:26px;
  padding-top:18px;
  border-top:1px solid var(--foot-rule);
}

.foot-lines-label{
  display:block;
  margin-bottom:12px;
  font-family:"Hanken Grotesk",sans-serif;
  font-weight:700;
  font-size:12.5px;
  
  
  color:var(--foot-muted);
}

/* ONE row at every width, never a stack. Three numbers side by side is the shape that answers
   "which of these do I read out"; auto-fit collapsed it to a column on a phone, which is where
   this footer is most often read, and a vertical list of three numbers is just a list. The
   number scales with the viewport instead so three columns always fit. */
.foot-lines-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px clamp(10px,2.4vw,28px);
}

.pub-line{
  display:flex;
  flex-direction:column;
  gap:3px;
  text-decoration:none;
  color:var(--foot-fg);
  min-width:0;
}

.pub-label{
  font-size:clamp(10.5px,2.7vw,12px);
  line-height:1.35;
  color:var(--foot-muted);
}

/* JetBrains Mono runs ~0.6em per glyph, so a 12-character number needs ~7.2em of column. At
   the narrowest phone that is a third of ~350px, hence the 13px floor. */
.pub-number{
  font-family:"Hanken Grotesk",sans-serif;
  font-weight:700;
  font-size:clamp(13px,3.5vw,17px);
  line-height:1.15;
  letter-spacing:-.02em;
  color:var(--foot-fg);
}

.pub-line:hover .pub-number{color:var(--foot-accent)}
.pub-line:focus-visible{outline:2px solid var(--foot-accent);outline-offset:4px;border-radius:3px}