/* ============================================================
   Flexible TOC v4.0 — CSS
   Semua warna via CSS variabel dari wp_head output
   ============================================================ */

/* ── Base ── */
.ftoc-wrap, .ftoc-wrap * { box-sizing: border-box; }
.ftoc-wrap {
  font-size: var(--ftoc-font-size, 14px);
  line-height: 1.55;
  margin: 1.6em 0 2em;
  font-family: inherit;
  /* Variabel warna fallback — ditimpa oleh wp_head output */
  --ftoc-accent:      #2563eb;
  --ftoc-bg:          #f0f4ff;
  --ftoc-border:      #c7d7f8;
  --ftoc-title:       #1d4ed8;
  --ftoc-link:        #374151;
  --ftoc-link-hover:  #2563eb;
  --ftoc-link-active: #1d4ed8;
  --ftoc-active-bg:   #dbeafe;
  --ftoc-header-bg:   #2563eb;
  --ftoc-header-text: #ffffff;
  --ftoc-radius:      10px;
  --ftoc-bw:          4px;
}

/* ── Header ── */
.ftoc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.ftoc-title {
  font-size: 0.82em;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ftoc-title);
}

/* ── Toggle Button ── */
.ftoc-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.78em;
  color: var(--ftoc-accent);
  padding: 3px 6px;
  border-radius: 4px;
  font-family: inherit;
  white-space: nowrap;
  transition: background 0.18s;
}
.ftoc-toggle:hover { background: color-mix(in srgb, var(--ftoc-accent) 12%, transparent); }
.ftoc-toggle:focus-visible { outline: 2px solid var(--ftoc-accent); outline-offset: 2px; }
.ftoc-chevron { transition: transform 0.22s ease; flex-shrink: 0; }
.ftoc-collapsed .ftoc-chevron { transform: rotate(-90deg); }

/* ── Body ── */
.ftoc-body { overflow: hidden; }
.ftoc-body[hidden] { display: none !important; }
@keyframes ftoc-reveal {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── LIST RESET ── */
.ftoc-list { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.ftoc-item { margin: 0 !important; padding: 0 !important; }

/* ── LINKS ── */
.ftoc-link {
  display: block;
  text-decoration: none !important;
  color: var(--ftoc-link);
  padding: 4px 8px 4px 6px;
  border-radius: 5px;
  opacity: 0.88;
  transition: color 0.18s, background 0.18s, opacity 0.18s, padding-left 0.18s;
  cursor: pointer;
}
.ftoc-link:hover {
  opacity: 1;
  color: var(--ftoc-link-hover) !important;
  background: color-mix(in srgb, var(--ftoc-accent) 8%, transparent);
  padding-left: 10px;
}
.ftoc-link.ftoc-active {
  color: var(--ftoc-link-active) !important;
  background: var(--ftoc-active-bg);
  font-weight: 600;
  opacity: 1;
}

/* ── HIERARKI INDENT ── */
.ftoc-depth-1 { padding-left: 0 !important; }
.ftoc-depth-2 { padding-left: 1.1em !important; border-left: 1.5px solid var(--ftoc-border); margin-left: 4px !important; }
.ftoc-depth-3 { padding-left: 1.1em !important; border-left: 1.5px solid var(--ftoc-border); margin-left: 4px !important; opacity: 0.9; }
.ftoc-depth-4 { padding-left: 1.1em !important; border-left: 1px   solid var(--ftoc-border); margin-left: 4px !important; opacity: 0.85; }
.ftoc-depth-5 { padding-left: 1.1em !important; }
.ftoc-depth-2 .ftoc-link { font-size: 0.93em; }
.ftoc-depth-3 .ftoc-link { font-size: 0.90em; }
.ftoc-depth-4 .ftoc-link { font-size: 0.87em; }
.ftoc-depth-5 .ftoc-link { font-size: 0.84em; }

/* ── ANGKA ── */
.ftoc-list-number                                                    { counter-reset: ftoc-l1 !important; list-style: none !important; }
.ftoc-list-number > .ftoc-item                                        { counter-increment: ftoc-l1; }
.ftoc-list-number > .ftoc-item > .ftoc-link::before                  { content: counter(ftoc-l1) ". "; color: var(--ftoc-accent); font-size: .88em; opacity: .75; margin-right: 2px; }

.ftoc-list-number .ftoc-list-number                                   { counter-reset: ftoc-l2 !important; }
.ftoc-list-number .ftoc-list-number > .ftoc-item                      { counter-increment: ftoc-l2; }
.ftoc-list-number .ftoc-list-number > .ftoc-item > .ftoc-link::before { content: counter(ftoc-l1) "." counter(ftoc-l2) " "; color: var(--ftoc-accent); opacity: .65; font-size: .86em; }

.ftoc-list-number .ftoc-list-number .ftoc-list-number                 { counter-reset: ftoc-l3 !important; }
.ftoc-list-number .ftoc-list-number .ftoc-list-number > .ftoc-item    { counter-increment: ftoc-l3; }
.ftoc-list-number .ftoc-list-number .ftoc-list-number > .ftoc-item > .ftoc-link::before { content: counter(ftoc-l1) "." counter(ftoc-l2) "." counter(ftoc-l3) " "; color: var(--ftoc-accent); opacity: .55; font-size: .84em; }

/* ── BULLET ── */
.ftoc-list-bullet > .ftoc-item > .ftoc-link::before                              { content: "•"; color: var(--ftoc-accent); margin-right: 6px; font-size: 1.1em; }
.ftoc-list-bullet .ftoc-list-bullet > .ftoc-item > .ftoc-link::before             { content: "◦"; color: var(--ftoc-accent); opacity: .7;  font-size: .95em; }
.ftoc-list-bullet .ftoc-list-bullet .ftoc-list-bullet > .ftoc-item > .ftoc-link::before { content: "▸"; opacity: .55; font-size: .8em; }

/* ── NONE ── */
.ftoc-list-none > .ftoc-item > .ftoc-link::before { content: none; }

/* ════════════════════════════════════
   STYLE: MODERN
════════════════════════════════════ */
.ftoc-style-modern {
  background: var(--ftoc-bg);
  border: 1px solid var(--ftoc-border);
  border-left: var(--ftoc-bw, 4px) solid var(--ftoc-accent);
  border-radius: var(--ftoc-radius);
  padding: 16px 20px 14px;
  max-width: 680px;
}
.ftoc-style-modern .ftoc-header { border-bottom: 1px solid var(--ftoc-border); padding-bottom: 10px; }

/* ════════════════════════════════════
   STYLE: MINIMAL
════════════════════════════════════ */
.ftoc-style-minimal {
  border-left: var(--ftoc-bw, 3px) solid var(--ftoc-accent);
  padding: 4px 0 4px 16px;
  background: transparent;
  max-width: 560px;
}
.ftoc-style-minimal .ftoc-header { margin-bottom: 8px; }
.ftoc-style-minimal .ftoc-link   { padding: 3px 4px; font-size: 0.87em; }
.ftoc-style-minimal .ftoc-link:hover { background: none; padding-left: 8px; }

/* ════════════════════════════════════
   STYLE: BOXED
════════════════════════════════════ */
.ftoc-style-boxed {
  border: 2px solid var(--ftoc-accent);
  border-radius: var(--ftoc-radius);
  overflow: hidden;
  max-width: 660px;
  padding: 0;
}
.ftoc-style-boxed .ftoc-header {
  background: var(--ftoc-header-bg);
  padding: 12px 18px;
  margin-bottom: 0;
  border-bottom: none;
}
.ftoc-style-boxed .ftoc-title  { color: var(--ftoc-header-text); }
.ftoc-style-boxed .ftoc-toggle { color: var(--ftoc-header-text); opacity: .85; }
.ftoc-style-boxed .ftoc-toggle:hover { background: rgba(0,0,0,0.12); }
.ftoc-style-boxed .ftoc-chevron { stroke: var(--ftoc-header-text); opacity: .85; }
.ftoc-style-boxed .ftoc-body   { padding: 14px 18px 12px; }

/* ════════════════════════════════════
   STYLE: SIDEBAR
════════════════════════════════════ */
.ftoc-style-sidebar {
  float: right;
  width: 300px;
  margin: 0 0 1.5em 1.8em;
  background: var(--ftoc-bg);
  border-right: var(--ftoc-bw, 3px) solid var(--ftoc-accent);
  border-radius: calc(var(--ftoc-radius) - 2px) 0 0 calc(var(--ftoc-radius) - 2px);
  padding: 14px 16px;
}
.ftoc-style-sidebar .ftoc-header { border-bottom: 1px solid var(--ftoc-border); padding-bottom: 8px; }
.ftoc-style-sidebar .ftoc-link   { font-size: 0.83em; }

/* ════════════════════════════════════
   STYLE: DARK
════════════════════════════════════ */
.ftoc-style-dark {
  background: var(--ftoc-bg, #1e293b);
  border: 1px solid var(--ftoc-border, #334155);
  border-left: var(--ftoc-bw, 4px) solid var(--ftoc-accent, #60a5fa);
  border-radius: var(--ftoc-radius);
  padding: 16px 20px 14px;
  max-width: 680px;
}
.ftoc-style-dark .ftoc-header { border-bottom: 1px solid var(--ftoc-border, #334155); padding-bottom: 10px; }

/* ── Responsive ── */
@media (max-width: 640px) {
  .ftoc-style-sidebar {
    float: none; width: auto; margin: 0 0 1.5em 0;
    border-right: none;
    border-left: var(--ftoc-bw, 4px) solid var(--ftoc-accent);
    border-radius: var(--ftoc-radius);
  }
  .ftoc-style-modern, .ftoc-style-boxed, .ftoc-style-dark { max-width: 100%; }
}

/* ── Print ── */
@media print {
  .ftoc-toggle { display: none; }
  .ftoc-body[hidden] { display: block !important; }
}