/* FAQ accordion styles
   Uses native <details>/<summary> for accessibility and keyboard support.
*/

.faq-accordion{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:16px;
}

.faq-item{
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--shadow);
  overflow:hidden;
  scroll-margin-top:90px;
}

.faq-item summary{
  cursor:pointer;
  padding:16px 18px;
  font-weight: 600;
  color:var(--text);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  list-style:none;
  -webkit-tap-highlight-color: transparent;
}

.faq-item summary::-webkit-details-marker{
  display:none;
}

.faq-item summary::after{
  content:"";
  width:10px;
  height:10px;
  border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted);
  transform: rotate(45deg);
  margin-top:6px;
  flex:0 0 auto;
  transition: transform 180ms ease;
}

.faq-item[open] summary{
  background:linear-gradient(180deg, rgba(2,46,71,.06), rgba(2,46,71,0));
  border-bottom:1px solid var(--border);
}

.faq-item[open] summary::after{
  transform: rotate(-135deg);
  margin-top:10px;
}

.faq-item summary:focus-visible{
  outline:3px solid rgba(222,43,38,.25);
  outline-offset:3px;
  border-radius:14px;
}

.faq-answer{
  padding:14px 18px 16px;
  color:var(--muted);
}

.faq-answer p{
  margin:0;
}

.faq-answer p + p{
  margin-top:12px;
}

@media (max-width: 640px){
  .faq-item summary{ padding:14px 16px; }
  .faq-answer{ padding:12px 16px 14px; }
}