/* Trumis site chrome — styles for the shared header/footer modules.
 *
 * Pairs with scripts/shell.mjs, which writes the markup. The module ships its
 * own CSS so it renders identically no matter what else a page loads: the doc
 * pages load site-2026.css, the guides load site-shell-compact.css, and the
 * SEO landing pages load seo-pages.css. Relying on those was the bug — the
 * guides' footer collapsed into two run-on lines because `footer .cols`
 * (display:flex) lived only in site-2026.css.
 *
 * Every custom property therefore carries a literal fallback, so the chrome is
 * correct standalone and still inherits a page's palette where one exists.
 */

/* ---------------------------------------------------------------- masthead */
/* Spans the 1500px panel, not the content column: the design puts the brand
   32px in from the panel edge and runs the rule to the panel's edges. */
header.top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 32px;
  min-height: 80px;
  background: var(--surface, #ffffff);
  border-bottom: 1px solid var(--rule, #dfe6ea);
  font-family: var(--sans, Inter, ui-sans-serif, -apple-system, sans-serif);
}
header.top .brand {
  display: flex; align-items: center; gap: 11px;
  color: var(--ink, #152333); text-decoration: none; text-transform: none; line-height: 1;
}
header.top .brand::before { content: none; }
header.top .brand .mark {
  display: block; width: 34px; height: 34px; border-radius: 8px; flex: none;
}
header.top .brand .word {
  font-size: 27px; font-weight: 800; letter-spacing: -.035em; line-height: 1;
}
header.top .brand .tag {
  font-size: 11px; color: var(--muted, #5b6b76); letter-spacing: .09em;
  font-weight: 700; text-transform: uppercase; white-space: nowrap;
  padding-left: 14px; border-left: 1px solid var(--rule, #dfe6ea);
  align-self: stretch; display: flex; align-items: center;
}
@media (max-width: 460px) { header.top .brand .tag { display: none; } }

header.top > nav {
  margin-left: auto; display: flex; gap: 8px; align-items: center;
  font-size: 13px; color: var(--ink, #152333);
}
header.top > nav a {
  color: var(--ink, #152333); text-decoration: none; font-weight: 600;
  margin: 0; padding: 9px 12px; border-radius: 8px; white-space: nowrap;
}
header.top > nav a:hover,
header.top > nav a[aria-current="page"] {
  color: var(--teal-deep, #066165); background: var(--teal-tint, #e3f4f2);
  border-bottom: 0;
}
header.top > nav a.btn,
header.top > nav a.btn:hover {
  background: var(--dark, #152333); color: #fff; border: 1px solid var(--dark, #152333);
  font-size: 13px; font-weight: 700; padding: 10px 16px; border-radius: 8px;
}
header.top > nav a.btn:hover { background: #0c1826; border-color: #0c1826; }

/* ------------------------------------------------------------- mobile menu */
.mobile-menu { display: none; }
.mobile-menu summary {
  cursor: pointer; list-style: none; font-size: 13px; font-weight: 700;
  color: var(--ink, #152333); border: 1px solid var(--rule, #dfe6ea);
  border-radius: 8px; padding: 9px 13px;
}
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu summary::after { content: " +"; color: var(--teal, #087f83); }
.mobile-menu[open] summary::after { content: " −"; }
.mobile-menu > nav {
  position: absolute; right: 20px; top: 70px; z-index: 40;
  min-width: 250px; padding: 8px;
  background: var(--surface, #ffffff); border: 1px solid var(--rule, #dfe6ea);
  border-radius: 12px; box-shadow: 0 18px 55px rgba(33, 54, 69, .10);
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
}
.mobile-menu > nav a {
  color: var(--ink, #152333); text-decoration: none; font-size: 14px; font-weight: 600;
  margin: 0; padding: 11px 12px; border-radius: 0;
  border-bottom: 1px solid var(--rule, #dfe6ea);
}
.mobile-menu > nav a:last-child { border-bottom: 0; }
.mobile-menu > nav a.primary {
  background: var(--teal, #087f83); color: #fff; border-radius: 8px;
  margin-top: 8px; border-bottom: 0;
}

@media (max-width: 900px) {
  header.top { padding: 14px 20px; position: relative; }
  header.top > nav { display: none; }
  .mobile-menu { display: block; margin-left: auto; }
  .mobile-menu > nav { right: 20px; top: 66px; }
}

/* -------------------------------------------------------------------- footer
   Light, inside the 1180px content column, closed off by a hairline rule.
   This is the homepage's .h26-foot and the footer every board in the design
   set draws — not the full-bleed dark band the doc pages used to carry. */
footer {
  max-width: 1244px; margin: 64px auto 0; padding: 26px 32px 32px;
  border-top: 1px solid var(--rule, #dfe6ea);
  font-family: var(--sans, Inter, ui-sans-serif, -apple-system, sans-serif);
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 36px;
}
footer a { color: var(--body, #4f616d); text-decoration: none; font-weight: 600; }
footer a:hover { color: var(--teal, #087f83); }
footer p {
  margin: 0; max-width: 60ch; color: var(--muted, #5b6b76);
  font-size: 11px; font-weight: 700; line-height: 1.7;
  letter-spacing: .05em; text-transform: uppercase;
}
footer p + p { margin-top: 12px; font-weight: 400; letter-spacing: .04em; }
/* This is the rule whose absence collapsed the guides footer. */
footer .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* The design's rhythm is a 13px link on a 9px gap, which leaves a 21px hit
   area — under WCAG 2.2's 24px minimum. Moving 4px of that gap inside the
   link keeps the optical spacing identical and clears the target size. */
footer .cols > div { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
footer .cols a { font-size: 13px; padding: 2px 0; }

@media (max-width: 760px) {
  footer { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 24px 20px 32px; }
}