/* ============================================================================
   SWORT shared footer
   ---------------------------------------------------------------------------
   One stylesheet for BOTH footer markup families that exist on the site:
   the homepage/careers/book/projects `.footer-*` set and the entity-page
   `.p-foot-*` set. Rather than rewrite markup on 14 pages, both are bound to
   the same grid, the same type roles, and the same link treatment, so the
   footer behaves identically everywhere. That is the "one consistent system"
   requirement without a risky mass markup change.

   Two defects this fixes
   ----------------------
   1. DESKTOP STACK. `.p-foot-top` and `.p-foot-cols` were both
      `display:flex; flex-wrap:wrap` with a 56px gap and no column sizing. With
      four columns plus the brand block there was never enough room, so the
      columns wrapped one-per-row and the footer ran down the page instead of
      forming a footer. Replaced with an explicit grid that cannot wrap into a
      stack until the viewport genuinely requires it.

   2. COOKIE PREFERENCES TYPOGRAPHY. The consent control is a <button> and
      carried an inline `style="...font:inherit..."` reset. An inline
      declaration outranks a class rule, so it defeated
      `.footer-legal-link { font-size: 10px }` and rendered visibly larger than
      Privacy, Terms, and Security beside it. The inline styles are gone and the
      button reset lives here WITHOUT `font: inherit`, so the shared link class
      owns typography and the button matches its neighbours exactly.
   ========================================================================= */

/* ── Button-as-link reset ──────────────────────────────────────────────────
   Note what is absent: `font: inherit`. That shorthand resets font-size and
   would re-break the bug above. Appearance is neutralised; typography is left
   entirely to the shared link class. */
button.footer-legal-link,
button.footer-link,
.p-foot-col button,
.p-foot-bottom button {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

/* ── Desktop grid, both families ───────────────────────────────────────── */
/* Two tracks: brand block, then the link columns as one cell. Deliberately NOT
   a fixed count of link tracks. A first version hard-coded three, and pages with
   FOUR link columns wrapped the fourth onto a second row, so the columns no
   longer shared a top edge. auto-fit lets the same rule serve 3 and 4 columns. */
.p-foot-top {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(0, 2.6fr);
  align-items: start;
  gap: clamp(1.75rem, 3.5vw, 3.5rem);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--swort-border-dark);
}
.p-foot-cols {
  display: grid;
  grid-column: 2;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  align-items: start;
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
}
.p-foot-col { min-width: 0; }
.p-foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }

/* Consistent link scale across every footer column and the legal row. */
.p-foot-col a, .p-foot-col button,
.p-foot-bottom a, .p-foot-bottom button {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: var(--type-caption);
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--swort-gray);
  text-decoration: none;
}
.p-foot-col a:hover, .p-foot-col button:hover,
.p-foot-bottom a:hover, .p-foot-bottom button:hover { color: var(--swort-white); }

.p-foot-bottom {
  margin-top: var(--space-md);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem clamp(1rem, 2.5vw, 2rem);
}
/* The legal row must wrap gracefully rather than stretch the grid. */
.p-foot-bottom > * { min-width: 0; }

/* Footer height follows content: no viewport-height rule anywhere. */
.p-foot { padding-block: clamp(2.5rem, 5vw, 3.5rem) clamp(1.75rem, 3vw, 2.25rem); }

/* ── Tablet ────────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .p-foot-top { grid-template-columns: 1fr; }
  .p-foot-cols { grid-column: 1; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}
@media (max-width: 720px) {
  .p-foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
}
/* ── Mobile: a clean stack with labelled sections and real tap targets ─── */
@media (max-width: 480px) {
  .p-foot-cols { grid-template-columns: 1fr; }
  .p-foot-col ul { gap: 0.25rem; }
  .p-foot-col a, .p-foot-col button {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }
  .p-foot-bottom { justify-content: flex-start; }
}

/* ── Footer chrome, moved here from page.css so one file owns the footer ─── */
.p-foot {
  background: var(--swort-black);
  color: var(--swort-white-soft);
  border-top: 1px solid var(--swort-border-dark);
  /* ONE structural layer, per the brief's "choose only one". A long shallow
     orbital arc rising from below, at 2.5 to 3.5% alpha. No animation, so
     nothing to pause; no repeated emblem; nothing bright. Applied via the shared
     .bg-orbital-line class rather than a footer-only pattern, so the footer
     speaks the same visual language as the rest of the site. */
  position: relative;
  isolation: isolate;
}
.p-foot > * { position: relative; z-index: 1; }
.p-foot-logo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.5rem;
  letter-spacing: 0.1em;
  color: var(--swort-white-soft);
}
.p-foot-col h3 {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: var(--type-caption);
  font-weight: 400;
  letter-spacing: var(--tracking-mega);
  text-transform: uppercase;
  color: var(--swort-gray);
  margin: 0 0 0.75rem;
}
.p-foot-bottom { color: var(--swort-gray); font-size: var(--type-caption); }

/* ── Footer wordmark ──────────────────────────────────────────────────────
   The actual extracted transparent SWORT wordmark, not type set in Bebas Neue.
   Same asset system as the navigation, at a footer-appropriate size: identity
   stays consistent across nav, footer, and the entity pages while the scale
   differs.

   font-size:0 kills the whitespace baseline the old text rule left behind, and
   the width/height attributes carry the asset's real 736:127 ratio so nothing
   distorts or shifts on load. No border, no background fill: the asset is
   transparent and framing it would reintroduce a visible rectangle. */
.footer-logo, .p-foot-logo {
  display: inline-flex;
  align-items: center;
  font-size: 0;
  line-height: 0;
  letter-spacing: normal;
  padding-block: 2px;
}
.foot-brand-pic { display: block; }
.foot-brand-pic img {
  display: block;
  height: 22px;
  width: auto;
  max-width: none;
  flex: 0 0 auto;
}
.footer-logo:focus-visible, .p-foot-logo:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: 3px;
}


/* The other two footer families need the same stacking plumbing so the shared
   orbital layer sits behind their content rather than over it. Kept here so all
   three families are described in one file. */
footer.bg-orbital-line, .l-foot.bg-orbital-line, .site-footer.bg-orbital-line {
  position: relative;
  isolation: isolate;
}
footer.bg-orbital-line > *, .l-foot.bg-orbital-line > *,
.site-footer.bg-orbital-line > * { position: relative; z-index: 1; }