/*
 * Styles for the server-rendered Insights pages.
 *
 * Self-contained on purpose. The alternative — linking the front-end's compiled Tailwind
 * bundle — coupled these pages to the React build output (a hashed filename that had to be
 * globbed at runtime, from a directory the Flask process may not even be able to read) for
 * little benefit: the Jinja markup differs from the React component tree, so identical
 * utility classes would not have produced identical pages anyway.
 *
 * The design system is three tokens (see zn-branded-frontend/src/index.css), mirrored below.
 * Keep them in sync on a rebrand; nothing else here needs to track the front-end.
 */

:root {
  --primary: #00b1e6;
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'DM Serif Display', Georgia, serif;

  --gray-900: #111827;
  --gray-700: #374151;
  --gray-500: #6b7280;
  --gray-200: #e5e7eb;
  --gray-100: #f3f4f6;
  --gray-50: #f9fafb;

  --max-width: 1280px;
  --radius: 0.75rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--gray-900);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Mirrors the content wrapper on ArticleDetailsPage.tsx: `mx-auto max-w-screen-2xl px-4 py-8`
   inside a max-w-7xl parent, so 1280px is the effective width. */
.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 2rem 1rem;
}

/* Centred logo below the navbar. Height matches StandardLayout.tsx's non-home-page size
   (h-20 / md:h-30); width is left to the intrinsic ratio so the box cannot distort. */
.masthead {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
  padding: 0.25rem 1rem;
}

.masthead img {
  height: 5rem;
  width: auto;
  object-fit: contain;
}

@media (min-width: 768px) {
  .masthead img {
    height: 7.5rem;
  }
}

/* --- Header ---------------------------------------------------------------- */
/* Mirrors zn-branded-frontend Navbar.tsx. */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.site-header {
  background: var(--primary);
  color: #fff;
}

.site-header a {
  color: #fff;
  text-decoration: none;
}

.nav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav-home {
  display: inline-flex;
  padding: 0.5rem;
  border-radius: 0.375rem;
  color: #fff;
}

.nav-home:hover {
  background: rgba(255, 255, 255, 0.12);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.025em;
  color: #fff;
  cursor: pointer;
}

.nav-link:hover {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
}

/* Dropdowns: <details>, so they work without JavaScript. */
.nav-dd {
  position: relative;
}

.nav-dd > summary {
  list-style: none;
}

.nav-dd > summary::-webkit-details-marker {
  display: none;
}

.nav-dd > summary svg {
  transition: transform 0.2s;
}

.nav-dd[open] > summary svg {
  transform: rotate(180deg);
}

.nav-panel {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 50;
  min-width: 12rem;
  margin-top: 0.25rem;
  padding: 0.5rem 0;
  background: #fff;
  border-radius: 0.375rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  outline: 1px solid #dbeafe;
}

/*
 * The insights panel lists every published pillar, so it grows without bound. Seven explicit
 * row tracks plus `grid-auto-flow: column` fills a column top to bottom before starting the
 * next, so the panel widens in steps of seven instead of running past the bottom of the
 * screen.
 *
 * Deliberately no row-gap: the tracks are `auto`, and a gap is still drawn between the empty
 * ones when there are fewer than seven links, which would hang blank space off the panel. The
 * links' own padding does that spacing instead.
 *
 * With seven or fewer links this collapses to a single column and looks exactly as before.
 */
.nav-panel-cols {
  display: grid;
  grid-template-rows: repeat(7, auto);
  grid-auto-flow: column;
  grid-auto-columns: minmax(11rem, max-content);
  column-gap: 0.5rem;
  /* Backstop for an extreme number of pillars: scroll rather than run off the viewport. */
  max-width: calc(100vw - 2rem);
  overflow-x: auto;
}

.nav-panel a {
  display: block;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  color: var(--gray-700);
  white-space: nowrap;
}

.nav-panel a:hover {
  background: rgba(0, 177, 230, 0.1);
  color: var(--primary);
  text-decoration: none;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}

/* Search: a plain GET form to /search, which is a real SPA route. No typeahead. */
.nav-search {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 22rem;
}

.nav-search-icon {
  position: absolute;
  left: 0.75rem;
  display: inline-flex;
  color: var(--gray-500);
  pointer-events: none;
}

.nav-search input {
  width: 100%;
  padding: 0.6rem 0.75rem 0.6rem 2.4rem;
  font: inherit;
  font-size: 0.9rem;
  color: var(--gray-900);
  background: #fff;
  border: 0;
  border-radius: 0.5rem;
  outline: none;
}

.nav-search input::placeholder {
  color: var(--gray-500);
}

.nav-search input:focus {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.45);
}

.nav-social {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.nav-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  background: #fff;
  color: var(--primary);
}

.nav-social a:hover {
  background: rgba(255, 255, 255, 0.9);
}

.nav-login {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #fff;
}

.nav-login:hover {
  background: rgba(255, 255, 255, 0.12);
  text-decoration: none;
}

/* Mobile: checkbox toggle, no JavaScript. */
.nav-toggle,
.nav-burger,
.nav-mobile {
  display: none;
}

@media (max-width: 900px) {
  .nav-left {
    gap: 0.5rem;
  }

  .nav-links,
  .nav-right {
    display: none;
  }

  .nav-burger {
    display: inline-flex;
    padding: 0.5rem;
    border-radius: 0.5rem;
    color: #fff;
    cursor: pointer;
  }

  .nav-toggle:checked ~ .nav-mobile {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex-basis: 100%;
    order: 10;
    padding: 1rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.4);
  }

  .nav-mobile {
    width: 100%;
  }

  .nav-mobile .nav-search {
    max-width: none;
    margin-bottom: 0.75rem;
  }

  /*
   * Descendant, not child: the sub-links now sit inside the <details> sections below and
   * would otherwise lose their spacing entirely.
   *
   * `display: block` is load-bearing. The top-level links are flex items of .nav-mobile and
   * so get a line each for free, but the ones inside a <details> are not — without this they
   * are inline and wrap into a paragraph of run-together link text.
   */
  .nav-mobile a {
    display: block;
    padding: 0.7rem 0.25rem;
    font-size: 1rem;
    font-weight: 500;
  }

  .nav-mobile-sub {
    padding-left: 1.25rem !important;
    font-size: 0.875rem !important;
    opacity: 0.9;
  }

  /* Mobile accordion sections, styled to match the top-level links above them so the
     summary reads as a menu row rather than as something new. */
  .nav-mobile-dd > summary {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.7rem 0.25rem;
    font-size: 1rem;
    font-weight: 500;
    color: #fff;
    cursor: pointer;
    list-style: none;
  }

  .nav-mobile-dd > summary::-webkit-details-marker {
    display: none;
  }

  .nav-mobile-dd > summary svg {
    transition: transform 0.2s;
  }

  .nav-mobile-dd[open] > summary svg {
    transform: rotate(180deg);
  }

  /* Two classes, so this outranks the `display: block` on .nav-mobile a above and puts the
     icon beside the label rather than on its own line. */
  .nav-mobile .nav-mobile-login {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  /*
   * The mobile menu's own social row. Not a reuse of .nav-social: that rule and
   * `.nav-mobile a` have equal specificity, and this one comes later in the file, so the
   * links would take the block layout and lose their circles.
   */
  .nav-mobile-social {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
    padding-top: 1rem;
  }

  .nav-mobile-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border-radius: 9999px;
    background: #fff;
    color: var(--primary);
  }

  .nav-mobile-social a:hover {
    background: rgba(255, 255, 255, 0.9);
  }

  .nav-inner {
    flex-wrap: wrap;
  }
}

/* --- Breadcrumbs ---------------------------------------------------------- */

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  /* BreadCrumbs.tsx carries only py-3; the horizontal inset comes from .wrap. */
  padding: 0.75rem 0;
  font-size: 0.875rem;
}

.crumbs .sep {
  color: var(--primary);
}

.crumbs .current {
  color: var(--gray-700);
  font-weight: 600;
}

/* --- Not found ------------------------------------------------------------ */

.notfound {
  padding: 4rem 0 6rem;
  text-align: center;
}

.notfound h1 {
  margin: 0 0 0.75rem;
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 400;
  color: var(--gray-900);
}

.notfound p {
  margin: 0 0 1.5rem;
  color: var(--gray-500);
}

.notfound a {
  font-weight: 600;
  color: var(--primary);
}

/* --- Section headings ----------------------------------------------------- */

/* The site's signature rule: primary-coloured label over a 2px primary underline. */
.separator {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 2px solid var(--primary);
  padding-bottom: 0.5rem;
  margin: 0 0 1.5rem;
}

/* 1.875rem/400 is BlueSeparator.tsx's label: a Paragraph carrying `text-primary text-3xl!`,
   so it keeps the Paragraph's normal weight rather than a heading's bold. */
.separator h2 {
  color: var(--primary);
  font-size: 1.875rem;
  font-weight: 400;
  margin: 0;
  text-transform: lowercase;
}

.page-rule {
  border: 0;
  border-bottom: 2px solid var(--primary);
  margin: 0 0 2rem;
}

/*
 * Black to match the article body below it. The React page sets no colour on <body>, so its
 * title falls through to the initial black rather than to a grey. Only the article title is
 * affected here: .page-title and .notfound h1 both set their own colour and outrank this.
 */
h1 {
  font-size: 2.25rem;
  line-height: 1.2;
  font-weight: 700;
  color: #000;
  /* 2rem, the gap the React article page leaves below its title (`sm:mb-8`). */
  margin: 0 0 2rem;
}

.page-title {
  color: var(--primary);
}

.eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.lede {
  color: var(--gray-500);
  max-width: 48rem;
  margin: 0 0 2rem;
}

/* Base for the whole line: "By", the separator and the date. Only the author's name steps
   up, via .byline-name below. */
.byline {
  color: #000;
  font-size: 1rem;
  font-weight: 400;
  margin: 0 0 2rem;
}

.byline-name {
  font-size: 1.125rem;
  font-weight: 700;
}

/* Own line under the author, as the two stacked Paragraphs do in AuthorSection.tsx. */
.byline time {
  display: block;
}

/*
 * Byline beside the hero image, as on ArticleDetailsPage.tsx, where the author block is a
 * `lg:w-48` rail to the left of it. Scoped to this row on purpose: an earlier attempt put
 * the whole article in a right-hand column, which indented every block on the page. The h1
 * above and the body copy below are untouched and still start at the wrapper's left edge.
 *
 * Three tracks, not two. The empty 12rem on the right mirrors the byline rail, so the middle
 * track is centred in the wrapper and the hero image stays centred on the *page* rather than
 * drifting right by half the rail. Auto-placement fills tracks 1 and 2; track 3 stays empty.
 */
.article-header {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr) 12rem;
  column-gap: 2rem;
  /* Not the default `stretch`: the byline cell is as tall as the image, and a stretched
     flex/grid child that centres its own content ends up halfway down the row. */
  align-items: start;
}

/*
 * React's `lg` breakpoint, where it drops the rail (`hidden lg:block`). Below it there is no
 * room for a 12rem column beside the image, so the two stack and the byline sits above the
 * hero — exactly where it was before this row existed.
 */
@media (max-width: 1023px) {
  .article-header {
    display: block;
  }
}

/* --- Card grid ------------------------------------------------------------ */

.grid {
  list-style: none;
  margin: 0 0 3rem;
  padding: 0;
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.card-title {
  font-weight: 700;
  margin: 0.75rem 0 0.25rem;
  color: var(--gray-900);
}

.card a:hover .card-title {
  color: var(--primary);
}

.card-excerpt {
  color: var(--gray-500);
  font-size: 0.875rem;
  margin: 0;
}

.card-meta {
  color: var(--gray-500);
  font-size: 0.8rem;
  margin: 0.35rem 0 0;
}

/*
 * Stand-in for a missing image: a grey box at the intended aspect ratio with a centred
 * glyph, matching the React OptimizedImage fallback. Keeps card heights uniform so the
 * grid does not go ragged when only some articles have artwork.
 */
.img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: var(--gray-200);
  color: var(--gray-500);
}

.article-card img,
.article-card .img-placeholder {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
}

/* --- Category rows -------------------------------------------------------- */

/*
 * The /insights browse list: one row per Health Category, its guides beside it, and every
 * article inside those guides linked directly — so nothing in the knowledge base is more
 * than one click from this page.
 *
 *   [icon] Category | Guide short name | Pillar article
 *                   |                  | Cluster
 *                   |                  | Cluster
 *                   | Second guide     | Pillar article
 */
.category-rows {
  list-style: none;
  margin: 0 0 3rem;
  padding: 0;
}

.category-row {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: 1.5rem 2rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--gray-200);
}

.category-row:first-child {
  padding-top: 0;
}

/*
 * Icon and name travel together. `align-items: start`, not centre: the name has to line up
 * with the first guide's label in the next column, and centring it against the 4rem icon
 * dropped it about 17px below that. The icon now hangs below the name rather than the name
 * floating beside the icon.
 *
 * `align-self` is the separate, outer alignment — it keeps the whole block at the top of a
 * row whose guide list is tall.
 */
.category-row-head {
  display: flex;
  align-items: start;
  gap: 0.75rem;
  align-self: start;
}

.category-row-icon {
  width: 4rem;
  flex-shrink: 0;
  border-radius: 0.75rem;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.category-row-name {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gray-900);
}

.category-row-guides {
  display: grid;
  gap: 1.25rem;
}

/* Second split, inside the row: the guide's short name against its list of articles. */
.category-guide {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  gap: 0.35rem 2rem;
}

.category-guide-label {
  margin: 0;
  font-weight: 700;
  color: var(--gray-900);
}

.category-guide-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.category-guide-links li {
  margin-bottom: 0.35rem;
}

/* The pillar heads its own list, so it carries the weight; clusters read as its children. */
.category-guide-links .is-pillar {
  font-weight: 600;
}

/* Top of the row, like the guide list it stands in for, so it lines up with the category
   name beside it rather than centring against the taller icon. */
.category-row-empty {
  margin: 0;
  color: var(--gray-500);
  font-size: 0.9rem;
  align-self: start;
}

/*
 * A category with no published guide yet. Dimmed rather than dropped, so the list of 20
 * stays complete and does not reshuffle as guides are published.
 */
.category-row.is-unlinked {
  opacity: 0.55;
}

/* Both splits collapse together: below this the two 12–15rem label columns leave too little
   for the article titles beside them. */
@media (max-width: 767px) {
  .category-row,
  .category-guide {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
  }

  .category-row {
    gap: 1rem;
  }
}

/* --- Callouts and CTAs ---------------------------------------------------- */

.callout {
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
  background: color-mix(in srgb, var(--primary) 5%, transparent);
  padding: 1.5rem;
  margin: 2rem 0;
}

/* Fallback for browsers without color-mix(). */
@supports not (background: color-mix(in srgb, red 5%, transparent)) {
  .callout {
    border-color: rgba(0, 177, 230, 0.3);
    background: rgba(0, 177, 230, 0.05);
  }
}

.callout-title {
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0 0 0.35rem;
}

.callout p {
  margin: 0 0 0.75rem;
  color: var(--gray-500);
}

.callout ul {
  margin: 0;
  padding-left: 1.25rem;
}

.callout li {
  margin-bottom: 0.4rem;
  color: var(--gray-700);
}

.cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--primary);
  color: #fff !important;
  font-weight: 600;
  padding: 0.65rem 1.1rem;
  border-radius: var(--radius);
}

.cta:hover {
  opacity: 0.85;
  text-decoration: none;
}

/* Wrapper for the "Explore brands for [category]" CTA, so the button keeps the same vertical
   rhythm as the surrounding prose blocks instead of hugging them. */
.cta-block {
  margin: 2rem 0;
}

.pillar-backlink {
  border-left: 4px solid color-mix(in srgb, var(--primary) 30%, transparent);
  background: var(--gray-50);
  padding: 1rem;
  margin: 2rem 0;
  font-size: 0.9rem;
  color: var(--gray-700);
}

/* --- Article body --------------------------------------------------------- */

/*
 * Type scale copied from what the React article page actually computes. There, RichContent
 * renders `prose max-w-none` (the @tailwindcss/typography plugin) and ArticleDetailsPage
 * adds `text-lg! leading-relaxed`, so the body is 1.125rem/1.625 and every element below is
 * the plugin's own em-relative step off that base. Keeping the child sizes in `em` mirrors
 * the plugin, so changing the base size here rescales the headings with it.
 *
 * Set on .prose rather than on body: only the article copy is 18px on the React page: its
 * chrome, cards and footer stay at 16px, as they do here.
 *
 * No measure cap either — the body fills .wrap, matching the key-takeaways callout and the
 * cluster grid, so every block on the page lines up on the same left and right edges.
 */
.prose {
  max-width: none;
  font-size: 1.125rem;
  line-height: 1.625;
  /* Pure black, not --gray-900: the front-end overrides the plugin's default grey body and
     heading colours to #000 for exactly these blocks (see zn-branded-frontend/src/index.css,
     `--tw-prose-body` / `--tw-prose-headings`). Headings below inherit it. */
  color: #000;
}

/* The plugin's `--tw-prose-bold`. Note this is 600, not the browser's default 700. */
.prose strong {
  font-weight: 600;
}

.prose a {
  font-weight: 500;
}

.prose code {
  font-size: 0.875em;
  font-weight: 600;
}

.prose > :first-child {
  margin-top: 0;
}

.prose p,
.prose ul,
.prose ol {
  margin: 0 0 1.25rem;
}

/*
 * Heading steps, as the typography plugin defines them. In px off the 1.125rem base:
 * h1 40.5, h2 27, h3 22.5, h4 18. Note the weights climb the other way — 800/700/600/600 —
 * so an h3 is lighter than an h2, which is what the React page renders.
 *
 * h1 is here for completeness; the article title is a sibling of .prose, not inside it, so
 * this only fires if an editor puts an H1 in the body copy.
 */
.prose h1 {
  font-size: 2.25em;
  font-weight: 800;
  line-height: 1.1111;
  margin: 0 0 0.8889em;
}

.prose h2 {
  font-size: 1.5em;
  font-weight: 700;
  margin: 2.5rem 0 0.75rem;
  line-height: 1.3333;
}

.prose h3 {
  font-size: 1.25em;
  font-weight: 600;
  margin: 2rem 0 0.5rem;
  line-height: 1.6;
}

.prose h4 {
  font-size: 1em;
  font-weight: 600;
  margin: 1.5rem 0 0.5rem;
  line-height: 1.5;
}

.prose ul,
.prose ol {
  padding-left: 1.5rem;
}

.prose li {
  margin-bottom: 0.5rem;
}

.prose img {
  margin: 1.5rem 0;
}

.prose blockquote {
  margin: 1.5rem 0;
  padding-left: 1rem;
  border-left: 3px solid var(--gray-200);
  color: var(--gray-500);
  font-style: italic;
  /* The plugin's `--tw-prose-quotes` weight. */
  font-weight: 500;
}

/*
 * The one block that is deliberately narrower than the full-width body copy, centred in the
 * wrapper. `width: 100%` alongside the cap because featured images are stored at a range of
 * sizes: without it a narrow upload would sit at its intrinsic width and read as off-centre
 * against the copy below.
 */
.hero-image {
  margin: 0 auto 2rem;
  width: 100%;
  max-width: 42rem;
}

/* The hero placeholder needs an explicit ratio; a real hero image keeps its own. */
.hero-image.img-placeholder {
  aspect-ratio: 16 / 9;
}

/* --- FAQ ------------------------------------------------------------------ */

/*
 * <details> keeps answers in the DOM while collapsed, so the text stays crawlable and the
 * accordion works without JavaScript.
 */
.faq {
  border-top: 1px solid var(--gray-200);
}

.faq details {
  border-bottom: 1px solid var(--gray-200);
  padding: 0.9rem 0;
}

/* The React accordion runs at size="large": `text-lg` question, `font-medium` weight. */
.faq summary {
  cursor: pointer;
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--gray-900);
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: '+';
  color: var(--primary);
  font-weight: 700;
}

.faq details[open] summary::after {
  content: '\2013';
}

.faq summary:hover {
  color: var(--primary);
}

/*
 * Back to 1rem, overriding the 1.125rem .prose base above. The answer is a RichContent on
 * the React side too, but inside the accordion it gets no `text-lg` — only the article body
 * does — so answers there render at the 16px root size.
 */
.faq .answer {
  font-size: 1rem;
  color: var(--gray-700);
}

/* --- Related links -------------------------------------------------------- */

.link-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .link-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.link-list a {
  display: block;
  border: 1px solid var(--gray-200);
  padding: 0.75rem;
  font-size: 0.9rem;
}

.link-list a:hover {
  border-color: var(--primary);
  background: var(--gray-50);
  text-decoration: none;
}

/* --- Misc ----------------------------------------------------------------- */

.empty-state {
  color: var(--gray-500);
  text-align: center;
  padding: 5rem 0;
  font-size: 1.05rem;
}

/* --- Footer --------------------------------------------------------------- */
/* Mirrors zn-branded-frontend Footer.tsx. */

.site-footer {
  background: var(--primary);
  color: #fff;
  margin-top: 4.375rem;
}

.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1rem 1rem 2rem;
}

.footer-logo {
  display: inline-block;
  padding-bottom: 0.75rem;
  /* Matches the -ml-4 nudge on the React footer logo. */
  margin-left: -1rem;
}

/*
 * Intrinsic 1123x114. The width/height attributes on the <img> reserve the correct
 * aspect box; these rules scale it down without distorting it.
 */
.footer-logo img {
  width: 100%;
  max-width: 26rem;
  height: auto;
}

.footer-rule {
  border-top: 2px solid #fff;
  margin: 0 0 1.5rem;
}

.footer-groups {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .footer-groups {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.footer-groups h3 {
  margin: 0 0 1.25rem;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.025em;
  color: #000;
}

.footer-groups ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-groups li {
  margin-bottom: 0.5rem;
}

.footer-groups a {
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
}

.footer-groups a:hover {
  color: #e0f2fe;
  text-decoration: none;
}

.footer-social {
  display: flex;
  gap: 1rem;
  margin: 2rem 0;
}

.footer-social a {
  color: #fff;
}

.footer-social a:hover {
  color: #e0f2fe;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1rem;
  text-align: center;
  font-size: 0.75rem;
  color: #fff;
}

@media (max-width: 640px) {
  .footer-legal .sep {
    display: none;
  }
}