/* CodeTrain site footer. ONE file, loaded by every page that has a footer.
 *
 * The markup is generated: the columns come from FOOTER in
 * control-plane/scripts/gen_learn_pages.py, which writes them into the generated pages and
 * splices them into the hand-written ones between the FOOTER:START / FOOTER:END markers. There
 * used to be six copies of both the markup and these rules, and they had already drifted: the
 * same page was "Courses" in one footer and "All courses" in another, /security was missing from
 * the generated one entirely, and nothing noticed. Edit the generator, run it, and every page
 * moves together.
 *
 * The rules live here rather than in home.css or inside each page's <style> for the same reason.
 * They must also stay out of an inline <style> in index.html specifically: a large inline block
 * is what pushed the homepage <h1> past the first bytes once already, and
 * test_homepage_puts_its_h1_in_the_first_bytes fails at 2048 bytes.
 *
 * The badge bands are NOT here. They are homepage-only, they sit after the generated region and
 * still inside <footer>, and their rules stay in home.css: only / and /index.html carry the
 * badge image hosts in web/_headers, and the generated pages' CSP allows img-src 'self' data:.
 *
 * Tokens: this file may only use the ones EVERY page defines. Generated pages carry a trimmed
 * palette with no --max and no --ease, so the column grid sizes itself and leans on each page's
 * own .wrap for width (860px on generated pages, 1080px on the homepage).
 */

footer {
  padding: 40px 0 34px;
  color: var(--muted);
  font-size: 14px;
  border-top: 1px solid var(--line);
}

/* The columns and the brand block sit side by side and wrap as one unit. */
.ft {
  display: flex;
  flex-wrap: wrap;
  gap: 32px 48px;
  align-items: flex-start;
}

.ft-brand { flex: 1 1 200px; min-width: 180px; }
.ft-home {
  font-family: var(--serif);
  font-size: 19px;
  color: var(--ink);
  text-decoration: none;
}
.ft-by { margin: 6px 0 0; font-size: 13px; }
/* The attribution keeps its own underline so it does not read as body text. */
.ft-by a.ih {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(57, 170, 170, .45);
}
.ft-by a.ih:hover { color: var(--mint); border-color: var(--mint); }

/* Undo the site nav. Every page styles a bare `nav` for the bar at the top: a border-bottom on
   the generated pages, and on the homepage and /solo a STICKY, blurred, z-indexed bar. This is a
   <nav> too, because four labelled link lists are a navigation landmark and screen readers should
   be told so, and without this reset the footer inherited all of it: a stray rule under the
   columns on generated pages, and a footer that would try to stick to the top of the window
   everywhere else. Specificity, not order, is what makes this win. */
footer nav {
  position: static;
  z-index: auto;
  background: none;
  backdrop-filter: none;
  border: 0;
  height: auto;
}

/* Four columns that collapse to two and then to one. A fixed column count would leave the last
   column stranded on a narrow screen, so the breakpoints below step 4 to 2 to 1. The list had NO
   breakpoint at all before this and relied on flex-wrap alone, which is what let 17 links pile
   up into a ragged block. */
.ft-nav {
  flex: 3 1 420px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px 24px;
}

.ft-h {
  margin: 0 0 10px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink);
}

.ft-col ul { list-style: none; margin: 0; padding: 0; }
.ft-col li { margin: 0 0 7px; }

/* One colour for every footer link. Generated pages set a{color:var(--mint)} globally, so their
   footer read teal while the homepage's read grey and the two did not look like one site. */
footer a { color: var(--muted); text-decoration: none; }
footer a:hover { color: var(--ink); }

@media (max-width: 900px) {
  .ft-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); flex-basis: 100%; }
}

@media (max-width: 460px) {
  .ft { gap: 26px; }
  .ft-nav { grid-template-columns: 1fr; gap: 22px; }
}

/* The footer stays dark in light mode, on purpose.

   Every directory badge in it is the vendor's `-dark` variant, chosen to sit on a dark page. On a
   light footer they become a row of dark rectangles with their own backgrounds showing, which
   looks broken rather than styled. The alternatives were swapping fifteen badges for light twins
   that not every vendor publishes, or re-checking each one after any palette change forever.

   A dark footer band under a light page is a normal, deliberate pattern, and it means the badges
   keep working untouched no matter what the rest of the page does. Keep this rule if the palette
   changes again. Hard-coded hex rather than tokens, because the tokens are the LIGHT palette by
   the time this block applies. */
:root[data-theme="light"] footer {
  background: #0a0c10;
  color: #98a3b3;
  border-top-color: #222a35;
}
:root[data-theme="light"] footer a { color: #98a3b3; }
:root[data-theme="light"] footer a:hover { color: #e8ecf2; }
:root[data-theme="light"] footer .ft-home,
:root[data-theme="light"] footer .ft-h { color: #e8ecf2; }
:root[data-theme="light"] footer .badges { border-top-color: #222a35; }
:root[data-theme="light"] footer .ih { color: inherit; border-bottom-color: rgba(57, 170, 170, .45); }