/* faq.css — scoped visual component for the .faq section.
   Depends only on the site palette: ink #251d18, muted #695b51,
   accent #ff7a21, focus #ffb347, divider #d8c9bd, page #f6f1ea.
   Every selector is scoped under .faq. No element, body, or
   cross-section selectors. */

.faq details{
  position:relative;
  border-bottom:1px solid #d8c9bd;
  padding:22px 16px;
  margin:0 -16px;
  background:transparent;
  transition:background-color .15s ease;
}

.faq details:hover{
  background:#efe5da;
}

.faq summary{
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  font-size:19px;
  line-height:1.35;
  font-weight:700;
  color:#251d18;
  -webkit-tap-highlight-color:transparent;
}

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

.faq summary::after{
  content:"";
  flex:0 0 auto;
  width:14px;
  height:14px;
  position:relative;
  transition:transform .15s ease;
}

.faq summary::after{
  background:
    linear-gradient(#ff7a21,#ff7a21) center / 100% 2px no-repeat,
    linear-gradient(#ff7a21,#ff7a21) center / 2px 100% no-repeat;
}

.faq details[open] summary{
  color:#ff7a21;
}

.faq details[open] summary::after{
  background:
    linear-gradient(#ff7a21,#ff7a21) center / 100% 2px no-repeat;
}

.faq details[open]{
  box-shadow:inset 3px 0 0 #ff7a21;
}

.faq details p{
  margin:14px 0 2px;
  max-width:62ch;
  color:#695b51;
  font-size:16px;
  line-height:1.55;
}

.faq summary:focus-visible{
  outline:3px solid #ffb347;
  outline-offset:3px;
  border-radius:4px;
}

@media (max-width:900px){
  .faq summary{
    font-size:17px;
  }
}

@media (max-width:600px){
  .faq details{
    padding:18px 12px;
    margin:0 -12px;
  }

  .faq summary{
    font-size:16px;
    gap:12px;
  }

  .faq details p{
    font-size:15px;
    max-width:none;
  }
}