/* The Support page (support.qmd) and its homepage line.
   Readers reach the page from the footer, the Resources menu, and one line
   near the bottom of the Welcome page. It is listed in the book so that Quarto
   renders it; the first rule keeps it out of the sidebar and out of the
   next-page link on the page before it.
   The card takes its accent from _variables.yml (the handbook's link color)
   and pairs it with one warm amber. White on either accent passes WCAG AA
   (#2761e3 5.3:1, #15803d 5.0:1), so the filled buttons keep the accent in
   dark mode too. Identical in all four handbooks. Stylesheets are cached as
   immutable on three of the sites, so change this by adding a -v2 file, not
   by editing it. */

.sidebar-item:has(> .sidebar-item-container > a[href$="support.html"]),
.nav-page-next:has(> a[href$="support.html"]) {
  display: none;
}

/* The card carries the page title, so Quarto's title block is hidden here. */
body:has(.support-page) #title-block-header {
  display: none;
}

.support-page {
  --support-accent: #2761e3;
  --support-amber: #e8a54b;
  --support-ink: #1a2332;
  --support-text: #475467;
  --support-muted: #6b7280;
  --support-card: #ffffff;
  --support-edge: #ece4d8;
  --support-outline: #e3dccf;
  --support-face: #ffffff;
  --support-pill: #f1ebe2;
  --support-pill-on: #ffffff;
  --support-note: #f1f5fd;
  --support-note-edge: #d6e1f8;
  --support-mark: var(--support-accent);
  --support-backdrop: #fbf8f3;
  margin: 0.5rem 0 1.5rem;
  padding: 2.5rem 1.5rem;
  border-radius: 20px;
  background-color: var(--support-backdrop);
}

.quarto-dark .support-page,
[data-bs-theme="dark"] .support-page {
  --support-ink: #eef1f5;
  --support-text: #c5ccd6;
  --support-muted: #9aa4b1;
  --support-card: #262a30;
  --support-edge: #3a3f47;
  --support-outline: #464c55;
  --support-face: #2e333a;
  --support-pill: #1f2328;
  --support-pill-on: #3a4049;
  --support-note: #262f3e;
  --support-note-edge: #394761;
  --support-backdrop: transparent;
  /* The accents fall below 3:1 on a dark card; focus marks use the ink. */
  --support-mark: var(--support-ink);
}

/* The trust note takes a tint of the handbook's own accent where supported. */
@supports (color: color-mix(in srgb, red 50%, white)) {
  .support-page {
    --support-note: color-mix(in srgb, var(--support-accent) 7%, #ffffff);
    --support-note-edge: color-mix(in srgb, var(--support-accent) 22%, #ffffff);
  }

  .quarto-dark .support-page,
  [data-bs-theme="dark"] .support-page {
    --support-note: color-mix(in srgb, var(--support-accent) 16%, #262a30);
    --support-note-edge: color-mix(in srgb, var(--support-accent) 38%, #262a30);
  }
}

.support-card {
  position: relative;
  max-width: 42rem;
  margin: 0 auto;
  padding: 2.5rem 2.5rem 1.75rem;
  overflow: hidden;
  border: 1px solid var(--support-edge);
  border-radius: 16px;
  background-color: var(--support-card);
  box-shadow: 0 12px 32px rgba(72, 52, 20, 0.08);
}

.support-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, var(--support-accent), var(--support-amber));
}

.support-card .support-title {
  margin: 0 0 0.75rem;
  border: 0;
  color: var(--support-ink);
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1.2;
}

.support-lead {
  margin: 0 0 1.75rem;
  color: var(--support-text);
  font-size: 1.12rem;
  line-height: 1.65;
}

.support-panel + .support-panel {
  margin-top: 1.5rem;
}

.support-panel[hidden] {
  display: none;
}

.support-panel-label {
  margin: 0 0 0.6rem;
  color: var(--support-muted);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.support-amounts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.support-card .support-amount {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0.5rem;
  border: 1.5px solid var(--support-outline);
  border-radius: 10px;
  background-color: var(--support-face);
  color: var(--support-ink);
  font-size: 1.15rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.support-card .support-amount:hover {
  border-color: var(--support-accent);
  color: var(--support-ink);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(26, 35, 50, 0.1);
}

.support-card .support-amount.support-amount-default,
.support-card .support-amount.support-amount-default:hover {
  border-color: var(--support-accent);
  background-color: var(--support-accent);
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(39, 97, 227, 0.28);
}

@supports (color: color-mix(in srgb, red 50%, white)) {
  .support-card .support-amount.support-amount-default,
  .support-card .support-amount.support-amount-default:hover {
    box-shadow: 0 8px 18px color-mix(in srgb, var(--support-accent) 32%, transparent);
  }
}

.support-card .support-amount:focus-visible,
.support-tab:focus-visible,
.support-trust a:focus-visible {
  outline: 3px solid var(--support-mark);
  outline-offset: 2px;
}

.support-options.is-enhanced .support-panel + .support-panel {
  margin-top: 0;
}

.support-tabs {
  display: inline-flex;
  gap: 0.25rem;
  margin-bottom: 1.25rem;
  padding: 0.25rem;
  border-radius: 999px;
  background-color: var(--support-pill);
}

.support-tab {
  min-height: 44px;
  padding: 0.45rem 1.4rem;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--support-muted);
  font: inherit;
  font-size: 0.98rem;
  font-weight: 500;
  cursor: pointer;
}

.support-tab[aria-selected="true"] {
  background-color: var(--support-pill-on);
  color: var(--support-ink);
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(26, 35, 50, 0.12);
}

.support-trust {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 1.75rem 0 0;
  padding: 0.9rem 1rem;
  border: 1px solid var(--support-note-edge);
  border-radius: 12px;
  background-color: var(--support-note);
  color: var(--support-ink);
  font-size: 0.95rem;
  line-height: 1.5;
}

.support-lock {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background-color: var(--support-accent);
  color: #ffffff;
}

.support-trust a {
  color: var(--support-accent);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.quarto-dark .support-trust a,
[data-bs-theme="dark"] .support-trust a {
  color: var(--support-ink);
}

.support-methods {
  margin: 0.9rem 0 0;
  color: var(--support-muted);
  font-size: 0.85rem;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .support-card .support-amount,
  .support-card .support-amount:hover {
    transition: none;
    transform: none;
  }
}

@media (max-width: 575.98px) {
  .support-page {
    padding: 1rem 0.6rem;
    border-radius: 14px;
  }

  .support-card {
    padding: 2rem 1.1rem 1.25rem;
  }

  .support-card .support-title {
    font-size: 1.7rem;
  }

  .support-amounts {
    gap: 0.55rem;
  }

  .support-tabs {
    display: flex;
  }

  .support-tab {
    flex: 1;
    padding: 0.45rem 0.75rem;
  }
}

/* One plain line at the bottom of the Welcome page, under the license note. */
.home-support {
  margin: 0.6rem 0 0.5rem;
  color: #5b6b7f;
}

.quarto-dark .home-support,
[data-bs-theme="dark"] .home-support {
  color: #9aa7b6;
}