/* ============================================================
   SAGE Collapsible Component  — sage-collapsible.css
   Usage:
     <details class="sage-collapsible">
       <summary>
         <span class="sage-collapsible-arrow">&#9658;</span>
         Section Title
         <span class="sage-collapsible-hint">(optional subtitle)</span>
       </summary>
       <div class="sage-collapsible-body">
         ... content ...
       </div>
     </details>
   ============================================================ */

/* ── Container ─────────────────────────────────────────────── */
details.sage-collapsible {
  border: 1px solid rgba(234, 88, 12, 0.22);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  margin: 0 0 16px;
}

/* ── Summary / trigger ─────────────────────────────────────── */
details.sage-collapsible > summary {
  cursor: pointer;
  padding: 18px 24px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent);
  list-style: none;            /* Firefox */
  display: flex;
  align-items: center;
  gap: 10px;
  user-select: none;
  -webkit-user-select: none;
  transition: background 0.2s ease;
  outline: none;
}

/* Remove default disclosure triangle */
details.sage-collapsible > summary::-webkit-details-marker { display: none; }
details.sage-collapsible > summary::marker              { display: none; }

details.sage-collapsible > summary:hover {
  background: rgba(234, 88, 12, 0.05);
}

/* keyboard focus ring */
details.sage-collapsible > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: 14px;
}

/* ── Animated arrow ────────────────────────────────────────── */
.sage-collapsible-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.85rem;
  transition: transform 0.3s ease;
  color: var(--accent);
}

details.sage-collapsible[open] > summary .sage-collapsible-arrow {
  transform: rotate(90deg);
}

/* ── Hint text ─────────────────────────────────────────────── */
.sage-collapsible-hint {
  font-weight: 400;
  font-size: 0.87rem;
  opacity: 0.65;
  color: inherit;
  margin-left: 2px;
}

/* ── Animated body ─────────────────────────────────────────── */
.sage-collapsible-body {
  overflow: hidden;
  /* JS sets height explicitly for animation; CSS provides the transition */
  transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* No-JS fallback: show content normally */
details.sage-collapsible:not(.sg-js-ready) .sage-collapsible-body {
  height: auto !important;
  transition: none !important;
}

/* When open and JS has not yet measured, avoid flash */
details.sage-collapsible[open]:not(.sg-js-ready) .sage-collapsible-body {
  height: auto !important;
}

/* ── Divider between summary and body ─────────────────────── */
details.sage-collapsible[open] > summary {
  border-bottom: 1px solid rgba(234, 88, 12, 0.12);
}

/* ── Mobile / small screens ────────────────────────────────── */
@media (max-width: 600px) {
  details.sage-collapsible > summary {
    padding: 14px 18px;
    font-size: 0.95rem;
  }
  .sage-collapsible-hint {
    display: none;   /* too busy on narrow screens */
  }
}