/* ============================================================
 * farpa DS · component · disclosure · v1.0.0 · 2026-05-10
 * ------------------------------------------------------------
 * Acordeão editorial sobre <details>/<summary> nativo.
 * Decisão Founder ratificada 2026-05-10 (gate S→B item 4):
 * Estruturas v2 = acordeão inline · não sub-páginas.
 *
 * Padrão:
 *   <details class="farpa-disclosure">
 *     <summary class="farpa-disclosure__summary">
 *       <span class="farpa-disclosure__num">01</span>
 *       <span class="farpa-disclosure__title">Conselho de Fundadoras</span>
 *       <span class="farpa-disclosure__hint">3 sócias · quórum 2-de-3</span>
 *     </summary>
 *     <div class="farpa-disclosure__body">
 *       ...
 *     </div>
 *   </details>
 *
 * Acessibilidade: <details>/<summary> nativo já provê toggle por keyboard,
 * estado expanded/collapsed via role disclosure implícito, suporte a
 * find-in-page (Chrome auto-expand).
 * ============================================================ */

.farpa-disclosure {
  border-top: 1px solid var(--border-strong);
  padding: 0;
  margin: 0;
}

.farpa-disclosure:last-of-type {
  border-bottom: 1px solid var(--border-strong);
}

.farpa-disclosure__summary {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-3);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-sans);
  position: relative;
  transition: background-color var(--motion-fast) var(--ease-standard);
}

/* Remove triangulo nativo do <summary> · WebKit + Firefox */
.farpa-disclosure__summary::-webkit-details-marker { display: none; }
.farpa-disclosure__summary::marker { content: ""; }

.farpa-disclosure__summary:hover {
  background: var(--bg-subtle);
}

.farpa-disclosure__summary:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: -2px;
}

/* Chevron customizado · gira em open · respeita reduced-motion */
.farpa-disclosure__summary::after {
  content: "+";
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-xl);
  font-weight: var(--fw-light);
  color: var(--accent);
  transition: transform var(--motion-base) var(--ease-standard);
  line-height: 1;
}

.farpa-disclosure[open] > .farpa-disclosure__summary::after {
  content: "−";
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .farpa-disclosure__summary::after { transition: none; }
}

/* Sub-elementos do summary */
.farpa-disclosure__num {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 96, "wght" 700;
  font-weight: var(--fw-bold);
  font-size: var(--fs-2xl);
  color: var(--accent);
  line-height: 1;
  min-width: 3ch;
  text-align: right;
}

.farpa-disclosure__title {
  font-family: var(--font-display);
  font-weight: var(--fw-display-strong);
  font-size: var(--fs-xl);
  letter-spacing: -0.01em;
  color: var(--fg);
}

.farpa-disclosure__hint {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-muted);
  margin-left: var(--sp-3);
}

/* Body · expand */
.farpa-disclosure__body {
  padding: 0 var(--sp-3) var(--sp-5);
  margin-left: calc(3ch + var(--sp-4));
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--fg);
  max-width: var(--content-max);
}

@media (max-width: 720px) {
  .farpa-disclosure__hint {
    display: none;
  }
  .farpa-disclosure__body {
    margin-left: 0;
  }
}

/* HC · border default já é black 2px+ via theme · só aumenta padding visual */
[data-theme="hc"] .farpa-disclosure__summary {
  padding-block: var(--sp-5);
}