/* FAQs page. Loaded only on /faqs/ via $page['css']. */

.fq-hero__photo { aspect-ratio: 4 / 3; }
.fq-hero__count { margin-top: 16px; color: var(--on-dark-muted); font-size: .95rem; }
.fq-hero__count strong { font: 600 1.6rem/1 var(--font-display); color: #fff; margin-right: 4px; }

.fq-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.fq-nav { position: sticky; top: calc(var(--header-h) + 24px); }
.fq-nav__title { margin-bottom: 14px; font: 600 var(--fs-xs)/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.fq-nav ul { display: grid; gap: 4px; list-style: none; margin: 0; padding: 0; }
.fq-nav a {
  display: flex; gap: 12px; align-items: center; padding: 9px 12px 9px 9px; border-radius: 12px;
  text-decoration: none; font-weight: 500; font-size: .96rem; transition: background-color .25s, color .25s;
}
.fq-nav a:hover, .fq-nav a:focus-visible, .fq-nav a.is-active { background: var(--white); color: var(--brand); } /* .is-active: the topic being read (main.js) */
.fq-nav i { transition: transform .45s var(--ease-out); }
.fq-nav a:hover i, .fq-nav a.is-active i { transform: rotate(-6deg) scale(1.06); }
.fq-nav i { flex: 0 0 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--mint); color: var(--brand); font-size: .8rem; }

.fq-groups { display: grid; gap: clamp(56px, 7vw, 96px); }
.fq-group { scroll-margin-top: calc(var(--header-h) + 24px); }
.fq-group__head { display: flex; gap: 18px; align-items: center; margin-bottom: 10px; }
.fq-group__icon { flex: 0 0 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; background: var(--ink); color: var(--citron); }
.fq-group__num { display: block; margin-bottom: 6px; font: 600 .78rem/1 var(--font-display); color: var(--brand); }
.fq-group__title { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem); }

.fq-inline-link { color: #fff; font-weight: 600; white-space: nowrap; }

@media (max-width: 1023px) {
  .fq-layout { grid-template-columns: minmax(0, 1fr); }
  .fq-nav { position: static; }
  .fq-nav ul { display: flex; flex-wrap: wrap; gap: 8px; }
  .fq-nav a { background: var(--white); border: 1px solid var(--line-soft); padding: 6px 14px 6px 6px; font-size: .9rem; }
  .fq-nav i { flex-basis: 28px; height: 28px; }
}