/* ═══════════════════════════════════════════════════════════════════════════
   Tech Silo — Product Category Tree  (assets/css/category-tree.css)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Variables ────────────────────────────────────────────────────────────── */
.tsi-cat-tree {
    --tsi-tree-accent:       #1e73be;
    --tsi-tree-accent-hover: #155a95;
    --tsi-tree-text:         #333;
    --tsi-tree-muted:        #888;
    --tsi-tree-bg-hover:     #f5f8fc;
    --tsi-tree-border:       #e0e7ef;
    --tsi-tree-toggle-size:  22px;
    --tsi-tree-indent:       18px;
    --tsi-tree-radius:       6px;
    --tsi-tree-transition:   180ms ease;

    font-size: 0.92rem;
    line-height: 1.5;
}

/* ── List reset ───────────────────────────────────────────────────────────── */
.tsi-cat-tree__list {
    list-style:  none;
    margin:      0;
    padding:     0;
}

.tsi-cat-tree__list--root {
    border: 1px solid var(--tsi-tree-border);
    border-radius: var(--tsi-tree-radius);
    overflow: hidden;
}

/* Sub-lists: indented, hidden by default */
.tsi-cat-tree__list--sub {
    padding-left: var(--tsi-tree-indent);
    border-left:  2px solid var(--tsi-tree-border);
    margin-left:  calc(var(--tsi-tree-toggle-size) / 2 + 10px);

    /* Hide / reveal animation */
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--tsi-tree-transition);
    overflow: hidden;
}

.tsi-cat-tree__list--sub > li {
    overflow: hidden; /* required for grid collapse trick */
    min-height: 0;
}

.tsi-cat-tree__list--sub.is-open {
    grid-template-rows: 1fr;
}

/* ── Row layout (toggle + link) ───────────────────────────────────────────── */
.tsi-cat-tree__row {
    display:     flex;
    align-items: center;
    gap:         4px;
}

/* ── Item ─────────────────────────────────────────────────────────────────── */
.tsi-cat-tree__item {
    border-bottom: 1px solid var(--tsi-tree-border);
    padding:       2px 0;
}

.tsi-cat-tree__item:last-child {
    border-bottom: none;
}

/* ── Toggle button ────────────────────────────────────────────────────────── */
.tsi-cat-tree__toggle {
    flex-shrink:     0;
    width:           var(--tsi-tree-toggle-size);
    height:          var(--tsi-tree-toggle-size);
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      transparent;
    border:          1px solid var(--tsi-tree-border);
    border-radius:   4px;
    cursor:          pointer;
    padding:         0;
    color:           var(--tsi-tree-muted);
    transition:      background var(--tsi-tree-transition),
                     color      var(--tsi-tree-transition),
                     transform  var(--tsi-tree-transition);
    margin-left:     8px;
}

.tsi-cat-tree__toggle svg {
    width:  10px;
    height: 10px;
    fill:   none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap:  round;
    stroke-linejoin: round;
    transition: transform var(--tsi-tree-transition);
}

.tsi-cat-tree__toggle:hover {
    background: var(--tsi-tree-accent);
    border-color: var(--tsi-tree-accent);
    color: #fff;
}

/* Rotate the chevron when open */
.tsi-cat-tree__toggle.is-open svg {
    transform: rotate(180deg);
}

/* ── Links ────────────────────────────────────────────────────────────────── */
.tsi-cat-tree__link {
    display:         block;
    flex:            1;
    padding:         7px 12px 7px 8px;
    color:           var(--tsi-tree-text);
    text-decoration: none;
    transition:      background var(--tsi-tree-transition), color var(--tsi-tree-transition);
    border-radius:   4px;
}

.tsi-cat-tree__link--leaf {
    padding-left: calc(var(--tsi-tree-toggle-size) + 12px);
}

.tsi-cat-tree__link:hover,
.tsi-cat-tree__link:focus-visible {
    background: var(--tsi-tree-bg-hover);
    color:      var(--tsi-tree-accent);
    outline:    none;
}

/* Current category highlight */
.tsi-cat-tree__item.is-current > .tsi-cat-tree__row > .tsi-cat-tree__link,
.tsi-cat-tree__item.is-current > .tsi-cat-tree__link {
    color:       var(--tsi-tree-accent);
    font-weight: 600;
}

/* ── Count badge ──────────────────────────────────────────────────────────── */
.tsi-cat-tree__count {
    font-size:  0.82em;
    color:      var(--tsi-tree-muted);
    font-weight: 400;
}

/* ── Root item separators ─────────────────────────────────────────────────── */
.tsi-cat-tree__list--root > .tsi-cat-tree__item > .tsi-cat-tree__row > .tsi-cat-tree__link,
.tsi-cat-tree__list--root > .tsi-cat-tree__item > .tsi-cat-tree__link {
    font-weight: 600;
    color:       var(--tsi-tree-text);
}

/* ── Sidebar widget reset ─────────────────────────────────────────────────── */
.widget .tsi-cat-tree {
    margin-top: 0;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .tsi-cat-tree {
        font-size: 0.95rem;
    }

    .tsi-cat-tree__toggle {
        width:  28px;
        height: 28px;
    }

    .tsi-cat-tree__link {
        padding-top:    9px;
        padding-bottom: 9px;
    }
}