/* ==========================================================================
   iSocial TOC & Reading Progress — Styles
   1:1 match to reference design
   ========================================================================== */

/* --------------------------------------------------------------------------
   Reading Progress Bar
   -------------------------------------------------------------------------- */

.isocial-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    z-index: 999999;
    pointer-events: none;
    transition: width 60ms linear;
    opacity: 0;
}

.isocial-progress-bar--visible {
    opacity: 1;
}

/* --------------------------------------------------------------------------
   Table of Contents
   -------------------------------------------------------------------------- */

.isocial-toc {
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 0;
    padding: 28px 0 20px;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: 15px;
    line-height: 1.55;
    box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Title — small, uppercase, gray, spaced
   -------------------------------------------------------------------------- */

.isocial-toc__title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #ffffff59;
    padding: 0 28px 18px;
    margin: 0;
    display: block;
    line-height: 1;
}

/* Toggle button (when collapsible) */
.isocial-toc__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 28px 18px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}

.isocial-toc__toggle .isocial-toc__title {
    padding: 0;
    margin: 0;
}

.isocial-toc__chevron {
    color: #717171;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.isocial-toc__toggle[aria-expanded="false"] .isocial-toc__chevron {
    transform: rotate(-90deg);
}

/* --------------------------------------------------------------------------
   List
   -------------------------------------------------------------------------- */

.isocial-toc__list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, opacity 0.25s ease;
}

.isocial-toc__list--collapsed {
    max-height: 0 !important;
    opacity: 0;
    padding: 0;
}

.isocial-toc__item {
    margin: 0;
    padding: 0;
}

/* --------------------------------------------------------------------------
   Links — clean, no decorations, just text
   -------------------------------------------------------------------------- */

.isocial-toc__link {
    display: block;
    padding: 6px 28px;
    color: #ffffff66;
    text-decoration: none;
    border: none;
    background: none;
    transition: color 0.15s ease;
    font-size: 15px;
    line-height: 1.55;
    font-weight: 400;
}

.isocial-toc__link:visited {
    color: #ffffffcc;
}

.isocial-toc__link:hover,
.isocial-toc__link:focus {
    color: #ffffffcc;
    background: none;
    text-decoration: none;
    outline: none;
}

.isocial-toc__link.isocial-toc__link--active {
    color: #ffffffcc;
    font-weight: 500;
    background: none;
}

/* --------------------------------------------------------------------------
   Indentation levels
   -------------------------------------------------------------------------- */

.isocial-toc__item--level-0 .isocial-toc__link { padding-left: 28px; }
.isocial-toc__item--level-1 .isocial-toc__link { padding-left: 44px; font-size: 14px; }
.isocial-toc__item--level-2 .isocial-toc__link { padding-left: 60px; font-size: 13px; }
.isocial-toc__item--level-3 .isocial-toc__link { padding-left: 76px; font-size: 13px; }
.isocial-toc__item--level-4 .isocial-toc__link { padding-left: 92px; font-size: 12px; }
.isocial-toc__item--level-5 .isocial-toc__link { padding-left: 108px; font-size: 12px; }

/* --------------------------------------------------------------------------
   Smooth scroll
   -------------------------------------------------------------------------- */

html {
    scroll-behavior: smooth;
}