/* blocks/faq.css
   Block: FAQ — click a question, its answer slides open.
   Rewind Club - loaded in order by functions.php. */

.rc-faq__head{max-width:60ch; margin-bottom:clamp(20px,3vw,32px)}
.rc-faq__head h2{font-size:clamp(26px,3.6vw,40px); line-height:1.12; margin:6px 0 10px}
.rc-faq__intro{color:var(--ink-2)}

.rc-faq__list{
  max-width:840px;
  background:var(--card); border:1.5px solid var(--line);
  border-radius:var(--radius); overflow:hidden;
  box-shadow:6px 6px 0 var(--kraft-2);
}

.rc-faq__item + .rc-faq__item{border-top:1.5px solid var(--line-soft)}

.rc-faq__q{margin:0; font-size:inherit; font-weight:inherit}

/* The whole row is the toggle. */
.rc-faq__btn{
  display:flex; align-items:center; gap:16px; width:100%;
  padding:18px clamp(18px,2.4vw,26px);
  background:none; border:0; cursor:pointer; text-align:left;
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(16.5px,1.9vw,19px); line-height:1.35; color:var(--ink);
  transition:background-color .18s ease;
}

.rc-faq__btn:hover{background:var(--card-2)}

.rc-faq__btn:focus-visible{outline:2px solid var(--mulberry); outline-offset:-3px}

.rc-faq__q-text{flex:1 1 auto}

/* A plus that becomes a minus. */
.rc-faq__icon{
  position:relative; flex:0 0 auto; width:30px; height:30px; border-radius:50%;
  background:var(--paper-2); transition:background-color .2s ease, transform .25s ease;
}

.rc-faq__icon::before,
.rc-faq__icon::after{
  content:""; position:absolute; top:50%; left:50%; background:var(--ink);
  border-radius:2px; transform:translate(-50%,-50%);
  transition:transform .25s ease, opacity .2s ease;
}

.rc-faq__icon::before{width:13px; height:2px}
.rc-faq__icon::after{width:2px; height:13px}

.rc-faq__item.is-open .rc-faq__icon{background:var(--mulberry)}
.rc-faq__item.is-open .rc-faq__icon::before,
.rc-faq__item.is-open .rc-faq__icon::after{background:var(--mulberry-ink)}
.rc-faq__item.is-open .rc-faq__icon::after{transform:translate(-50%,-50%) rotate(90deg); opacity:0}

/* Answer. JS animates max-height; without JS it is simply open. */
.rc-faq__a{overflow:hidden}

.rc-faq__a-inner{
  padding:0 clamp(18px,2.4vw,26px) 20px;
  color:var(--ink-2); max-width:70ch;
}

.rc-faq__a-inner > :first-child{margin-top:0}
.rc-faq__a-inner > :last-child{margin-bottom:0}

.js .rc-faq__a{transition:max-height .3s ease}
.js .rc-faq__item:not(.is-open) .rc-faq__a{max-height:0}

@media (prefers-reduced-motion:reduce){
  .js .rc-faq__a{transition:none}
  .rc-faq__icon, .rc-faq__icon::before, .rc-faq__icon::after{transition:none}
}