/* ═══════════════════════════════════════════════════════════════════
   NRI Outpost — Collapsible sections (styles)
   See collapsible-sections.js for the design rules + JS behaviour.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Clickable section header ───────────────────────────────── */
.section-header-clickable {
  position: relative;
  cursor: pointer;
  border-radius: 12px;
  margin: 0 -16px 56px;          /* offset so the hover halo doesn't crop */
  padding: 0 16px;
  transition: background 0.15s ease;
}
.section-header-clickable:hover,
.section-header-clickable:focus-visible {
  background: color-mix(in oklab, var(--saffron) 5%, transparent);
  outline: none;
}

/* The little ↓ / ↑ pill on the right of the header. CSS-only — text
   comes from the `content` rules below depending on collapsed state. */
.sec-collapse-handle {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  border-radius: 999px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
  pointer-events: none;
}
.section-header-clickable:hover .sec-collapse-handle,
.section-header-clickable:focus-visible .sec-collapse-handle,
.section-collapsed .sec-collapse-handle {
  opacity: 1;
}
.sec-collapse-handle::after { content: 'Hide ↑'; }
.section-collapsed .sec-collapse-handle {
  color: var(--saffron);
  background: color-mix(in oklab, var(--saffron) 10%, var(--paper-2));
  border-color: color-mix(in oklab, var(--saffron) 30%, var(--rule));
}
.section-collapsed .sec-collapse-handle::after { content: 'Show ↓'; }

/* ─── Collapsed state ────────────────────────────────────────── */
/* Hide the body, leave the header (which still carries the section title
   and intro text — that's the natural content peek). Tighten section
   padding so collapsed sections don't waste vertical space. */
section.section-collapsed {
  padding-top: 40px;
  padding-bottom: 40px;
}
section.section-collapsed .section-body {
  display: none;
}
/* Keep the header's bottom margin small when collapsed so the section
   reads as one tight block. */
section.section-collapsed .section-header-clickable {
  margin-bottom: 0;
}
/* The section-intro acts as the "peek" in collapsed mode — give it
   slightly more breathing room and a soft tint so it's clearly the
   teaser, not just spacing. */
section.section-collapsed .section-intro {
  font-size: 14px;
  color: var(--ink-3);
}

/* When the visitor hovers a collapsed section, hint that the whole
   thing is clickable. */
section.section-collapsed .section-header-clickable {
  cursor: pointer;
}
section.section-collapsed:hover .section-header-clickable {
  background: color-mix(in oklab, var(--saffron) 7%, transparent);
}

/* ─── Master "Compact mode" toggle (footer) ──────────────────── */
.cmp-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--paper-2);
  color: var(--ink-2);
  border: 1px solid var(--rule);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.cmp-toggle:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.cmp-toggle[data-active="true"] {
  background: var(--saffron);
  color: var(--paper);
  border-color: var(--saffron);
}
.cmp-toggle[data-active="true"]:hover {
  background: color-mix(in oklab, var(--saffron) 80%, var(--ink));
  border-color: color-mix(in oklab, var(--saffron) 80%, var(--ink));
}
.cmp-toggle-icon { font-size: 11px; line-height: 1; }
.cmp-toggle-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
}
.cmp-toggle-state {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  opacity: 0.7;
  text-transform: uppercase;
}

/* ─── Mobile tweaks ──────────────────────────────────────────── */
@media (max-width: 640px) {
  .sec-collapse-handle {
    /* On touch, hover doesn't fire — show the handle by default so
       visitors know the section is collapsible. */
    opacity: 0.7;
  }
  .section-header-clickable {
    margin: 0 -8px 36px;
    padding: 0 8px;
  }
  section.section-collapsed {
    padding-top: 30px;
    padding-bottom: 30px;
  }
}

/* ─── Print: always expand everything ───────────────────────── */
@media print {
  section.section-collapsed .section-body { display: block !important; }
  .sec-collapse-handle, .cmp-toggle { display: none !important; }
}