/* ==========================================================================
   Chuk Yip Company — Support pages layout
   Routes: /capabilities/, /how-it-works/, /about/, /los-angeles/, /faq/
   Shared components (header, footer, buttons, cards, steps, faq-item,
   cta-band, breadcrumbs, placeholder) live in components.css; this file
   holds support-page layout and support-only blocks.
   Requires tokens.css + base.css + components.css loaded first.
   ========================================================================== */

/* --- Page head (non-home intro: H1 + lead + optional primary CTA) --- */
.page-head {
  padding-block: var(--space-5) var(--space-6);
}

.page-head__inner {
  max-width: var(--measure);
}

.page-head__lead {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
}

.page-head__actions {
  margin-block-start: var(--space-3);
}

/* Standalone sourced statement line (e.g. "Meetings by appointment in Los
   Angeles."); same treatment as the home .section-spec__statement. */
.statement {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-xl);
  color: var(--color-text);
}

/* --- Direct-answer block (sourced question + self-contained answer) --- */
.answer-block {
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.answer-block h2 {
  font-size: var(--text-2xl);
}

.answer-block__meta {
  padding-top: var(--space-2);
  border-top: 1px dashed var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* --- Prose sections (about / capabilities / LA body copy) --- */
.prose-section {
  padding-block: var(--space-4);
  scroll-margin-top: var(--space-3);
}

.prose-section + .prose-section {
  border-top: 1px solid var(--color-border);
}

.prose-section__inner {
  max-width: var(--measure);
}

.prose-section h2 {
  margin-bottom: var(--space-2);
  font-size: var(--text-2xl);
}

/* --- 9-step process (/how-it-works/); step heads are h2 per source level --- */
.section-steps .steps {
  --grid-min: 17rem;
}

.section-steps .steps__title {
  font-size: var(--text-lg);
}

/* --- FAQ category jump navigation (/faq/) --- */
.faq-nav {
  padding-block: var(--space-3);
  background: var(--color-surface);
  border-block: 1px solid var(--color-border);
}

.faq-nav__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-strong);
}

.faq-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.faq-nav__list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 1rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
}

.faq-nav__list a:hover {
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
  color: var(--color-text);
}

/* --- FAQ categories (/faq/): 10 anchored sections --- */
.faq-category {
  padding-block: var(--space-4);
  scroll-margin-top: var(--space-3);
}

.faq-category + .faq-category {
  border-top: 1px solid var(--color-border);
}

.faq-category h2 {
  margin-bottom: var(--space-3);
  font-size: var(--text-2xl);
}

.faq-category .faq-list {
  max-width: 52rem;
}

/* Question number + text inside <summary>; text takes the flex space so the
   shared "+" indicator keeps its place at the end. */
.faq-item__q {
  flex: 1;
}

.faq-item__num {
  margin-right: 0.75em;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-accent-strong);
}

/* Sourced "Condition:" line kept visibly attached to its answer. */
.faq-item__condition {
  padding-top: var(--space-2);
  border-top: 1px dashed var(--color-border);
  font-size: var(--text-sm);
}

/* --- Final CTA spacing (shared .cta-band lives in components.css) --- */
.section-final {
  padding-top: 0;
}

/* Inline (non-button) links inside the dark CTA band need the light gold for
   contrast; components.css only styles .cta-band__email links. */
.cta-band a:not(.btn) {
  color: var(--color-accent-on-dark);
}

.cta-band a:not(.btn):hover {
  color: #FAF8F5;
}

/* --- Motion --- */
@media (prefers-reduced-motion: no-preference) {
  .faq-nav__list a {
    transition: background-color var(--duration-fast) var(--ease-standard),
      border-color var(--duration-fast) var(--ease-standard);
  }
}