/* Site chrome — header + footer (ALL pages).
 *
 * Horizontal SOT = same as home body: --o2-edge / --o2-edge-end.
 * Do NOT add a second shell (980+gutter) — that drifts chrome vs home sections.
 *
 * Footer (indie): head + Explore / Maker clusters + legal strip.
 *
 * WORD-COLLAPSE LOCK (site-wide chrome rule):
 * Never put `min-width: 0` on text-only nav clusters inside `1fr` grid tracks.
 * That lets the track shrink to the longest *word*, so phrases wrap one word per line
 * (“How it works” → How / it / works). Prefer nowrap link labels + minmax(min-content, 1fr).
 */

/* —— Shared horizontal lock (matches home chapters) —— */
.local-nav-inner,
.page-main,
.page-main--wide,
.footer-head,
.footer-nav,
.footer-legal,
.footer-bar {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: var(--o2-edge);
  padding-right: var(--o2-edge-end);
}

.local-nav-inner {
  height: 100%;
  padding-top: 0;
  padding-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* Header menu links must stay on one line per label */
.local-links a {
  white-space: nowrap;
}

.footer {
  padding: 56px 0 40px;
  border-top: 1px solid var(--o2-line);
  background: var(--o2-paper);
}

.footer-head {
  margin: 0 0 32px;
}

.footer-brand {
  margin: 0 0 8px;
  color: var(--o2-ink);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.footer-tag {
  margin: 0;
  max-width: 28em;
  color: var(--o2-gray);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.35;
}

.footer-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(min-content, 1fr));
  gap: 36px 64px;
  width: 100%;
  margin: 0 0 36px;
  align-items: start;
}

.footer-cluster {
  /* Do NOT use min-width: 0 here — causes word-width collapse */
  min-width: min-content;
}

.footer-col-title {
  margin: 0 0 14px;
  color: var(--o2-ink);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.3;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px 22px;
}

.footer-links a,
.footer-soon {
  flex: 0 0 auto;
  display: inline-block;
  margin: 0;
  color: var(--o2-gray);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.45;
  text-decoration: none;
  white-space: nowrap;
}

.footer-links a:hover {
  color: var(--o2-ink);
  text-decoration: underline;
}

.footer-soon {
  opacity: 0.55;
  cursor: default;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 6px;
  width: 100%;
  margin: 0 0 28px;
  padding-top: 22px;
  border-top: 1px solid var(--o2-line);
}

.footer-legal a {
  flex: 0 0 auto;
  color: var(--o2-gray);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
}

.footer-legal a:hover {
  color: var(--o2-ink);
  text-decoration: underline;
}

.footer-legal a.is-current {
  color: var(--o2-ink);
  font-weight: 600;
}

.footer-sep {
  flex: 0 0 auto;
  color: rgba(110, 110, 115, 0.55);
  font-size: 12px;
  line-height: 1;
  user-select: none;
}

.footer-bar {
  margin: 0;
  padding-top: 0;
  border-top: 0;
}

.footer-bar p {
  margin: 0 0 8px;
  color: var(--o2-gray);
  font-size: 12px;
  line-height: 1.45;
}

.footer-disclaimer {
  max-width: 42em;
  opacity: 0.8;
}

/* Current page pill (header) */
.local-links a.is-current {
  color: var(--o2-ink);
  background: rgba(0, 0, 0, 0.06);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  font-weight: 600;
}

html.is-on-dark .local-links a.is-current {
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
}

.footer-links a.is-current {
  color: var(--o2-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* —— Tablet / phone —— */
@media (max-width: 733px) {
  .local-links {
    left: max(12px, var(--o2-edge));
    right: max(12px, var(--o2-edge-end));
  }

  .footer {
    padding: 44px 0 32px;
  }

  .footer-head {
    margin-bottom: 28px;
  }

  .footer-brand {
    font-size: 19px;
  }

  .footer-tag {
    font-size: 14px;
    max-width: none;
  }

  .footer-nav {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-bottom: 28px;
  }

  .footer-links {
    gap: 12px 18px;
  }

  .footer-links a,
  .footer-soon {
    font-size: 15px;
  }

  .footer-legal {
    gap: 8px 4px;
    margin-bottom: 24px;
    padding-top: 20px;
  }
}