/* ==============================================================
   Shared components for non-homepage pages only.
   NEVER load this from index.html. The homepage is frozen for the
   2026-08 SEO/conversion task (tests/check_homepage_frozen.py enforces
   this by hash), and styles.css/brand.css — which the homepage also
   loads — are frozen right along with it, so anything new needed across
   multiple non-homepage templates (the assessment hub, guides, request-
   evaluation) lives here instead of getting bolted onto a file the
   homepage depends on.
   ============================================================== */

/* Second button inside .guide__cta (css/guide.css) — that component's
   background is the solid accent red, and .btn--ghost (styles.css) is
   built for a light background (transparent fill, dark ink text), so it
   disappears on red. This is the dark-background counterpart, used
   wherever a seller-bridge CTA needs a primary + secondary action
   together. */
.guide__cta .btn-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.guide__cta .btn--ghost-dark {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .55);
  font-weight: 600;
}
.guide__cta .btn--ghost-dark:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }

/* Non-affiliation / disclosure box — used on the assessment hub to state
   plainly that this site is not the City of Edmonton and cannot act on a
   visitor's behalf with the City or the Assessment Review Board. */
.disclosure-box {
  background: var(--surface);
  border: 1px solid var(--grid);
  border-left: 3px solid var(--ink-3);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 18px 22px;
  margin: 22px 0;
  font-size: 0.9rem;
  color: var(--ink-2);
}
.disclosure-box b { color: var(--ink); }

/* Seller-bridge paragraph on informational guides — a topic-specific
   transition sentence plus one CTA link, visually distinct from ordinary
   body copy so it reads as a deliberate next step, not another paragraph. */
.seller-bridge {
  background: var(--accent-soft);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin: 28px 0;
}
.seller-bridge p { color: var(--ink); margin: 0 0 12px; font-size: 0.95rem; line-height: 1.6; }
.seller-bridge p:last-child { margin-bottom: 0; }
.seller-bridge .btn { display: inline-block; }

/* Checklist used on the assessment hub's "what to check" section — a plain
   two-column list of verifiable fields, distinct from prose <ul>. */
.check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px 24px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.check-grid li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--ink-2);
  font-size: 0.92rem;
}
.check-grid li::before { content: "—"; color: var(--accent); flex: none; }