:root {
    --hph-toc-bg: #1d2535;
    --hph-toc-border: #1d2535;
    --hph-toc-text: #1d2327;
    --hph-toc-link: #d64788;
    --hph-toc-link-hover: #d64788;
    --hph-toc-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    --hph-toc-radius: 6px;
    --hph-toc-header-height: 52px;
    --hph-toc-scroll-offset: calc(var(--hph-toc-header-height) + 16px);
    --hph-toc-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Sprungziele: der Plugin-eigene Anchor-Span steht direkt vor jeder
   Heading. scroll-margin-top sorgt dafür, dass das Ziel nicht hinter
   dem fixierten Balken landet. */
.hph-toc-anchor {
    display: block;
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    scroll-margin-top: var(--hph-toc-scroll-offset);
}

/* Fallback: auch Headings mit bereits vorhandenen IDs bekommen den Offset,
   falls jemand direkt auf eine Heading-ID verlinkt. */
h1[id], h2[id], h3[id], h4[id], h5[id], h6[id] {
    scroll-margin-top: var(--hph-toc-scroll-offset);
}

/* Wrapper um das Inline-TOC – steuert die äußeren Abstände.
   Ein eigener Wrapper verhindert, dass Margin-Collapsing zwischen
   Nachbarelementen die Position des TOC beeinflusst. */
.hph-toc-wrap {
    margin: 1.75em 0;
}

/* --- Basis (für Inline und Floating gleichermaßen) --- */
.hph-toc {
    box-sizing: border-box;
    background: var(--hph-toc-bg);
    color: var(--hph-toc-text);
    border: 1px solid transparent;
    border-radius: var(--hph-toc-radius);
    overflow: hidden;
    font-size: 1rem;
    line-height: 1.5;
}

.hph-toc * {
    box-sizing: border-box;
}

.hph-toc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    min-height: var(--hph-toc-header-height);
    background: var(--hph-toc-bg);
    cursor: pointer;
    user-select: none;
    outline: none;
}

.hph-toc-header:focus-visible {
    box-shadow: inset 0 0 0 2px var(--hph-toc-link);
}

.hph-toc-title {
    font-weight: 700;
    font-size: clamp(14px,1.5vw,1.25em);
    margin: 0;
}

.hph-toc-toggle {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--hph-toc-border);
    border-radius: 4px;
    cursor: pointer;
    padding: 0;
    color: inherit;
    transition: background-color 0.15s ease;
    border-radius: 5px !important;

    &:after {
        display: none !important;
    }
}

.hph-toc-toggle:hover,
.hph-toc-toggle:focus-visible {
    background: #d64788;
    outline: none;
}

.hph-toc-toggle-icon {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    margin-top: -3px;
}

.hph-toc.is-open .hph-toc-toggle-icon {
    transform: rotate(-135deg);
    margin-top: 3px;
}

.hph-toc-nav {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s var(--hph-toc-ease);
    background: var(--hph-toc-bg);
}

/* Inline: darf so lang sein wie der Inhalt, kein interner Scroll. */
.hph-toc--inline.is-open .hph-toc-nav {
    max-height: none;
    overflow: visible;
    border-top: 1px solid var(--hph-toc-border);
}

/* Floating: Nav-Höhe so begrenzen, dass der Balken komplett ins Viewport
   passt – abzüglich Top-Offset (Theme-Header + Gap), eigenem Header und
   20px Puffer zum unteren Bildschirmrand. */
.hph-toc--floating.is-open .hph-toc-nav {
    max-height: calc(
        100vh
        - var(--hph-toc-top-offset, 0px)
        - var(--hph-toc-header-height)
        - 20px
    );
    overflow-y: auto;
    border-top: 1px solid var(--hph-toc-border);
}

.hph-toc-nav ul,
.hph-toc-nav ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hph-toc-nav > ul {
    padding: 8px 16px 14px;
}

.hph-toc-nav ul ul {
    padding: 2px 0 2px 16px;
    border-left: 1px solid var(--hph-toc-border);
    margin-left: 4px;
}

.hph-toc-item {
    margin: 8px 0;
    line-height: 1.4;
}

.hph-toc-link {
    color: var(--hph-toc-link);
    text-decoration: none;
    display: inline-block;
    padding: 2px 0;
    word-wrap: break-word;
    position: relative;
    border-bottom: none !important;
    font-weight: 400;
    font-size: 1rem;
}

/* Animierter Unterstrich: scaleX(0) → scaleX(1).
   Beide Zustände nutzen denselben Transform-Typ – sonst interpoliert
   die Transition nicht zuverlässig. */
.hph-toc-link::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 1px;
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s ease;
}

.hph-toc-link:hover,
.hph-toc-link:focus-visible {
    color: var(--hph-toc-link-hover);
    outline: none;
}

.hph-toc-link:hover::before,
.hph-toc-link:focus-visible::before {
    transform: scaleX(1);
}

/* --- Floating-Balken (Klon des Inline-TOC) ---------------------------
 * Er ist IMMER position: fixed und wird nur per transform hinein-/
 * heraus­gefahren. Dadurch ändert sich weder das Layout noch die
 * Scroll-Position, wenn er erscheint oder sich öffnet/schließt.
 *
 * top, left, width werden per JS auf Content-Breite/-Position gesetzt,
 * damit der Balken unter einem evtl. vorhandenen Theme-Header sitzt
 * und horizontal über dem Inhalt zentriert ist.
 */
.hph-toc--floating {
    position: fixed;
    top: 0;
    left: 0;
    margin: 0;
    border-radius: var(--hph-toc-radius);
    box-shadow: var(--hph-toc-shadow);
    z-index: 99999;
    transform: translate3d(0, var(--hph-toc-hidden-y, -200%), 0);
    /* Initial KEINE Transition – sonst flackert der Balken beim ersten
       Einfügen ins DOM kurz am Bildschirmrand auf. Die Transition wird
       per JS erst nach dem ersten Paint (Klasse .is-ready) aktiviert. */
    transition: none;
    will-change: transform;
    pointer-events: none;
}

.hph-toc--floating.is-ready {
    transition: transform 0.3s var(--hph-toc-ease);
}

.hph-toc--floating.is-visible {
    transform: translate3d(0, 0, 0);
    pointer-events: auto;
    border-color: #fff
}

/* --- Reduzierte Bewegung -------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .hph-toc-nav,
    .hph-toc-toggle-icon,
    .hph-toc-toggle,
    .hph-toc--floating,
    .hph-toc--floating.is-ready {
        transition: none;
    }

    html {
        scroll-behavior: auto;
    }
}

/* --- Kleine Bildschirme --------------------------------------------- */

@media (max-width: 480px) {
    .hph-toc-nav > ul {
        padding: 8px 12px 12px;
    }
    .hph-toc-header {
        padding: 10px 12px;
    }
}