/* Section heading accents derived from the Kloudfuse Docs design.
 *
 * h2 — 3px solid top-border, cycling through 4 brand colors:
 *   1st (4n+1) — #F25022  orange  (--kf-accent)
 *   2nd (4n+2) — #2563eb  blue
 *   3rd (4n+3) — #16a34a  green
 *   4th (4n+4) — #7c3aed  purple
 *
 * h3 — 4px solid left-border in the accent color of its parent h2 group.
 *       CSS can't directly query "which h2 came before this h3", so we
 *       use the same 4n cycle on .sect1:nth-of-type to color each h2's
 *       child h3s consistently.
 *
 * h4 — no border; visual hierarchy via size and weight only (matching
 *       the design's inline-dot treatment, which is content not CSS).
 *
 * Scoped to .doc to avoid affecting nav, toolbar, or other UI chrome.
 * Antora wraps each h2 section in .sect1, each h3 in .sect2, etc.
 */

/* ── CSS custom properties for the 4 accent colors ─────────────── */

:root {
  --kf-sec-1: #F25022;
  --kf-sec-2: #2563eb;
  --kf-sec-3: #16a34a;
  --kf-sec-4: #7c3aed;
}

/* ── h1 — no accent border ──────────────────────────────────────── */

.doc h1 {
  border-top: none;
}

/* ── h2 top-border, 4-color cycle ───────────────────────────────── */
/*
 * Use nth-child(N of .sect1) so only .sect1 elements are counted —
 * nth-of-type counts ALL div children (including div#toc, div#preamble)
 * which shifts the color positions incorrectly.
 * Supported: Chrome 111+, Firefox 113+, Safari 9+.
 */

.doc .sect1:nth-child(4n+1 of .sect1) > h2 {
  border-top: 3px solid var(--kf-sec-1);
  padding-top: 12px;
  margin-top: 2rem;
}

.doc .sect1:nth-child(4n+2 of .sect1) > h2 {
  border-top: 3px solid var(--kf-sec-2);
  padding-top: 12px;
  margin-top: 2rem;
}

.doc .sect1:nth-child(4n+3 of .sect1) > h2 {
  border-top: 3px solid var(--kf-sec-3);
  padding-top: 12px;
  margin-top: 2rem;
}

.doc .sect1:nth-child(4n+4 of .sect1) > h2 {
  border-top: 3px solid var(--kf-sec-4);
  padding-top: 12px;
  margin-top: 2rem;
}

/* ── h3 left-border, inheriting parent h2's color group ─────────── */

.doc .sect1:nth-child(4n+1 of .sect1) .sect2 > h3 {
  border-left: 4px solid var(--kf-sec-1);
  padding-left: 12px;
  margin-top: 1.75rem;
}

.doc .sect1:nth-child(4n+2 of .sect1) .sect2 > h3 {
  border-left: 4px solid var(--kf-sec-2);
  padding-left: 12px;
  margin-top: 1.75rem;
}

.doc .sect1:nth-child(4n+3 of .sect1) .sect2 > h3 {
  border-left: 4px solid var(--kf-sec-3);
  padding-left: 12px;
  margin-top: 1.75rem;
}

.doc .sect1:nth-child(4n+4 of .sect1) .sect2 > h3 {
  border-left: 4px solid var(--kf-sec-4);
  padding-left: 12px;
  margin-top: 1.75rem;
}

/* ── h4 — size/weight hierarchy only, no color accent ───────────── */

.doc h4 {
  font-size: 0.95rem;
  font-weight: 600;
  margin-top: 1.25rem;
}