/* FAQ: retain native details/summary, with space for complete mobile questions. */
.faq-page .faq-list summary:focus-visible{
  outline:3px solid #a5411d;
  outline-offset:4px;
  border-radius:.35rem;
}
.faq-page .faq-list details>p{
  font-size:1rem;
  line-height:1.75;
}

@media (max-width:768px){
  /* One outer gutter and one card inset, rather than stacked section gutters. */
  .faq-page .faq-list{
    box-sizing:border-box;
    width:100%;
    max-width:none;
    margin-inline:0;
    padding-inline:1rem;
    gap:1.5rem;
  }
  .faq-page .faq-list>section{
    min-width:0;
    padding:1.5rem clamp(.75rem,3vw,1.25rem) .5rem;
  }
  .faq-page .faq-list .section-heading{
    grid-template-columns:minmax(0,1fr);
    gap:.75rem;
    padding-top:1.25rem;
    margin-bottom:1.5rem;
  }
  .faq-page .faq-list .section-heading :is(h2,p){
    grid-column:1;
    min-width:0;
  }
  .faq-page .faq-list summary{
    grid-template-columns:minmax(0,1fr) 2.75rem;
    grid-template-areas:"number toggle" "question toggle";
    align-items:start;
    gap:.4rem .75rem;
    min-height:0;
    padding:1.25rem 0;
  }
  .faq-page .faq-list summary>span{
    grid-area:number;
    font-size:1rem;
    line-height:1.4;
  }
  .faq-page .faq-list summary h3{
    grid-area:question;
    min-width:0;
    margin:0;
    font-size:1.25rem;
    line-height:1.35;
    word-break:normal;
    overflow-wrap:normal;
    hyphens:manual;
  }
  .faq-page .faq-list summary i{
    grid-area:toggle;
    align-self:center;
    width:2.75rem;
    height:2.75rem;
  }
  .faq-page .faq-list details>p{
    max-width:none;
    margin:0 0 1.5rem;
  }
}

@media (forced-colors:active){
  .faq-page .faq-list summary:focus-visible{outline-color:Highlight}
}