/**
 * FNM Docs Sidebar Menu — Frontend Styles
 *
 * ── How to customise ────────────────────────────────────────────────────────
 * Override any of the CSS variables below in Divi → Theme Options → Custom CSS:
 *
 *   .fnm-docs-menu {
 *       --fnm-bg:           #ffffff;   Menu background
 *       --fnm-border:       #e0e4ea;   Border and divider colour
 *       --fnm-radius:       6px;       Corner radius
 *
 *       --fnm-term-bg:      #f4f6f8;   Top-level section header background
 *       --fnm-term-color:   #1a1a2e;   Top-level section header text
 *       --fnm-term-accent:  #0073aa;   Left border accent colour
 *
 *       --fnm-link-color:   #2c3e50;   Page link text
 *       --fnm-link-hover:   #0073aa;   Page link hover text
 *
 *       --fnm-active-color: #0073aa;   Current page text
 *       --fnm-active-bg:    #eaf4fc;   Current page background
 *
 *       --fnm-indent:       16px;      Indentation per nesting level
 *       --fnm-px:           14px;      Horizontal padding
 *       --fnm-py:           9px;       Vertical padding
 *       --fnm-speed:        300ms;     Animation speed
 *   }
 * ────────────────────────────────────────────────────────────────────────────
 */

.fnm-docs-menu {
    --fnm-bg:           #ffffff;
    --fnm-border:       #e0e4ea;
    --fnm-radius:       6px;

    --fnm-term-bg:      #f4f6f8;
    --fnm-term-color:   #1a1a2e;
    --fnm-term-accent:  #0073aa;

    --fnm-link-color:   #2c3e50;
    --fnm-link-hover:   #0073aa;

    --fnm-active-color: #0073aa;
    --fnm-active-bg:    #eaf4fc;
    --fnm-active-weight:600;

    --fnm-indent:       16px;
    --fnm-px:           14px;
    --fnm-py:           9px;
    --fnm-speed:        300ms;
}

/* ── Reset ─────────────────────────────────────────────────────────────────── */
.fnm-docs-menu,
.fnm-docs-menu * { box-sizing: border-box; }
.fnm-docs-menu ul,
.fnm-docs-menu li { margin: 0; padding: 0; list-style: none; }

/* ── Wrapper ────────────────────────────────────────────────────────────────── */
.fnm-docs-menu {
    background:    var(--fnm-bg);
    border:        1px solid var(--fnm-border);
    border-radius: var(--fnm-radius);
    overflow:      hidden;
    font-family:   inherit;
}

.fnm-docs-menu .fnm-menu__list--root { padding: 4px 0; }

/* ── Row ────────────────────────────────────────────────────────────────────── */
.fnm-docs-menu .fnm-menu__row {
    display:     flex;
    align-items: stretch;
}

/* Dividers between top-level items */
.fnm-docs-menu .fnm-menu__item--top + .fnm-menu__item--top {
    border-top: 1px solid var(--fnm-border);
}

/* Top-level row background + left accent */
.fnm-docs-menu .fnm-menu__item--top > .fnm-menu__row {
    background:   var(--fnm-term-bg);
    border-left:  3px solid var(--fnm-term-accent);
}

/* Sub-level term rows */
.fnm-docs-menu .fnm-menu__sub > .fnm-menu__item--term > .fnm-menu__row {
    background:  #f9fafb;
    border-left: 2px solid #c8d8e8;
}

/* ── Clickable link ─────────────────────────────────────────────────────────── */
.fnm-docs-menu .fnm-menu__link {
    flex:            1;
    display:         block;
    padding:         var(--fnm-py) var(--fnm-px);
    color:           var(--fnm-link-color);
    text-decoration: none;
    font-size:       0.875rem;
    line-height:     1.45;
    word-break:      break-word;
    transition:      color var(--fnm-speed), background var(--fnm-speed);
}

.fnm-docs-menu .fnm-menu__item--top > .fnm-menu__row > .fnm-menu__link {
    color:       var(--fnm-term-color);
    font-weight: 600;
    font-size:   0.9rem;
}

.fnm-docs-menu .fnm-menu__link:hover,
.fnm-docs-menu .fnm-menu__link:focus {
    color:           var(--fnm-link-hover);
    text-decoration: none;
    outline:         none;
}

.fnm-docs-menu .fnm-menu__link--current,
.fnm-docs-menu .fnm-menu__link--current:hover {
    color:       var(--fnm-active-color);
    font-weight: var(--fnm-active-weight);
    background:  var(--fnm-active-bg);
}

/* ── Non-clickable term label ───────────────────────────────────────────────── */
.fnm-docs-menu .fnm-menu__label {
    flex:        1;
    display:     block;
    padding:     var(--fnm-py) var(--fnm-px);
    color:       var(--fnm-term-color);
    font-weight: 600;
    font-size:   0.9rem;
    line-height: 1.45;
    cursor:      default;
    word-break:  break-word;
}

.fnm-docs-menu .fnm-menu__sub > .fnm-menu__item--term > .fnm-menu__row > .fnm-menu__label {
    font-size:   0.875rem;
    font-weight: 600;
    color:       #2c3e50;
}

/* ── +/− Toggle button ──────────────────────────────────────────────────────── */
.fnm-docs-menu .fnm-menu__toggle {
    flex-shrink:     0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           36px;
    padding:         0;
    border:          none;
    border-left:     1px solid var(--fnm-border);
    background:      transparent;
    cursor:          pointer;
    font-size:       18px;
    font-weight:     300;
    line-height:     1;
    color:           #6b7280;
    transition:      color var(--fnm-speed), background var(--fnm-speed);
    user-select:     none;
}

.fnm-docs-menu .fnm-menu__toggle:hover,
.fnm-docs-menu .fnm-menu__toggle:focus {
    color:      var(--fnm-link-hover);
    background: rgba(0, 115, 170, 0.06);
    outline:    none;
}

/* ── Indentation per depth ──────────────────────────────────────────────────── */
.fnm-docs-menu .fnm-menu__sub .fnm-menu__link,
.fnm-docs-menu .fnm-menu__sub .fnm-menu__label {
    padding-left: calc(var(--fnm-px) + var(--fnm-indent));
}

.fnm-docs-menu .fnm-menu__sub .fnm-menu__sub .fnm-menu__link,
.fnm-docs-menu .fnm-menu__sub .fnm-menu__sub .fnm-menu__label {
    padding-left: calc(var(--fnm-px) + var(--fnm-indent) * 2);
}

.fnm-docs-menu .fnm-menu__sub .fnm-menu__sub .fnm-menu__sub .fnm-menu__link,
.fnm-docs-menu .fnm-menu__sub .fnm-menu__sub .fnm-menu__sub .fnm-menu__label {
    padding-left: calc(var(--fnm-px) + var(--fnm-indent) * 3);
}

/* ── Empty state ────────────────────────────────────────────────────────────── */
.fnm-docs-menu .fnm-menu__empty {
    padding:   16px;
    color:     #6b7280;
    font-size: 0.875rem;
}