/* ============================================================
   COMPONENT: FAQ (Home)
   FILE: assets/css/faq.css
   Depends on: faq.html.
   Loaded after pricing.css (Phase 1.0 §6, in build order).

   Global Card System: `.surface--solid` (surfaces.css) supplies
   each <details> item's white background, hairline border,
   radius and resting shadow — same convention every prior
   card-based section (Portfolio/Testimonials/Case Studies/
   Pricing) already uses. Only item-specific layout (summary
   marker, answer spacing) is added here, scoped under
   .faq__item — nothing here redefines the surface system itself.

   Section background is light-gray, continuing the white/
   light-gray alternation established above (... Case Studies
   light-gray -> Pricing white -> FAQ light-gray) here.

   Stage 5.10 correction (Correction #3 — Navy visual rhythm):
   this section's background is now the same navy/gold gradient
   Hero already uses (surfaces.css's .surface--gradient formula,
   copied here rather than referenced as a class so component CSS
   load order can't silently override it) — the final Navy CTA
   band closing out the Homepage, bookending the Navy Hero at the
   top. Heading/subheading text below is switched to white/near-
   white to stay readable on navy; each FAQ item keeps its
   existing opaque white .surface--solid <details> treatment, so
   question/answer text and the disclosure marker are unaffected.

   No new JavaScript: this section uses native <details>/
   <summary> for expand/collapse, matching the "native details
   preferred, no unnecessary JS" rule for this stage. The marker
   rotation below is pure CSS driven by the `open` attribute.

   RTL readiness (Stage 5.10 scope only): logical properties
   (text-align: start, margin-inline / padding-inline) are used
   instead of physical left/right, matching testimonials.css's/
   case-studies.css's/pricing.css's convention, so this section
   reads correctly if an ancestor later sets dir="rtl" for Urdu
   content — no separate RTL stylesheet or breakpoint system is
   introduced.
   ============================================================ */

.faq {
  background:
    radial-gradient(circle at 78% 25%, rgba(var(--color-gold-rgb), 0.14), transparent 28%),
    linear-gradient(120deg, #061a32 0%, var(--color-navy) 52%, #153c62 100%);
  padding-block: var(--space-10);
}

.faq__inner {
  text-align: center;
}

.faq__heading {
  margin: 0 0 var(--space-2);
  color: var(--color-white);
  font-size: var(--text-h3);
}

.faq__subheading {
  max-width: 640px;
  margin-inline: auto;
  margin-block: 0 var(--space-6);
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--text-body);
}

/* ------------------------------------------------------------
   LIST
   Single-column stack at every breakpoint — a FAQ list reads
   top-to-bottom regardless of viewport, unlike the card grids
   used by Portfolio/Testimonials/Case Studies/Pricing above.
------------------------------------------------------------ */
.faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 780px;
  margin-inline: auto;
  text-align: start;
}

/* ------------------------------------------------------------
   ITEM (native <details>)
------------------------------------------------------------ */
.faq__item {
  padding: var(--space-3) var(--space-4);

  transition:
    border-color var(--duration-fast) var(--ease-premium),
    box-shadow var(--duration-fast) var(--ease-premium);
}

.faq__item[open] {
  border-color: rgba(var(--color-navy-rgb), 0.3);
  box-shadow: var(--shadow-md);
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-block: var(--space-1);

  color: var(--color-navy);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: var(--line-height-heading);
  cursor: pointer;
  list-style: none;
}

/* Remove the default disclosure triangle so we can supply our
   own marker via ::after, matching the site's existing inline-
   SVG icon convention instead of the browser-default glyph. */
.faq__question::-webkit-details-marker {
  display: none;
}

.faq__question::after {
  content: "";
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background-color: var(--color-gold);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9L12 15L18 9' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9L12 15L18 9' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  transition: transform var(--duration-fast) var(--ease-premium);
}

.faq__item[open] .faq__question::after {
  transform: rotate(180deg);
}

.faq__question:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

.faq__answer {
  padding-block-start: var(--space-2);
}

.faq__answer p {
  margin: 0;
  color: var(--color-dark-gray);
  font-size: var(--text-small);
  line-height: var(--line-height-body);
}

/* ------------------------------------------------------------
   CTA
   Reuses the existing global .btn system exactly as every prior
   section's CTA does — centered below the list.
------------------------------------------------------------ */
.faq__cta-wrap {
  margin-block-start: var(--space-6);
  text-align: center;
}

/* ------------------------------------------------------------
   RESPONSIVE
   Breakpoint values copied from tokens.css's documented
   reference values, same convention every prior section uses.
------------------------------------------------------------ */

@media (min-width: 1024px) {
  .faq {
    padding-block: var(--space-12);
  }

  .faq__item {
    padding: var(--space-4) var(--space-5);
  }

  .faq__cta-wrap {
    margin-block-start: var(--space-8);
  }
}

/* Small mobile: tighten spacing, keep items compact, no overflow */
@media (max-width: 479px) {
  .faq {
    padding-block: var(--space-8);
  }

  .faq__list {
    gap: var(--space-2);
  }

  .faq__item {
    padding: var(--space-2) var(--space-3);
  }

  .faq__question {
    font-size: 1rem;
  }
}