/* FAQ page (/faq/) — topic chips, sticky topic list, question groups, contact cards.
   Uses only design tokens from style.css. */

/* Hero: jump links to each topic ----------------------------------------------- */
.faq-jump { margin-top: 36px; }
.faq-jump ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 880px; margin-inline: auto; }
.faq-jump a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-2);
  transition: border-color .2s, color .2s, transform .2s var(--ease);
}
.faq-jump a:hover { border-color: var(--ink); color: var(--ink); transform: translateY(-1px); }
.faq-jump .icon { width: 16px; height: 16px; color: var(--brand-strong); }

/* Layout: sticky topic list + question groups ---------------------------------- */
.faq-layout { display: grid; gap: 56px; }
.faq-aside { display: none; }

.faq-aside__title {
  padding: 0 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.faq-toc { display: grid; gap: 2px; margin-top: 12px; }
.faq-toc a {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--muted);
  transition: background-color .15s, color .15s, box-shadow .15s;
}
.faq-toc a:hover { background: rgba(11, 18, 32, .04); color: var(--ink); }
.faq-toc a[aria-current] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: inset 2px 0 0 var(--brand), var(--shadow-sm);
}
.faq-toc__num { flex: none; font-family: var(--font-mono); font-size: 12px; color: var(--soft); }
.faq-toc a[aria-current] .faq-toc__num { color: var(--brand-strong); }
.faq-toc__count { flex: none; margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--soft); }

.faq-aside__help {
  margin-top: 24px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  font-size: 14.5px;
  color: var(--muted);
}
.faq-aside__help b { display: block; margin-bottom: 4px; color: var(--ink); }
.faq-aside__help .link-arrow { margin-top: 14px; font-size: 14.5px; }

.faq-groups { display: grid; gap: clamp(56px, 7vw, 88px); min-width: 0; }

.faq-group__head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 24px; }
.faq-group__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--ink);
  color: var(--mint);
}
.faq-group__icon .icon { width: 22px; height: 22px; }
.faq-group__num {
  margin-bottom: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--brand-strong);
}
.faq-group__title {
  font-size: clamp(1.6rem, 1.25rem + 1.1vw, 2.15rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.faq-group__text { margin-top: 8px; max-width: 60ch; font-size: 15.5px; color: var(--muted); }

.faq-group .faq__item p a {
  color: var(--brand-strong);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgba(4, 120, 87, .35);
  text-underline-offset: 3px;
  transition: text-decoration-color .15s;
}
.faq-group .faq__item p a:hover { text-decoration-color: currentColor; }

/* Still have a question? ------------------------------------------------------- */
.faq-help .contact-card { box-shadow: var(--shadow-sm); }
.faq-help .contact-card h3 { margin-top: 16px; }
.faq-help .contact-card strong { display: inline-flex; align-items: center; gap: 8px; overflow-wrap: anywhere; }
.faq-help .contact-card strong .icon { width: 18px; height: 18px; flex: none; transition: transform .2s var(--ease); }
.faq-help .contact-card:hover strong .icon { transform: translate(2px, -2px); }
.faq-help .contact-card:hover strong .icon-arrow-right { transform: translateX(3px); }

.faq-help__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--brand-tint);
  color: var(--brand-strong);
}
.faq-help__icon .icon { width: 22px; height: 22px; }
.faq-help__icon--wa { background: var(--wa); color: var(--ink); }

.faq-help__card--dark { border-color: var(--ink); background: var(--ink); }
a.faq-help__card--dark:hover { border-color: var(--ink); }
.faq-help__card--dark h3,
.faq-help__card--dark strong { color: #fff; }
.faq-help__card--dark p { color: var(--night-muted); }
.faq-help__card--dark .faq-help__icon { background: rgba(52, 211, 153, .14); color: var(--mint); }

/* Desktop: two columns with a sticky topic list -------------------------------- */
@media (min-width: 1024px) {
  .faq-layout { grid-template-columns: 250px minmax(0, 1fr); gap: 80px; align-items: start; }
  .faq-aside { position: sticky; top: calc(var(--header-h) + 24px); display: block; }
}

/* Wide screens: all six topic chips on one row */
@media (min-width: 1280px) {
  .faq-jump ul { max-width: none; }
}

/* Phones: an even two-column grid instead of a ragged row of pills */
@media (max-width: 639px) {
  .faq-jump ul { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .faq-jump li { display: flex; }
  .faq-jump a {
    flex: 1;
    min-height: 48px;
    padding: 8px 12px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.3;
  }
  .faq-group__head { gap: 14px; }
  .faq-group__icon { width: 44px; height: 44px; border-radius: 12px; }
  .faq-group__icon .icon { width: 20px; height: 20px; }
}