/* ============================================================
   Command Sidebar Nav
   Targets the real classes confirmed from the site:
   - .advanced-sidebar-menu  (Advanced Sidebar Menu plugin)
   - .uagb-block-29cc79ef     (left column, Spectra container)
   - .uagb-block-32ff8006     (right column, gallery container)
   - .uagb-block-70dc2725     (outer flex row)
   ============================================================ */

/* ---------- 1. Fix gallery image overflow ---------- */
.uagb-block-32ff8006 .wp-block-gallery {
    margin: 0 !important;
    gap: 12px !important;
}
.uagb-block-32ff8006 .wp-block-image,
.uagb-block-32ff8006 figure {
    margin: 0 !important;
    max-width: 100% !important;
}
.uagb-block-32ff8006 img {
    max-width: 100% !important;
    height: auto !important;
    display: block;
}

/* ---------- 2. Give the nav column a bit more room ---------- */
.uagb-block-70dc2725 > .uagb-block-29cc79ef {
    width: 30% !important;
    flex: 0 0 30% !important;
}
.uagb-block-70dc2725 > .uagb-block-32ff8006 {
    width: 68% !important;
    flex: 0 0 68% !important;
}

/* ---------- 3. Beautify the menu — STYLE B (solid green emphasis) ---------- */

/* Outer card wrapper */
.advanced-sidebar-menu {
    font-size: 14px;
    line-height: 1.5;
    background: #ffffff;
    border: 1px solid #e6ece9;
    border-radius: 12px;
    overflow: hidden;
    padding: 6px;
}
.advanced-sidebar-menu ul,
.advanced-sidebar-menu li {
    list-style: none !important;
    margin: 0;
    padding: 0;
}

/* Base link */
.advanced-sidebar-menu a {
    position: relative;
    display: block;
    padding: 9px 12px;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #3a3a3a !important;
    text-decoration: none;
    border-radius: 8px;
    white-space: normal;
    overflow: hidden;
    transition: background .15s ease, color .15s ease;
}
.advanced-sidebar-menu a:hover {
    background: #f3f8f5;
    color: #14532d !important;
}

/* Level 0 = the very top item ("All Fencing Products") → solid dark green bar */
.advanced-sidebar-menu .parent-sidebar-menu > li > a {
    font-weight: 500 !important;
    font-size: 14px !important;
    color: #ffffff !important;
    background: #1f3d2c !important;
    border-radius: 8px;
    margin-bottom: 4px;
}
.advanced-sidebar-menu .parent-sidebar-menu > li > a:hover {
    background: #16301f !important;
    color: #ffffff !important;
}

/* Second-level category labels ("Wire Mesh Fences", etc.) bold green text */
.advanced-sidebar-menu .child-sidebar-menu > li > a {
    font-weight: 500 !important;
    color: #1f3d2c !important;
}

/* Indent + guide line for nested levels */
.advanced-sidebar-menu .child-sidebar-menu {
    margin-left: 4px;
    padding-left: 4px;
}
.advanced-sidebar-menu .grandchild-sidebar-menu {
    margin-left: 10px;
    padding-left: 12px;
    border-left: 1.5px solid #e2ece6;
    margin-top: 2px;
}
.advanced-sidebar-menu .grandchild-sidebar-menu a {
    color: #4a5a52 !important;
    font-size: 13px !important;
}

/* Current page → solid medium-green block with white text */
.advanced-sidebar-menu .current_page_item > a,
.advanced-sidebar-menu .current-menu-item > a {
    background: #2e7d52 !important;
    color: #ffffff !important;
    font-weight: 500 !important;
}
.advanced-sidebar-menu .current_page_item > a:hover,
.advanced-sidebar-menu .current-menu-item > a:hover {
    background: #266a45 !important;
    color: #ffffff !important;
}

/* Ancestors of current page: bold green text only, no block */
.advanced-sidebar-menu .current_page_ancestor > a,
.advanced-sidebar-menu .current_page_parent > a,
.advanced-sidebar-menu .current-menu-ancestor > a {
    color: #14532d !important;
    font-weight: 500 !important;
}
/* but if an ancestor is ALSO the top-level item, keep the dark bar */
.advanced-sidebar-menu .parent-sidebar-menu > li.current_page_ancestor > a {
    color: #ffffff !important;
    background: #1f3d2c !important;
}

/* ---------- 4. Collapse toggle arrow ---------- */
.asm-toggle {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    float: right;
    color: inherit;
    opacity: .65;
    transition: transform .2s ease, opacity .15s ease;
    user-select: none;
    font-size: 11px;
}
.asm-toggle:hover {
    opacity: 1;
}
.asm-open > a > .asm-toggle {
    transform: rotate(90deg);
}