/* Chain Drain — shared site footer / nav bar.
   The homepage footer (Figma node 55:160-164), extracted so EVERY page shows the
   same bar, edited in one place. Markup is injected by js/site-footer.js — to add
   the bar to a page, include both and nothing else:
     <link rel="stylesheet" href="/css/site-footer.css">
     <script src="/js/site-footer.js" defer></script>
   Depends on tokens.css (--grid-cols / --margin / --gutter / --font-body). */

:root { --pdf-footer-h: 69px; }        /* height reserved below page content */

.pdf-footer {
  --pdf-footer-bg: var(--color-footer-grey);
  --pdf-footer-ink: var(--color-ink);
}
/* Research page + dossier pages use the warm paper footer bar (scoped so other
   pages keep the default grey). Dossier pages are identified by body[data-company]
   (baked by build_dossier_pages.py). */
body.research .pdf-footer,
body[data-company] .pdf-footer {
  --pdf-footer-bg: var(--color-paper);
}
.pdf-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;                         /* above content, hover drawers, old logos */
  display: grid;
  /* Equal tracks: the col-5 logo must not widen its track, or cols 2/3 drift. */
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: center;
  min-height: 69px;
  padding: 12px var(--margin);
  background: var(--pdf-footer-bg);
  color: var(--pdf-footer-ink);
  /* Bar and field are both white now, so the separation is a crisp rule —
     the guide's soft-wash/hard-edge pairing. */
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: clamp(12px, 1.05vw, 15px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
  box-sizing: border-box;
}

.pdf-footer a { color: inherit; }

.pdf-footer__brand {
  grid-column: 1;
  font-weight: 700;
  letter-spacing: var(--track-kicker);
  white-space: nowrap;
  text-decoration: none;              /* links to the homepage; no underline, even on hover */
}

.pdf-footer__link {
  text-decoration: none;              /* plain text; underlines only on hover/focus */
  white-space: nowrap;
}
.pdf-footer__link:hover,
.pdf-footer__link:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-position: from-font;
}
.pdf-footer__link--paper { grid-column: 2; }
.pdf-footer__link--db    { grid-column: 3; }
.pdf-footer__link--notes { grid-column: 4; }

/* An UNLISTED destination: live, crawlable and in the sitemap, but not offered
   in the nav. `display: none` rather than a visual trick, so it is out of the
   tab order and out of the accessibility tree too — a link nobody can see
   should not be one a screen reader announces. */
.pdf-footer__link.is-unlisted { display: none; }
/* Local-only shortcut to /admin/ (see js/site-footer.js). It used to own column
   4 — the one free track — but that is Notes' now, so Admin shares column 5 with
   the logo: the logo is justify-self:end there, Admin is start, and they sit at
   opposite ends of the same track without colliding. Keeps the three public
   links on the Figma 5-track alignment. */
.pdf-footer__link--admin { grid-column: 5; justify-self: start; }

/* ---- local dev only: six items on one line ----------------------------------
   js/site-footer.js adds an Admin link when the page is on a local host, so the
   bar carries SIX items instead of five and the equal-fifths Figma grid runs
   out of tracks — Admin ends up sharing column 5 with the logo and they
   collide. When that link is present, abandon the track alignment (it cannot
   hold six items anyway) and lay the bar out content-sized with flex so
   everything stays on one line: the links size to their text, the logo takes
   the slack via margin-left:auto, and the type tightens a step to buy room.

   Flex also makes this a clean override — grid-column / justify-self are simply
   inert in a flex container, so none of the column assignments above need
   undoing.

   This NEVER fires on the deployed site: the baked footer in build_pages.py has
   no Admin link, so :has() finds nothing and the grid layout stands. Wide
   layout only — below 769px the footer deliberately stacks into two rows. */
@media (min-width: 769px) {
  .pdf-footer:has(.pdf-footer__link--admin) {
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.7vw, 22px);
    font-size: clamp(11px, 0.95vw, 13px);
    letter-spacing: 0.04em;
  }
  .pdf-footer:has(.pdf-footer__link--admin) .pdf-footer__logo {
    margin-left: auto;               /* logo keeps the right edge */
  }
}

/* You-are-here: the current section's link is BOLD. Set by build_pages.py on
   the baked bar and by js/site-footer.js on the injected one — both use the
   same rule, so a page bolds the same word either way. Weight only: the bar is
   uppercase mono on a flat ground, where a colour shift at 12–15px would be
   far weaker than a weight change (and the base hues are too light for small
   type — CLAUDE.md). */
.pdf-footer__link.is-here { font-weight: 700; }

/* Link labels have a full + short variant; short is hidden until phones. */
.pdf-label--short { display: none; }

.pdf-footer__logo {
  grid-column: 5;                     /* logo sits in column 5 (Figma x≈1214, w≈278) */
  justify-self: end;
  display: block;
  height: 28px;                       /* fixed size — does not shrink with the window */
}
.pdf-footer__logo img {               /* the SVG fills the (linked) logo box */
  display: block;
  height: 100%;
  width: auto;
}

/* Reserve space so page content isn't hidden behind the fixed bar. Every page
   the injector touches gets .has-site-footer on <body>. */
body.has-site-footer { padding-bottom: var(--pdf-footer-h); }

/* Data-page hover drawers are anchored to the viewport bottom — lift them so
   they clear the footer instead of hiding behind it. (No-ops on pages w/o drawers.)
   WIDE LAYOUT ONLY: below 768px the drawers are modal bottom sheets that render in
   the top layer (above the fixed footer) and must sit flush to the window bottom,
   so this lift must not apply there — otherwise the sheet floats a footer-height
   gap off the bottom. Matches home.js's wide() / the sheet's (max-width:768px). */
@media (min-width: 769px) {
  body.has-site-footer .drawer { bottom: calc(40px + var(--pdf-footer-h)); }
  body.has-site-footer .drawer--2col:not(.drawer--center),
  body.has-site-footer .drawer--center,
  body.has-site-footer .drawer--marquee { bottom: var(--pdf-footer-h); }
  body.has-site-footer .drawer--marquee { height: calc(100vh - var(--pdf-footer-h)); }
}

/* ---- small screens: footer collapses to two rows (brand + links, then logo) ---- */
@media (max-width: 768px) {
  :root { --pdf-footer-h: 110px; }
  .pdf-footer {
    grid-template-columns: auto auto auto auto 1fr;  /* brand · 3 links · spacer */
    column-gap: clamp(14px, 4vw, 24px);
    row-gap: 12px;
  }
  .pdf-footer__brand       { grid-row: 1; grid-column: 1; }
  .pdf-footer__link--paper { grid-row: 1; grid-column: 2; }
  .pdf-footer__link--db    { grid-row: 1; grid-column: 3; }
  .pdf-footer__link--notes { grid-row: 1; grid-column: 4; }
  /* Admin is local-only, so on phones it takes the spacer track rather than
     forcing a sixth column that ships empty for every real visitor. */
  .pdf-footer__link--admin { grid-row: 1; grid-column: 5; justify-self: start; }
  .pdf-footer__logo {
    grid-row: 2;
    grid-column: 1 / -1;               /* logo drops to its own line */
    justify-self: start;
    width: auto;
    height: 19.6px;                    /* 28px − 30% once the footer stacks */
    max-width: 100%;                   /* shrink only if the row can't hold it */
  }
}

/* ---- phones: shorten link labels so brand + links stay on one line ---- */
@media (max-width: 600px) {
  .pdf-label--full  { display: none; }
  .pdf-label--short { display: inline; }
}