/* /public/css/toc-subnav.css — Muster (für detmans blog)
   Annahmen:
   - H2, die ins TOC sollen: <h2 class="toc" ...>
   - JS injiziert .toc-trigger + .toc-panel + .toc-item
*/

:root {
    /* Abstände/Größen */
    --toc-panel-w: 320px;
    --toc-gap: 14px;
    --toc-pad: 10px;

    /* Typo */
    --toc-font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    --toc-fs: 14px;
    --toc-lh: 1.25;

    /* Farben */
    --toc-bg: rgba(255, 255, 255, 0.92);
    --toc-border: rgba(0, 0, 0, 0.12);
    --toc-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);

    --toc-text: rgba(0,0,0,0.86);
    --toc-muted: rgba(0,0,0,0.50);
    --toc-hover: rgba(0,0,0,0.06);
    --toc-active: rgba(0,0,0,0.09);

    /* Trigger */
    --toc-trigger-size: 22px;
    --toc-trigger-off: rgba(0,0,0,0.35);
    --toc-trigger-on: rgba(0,0,0,0.9);

    /* Animations */
    --toc-ease: cubic-bezier(.2,.8,.2,1);
}

/* ensure scroll target offset works (optional, JS uses headerOffset too) */
h2.toc { scroll-margin-top: var(--toc-header-offset, 96px); }

/* ------------------------------------------------------------------ */
/* Trigger left of H2 */
/* ------------------------------------------------------------------ */

h2.toc {
    position: relative; /* anchor for absolute trigger */
}

.toc-trigger {
    position: absolute;
    left: calc(-1 * (var(--toc-trigger-size) + 10px));
    top: 0.12em;

    width: var(--toc-trigger-size);
    height: var(--toc-trigger-size);
    border: 0;
    padding: 0;
    background: transparent;

    display: grid;
    place-items: center;

    cursor: pointer;
    color: var(--toc-trigger-off);
    opacity: 0.85;

    /* nicer click feel */
    border-radius: 999px;
    transition: color 160ms var(--toc-ease), opacity 160ms var(--toc-ease), background 160ms var(--toc-ease), transform 120ms var(--toc-ease);
}

h2.toc:hover .toc-trigger,
.toc-trigger:hover {
    color: var(--toc-trigger-on);
    opacity: 1;
}

.toc-trigger:active {
    transform: scale(0.96);
    background: rgba(0,0,0,0.04);
}

.toc-trigger:focus-visible {
    outline: 2px solid rgba(0,0,0,0.35);
    outline-offset: 2px;
}

/* triangle */
.toc-trigger__icon::before {
    content: "▸";
    display: block;
    font-size: 15px;
    line-height: 1;
    transform: translateY(-0.02em);
}

/* rotate triangle when expanded (open) */
.toc-trigger[aria-expanded="true"] .toc-trigger__icon::before {
    transform: translateY(-0.02em) rotate(90deg);
}

/* ------------------------------------------------------------------ */
/* Panel */
/* ------------------------------------------------------------------ */

.toc-panel {
    /* JS sets position + top/left and parent (body vs container) */
    z-index: 1000;

    width: min(var(--toc-panel-w), calc(100vw - 24px));
    max-height: min(60vh, 560px);
    overflow: auto;

    font-family: var(--toc-font);
    font-size: var(--toc-fs);
    line-height: var(--toc-lh);
    color: var(--toc-text);

    background: var(--toc-bg);
    border: 1px solid var(--toc-border);
    border-radius: 14px;
    box-shadow: var(--toc-shadow);
    backdrop-filter: blur(8px);

    padding: var(--toc-pad);

    /* animation base (JS changes duration for fade/quick) */
    transition-property: opacity, transform;
    transition-timing-function: var(--toc-ease);

    /* subtle “lift” when open */
    transform: translateY(0);
}

/* custom scrollbar (webkit) – optional */
.toc-panel::-webkit-scrollbar { width: 10px; }
.toc-panel::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.18);
    border-radius: 999px;
    border: 3px solid rgba(255,255,255,0.75);
}
.toc-panel::-webkit-scrollbar-track { background: transparent; }

/* inner layout */
.toc-panel__inner {
    display: grid;
    gap: 4px;
}

/* optional “header row” if you add one later */
.toc-panel__title {
    font-size: 12px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--toc-muted);
    padding: 2px 6px 8px;
}

/* ------------------------------------------------------------------ */
/* Items */
/* ------------------------------------------------------------------ */

.toc-item {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 10px;

    text-decoration: none;
    color: inherit;

    padding: 8px 10px;
    border-radius: 10px;

    transition: background 140ms var(--toc-ease), transform 120ms var(--toc-ease);
}

.toc-item:hover {
    background: var(--toc-hover);
}

.toc-item:active {
    transform: translateY(1px);
}

.toc-item:focus-visible {
    outline: 2px solid rgba(0,0,0,0.35);
    outline-offset: 2px;
}

/* active */
.toc-item[aria-current="true"] {
    background: var(--toc-active);
    font-weight: 650;
}

/* optional small “chevron” on the right */
.toc-item::after {
    content: "↵";
    font-size: 12px;
    color: rgba(0,0,0,0.35);
    opacity: 0;
    transform: translateX(-2px);
    transition: opacity 140ms var(--toc-ease), transform 140ms var(--toc-ease);
}

.toc-item:hover::after {
    opacity: 1;
    transform: translateX(0);
}

/* ------------------------------------------------------------------ */
/* State-driven visuals (from JS data attrs) */
/* ------------------------------------------------------------------ */

/* DISABLED: JS sets display:none; keep as fallback */
.toc-panel[data-state="DISABLED"] {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-2px);
}

/* VISIBLE */
.toc-panel[data-state="VISIBLE"] {
    opacity: 1;
    pointer-events: auto;
}

/* FADING */
.toc-panel[data-state="FADING"] {
    opacity: 0;
    pointer-events: none;
}

/* AUTO_SCROLL: quick dim so background is more visible */
.toc-panel[data-state="AUTO_SCROLL"] {
    opacity: 0.65;
}

/* MANUAL_SCROLL: JS drives opacity by visibleFraction; transition off */
.toc-panel[data-state="MANUAL_SCROLL"] {
    transition-duration: 0ms !important;
}

/* Slightly different “feel” when anchored (optional) */
.toc-panel[data-mode="anchored"] {
    box-shadow: 0 10px 30px rgba(0,0,0,0.14);
    backdrop-filter: blur(6px);
}

/* ------------------------------------------------------------------ */
/* Responsive: if left space is tight, keep trigger visible and panel usable */
/* ------------------------------------------------------------------ */

@media (max-width: 820px) {
    .toc-trigger {
        left: calc(-1 * (var(--toc-trigger-size) + 6px));
    }
    :root { --toc-panel-w: 300px; }
}

@media (max-width: 560px) {
    /* On very small screens: keep trigger inside heading to avoid clipping */
    .toc-trigger {
        left: 0;
        top: 0.05em;
        transform: translateX(-6px);
    }
    h2.toc { padding-left: 18px; }
    :root { --toc-panel-w: 92vw; }
}