/* -------------------------
   Accordion
------------------------- */
.accordion {margin-top:35px;}
.accordion .accordion-panel {background:var(--clr-neutral-100);}
.accordion .accordion-panel {margin-bottom:2px;}
.accordion .accordion-panel .accordion-content {display:grid; grid-template-rows:0fr; transition:grid-template-rows 500ms;}
.accordion .accordion-panel .accordion-content[aria-hidden="false"] {grid-template-rows:1fr;}
.accordion .accordion-panel .accordion-content > div {overflow:hidden;}
.accordion .accordion-panel.is-open .accordion-content {grid-template-rows:1fr;}
.accordion .accordion-panel h3 {margin:0; font-size:1rem;}
.accordion button {font:inherit; color:inherit; background:none; border:0; padding:0; text-align:left; cursor:pointer;}
.accordion .accordion-panel .accordion-title {color:var(--clr-primary-700);}
.accordion .accordion-panel .accordion-title .accordion-trigger {display:flex; align-items:flex-start; column-gap:16px; position:relative; width:100%; transition:color .3s ease-out; padding:0 0 0 1rem;}
.accordion .accordion-body {padding-left:1rem; padding-right:2rem; display:flex; column-gap:16px;}
.accordion .accordion-body>*:nth-child(2) {margin-top:0.5rem;}
.accordion .accordion-body>*:last-child {margin-bottom:22px;}

.faq-question {margin-top:1rem; margin-bottom:1rem;}
.faq-indicator {margin-left:auto; align-self:stretch; height:auto; flex-shrink:0; display:inline-block; position:relative; width:55px; background-color:var(--clr-primary-400);}
.icon-faq-question,
.icon-faq-answer {display:inline-block; flex-shrink:0; position:relative; height:34px; width:34px; border-radius:50%; border:2px solid var(--clr-primary-700); color:var(--clr-primary-400);}
.icon-faq-question::before,
.icon-faq-answer::before {display:flex; justify-content:center; align-items:center; height:100%;}
.icon-faq-question {margin-top:.75rem;}
.icon-faq-question::before {content:'Q';}
.icon-faq-answer {background-color:var(--clr-primary-700);}
.icon-faq-answer::before {content:'A';}
.faq-indicator::before,
.faq-indicator::after {content:''; position:absolute; top:50%; left:50%; transform:translateX(-50%) translateY(-50%); width:22px; height:6px; background-color:var(--clr-neutral-100); transition:transform .3s ease-out;}
.faq-indicator::after {transform:translateX(-50%) translateY(-50%) rotate(90deg);}
.accordion .accordion-panel .accordion-title .accordion-trigger[aria-expanded="true"] .faq-indicator::after {transform:translateX(-50%) translateY(-50%) rotate(180deg);}
.accordion .accordion-panel.is-open .faq-indicator::after {transform:translateX(-50%) translateY(-50%) rotate(180deg);}

@media (min-width:576px) {
    .accordion .accordion-body,
    .accordion .accordion-panel .accordion-title .accordion-trigger {column-gap:20px;}
    .accordion .accordion-panel h3 {font-size:1.125rem;}
    .accordion .accordion-body {padding-right:5rem;}
}