/* =====================================================
   VERRELLI — FAQ accordion
   Loads on the FAQ template only, on top of interior.css. Reuses the interior
   design system verbatim: navy questions, gold (--yellow) accent, the same gold
   rule the Issues sections use as item dividers, the interior body type scale for
   answers, and interior section spacing. No new colours or fonts are introduced —
   tokens (--navy, --yellow, --text-dark, --font-display) come from
   _cutup/styles.css :root, same as interior.css.
   ===================================================== */

/* Optional intro sits above the list with the same rhythm as a closing paragraph. */
.faq__intro {
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

/* The list is bounded top and bottom by the interior gold rule (matches the
   4px gold divider between Issues sections), with each item divided the same. */
.faq__list {
  border-top: 4px solid var(--yellow);
}
.faq-item {
  border-bottom: 4px solid var(--yellow);
}

/* Heading wrapper carries no visual weight of its own — the button is the row. */
.faq-item__heading {
  margin: 0;
}

/* Question row — navy, ExtraBold, matching the interior section title scale. */
.faq-item__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 2vw, 1.75rem);
  width: 100%;
  margin: 0;
  padding: clamp(1rem, 2.2vw, 1.6rem) 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 800;                              /* Montserrat ExtraBold, as interior titles */
  font-size: clamp(1.15rem, 1.94vw, 28px);       /* between the interior body (23) and title (35) */
  line-height: 1.222;
  letter-spacing: 0;
  color: var(--navy);
}
.faq-item__question:hover .faq-item__q-text {
  text-decoration: underline;
}
.faq-item__question:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
}

/* Expand indicator — a gold +/- drawn from two bars; the vertical bar collapses
   when the item is open, leaving a minus. Accent is the shared gold token. */
.faq-item__icon {
  position: relative;
  flex: 0 0 auto;
  width: 1.35rem;
  height: 1.35rem;
}
.faq-item__icon::before,
.faq-item__icon::after {
  content: "";
  position: absolute;
  background: var(--yellow);
}
.faq-item__icon::before {              /* horizontal bar (the minus) */
  top: 50%;
  left: 0;
  right: 0;
  height: 4px;
  transform: translateY(-50%);
}
.faq-item__icon::after {               /* vertical bar (completes the plus) */
  left: 50%;
  top: 0;
  bottom: 0;
  width: 4px;
  transform: translateX(-50%) scaleY(1);
  transition: transform 0.3s ease;
}
.faq-item__question[aria-expanded="true"] .faq-item__icon::after {
  transform: translateX(-50%) scaleY(0);
}

/* Panel — collapsed by default via the hidden attribute (also the no-JS state);
   the max-height transition drives the smooth open/close (faq.js manages hidden
   around the animation so collapsed answers stay out of the a11y tree). */
.faq-item__panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
}
.faq-item__panel[hidden] {
  display: none;
}

/* Answer copy — the interior body scale, colour and paragraph rhythm exactly. */
.faq-item__answer {
  padding-bottom: clamp(1rem, 2.2vw, 1.6rem);
  font-family: var(--font-display);
  font-weight: 400;                              /* Montserrat Regular */
  font-size: clamp(1.05rem, 1.6vw, 23px);        /* 23px @1440, as interior body */
  line-height: 1.391;                            /* 32 / 23 */
  letter-spacing: 0;
  color: var(--text-dark);
}
.faq-item__answer p {
  margin: 0 0 1.1rem;
}
.faq-item__answer p:last-child {
  margin-bottom: 0;
}
.faq-item__answer a {
  color: var(--navy);
  text-decoration: underline;
}