/* assets/css/faqs.css */
/* ============================================================
   BOBO & WILD — FAQs
   ============================================================ */

.faqs{
  position:relative;z-index:2;
  background:var(--cream);color:var(--green-deep);
  padding:clamp(70px,10vh,124px) var(--pad) clamp(76px,11vh,140px);
}
.faqs__inner{max-width:940px;margin:0 auto}

.faq{border-bottom:1px solid rgba(51,75,70,.16)}
.faq:first-child{border-top:1px solid rgba(51,75,70,.16)}

.faq__q{
  width:100%;display:flex;align-items:flex-start;gap:20px;
  padding:clamp(22px,2.6vw,32px) 0;text-align:left;
}
/* the template and faqs.js both render <h2> here (the page's <h1> is the
   title above), so this has to match h2 — styling h3 alone left every
   question in the UI font at the browser default size */
.faq__q h2,
.faq__q h3{
  flex:1;margin:0;
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(20px,2.5vw,34px);line-height:1.15;letter-spacing:-.012em;
  transition:color .35s var(--ease);
}
.faq__q:hover h2,
.faq__q:hover h3{color:var(--terracotta)}
.faq__sign{
  flex:none;width:26px;height:26px;margin-top:.15em;
  position:relative;border-radius:50%;
  border:1px solid rgba(51,75,70,.28);
  transition:background-color .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease);
}
.faq__sign::before,.faq__sign::after{
  content:'';position:absolute;left:50%;top:50%;
  width:11px;height:1px;background:currentColor;
  transform:translate(-50%,-50%);
  transition:transform .4s var(--ease),opacity .3s var(--ease);
}
.faq__sign::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq.is-open .faq__sign{background:var(--terracotta-ink);border-color:var(--terracotta-ink);color:var(--cream)}
.faq.is-open .faq__sign::after{transform:translate(-50%,-50%) rotate(0deg);opacity:0}

/* grid-rows 0fr → 1fr animates to auto height with no JS measuring */
.faq__a{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .45s var(--ease);
}
.faq.is-open .faq__a{grid-template-rows:1fr}
.faq__a > div{overflow:hidden}
.faq__a p{
  max-width:60ch;padding-bottom:clamp(22px,2.6vw,32px);
  font-size:clamp(15px,1.3vw,17px);line-height:1.75;font-weight:300;
  color:rgba(51,75,70,.78);
}
.faq__link{
  min-height:44px;
  display:inline-flex;align-items:center;gap:8px;
  margin-top:-8px;margin-bottom:clamp(22px,2.6vw,32px);
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--green-deep);
  padding-bottom:6px;border-bottom:1px solid rgba(51,75,70,.2);
  transition:color .35s var(--ease),border-color .35s var(--ease);
}
.faq__link:hover{color:var(--terracotta-ink);border-color:var(--terracotta-ink)}
.faq__link svg{width:12px;height:12px;transition:transform .4s var(--ease)}
.faq__link:hover svg{transform:translateX(4px)}

.faqs__cta{
  margin-top:clamp(48px,6vw,88px);
  padding:clamp(30px,3.6vw,48px);
  border:1px solid rgba(51,75,70,.16);border-radius:3px;
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(20px,3vw,44px);flex-wrap:wrap;
}
.faqs__cta h2{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(24px,3vw,40px);line-height:1;letter-spacing:-.015em;
}
/* .7 gave 3.83:1 on cream; .84 clears AA at 4.62:1 */
.faqs__cta p{margin-top:10px;font-size:14px;line-height:1.6;font-weight:300;color:rgba(51,75,70,.84)}
.faqs__cta .pbtn{border-color:rgba(51,75,70,.28);color:var(--green-deep)}
.faqs__cta .pbtn:hover{border-color:var(--terracotta-ink);color:var(--terracotta-ink)}
.faqs__cta .pbtn--solid,
.faqs__cta .pbtn--solid:hover{color:var(--cream)}
.faqs__actions{display:flex;gap:10px;flex-wrap:wrap}

@media (max-width:640px){
  .faqs__cta{flex-direction:column;align-items:flex-start}
  .faq__q{gap:14px}
}
@media (prefers-reduced-motion:reduce){
  .faq__a{transition:none}
}