/* Native adaptation of George's supplied FAQ component, in the live Navicade kit. */
#questions .head { margin-inline:auto; text-align:center; justify-items:center; }
#questions .head .sub { max-width:48ch; }
#questions .faq { display:grid; gap:14px; max-width:896px; width:100%; margin-inline:auto; border:0; }
#questions .faq details { min-width:0; border:1px solid var(--hair); border-radius:12px; background:#060606; transition:border-color 160ms var(--ease-ui),background-color 160ms var(--ease-ui); }
#questions .faq details[open] { background:#0A0A0A; border-color:rgba(255,255,255,.19); }
#questions .faq summary { padding:24px; gap:24px; border-radius:11px; font-size:18px; font-weight:550; line-height:1.45; background:transparent; }
#questions .faq-question { transition:transform 200ms var(--ease-ui); }
#questions .faq summary .faq-chevron { width:20px; height:20px; flex:none; color:var(--text-2); transition:transform 300ms ease-in-out,color 160ms var(--ease-ui); }
#questions .faq details[open] .faq-chevron { transform:rotate(180deg); }
#questions .faq-answer { padding:0 24px 24px; }
#questions .faq .faq-answer p { max-width:72ch; padding:0; color:var(--text-2); line-height:1.65; }
#questions .faq summary:focus-visible { outline:2px solid var(--violet-bright); outline-offset:4px; }
@media(hover:hover) and (pointer:fine) {
  #questions .faq details:hover { border-color:rgba(255,255,255,.24); background:#0C0C0C; }
  #questions .faq summary:hover .faq-question { transform:translateX(4px); }
  #questions .faq summary:hover .faq-chevron { color:var(--text); }
}
/* Progressive enhancement: native disclosure remains functional without this feature. */
@supports (interpolate-size:allow-keywords) and selector(details::details-content) {
  #questions .faq { interpolate-size:allow-keywords; }
  #questions .faq details::details-content { block-size:0; opacity:0; overflow:clip; transition:block-size 300ms ease-in-out,opacity 220ms ease-in-out,content-visibility 300ms allow-discrete; }
  #questions .faq details[open]::details-content { block-size:auto; opacity:1; }
}
@media(max-width:720px) {
  #questions .faq { gap:12px; }
  #questions .faq summary { padding:20px; gap:16px; font-size:16px; }
  #questions .faq-answer { padding:0 20px 20px; }
}
@media(prefers-reduced-motion:reduce) {
  #questions .faq details,#questions .faq-question,#questions .faq summary .faq-chevron { transition:none; }
  #questions .faq details::details-content { transition:none; }
  #questions .faq summary:hover .faq-question { transform:none; }
}