/*
 * NoMoldWNC — Inner-page components.
 * Shared patterns used across service, info-hub, and utility pages that
 * aren't already covered by theme.css / site.css / home.css: FAQ accordion,
 * the reviews wall, and small utility layouts (error page, success panel).
 */

/* ── FAQ accordion ─────────────────────────────────────────────── */
.faq-list { max-width: 46rem; margin: 3rem auto 0; display: flex; flex-direction: column; gap: 1rem; }
.faq-item {
  background: #fff;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-subtle);
  overflow: hidden;
  transition: border-color var(--duration-standard) ease, box-shadow var(--duration-standard) ease;
}
.faq-item.open { border-color: var(--color-border-brand-30); box-shadow: var(--shadow-card); }
.faq-q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.35rem 1.6rem;
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 1.02rem; font-weight: var(--font-weight-bold);
  color: var(--color-text-primary); text-align: left;
}
.faq-q svg { width: 20px; height: 20px; color: var(--color-brand-primary); flex-shrink: 0; transition: transform var(--duration-standard) var(--ease-brand); }
.faq-item.open .faq-q svg { transform: rotate(180deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height var(--duration-medium) var(--ease-brand); }
.faq-a-inner { padding: 0 1.6rem 1.5rem; }
.faq-a-inner p { color: var(--color-text-secondary); line-height: 1.65; }
.faq-group-title { margin: 3rem auto 0; max-width: 46rem; font-size: var(--font-size-eyebrow); font-weight: var(--font-weight-extrabold); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--color-brand-primary); }
.faq-group-title:first-of-type { margin-top: 0; }
.faq-group-title + .faq-list { margin-top: 1.2rem; }

/* ── Reviews wall (masonry-style columns of testi-cards) ─────────── */
.reviews-wall { column-count: 3; column-gap: 1.75rem; margin-top: 3.5rem; }
.reviews-wall .testi-card { break-inside: avoid; margin-bottom: 1.75rem; }
@media (max-width: 1100px) { .reviews-wall { column-count: 2; } }
@media (max-width: 680px) { .reviews-wall { column-count: 1; } }

/* ── Small trust strip (reused on service/info pages without the full hero) */
.trust-strip {
  display: flex; flex-wrap: wrap; gap: 1.4rem 2.4rem; align-items: center;
  margin-top: 1.8rem; padding-top: 1.8rem; border-top: 1px solid var(--color-border-subtle);
}
.trust-strip-item { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; color: var(--color-text-secondary); }
.trust-strip-item strong { color: var(--color-text-primary); }
.trust-strip-item svg { width: 18px; height: 18px; color: var(--color-brand-primary); flex-shrink: 0; }

/* ── Error page (404) ─────────────────────────────────────────── */
.error-hero { text-align: center; padding-block: 7rem; }
.error-code {
  font-family: var(--font-family-display);
  font-size: clamp(4.5rem, 14vw, 8rem);
  font-weight: var(--font-weight-heading);
  line-height: 1; letter-spacing: -0.03em;
  background-image: var(--gradient-brand);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.error-hero .t-h2 { margin-top: 1rem; }
.error-hero .t-lead { margin: 1.2rem auto 0; max-width: 34rem; }
.error-hero .hero-actions { justify-content: center; margin-top: 2.2rem; }

/* ── Success / thank-you panel ────────────────────────────────── */
.success-hero { padding-block: 7rem; }
.success-panel {
  max-width: 34rem; margin-inline: auto; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 1.3rem;
}
.success-panel .icon-chip { width: 4.5rem; height: 4.5rem; border-radius: 9999px; background: #e7f8f0; color: var(--color-status-success); }
.success-panel .icon-chip svg { width: 32px; height: 32px; }
.success-panel .hero-actions { justify-content: center; margin-top: 0.8rem; }

/* ── Numbered check list (used on niche/business pages) ─────────── */
.check-list { list-style: none; margin: 1.4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.9rem; }
.check-list li { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 1rem; color: var(--color-text-body); line-height: 1.5; }
.check-list svg { width: 20px; height: 20px; color: var(--color-status-success); flex-shrink: 0; margin-top: 0.1rem; }

/* ── Two-column step card (used for the InstaPURE / EverPURE pair) ─ */
.step-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem; margin-top: 2.5rem; }
.step-pair-card { background: #fff; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-card); box-shadow: var(--shadow-subtle); padding: 2rem 2.1rem; }
.step-pair-card .card-eyebrow { font-size: var(--font-size-eyebrow); font-weight: var(--font-weight-extrabold); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--color-brand-primary); }
.step-pair-card h3 { font-size: 1.35rem; margin-top: 0.6rem; }
.step-pair-card p { margin-top: 0.7rem; color: var(--color-text-secondary); font-size: 0.96rem; line-height: 1.6; }
@media (max-width: 720px) { .step-pair { grid-template-columns: 1fr; } }