/*
 * faq.css — FAQ page styles (tall photo hero, section index, accordion cards, payment cards)
 * ═══════════════════════════════════════════════════════════════════════
 * PATH: css/faq.css
 * ROLE: The hero band photo for /faq (scoped by the layout's data-page="faq"),
 *       the two-column layout (sticky section index + questions), numbered
 *       section headings, the accordion cards (h3 > button with an SVG
 *       chevron; open state = data-open on .faq-item, animated with
 *       grid-template-rows — driven by js/faq.js), the payment-method icon
 *       cards, and the ≤1000px stack where the index becomes a chip row.
 *       The closing contact band is the shared .site-cta (css/site-shell.css).
 *       Tokens (--band, --teal, --display, --serif, --line…) come from
 *       css/site-shell.css.
 * USED BY: app/Views/public/faq.php (loaded through the layout's 'head'
 *       section).
 * Last Modified: 2026-09-13 — created (hero photo); same day rewritten for the
 *                body restyle (the moved legacy rules are gone with the old markup)
 */

/* ── hero band photo ─────────────────────────────────── */
.wrapper2[data-page="faq"] {
  background-image: url(../images/home/hero-faq.jpg);
  background-attachment: scroll;   /* fixed would frame only the top edge in a 430px band */
  background-position: center 45%; /* consultation at a table (laptops, charts, hands; no
                                      face at centre, so the title never sits on one at any
                                      width) — nudekarma stock library
                                      (devindex hero/ronaldcandonga-job-5382501_1920.jpg), 16:9 cut */
}

/* ── page frame ──────────────────────────────────────── */
.faq-page {
  padding: clamp(2.5rem, 5vw, 4rem) 0 0;
  overflow-x: clip;
}
.faq-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
}
.faq-main {
  min-width: 0;
}

/* ── section index (sticky on desktop) ───────────────── */
.faq-side {
  position: sticky;
  top: calc(62px + 1.25rem);       /* the shrunken header height + air */
}
.faq-toc {
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.faq-toc-title {
  margin: 0;
  padding: .9rem 1.25rem;
  background: var(--band);
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.faq-toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.faq-toc li + li {
  border-top: 1px solid var(--line);
}
.faq-toc li a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .8rem 1.25rem;
  font-family: var(--display);
  font-size: .92rem;
  color: var(--ink);
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.faq-toc li a:hover,
.faq-toc li a:focus {
  background: var(--ground);
  color: var(--teal-deep);
  text-decoration: none;
}
.faq-toc li a[aria-current="true"] {
  background: var(--teal-tint);
  color: var(--teal-deep);
  box-shadow: inset 4px 0 0 var(--teal);
}
.faq-toc-count {
  font-size: .74rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.faq-toc-all {
  display: block;
  width: 100%;
  padding: .85rem 1.25rem;
  border: 0;
  border-top: 1px solid var(--line);
  background: none;
  text-align: left;
  font-family: var(--display);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--teal-deep);
  cursor: pointer;
}
.faq-toc-all:hover,
.faq-toc-all:focus-visible {
  background: var(--ground);
}

/* ── sections ────────────────────────────────────────── */
.faq-section {
  scroll-margin-top: 90px;         /* clears the fixed header on #anchor jumps */
}
.faq-section + .faq-section {
  margin-top: 3rem;
}
.faq-section-title {
  display: flex;
  align-items: baseline;
  gap: .9rem;
  margin: 0 0 1.25rem;
  padding-bottom: .75rem;
  border-bottom: 2px solid var(--teal);
  font-family: var(--display);
  font-stretch: 112%;
  font-weight: 800;
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  letter-spacing: -.01em;
  color: var(--ink);
}
.faq-section-num {
  font-family: var(--display);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .18em;
  color: var(--teal-deep);
}

/* ── accordion cards ─────────────────────────────────── */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.faq-item {
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  scroll-margin-top: 90px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.faq-item[data-open] {
  border-color: var(--teal);
  box-shadow: 0 10px 24px rgba(20, 32, 31, .06);
}
.faq-q {
  margin: 0;
  font-size: inherit;
}
.faq-q button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 1rem 1.25rem;
  border: 0;
  background: none;
  text-align: left;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.35;
  color: var(--ink);
  cursor: pointer;
  transition: color .2s ease;
}
.faq-q button:hover {
  color: var(--teal-deep);
}
.faq-q button:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: -2px;
}
.faq-chevron {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  padding: 9px;
  border-radius: 50%;
  background: var(--teal-tint);
  color: var(--teal-deep);
  transition: transform .3s var(--ease), background .2s ease, color .2s ease;
}
.faq-item[data-open] .faq-chevron {
  transform: rotate(180deg);
  background: var(--teal);
  color: var(--band);
}
/* the answer opens by animating the grid track from 0fr to 1fr */
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s var(--ease);
}
.faq-item[data-open] .faq-a {
  grid-template-rows: 1fr;
}
.faq-a-inner {
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0s .35s;
}
.faq-item[data-open] .faq-a-inner {
  visibility: visible;
  transition-delay: 0s;
}
.faq-a-copy {
  padding: 0 1.25rem 1.25rem;
  font-family: var(--serif);
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--ink-soft);
}

/* ── payment methods (inside one answer) ─────────────── */
.faq-methods {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .9rem;
}
.faq-methods li {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  padding: .9rem 1rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--ground);
  font-size: .95rem;
  line-height: 1.5;
}
.faq-method-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--teal-tint);
  color: var(--teal-deep);
}
.faq-method-icon svg {
  width: 20px;
  height: 20px;
}
.faq-methods strong {
  display: block;
  margin-bottom: .15rem;
  font-family: var(--display);
  font-size: .9rem;
  color: var(--ink);
}

/* ── responsive ──────────────────────────────────────── */
@media (max-width: 1000px) {
  .faq-layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .faq-side {
    position: static;
  }
  .faq-toc ul {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .9rem 1rem;
  }
  .faq-toc li + li {
    border-top: 0;
  }
  .faq-toc li a {
    gap: .5rem;
    padding: .4rem .8rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: .82rem;
  }
  .faq-toc li a[aria-current="true"] {
    border-color: var(--teal);
    box-shadow: none;
  }
}
@media (max-width: 640px) {
  .faq-methods {
    grid-template-columns: 1fr;
  }
  .faq-q button {
    padding: .9rem 1rem;
    font-size: .96rem;
  }
  .faq-a-copy {
    padding: 0 1rem 1rem;
    font-size: .98rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .faq-a,
  .faq-a-inner,
  .faq-chevron,
  .faq-item {
    transition: none;
  }
}