/* Column layout so a short page still puts the footer on the bottom edge
   rather than halfway up the screen. */
body { margin: 0; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
main { display: block; width: 100%; max-width: 72.5rem; margin: 0 auto; padding: 0 var(--space-6); flex: 1 0 auto; }
.site-footer { flex: none; }

/* Banner and header travel together as one sticky block. They are wrapped so
   the two cannot drift apart or overlap: `top: 0` on each would stack them on
   top of each other, and stacking them by height would need a magic number
   that the banner's own wrapping breaks the moment the text is scaled. */
.site-top { position: sticky; top: 0; z-index: 50; background: var(--color-bg); }
/* Keep anchor targets and keyboard focus clear of the sticky block. The height
   is measured in theme.js because the bar wraps and grows with the text scale;
   the fallback covers the moment before that runs and the no-JS case. */
html { scroll-padding-top: calc(var(--site-top-h, 5rem) + var(--space-3)); }
.notification-bar[hidden] { display: none; }
/* Header and footer span the viewport; only the content column is measured.
   The bar wraps: it is a non-wrapping flex row by default, which at large text
   sizes on a narrow screen pushes the theme toggle off the right edge and
   scrolls the whole page sideways. */
.nav { width: 100%; padding-inline: var(--space-6); flex-wrap: wrap; row-gap: var(--space-2); }

/* The brand is the wordmark now, not a word. It is sized in `em` off the
   brand's own font-size so it keeps tracking the accessibility panel's text
   scale exactly as the text it replaced did. 9.5em is the width at which the
   letters match the old 1.125rem wordmark; the artwork's box is ~3x taller
   than its cap height, because the ring reaches well above and below the
   letters, so sizing on the box would have drawn them far too small.

   Width rather than height, with `max-width`, so the mark shrinks instead of
   pushing the bar sideways on a narrow screen at a large text scale — the row
   wraps, but a single item wider than the viewport cannot wrap. */
.nav-brand { display: flex; align-items: center; min-width: 0; }
.nav-brand-mark { display: block; min-width: 0; }
.nav-brand svg {
  display: block; width: 9.5em; height: auto; max-width: 100%;
  /* The mark is one flat colour and it is the header's own text colour, in
     every palette — the a11y layer remaps --color-text for its high-contrast
     and sepia themes too. Pinning it here also keeps `.nav a:hover`'s accent
     blue off the logo: a wordmark should not change colour on hover. */
  color: var(--color-text);
}
.nav-brand:hover svg { opacity: 0.75; }
.icn { width: 1.25rem; height: 1.25rem; flex: none; color: var(--color-accent); }
.icn-lg { width: 1.75rem; height: 1.75rem; }
.icn-sm { width: 0.875rem; height: 0.875rem; opacity: .6; }
.icn-accent { color: var(--color-accent); }
.lang-switch { font-size: 1rem; display: inline-flex; gap: 0.375rem; }
.lang-switch a { color: var(--color-text); }
.lang-switch a:first-child { font-weight: 600; }

/* Full-bleed: it used to sit inside <main> and fake full width with negative
   margins the width of main's padding, which only worked while main filled the
   viewport. It is a sibling of the header now, so it needs no trickery. */
.notification-bar {
  background: var(--color-accent-100); color: var(--color-accent-800);
  border-bottom: 1px solid var(--color-divider);
  width: 100%;
  padding: var(--space-2) var(--space-6);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: 0.8125rem;
}
.notification-bar .icn { color: inherit; }
.notification-bar a { color: inherit; font-weight: 600; }
.notification-dismiss { margin-left: auto; background: none; border: none; color: inherit; font-size: 1rem; line-height: 1; cursor: pointer; }

.hero { max-width: 40rem; margin: 0 auto; padding: 4rem 0 2.5rem; text-align: center; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; margin-top: var(--space-4); }

/* 800, not 700: these kickers are 0.8125rem, so AAA asks 7:1 of them. */
.section-kicker { color: var(--color-accent-800); margin-bottom: var(--space-4); }
.services-section { padding-bottom: 4.5rem; }
/* minmax(0, 1fr) rather than a bare 1fr: a bare 1fr floors each track at the
   content's min-content width, so once the text is scaled up the tracks push
   the grid wider than the viewport and the page scrolls sideways (SC 1.4.10).
   Pinning the floor to 0 lets the tracks stay inside the container, and
   break-word gives long words somewhere to go once they are.  */
.svcgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; list-style: none; margin: 0; padding: 0; }
.svcgrid .card { border-radius: 0; padding: var(--space-4); overflow-wrap: break-word; }
/* Bottom-aligned so tiles of different text lengths still line their links up.
   The 800 step: 700 reaches AA at 6.4:1 but not the 7:1 AAA wants of text this
   size, and these are the box links on the homepage. */
.card-link { margin-top: auto; align-self: flex-start; color: var(--color-accent-800); }

/* Featured card. The accent ramp inverts between themes, so both ends of it
   have to be used as a pair — the foreground was hardcoded #f2f2f3, which
   turned into near-white text on the near-white 900 step in dark mode. The
   800/100 pairing gives 9.6:1 in light and 11:1 in dark; the descendants take
   the same ink at full strength, because a 0.75 alpha on top of it dropped the
   body copy to 4.7:1. */
.card-accent { background: var(--color-accent-800); color: var(--color-accent-100); }
.card-accent .card-kicker,
.card-accent .card-meta,
.card-accent .card-body { color: inherit; opacity: 1; }
.card-accent .icn { color: inherit; }
.btn-on-accent { color: inherit; padding-left: 0; }

.kb-hero { padding: 4rem 0 3rem; text-align: center; }
.kb-hero h1 { font-size: 2.5rem; max-width: 35rem; margin: 0 auto var(--space-4); }
.kb-search { max-width: 35rem; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); }
.kb-search .input { border: none; background: transparent; flex: 1; min-width: 0; }
.kb-categories, .kb-popular { padding-bottom: 3.5rem; }

.link-list { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; }
.link-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-divider); text-decoration: none; color: var(--color-text); }
.link-row:last-child { border-bottom: none; }
.link-row-title { flex: 1; }

/* The 0.7 opacity sat on the whole trail, so `.crumb-current` could not opt
   back out of it — a child cannot undo an ancestor's opacity. Expressed as a
   colour instead, each item sets its own. */
.kb-breadcrumb { padding: var(--space-4) 0; border-bottom: 1px solid var(--color-divider); font-size: 0.8125rem; }
.kb-breadcrumb ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  list-style: none; margin: 0; padding: 0;
}
.kb-breadcrumb li { display: flex; align-items: center; gap: var(--space-2); }
.kb-breadcrumb a { color: var(--color-text-muted); }
.kb-breadcrumb .crumb-current { color: var(--color-text); font-weight: 600; }
.kb-article-grid { display: grid; grid-template-columns: minmax(0, 1fr) 13.75rem; gap: var(--space-8); padding: var(--space-6) 0 var(--space-8); max-width: 56.25rem; margin: 0 auto; }
.kb-article-grid article h3 { margin-top: var(--space-6); }
.article-meta { margin-bottom: var(--space-4); }
.kb-toc { font-size: 0.8125rem; }
.toc-list {
  display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3);
  list-style: none; padding: 0;
}
/* Was --color-text at 0.7 opacity, which computes to 5.8:1 — AA, not AAA. */
.toc-list a { color: var(--color-text-muted); text-decoration: none; }
.toc-list a:hover { color: var(--color-accent-800); text-decoration: underline; }
.toc-related { margin-top: var(--space-6); }

.simple-page { max-width: 45rem; margin: 0 auto; padding: 3.5rem 0 4.5rem; }



.site-footer {
  width: 100%; padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-divider);
  display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: space-between;
  font-size: 0.75rem; color: var(--color-text-muted);
}
.site-footer a { color: inherit; }
/* The middots the flat list used to carry, now that it is a real list. */
.footer-links { gap: var(--space-2); }
.footer-links li + li::before { content: "\00B7"; margin-inline-end: var(--space-2); }

@media (max-width: 760px) {
  .nav-menu, .lang-switch { display: none; }
  .svcgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kb-article-grid { grid-template-columns: minmax(0, 1fr); }
  .kb-toc { display: none; }
}

/* Below phone width a two-up card grid leaves ~100px per tile, which cannot
   hold a title, a sentence and a link at any text size — and overflows outright
   once the text is scaled. One column from here down. */
@media (max-width: 480px) {
  .svcgrid { grid-template-columns: minmax(0, 1fr); }
}