/* /support (PRD-59 §3). This sheet loads only on support.html, so the bare
   body/main rules below are page-scoped the way the terms page's inline
   sheet is. Everything else reuses the homepage's components and the
   campaign tokens (home.css: .support, .ways, .way, .faq-list, .paths,
   .path, .head, .home-app) — only the pieces the homepage has no copy of
   live here. The body wears exactly `campaign theme-auto`, so the device
   takes it into light mode like the homepage; the standard header follows
   it there too (the light block at the end). */

body {
  display: block;
  padding: 0 0 3rem;
  background: var(--page);
  color: var(--page-ink);
}

main.support-main {
  display: block;
  width: 100%;
  max-width: none;
  padding: var(--site-header-h) 0 0;
  text-align: left;
  font-size: 1.0625rem;
  line-height: 1.55;
}

/* The type base is the homepage's (:where(main.home) in home.css), so the
   two pages set the same sizes. :where() keeps the specificity at an
   element's, so every component's own size wins. */
:where(main.support-main) h1,
:where(main.support-main) h2,
:where(main.support-main) h3 {
  font-weight: 800;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

:where(main.support-main) h1,
:where(main.support-main) h2 {
  line-height: 1.08;
}

:where(main.support-main) h3 {
  line-height: 1.25;
}

:where(main.support-main) h1 {
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  margin: 0 0 0.75rem;
}

:where(main.support-main) h2 {
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  margin: 0 0 0.75rem;
}

:where(main.support-main) h3 {
  font-size: 1.125rem;
  font-weight: 700;
}

main.support-main img {
  max-width: 100%;
  height: auto;
}

main.support-main :focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

main.support-main .eyebrow {
  color: var(--faint);
}

main.support-main .eyebrow--accent {
  color: var(--accent-text);
}

main.support-main .lede {
  font-size: 1.2rem;
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}

main.support-main .micro {
  text-align: left;
}

/* ── Hero copy: the order-code line under the lede ────────────────────── */

.sp-copy {
  display: grid;
  gap: 0.9rem;
  min-width: 0;
  align-content: start;
}

.sp-copy .eyebrow {
  margin: 0;
}

.sp-code {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.sp-code code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--page-ink);
}

/* ── Quick answers: the four groups in two columns from 900 px ────────── */

.topics {
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
  .topics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem 2.5rem;
  }
}

.topic {
  min-width: 0;
}

.topic h3 {
  margin: 0 0 0.5rem;
}

/* ── The safety card above "Find the right team" ──────────────────────── */

.alert-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  padding: 1.5rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  border-radius: 18px;
  background: var(--card);
  border: 1px solid var(--line);
}

.alert-card__icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex: none;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent-text);
}

.alert-card__icon svg {
  width: 1.3rem;
  height: 1.3rem;
}

.alert-card > div {
  flex: 1 1 16rem;
  min-width: 0;
}

.alert-card h2 {
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  margin: 0;
}

.alert-card p {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.alert-card .btn {
  flex: none;
}

/* ── App-band badges: the homepage's treatment ─────────────────────────
   main.home .badge is homepage-scoped, so off the homepage the badges fall
   back to .home-app .badge's navy fill — on which the small line (an
   .eyebrow, and the accent band scopes --faint to navy) disappears in both
   modes. Mirror the homepage's badge ground here, and let the small line
   inherit the badge's own text colour, so it reads on the white badge in
   dark mode and on the navy badge in light mode. (The homepage's own
   light-mode small line stays as it is: PR B's only index.html changes are
   its four Support links.) */
main.support-main .badge {
  background: var(--page-ink);
  color: var(--page);
  border-color: transparent;
}

main.support-main .badge:hover {
  background: var(--page-ink);
  opacity: 0.85;
  transform: translateY(-1px);
}

main.support-main .badge svg {
  width: 1.3rem;
  height: 1.3rem;
}

main.support-main .badge-text .eyebrow {
  color: inherit;
}

/* ── Footer: the standard links, centred like every other .site-footer ── */

main.support-main .site-footer {
  margin-top: 0;
  padding-inline: var(--gutter);
}

main.support-main .site-footer .wrap {
  padding-inline: 0;
}

@media (prefers-color-scheme: light) {
  /* The header follows the page (PRD-59 decision 8), as on / and /vote:
     white bar, navy wordmark, the orange Order pill — and the browser bar's
     white theme-color meets a white header rather than a navy one. */
  body.theme-auto .site-header {
    background: var(--page);
    color: var(--page-ink);
    color-scheme: light;
  }

  body.theme-auto .site-header .logo {
    background-image: url("/img/brand/wordmark-navy.svg");
  }

  /* The signed-in face is a white disc: give it a navy edge on white. */
  body.theme-auto .site-account[data-account="in"] .site-account__face {
    border-color: var(--page-ink);
  }

  /* The footer sits on the page: its links hover to the page ink, not to
     white (the homepage's rule). */
  main.support-main .site-footer a:hover,
  main.support-main .site-footer a:focus-visible {
    color: var(--page-ink);
  }
}

@media (prefers-reduced-motion: reduce) {
  main.support-main .btn:hover,
  main.support-main .btn:active {
    transform: none;
  }
}