/* path: core/static/ui/css/blocks/faq.css */

/* =============================================================================
   Faq
   ============================================================================= */

.Faq__head{
  margin-bottom:var(--space-4);
}

.Faq__body{
  margin-bottom:0;
}

.Faq__list{
  width:100%;
  max-width:none;
  display:grid;
  gap:var(--space-2);
}

/* =============================================================================
   Item
   ============================================================================= */

.FaqItem{
  border:1px solid var(--divider-2);
  border-radius:var(--r-m);
  background:var(--surface);
  overflow:hidden;
}

.FaqItem + .FaqItem{
  margin-top:0;
}

.FaqItem__button{
  width:100%;
  min-height:72px;
  padding:var(--space-4) 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-3);
  border:0;
  background:transparent;
  color:var(--text);
  text-align:left;
  cursor:pointer;
}

.FaqItem__title{
  display:block;
  font-family:var(--font-head);
  font-size:1.1rem;
  line-height:1.25;
  font-weight:700;
  letter-spacing:-.02em;
}

.FaqItem__icon{
  position:relative;
  width:20px;
  height:20px;
  flex:0 0 20px;
}

.FaqItem__icon::before,
.FaqItem__icon::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:16px;
  height:2px;
  border-radius:999px;
  background:var(--accent);
  transform:translate(-50%, -50%);
  transition:transform .18s ease, opacity .18s ease;
}

.FaqItem__icon::after{
  transform:translate(-50%, -50%) rotate(90deg);
}

.FaqItem.is-open .FaqItem__icon::after{
  opacity:0;
  transform:translate(-50%, -50%) rotate(90deg) scale(.7);
}

.FaqItem__content{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .22s ease;
}

.FaqItem.is-open .FaqItem__content{
  grid-template-rows:1fr;
}

.FaqItem__answer{
  min-height:0;
  overflow:hidden;
  padding:0 20px 0;
  color:var(--text-2);
  font-size:1rem;
  line-height:1.6;
}

.FaqItem.is-open .FaqItem__answer{
  padding:0 20px 20px;
}

/* =============================================================================
   Hover / focus
   ============================================================================= */

@media (hover:hover){
  .FaqItem__button:hover{
    background:rgba(255,255,255,.02);
  }
}

.FaqItem__button:focus-visible{
  outline:none;
  background:rgba(255,255,255,.02);
}

@media (min-width:768px){
  .Faq__head{
    margin-bottom:var(--space-5);
  }

  .FaqItem__button{
    min-height:78px;
    padding:20px 20px;
  }

  .FaqItem__title{
    font-size:1.15rem;
  }

  .FaqItem__answer{
    padding:0 20px 0;
  }

  .FaqItem.is-open .FaqItem__answer{
    padding:0 20px 20px;
  }
}