/* ==========================================================================
   Armstrong Build — FAQ page (template-faq.php)
   Scoped under .page-faq. Pixel-derived from Figma "07 — FAQ" (frame 1440).
   ========================================================================== */

/* ----------------------------------------------------------------- Header */
.page-faq .faq-head{
  background:var(--paper);
}
.page-faq .faq-head__inner{
  max-width:var(--maxw);
  margin-inline:auto;
  padding:100px var(--gutter) 72px;
  display:flex;
  flex-direction:column;
  gap:24px;
}
.page-faq .faq-head__title{
  font-family:var(--font-serif);
  font-weight:300;
  color:var(--ink);
  font-size:79px;
  line-height:1.04;
  max-width:900px;
}

/* ----------------------------------------------------------------- Body */
.page-faq .faq-body{
  background:var(--paper-2);
}
.page-faq .faq-body__inner{
  max-width:var(--maxw);
  margin-inline:auto;
  padding:0 var(--gutter) 120px;
  display:flex;
  gap:80px;
  align-items:flex-start;
}

/* ----- Aside / help card ----- */
.page-faq .faq-aside{
  flex:0 0 340px;
  width:340px;
  display:flex;
  flex-direction:column;
  gap:20px;
  position:sticky;
  top:40px;
}
.page-faq .faq-aside__title{
  font-family:var(--font-serif);
  font-weight:500;
  color:var(--ink);
  font-size:28px;
  line-height:1.15;
  max-width:300px;
}
.page-faq .faq-aside__text{
  font-family:var(--font-sans);
  font-weight:300;
  color:var(--text-soft);
  font-size:15px;
  line-height:1.65;
  max-width:300px;
}
.page-faq .faq-aside__btn{
  align-self:flex-start;
  background:var(--ink);
  color:var(--on-dark);
  font-family:var(--font-sans);
  font-weight:400;
  font-size:12px;
  letter-spacing:1.5px;
  padding:16px 28px;
  white-space:nowrap;
  transition:background-color .25s ease, transform .15s ease;
}
.page-faq .faq-aside__btn:hover{ background:#000; }
.page-faq .faq-aside__btn:active{ transform:translateY(1px); }

/* ----- FAQ list ----- */
.page-faq .faq-list{
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
}
.page-faq .faq-item{
  border-bottom:1px solid var(--line-2);
}
.page-faq .faq-item__head{
  width:100%;
  background:none;
  border:0;
  cursor:pointer;
  padding:32px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  text-align:left;
  transition:opacity .2s ease;
}
.page-faq .faq-item__head:hover{ opacity:.78; }
.page-faq .faq-item__q{
  font-family:var(--font-serif);
  font-weight:500;
  color:var(--ink);
  font-size:26px;
  line-height:1.25;
}

/* +/- indicator: a "+" drawn from two bars; vertical bar collapses on open to make "-" */
.page-faq .faq-item__icon{
  position:relative;
  flex-shrink:0;
  width:20px;
  height:24px;
}
.page-faq .faq-item__icon::before,
.page-faq .faq-item__icon::after{
  content:"";
  position:absolute;
  background:var(--muted);
  border-radius:1px;
  transition:transform .3s cubic-bezier(.22,.61,.36,1), opacity .3s ease;
}
/* horizontal bar */
.page-faq .faq-item__icon::before{
  left:50%; top:50%;
  width:18px; height:1.6px;
  transform:translate(-50%,-50%);
}
/* vertical bar */
.page-faq .faq-item__icon::after{
  left:50%; top:50%;
  width:1.6px; height:18px;
  transform:translate(-50%,-50%);
}
.page-faq .faq-item.is-open .faq-item__icon::after{
  transform:translate(-50%,-50%) scaleY(0);
  opacity:0;
}

/* Answer — collapsed by default; JS sets inline max-height on .is-open */
.page-faq .faq-item__body{
  max-height:0;
  overflow:hidden;
  transition:max-height .45s cubic-bezier(.22,.61,.36,1);
}
.page-faq .faq-item__a{
  font-family:var(--font-sans);
  font-weight:300;
  color:var(--text-soft);
  font-size:16px;
  line-height:1.7;
  padding-bottom:32px;
  max-width:760px;
}

/* ----------------------------------------------------------------- Responsive */
@media (max-width:1024px){
  .page-faq .faq-head__title{ font-size:60px; }
  .page-faq .faq-body__inner{ gap:48px; }
  .page-faq .faq-item__q{ font-size:23px; }
}
@media (max-width:900px){
  .page-faq .faq-head__inner{ padding:72px var(--gutter) 48px; }
  .page-faq .faq-head__title{ font-size:42px; }
  .page-faq .faq-body__inner{ flex-direction:column; gap:48px; padding-bottom:90px; }
  .page-faq .faq-aside{
    position:static;
    flex:1 1 auto;
    width:100%;
  }
  .page-faq .faq-aside__title,
  .page-faq .faq-aside__text{ max-width:none; }
  .page-faq .faq-item__head{ padding:24px 0; gap:20px; }
  .page-faq .faq-item__q{ font-size:21px; }
  .page-faq .faq-item__a{ font-size:15px; padding-bottom:24px; }
}