/* ============================================================================
   FOOTER — the one copy.

   Before this file there were eleven: nine inline blocks in nine page <style>
   elements, one in css/system.css, and book.html's own three-item strip. They
   had drifted apart. Link text was 15px on two pages and 14px on six; the
   column label was 12px on seven and 11px on two; the legal gap was 2px here
   and 6px there; index alone had a 1280 nowrap row the others did not. Adding
   a sixth column to eleven divergent copies by hand is how a footer stays
   broken, so all eleven are deleted and every page links this instead.

   Two things make it portable. Every custom property carries a literal
   fallback, because six pages (404, book, clarity-worksheet, setupguide,
   starter, topup) define their own :root and cannot take system.css. And the
   container reads `var(--shell, 1100px)`, so the seven pages that set --shell
   keep their 1320px footer while the rest keep their 1100px one, exactly as
   they do today.

   Six columns, not five. The old 1280 rule put brand and links on one nowrap
   row with a fixed 260px brand and 64px gutters, which left about 104px a
   column once a sixth arrived, and "Systems & Integrations" does not fit in
   104px. The brand is its own full-width row from 768 up and the five link
   columns share the row beneath it, three and two below 1100 and five abreast
   above it.
   ========================================================================= */

#footer {
  background-color: var(--bg-primary, #0B0F0E);
  border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.05));
  padding-top: 96px;
  padding-bottom: 64px;
  position: relative;
  z-index: 1;
}

.footer-inner {
  max-width: var(--shell, 1100px);
  margin: 0 auto;
  padding: 0 24px;
}

.footer-cols {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl, 48px);
  padding-bottom: var(--space-2xl, 48px);
  border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.05));
}

/* 12px, up from 11. Uppercase mono at 0.1em tracking is the smallest thing on
   the page by a distance, and at 11px on a #0B0F0E ground these labels were
   closer to texture than to headings. */
.footer-col-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary, #8A9590);
  margin-bottom: var(--space-sm, 8px);
}

.footer-logo-lockup {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-social {
  display: flex;
  align-items: center;
  gap: 18px;
}

.footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #566159;
  transition: color 0.18s ease;
  flex-shrink: 0;
}

.footer-social-link:hover { color: var(--accent-green, #28C98E); }
.footer-social-link:focus-visible { outline: 2px solid var(--accent-green, #28C98E); outline-offset: 3px; border-radius: 2px; }

.footer-social-link svg {
  width: 24px;
  height: 24px;
  display: block;
}

/* 15px with a line-height and two pixels of padding. The links are
   `display: block`, so on the default `normal` line-height a stacked column
   ran at roughly 17px a row: one grey mass rather than separate links, and a
   17px tap target on a phone. 15/1.5 plus 2px either side puts a row at about
   26px, which is still a footer and no longer a thicket. */
.footer-link {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-secondary, #8A9590);
  text-decoration: none;
  transition: color 0.18s ease;
  display: block;
  padding: 2px 0;
}

.footer-link:hover { color: var(--text-primary, #E8EDEA); }
.footer-link:focus-visible { outline: 2px solid var(--accent-green, #28C98E); outline-offset: 2px; }

/* The links carry 2px of padding each, so a larger gap here would put the
   legal pair further apart than any other pair in the footer for no reason. */
.footer-legal-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.footer-bottom {
  padding-top: var(--space-xl, 32px);
  text-align: center;
}

.footer-copy {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: var(--text-secondary, #8A9590);
}

/* Brand takes its own row from 768 up. The five link columns cannot fit
   abreast in the 672px left at 768, so they go three and two, on a fixed
   third rather than a flex basis: on a basis they reflowed to four and one at
   840, which puts a 744px Legal column under three 149px ones. Three and two
   holds from 768 to 1099. */
@media (min-width: 768px) {
  .footer-inner { padding: 0 48px; }
  .footer-cols {
    flex-direction: row;
    flex-wrap: wrap;
    row-gap: 48px;
    column-gap: 40px;
  }
  .footer-col:first-child { flex: 0 0 100%; }
  .footer-col:not(:first-child) { flex: 0 0 calc((100% - 80px) / 3); }
  .footer-bottom { text-align: left; }
}

/* Five abreast from 1100, not 1024, and content-sized rather than equal
   fifths. An equal fifth of 1024 is 154px and three of the labels are longer
   than that, so equal columns broke "Systems & Integrations" and
   "Self-managed receptionist" across two lines at every width from 1024 up.
   Sized to their content the five come to about 890px including gaps, which
   sits comfortably at 1100 and would have been within 40px of the edge at
   1024. flex-wrap stays on, so if a font ever renders wider than measured the
   row drops a column instead of running off the page. */
@media (min-width: 1100px) {
  .footer-cols { justify-content: space-between; }
  .footer-col:not(:first-child) { flex: 0 0 auto; }
  .footer-link { white-space: nowrap; }
}

@media (min-width: 1280px) {
  .footer-inner { padding: 0 64px; }
}

@media (max-width: 767px) {
  #footer { padding-top: 48px; padding-bottom: 40px; }
}