/* ---------- FAQ page — "Aurora" redesign ----------
   Visual-only redesign of the standalone FAQ page. Scoped entirely under
   .faq-hero / .faq-page so the homepage's own FAQ teaser (.faq, reusing
   the shared .faq__item / .faq__list primitives from style.css) is not
   touched. Do not rename .faq__item, .faq__item-label or .faq__item-num —
   assets/js/main.js queries .faq__item directly for the "one open at a
   time" accordion behaviour and for its scroll-reveal auto-tagger.
   Question/answer copy inside <summary>/<p> is verbatim from the client's
   FAQ PDF and is untouched by anything below; this file only restyles
   the chrome around it. */

/* ---------- Hero ---------- */
.faq-hero { position: relative; }
/* Blurred glow orbs dropped for the "solid Material" pass. */
.faq-hero__orb { display: none; }
.faq-hero .wrap { position: relative; z-index: 1; }
.faq-hero__illustration { display: block; margin: 32px auto 8px; }
.faq-hero__stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 36px;
  margin-top: 8px;
}
.faq-hero__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.faq-hero__stat strong {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  font-weight: 700;
  background: var(--gradient-aurora);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.faq-hero__stat span { font-size: 0.82rem; color: var(--ink-on-dark-soft); }

/* ---------- Page layout: sidebar + flowing categories ---------- */
.faq-page { padding: 90px 0 120px; background: var(--paper-soft); }
.faq-page .wrap { max-width: 1180px; }
.faq-page__layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

/* ---------- Sidebar nav ---------- */
.faq-nav {
  position: sticky;
  top: 100px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--shadow-sm);
}
.faq-nav__label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 14px;
}
.faq-nav__list { display: flex; flex-direction: column; gap: 4px; }
.faq-nav__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  font-weight: 700;
  font-size: 0.88rem;
  transition: background 0.15s ease, color 0.15s ease;
}
.faq-nav__link:hover { background: var(--paper-soft); color: var(--ink); }
.faq-nav__link.is-active { background: var(--accent-soft); color: var(--accent-dark); }
.faq-nav__link[data-cat-link="cat-billing"].is-active { background: var(--violet-soft); color: var(--violet-dark); }
.faq-nav__link[data-cat-link="cat-data"].is-active { background: var(--indigo-soft); color: var(--indigo-dark); }
.faq-nav__link[data-cat-link="cat-support"].is-active { background: var(--coral-soft); color: var(--coral-dark); }
.faq-nav__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--paper-soft);
  color: var(--ink-soft);
  flex: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.faq-nav__icon svg { width: 15px; height: 15px; }
.faq-nav__link.is-active .faq-nav__icon { background: var(--accent); color: #fff; }
/* Each of the four FAQ categories gets its own colour, matching its
   section header below, rather than every nav item turning the same
   turquoise once active. */
.faq-nav__link[data-cat-link="cat-billing"].is-active .faq-nav__icon { background: var(--violet); }
.faq-nav__link[data-cat-link="cat-data"].is-active .faq-nav__icon { background: var(--indigo); }
.faq-nav__link[data-cat-link="cat-support"].is-active .faq-nav__icon { background: var(--coral); }
.faq-nav__text { flex: 1; }
.faq-nav__count {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--ink-soft);
  background: var(--paper-soft);
  border-radius: 999px;
  padding: 2px 8px;
  flex: none;
}
.faq-nav__link.is-active .faq-nav__count { color: var(--accent-dark); background: var(--accent-soft); }
.faq-nav__help {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  text-align: center;
}
.faq-nav__help p { font-size: 0.85rem; color: var(--ink-soft); margin-bottom: 12px; }
.faq-nav__help .btn { width: 100%; padding: 10px 16px; font-size: 0.85rem; }

/* ---------- Category groups ---------- */
.faq-page__content { min-width: 0; }
.faq-page__category { margin-top: 52px; scroll-margin-top: 100px; }
.faq-page__category:first-child { margin-top: 0; }
.faq-page__category h2 {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 24px;
}
.faq-page__category-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex: none;
  color: #fff;
  background: var(--accent);
  box-shadow: var(--shadow-md);
}
/* One colour per category — "The Platform" keeps the default turquoise. */
#cat-billing .faq-page__category-icon { background: var(--violet); }
#cat-data .faq-page__category-icon { background: var(--indigo); }
#cat-support .faq-page__category-icon { background: var(--coral); }
.faq-page__category-icon svg { width: 20px; height: 20px; }

/* ---------- Accordion cards ----------
   Restyles the shared .faq__item/.faq__list primitives (defined for the
   ruled, borderless homepage teaser in style.css) into standalone cards
   for this page only. Structure, class names and the <details>/<summary>
   semantics that main.js relies on are unchanged. */
.faq-page .faq__list { display: flex; flex-direction: column; gap: 14px; border-top: none; }
.faq-page .faq__item {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 26px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.faq-page .faq__item:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.faq-page .faq__item[open] { border-color: var(--accent-soft-border); box-shadow: var(--shadow-md); }
.faq-page .faq__item summary { gap: 16px; }
.faq-page .faq__item-label { gap: 0; }
.faq-page .faq__item-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  margin-right: 18px;
  font-size: 0.85rem;
  background: var(--paper-soft);
  color: var(--accent-dark);
  box-shadow: none;
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.faq-page .faq__item[open] .faq__item-num {
  background: var(--gradient-aurora);
  color: #fff;
  box-shadow: var(--shadow-glow);
}
.faq-page .faq__item summary::after {
  content: '';
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--paper-soft) center / 13px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c5866' stroke-width='2.4' stroke-linecap='round'%3E%3Cline x1='12' y1='4' x2='12' y2='20'/%3E%3Cline x1='4' y1='12' x2='20' y2='12'/%3E%3C/svg%3E");
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), border-color 0.25s ease, background-color 0.25s ease;
}
.faq-page .faq__item[open] summary::after {
  transform: rotate(135deg);
  border-color: var(--accent);
  background-color: var(--accent-soft);
}
.faq-page .faq__item p { margin: 16px 0 0 54px; max-width: 640px; }
.faq-page .faq__item p + p { margin-top: 14px; }

/* Smooth open/close: <details> can't transition height natively, but a
   short fade+rise on the revealed content reads as an intentional
   animation rather than an instant snap. */
.faq-page .faq__item p { animation: faqReveal 0.28s ease both; }
@keyframes faqReveal {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .faq-page .faq__item p { animation: none; }
}

/* ---------- Footer block ---------- */
.faq-page__footer {
  margin-top: 60px;
  padding: 28px 26px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.faq-page__footer p { font-size: 0.92rem; margin-bottom: 6px; color: var(--ink-soft); }
.faq-page__disclaimer { color: var(--ink-soft); font-size: 0.88rem; margin-top: 16px; line-height: 1.7; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .faq-page__layout { grid-template-columns: 1fr; gap: 24px; }
  .faq-nav {
    position: sticky;
    top: 8px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .faq-nav__label, .faq-nav__help { display: none; }
  .faq-nav__list { flex-direction: row; flex: none; }
  .faq-nav__link { white-space: nowrap; }
  .faq-nav__text { flex: none; }
}
@media (max-width: 560px) {
  .faq-page .faq__item { padding: 18px 16px; }
  .faq-page .faq__item p { margin-left: 0; margin-top: 14px; }
  .faq-hero__stats { gap: 22px; }
  .faq-page__footer { padding: 22px 18px; }
}