/* ==========================================================================
   THE DESIGNERS HUB — FAQ accordion
   Shared by the consultation (#2129:1621) and membership (#2129:2285) frames,
   which draw the same control: a dark 48px header with the question, a gold
   plus that becomes a rule when the row is open, and a white answer panel.
   Row spacing and panel padding differ per page and stay in the page CSS.
   Behaviour is in assets/js/faq.js.
   ========================================================================== */

.cn-acc__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  width: 100%;
  background: var(--color-surface-dark);
  border: var(--stroke-1) solid var(--color-surface-dark);
  color: var(--white);
  font-family: var(--font-body);
  text-align: left;
  cursor: pointer;
}

.cn-acc__q { font-weight: var(--fw-med); font-size: 17px; line-height: 21px; }

/* plus / minus, drawn from the Figma icons: a 20x20 gold plus on closed rows,
   the 20px gold rule alone on the open one */
.cn-acc__icon {
  position: relative;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}

.cn-acc__icon::before,
.cn-acc__icon::after {
  content: "";
  position: absolute;
  background: var(--gold);
}

.cn-acc__icon::before { left: 0; top: 9px; width: 20px; height: 2px; }
.cn-acc__icon::after  { left: 9px; top: 0; width: 2px; height: 20px; }

.cn-acc.is-open .cn-acc__icon::after { display: none; }

.cn-acc__panel {
  background: var(--white);
  border: var(--stroke-1) solid var(--color-surface-dark);
}

.cn-acc__panel[hidden] { display: none; }

.cn-acc h3 { margin: 0; font-size: inherit; font-weight: inherit; }

.cn-acc__a { color: var(--color-text); font-size: 14px; line-height: 17px; }

/* awaiting client copy — deliberately obvious, never ships as real answer text */
.cn-acc__a.is-pending { color: var(--grey-400); font-style: italic; }