/*
 * Divi 5 Table of Contents – Stylesheet
 * All Divi 5 compatibility issues addressed by design.
 */

/* -------------------------------------------------------------------------
 * Module wrapper
 * ---------------------------------------------------------------------- */
.divi5-toc-module {
    border-radius: 3px;
    overflow: hidden;
}

/* -------------------------------------------------------------------------
 * Header
 * ---------------------------------------------------------------------- */
.d5toc-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 15px 23px;
    background-color: #6c2eb9;
    border-style: solid;
    /* Width transitions scoped here only — never on the module wrapper */
    transition: width 0.3s ease;
    width: auto;
    box-sizing: border-box;
}

.d5toc-header.d5toc-collapsible:hover,
.d5toc-header.d5toc-collapsible:focus {
    cursor: pointer;
}

@media (min-width: 768px) and (max-width: 980px) {
    .d5toc-header.d5toc-collapsible-tablet:hover { cursor: pointer; }
}

@media (max-width: 767px) {
    .d5toc-header.d5toc-collapsible-phone:hover { cursor: pointer; }
}

/* -------------------------------------------------------------------------
 * Title
 * ---------------------------------------------------------------------- */
.d5toc-title {
    flex: 1;
    font-size: 24px;
    line-height: 28px;
    color: #fff;
    font-weight: 600;
}

/* -------------------------------------------------------------------------
 * Icons — open / close
 * Initial state: open icon visible, close icon hidden.
 * JS flips these based on explicit boolean state (never toggle()).
 * ---------------------------------------------------------------------- */
.d5toc-icons {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.d5toc-icon-open,
.d5toc-icon-close {
    font-family: ETmodules;
    font-size: 30px;
    line-height: 1;
    color: #fff;
    display: block;
    cursor: pointer;
}

/* Initial state: open = visible, close = hidden */
.d5toc-icon-open  { display: block; }
.d5toc-icon-close { display: none; }

/* -------------------------------------------------------------------------
 * Body / navigation area
 * ---------------------------------------------------------------------- */
.d5toc-body {
    padding: 15px 23px;
    background-color: #f9f9f9;
    border-style: solid;
    overflow-x: hidden;
    box-sizing: border-box;
}

.d5toc-body::-webkit-scrollbar {
    width: 4px;
}

.d5toc-body::-webkit-scrollbar-track {
    background: transparent;
}

.d5toc-body::-webkit-scrollbar-thumb {
    background-color: #4c5866;
    border-radius: 2px;
}

/* -------------------------------------------------------------------------
 * List / tree structure
 * Marker rules use !important to survive Divi 5's aggressive list reset.
 * ---------------------------------------------------------------------- */
html { scroll-behavior: auto; }

.d5toc-tree {
    /* container for the full tree */
}

.d5toc-list {
    padding-bottom: 0 !important;
    list-style-position: outside;
}

.d5toc-list:first-child {
    padding-left: 0 !important;
}

/* Marker inherits styles – Divi 5 resets these otherwise */
.d5toc-list li::marker {
    color: inherit;
    font-size: inherit;
}

.d5toc-item {
    width: fit-content;
    max-width: 100%;
    border-style: solid;
    overflow: visible !important;
}

/* -------------------------------------------------------------------------
 * Inside marker position
 * ---------------------------------------------------------------------- */
.d5toc-body.inside .d5toc-list {
    list-style-position: inside !important;
}

.d5toc-body.inside .d5toc-item {
    width: 100%;
}

.d5toc-body.inside .d5toc-item-inner {
    display: inline-flex !important;
    padding-left: 7px;
    width: calc(100% - 50px);
}

/* -------------------------------------------------------------------------
 * Item inner — the invisible span overlay makes the full row clickable
 * ---------------------------------------------------------------------- */
.d5toc-item-inner {
    position: relative;
}

.d5toc-item-inner > span[data-href] {
    position: absolute;
    inset: 0;
    z-index: 9;
    cursor: pointer;
}

/* -------------------------------------------------------------------------
 * Links
 * ---------------------------------------------------------------------- */
.d5toc-tree a {
    font-size: 15px;
    line-height: 18px;
    text-decoration: none;
    position: relative;
}

.d5toc-tree a::after {
    content: '';
    display: block;
    width: 0;
    height: 1px;
    background: #2ea3f2;
    transition: width 0.3s ease;
}

.d5toc-tree .d5toc-item:hover a::after,
.d5toc-tree .d5toc-item.active a::after {
    width: 100%;
}

.d5toc-tree .d5toc-item-inner:hover {
    color: #2ea3f2;
}

.d5toc-tree .d5toc-item-inner:hover + a,
.d5toc-tree span[data-href]:hover + a {
    color: #2ea3f2;
}

/* -------------------------------------------------------------------------
 * Keyword search
 * ---------------------------------------------------------------------- */
.d5toc-search {
    position: relative;
    display: flex;
    margin-bottom: 10px;
}

.d5toc-search-input {
    flex: 1;
    border-radius: 3px;
    border: 2px solid #ccc;
    padding: 6px 36px 6px 10px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
}

.d5toc-search-input:focus {
    border-color: #6c2eb9;
}

.d5toc-search-clear {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    color: #999;
    padding: 0 4px;
}

.d5toc-search-clear:hover { color: #333; }

/* Keyword highlight */
mark.d5toc-highlight {
    background: #fff3cd;
    color: inherit;
    border-radius: 2px;
    padding: 0 1px;
}

/* -------------------------------------------------------------------------
 * Sticky placeholder opacity (Divi 4 + 5 compat)
 * ---------------------------------------------------------------------- */
.et_pb_sticky_placeholder {
    opacity: 0 !important;
}

/* -------------------------------------------------------------------------
 * Hide when below minimum heading count
 * ---------------------------------------------------------------------- */
.divi5-toc-module.hide.et_pb_module {
    display: none !important;
}