/* ── FAQ page — overrides & extensions of base.css / index.css ────────── */

/* index.css caps .faq-list at 720px/centered — a deliberate readability
   width for index.html's own short 8-question list. This page has 24
   questions across 5 categories, so let it use the full container width
   instead of sitting in its own narrow, visually "floating" column. */
.faq-list { max-width: none; margin: 0; }

/* Simple "← Back to home" nav link (index.html uses a waitlist button instead) */
.nav-back {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-secondary);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color var(--transition);
}
.nav-back:hover { color: var(--color-primary-dark); }

/* Single-column hero (no route-visualization card, so no .hero-grid here) —
   left-aligned at full container width, same as every other section on this
   page and on index.html, not narrowed/centered into its own little column. */
.faq-hero { position: relative; overflow: hidden; padding-bottom: 32px; }

/* index.css caps .hero-sub at 480px — sized for its own two-column hero
   where the text already sits in a half-width .hero-grid column. This
   hero has no second column, so let the subtext use the full container
   width instead of wrapping at under half of it. */
.faq-hero .hero-sub { max-width: none; }

/* Soft, oversized paw-print watermark — same accent already used tiny (and at
   0.08 opacity) inside index.html's route SVG, just scaled up and given more
   room to breathe since this hero has no two-column visual of its own. */
.faq-hero-watermark {
  position: absolute;
  top: 50%;
  right: -40px;
  transform: translateY(-50%);
  font-size: 320px;
  line-height: 1;
  opacity: 0.06;
  pointer-events: none;
  user-select: none;
}

/* Category quick-links — both a real navigation aid across 24 questions and
   an internal-linking signal for SEO. */
.faq-jump-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}
.faq-jump-nav a {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary-dark);
  background: var(--color-primary-light);
  padding: 8px 16px;
  border-radius: 100px;
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
.faq-jump-nav a:hover {
  background: var(--color-primary);
  color: #fff;
}

/* Alternate background between category sections for visual rhythm — same
   light-green treatment as index.html's "Ready in three steps" section. */
.faq-section-alt {
  background: var(--color-primary-light);
  position: relative;
  overflow: hidden;
}
.faq-section-alt::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: rgba(122,158,107,0.12);
}
.faq-section-alt::after {
  content: '';
  position: absolute;
  bottom: -80px; left: -40px;
  width: 240px; height: 240px;
  border-radius: 50%;
  background: rgba(122,158,107,0.10);
}
.faq-section-alt .container { position: relative; z-index: 1; }

/* Small category pills inside a FAQ answer (currently just Law-Paws) —
   lighter/smaller than .faq-jump-nav since they sit inline in body text. */
.faq-answer-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 14px 0;
}
.faq-answer-tags span {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary-dark);
  background: var(--color-primary-light);
  border-radius: 100px;
  padding: 4px 12px;
}

/* Label + description breakdown inside a FAQ answer (Law-Paws categories) */
.faq-detail-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 18px 0;
}
.faq-detail-item {
  padding-left: 14px;
  border-left: 3px solid var(--color-primary-light);
}
.faq-detail-item strong {
  display: block;
  color: var(--color-text);
  font-weight: 700;
  margin-bottom: 2px;
}

.faq-contact-note {
  text-align: center;
  color: var(--color-secondary);
  font-size: 15px;
  margin-top: 56px;
}
.faq-contact-note a { color: var(--color-primary-dark); }