/*
 * Sidebar Nav Menu — sidebar-nav.css
 * Transparent background, inherits theme text/accent colors.
 * Override --snm-* variables in Appearance → Additional CSS if needed.
 */

/* ── Tokens ──────────────────────────────────────────────────── */
.snm-nav {
    --snm-text:          #404041;
    --snm-accent:        #00e4bc;
    --snm-hover-bg:      rgba(0, 228, 188, 0.1);
    --snm-active-bg:     rgba(0, 228, 188, 0.36);
    --snm-active-text:   #404041;
    --snm-ancestor-text: #010172;
    --snm-border:        rgba(64, 64, 65, 0.15);
    --snm-font-size:     var(--wp--preset--font-size--small, 0.875rem);
    --snm-radius:        4px;
    --snm-transition:    200ms ease;
    --snm-indent:        0.1rem;
}

/* ── Nav wrapper — transparent bg ───────────────────────────── */
.snm-nav {
    width:      100%;
    font-size:  var(--snm-font-size);
    color:      var(--snm-text);
    background: transparent;
}

/* ── Lists ───────────────────────────────────────────────────── */
.snm-menu,
.snm-submenu {
    list-style: none;
    margin:     0;
    padding:    0;
}

/*
 * Collapse via max-height.
 * JS sets inline max-height on open, removes it on close.
 * Submenus hidden by default.
 * JS sets inline max-height to exact scrollHeight on open,
 * and recalculates all open ancestors so nothing is clipped.
 */
.snm-submenu {
    overflow:   hidden;
    max-height: 0;
    transition: max-height 250ms ease;
}

/* JS removes inline max-height on open so content is never clipped */
.snm-submenu--open {
    max-height: none;
}

/* Indent nested levels — kept tight to avoid text wrapping */
.snm-submenu .snm-item-wrap {
    padding-left: var(--snm-indent);
}

.snm-submenu .snm-submenu .snm-item-wrap {
    padding-left: calc(var(--snm-indent) * 2);
}

/* ── Item row ────────────────────────────────────────────────── */
.snm-item-wrap {
    display:       flex;
    align-items:   center;
    border-radius: var(--snm-radius);
    transition:    background var(--snm-transition);
}

.snm-item-wrap:hover {
    background: var(--snm-hover-bg);
}

/* ── Link ────────────────────────────────────────────────────── */
.snm-link {
    flex:            1;
    display:         block;
    padding:         0.45rem 0.5rem;
    color:           var(--snm-text);
    font-weight:     400;
    font-size:       var(--snm-font-size) !important;
    text-decoration: none;
    line-height:     1.4;
    border-radius:   var(--snm-radius);
    transition:      color var(--snm-transition);
    word-break:      break-word;
}

.snm-link:hover {
    color: var(--snm-text);
}

/* Active (current page) */
.current-menu-item > .snm-item-wrap > .snm-link {
    color:         var(--snm-active-text);
    font-weight:   700;
    background:    var(--snm-active-bg);
    border-radius: var(--snm-radius);
    padding-left:  0.5rem;
    padding-right: 0.5rem;
}

/* Ancestor of active page */
.current-menu-ancestor > .snm-item-wrap > .snm-link,
.current-menu-parent   > .snm-item-wrap > .snm-link {
    color:       var(--snm-ancestor-text);
    font-weight: 400;
}

/* ── Toggle button ───────────────────────────────────────────── */
.snm-toggle {
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    width:           26px;
    height:          26px;
    padding:         0;
    margin-right:    4px;
    background:      none;
    border:          none;
    border-radius:   var(--snm-radius);
    color:           var(--snm-text);
    cursor:          pointer;
    opacity:         0.6;
    transition:      opacity var(--snm-transition),
                     background var(--snm-transition);
}

.snm-toggle:hover {
    background: var(--snm-hover-bg);
    opacity:    1;
}

.snm-toggle svg {
    display:    block;
    transition: transform var(--snm-transition);
}

/* Rotate chevron when open */
.snm-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

/* ── Dividers between top-level items ───────────────────────── */
.snm-menu > li + li {
    border-top:  1px solid var(--snm-border);
    margin-top:  2px;
    padding-top: 2px;
}

/* ── Notice (no menu assigned) ───────────────────────────────── */
.snm-notice {
    font-size: var(--snm-font-size);
    color:     var(--snm-text);
    opacity:   0.6;
    padding:   0.5rem;
    margin:    0;
}

/* ── Focus ring ──────────────────────────────────────────────── */
.snm-link:focus-visible,
.snm-toggle:focus-visible {
    outline:        2px solid var(--snm-accent);
    outline-offset: 2px;
}