/* Generated /problems and /breeds content pages (docs/seo-pages-spec.md).
   Layers on top of shared.css, no new colours, no new type scale. */

/* .seo-body is .page-body (shared.css) plus the article typography these
   generated pages need. The width and the breadcrumb rules live in shared.css
   so hand-written content pages get the identical layout. */
.seo-body h1 { margin: 18px 0 10px; }
.seo-body h2 { font-family: var(--font-display); font-size: 26px; font-weight: 700; margin: 30px 0 10px; }
.seo-body h3 { font-size: 19px; font-weight: 800; margin: 22px 0 6px; }
.seo-body p { margin: 0 0 14px; font-size: 17px; }
.seo-body a:not(.btn) { color: var(--green); font-weight: 700; }

.quick-answer { background: var(--green-soft); border-radius: var(--radius); padding: 18px 20px; margin: 16px 0 26px; }
.quick-answer p { margin: 0; font-size: 18px; font-weight: 600; color: var(--green-deep); }

.seo-steps { list-style: none; margin: 6px 0 18px; counter-reset: step; }
.seo-steps li { position: relative; padding: 10px 0 10px 42px; counter-increment: step; font-size: 17px; }
.seo-steps li::before {
  content: counter(step); position: absolute; left: 0; top: 10px;
  width: 28px; height: 28px; border-radius: 50%; background: var(--green); color: #fff;
  font-weight: 800; font-size: 15px; display: grid; place-items: center;
}
.seo-steps b { display: block; }

/* Above-the-fold picker on the navigational pages (index, category, breed).
   A grid rather than a stacked list so every option is visible without
   scrolling, which is the whole point of moving it up here. */
.pick-heading { margin: 0 0 12px; }
.pick-grid { list-style: none; display: grid; gap: 10px; margin: 0 0 30px; }
@media (min-width: 560px) { .pick-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .pick-grid { grid-template-columns: 1fr 1fr 1fr; } }
.pick-grid li { display: flex; }
/* Scoped under .seo-body so these win over the article's generic prose link
   colour, which is set at .seo-body a and would otherwise leave these looking
   like underlined body links rather than tappable cards. */
.seo-body .pick-grid a {
  display: flex; align-items: center; width: 100%; min-height: 56px;
  padding: 12px 16px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-sm); box-shadow: var(--shadow);
  font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--ink);
  text-decoration: none;
  transition: border-color .15s var(--ease), transform .12s var(--ease), color .15s var(--ease);
}
.seo-body .pick-grid a:hover { border-color: var(--green); color: var(--green-deep); transform: translateY(-1px); }

.faq h3 { margin: 20px 0 6px; }
.link-list { list-style: none; margin: 8px 0 0; }
.link-list li { padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 17px; }
.link-list li:last-child { border-bottom: 0; }

.cta-band { background: var(--card); border: 2px solid var(--line-strong); border-radius: var(--radius); padding: 20px; margin: 28px 0; text-align: center; }
.cta-band p { font-size: 17px; font-weight: 600; margin: 0 0 12px; }
.cta-band .btn { margin: 0 auto; max-width: 380px; }

.referral { background: var(--amber-soft); color: var(--warn-ink); border-radius: var(--radius); padding: 18px 20px; margin: 22px 0; }
.referral b { display: block; font-size: 18px; margin-bottom: 6px; }
.referral p { font-size: 16px; margin: 0 0 10px; }
.referral a { color: var(--warn-ink); text-decoration: underline; }

@media (min-width: 760px) {
  .seo-body h1 { margin-top: 26px; }
}