/* ============================================================
   mmenu-custom.css
   Custom styles for mmenu v9
   Load AFTER dist/mmenu.css
   ============================================================ */

/* ---- Panel width (on :root so mmenu's ancestor selectors see it) ---- */
:root {
    --mm-size: 300px;
    --mm-min-size: 300px;
    --mm-max-size: 300px;
}

/* ---- Theme: colors, typography, row & navbar sizing ---- */
.mm-menu {
    background: #3a3a3a;
    color: rgba(255, 255, 255, 0.75);
    font-family: Helvetica, Arial, Verdana, sans-serif;
    font-size: 14px;

    --mm-color-background: #3a3a3a;
    --mm-color-text: rgba(255, 255, 255, 0.75);
    --mm-color-text-dimmed: rgba(255, 255, 255, 0.82);
    --mm-color-border: rgba(0, 0, 0, 0.3);
    --mm-color-icon: rgba(255, 255, 255, 0.82);
    --mm-color-background-highlight: rgba(255, 255, 255, 0.05);
    --mm-color-background-emphasis: rgba(0, 0, 0, 0.15);

    --mm-listitem-size: 40px;
    --mm-navbar-size: 44px;  /* 44px keeps touch targets accessible */
}

/* ---- Navbar title: bold, centered in the available space ---- */
.mm-navbar .mm-navbar__title {
    font-weight: bold;
}

/* ---- List items ---- */
.mm-listitem__text {
    padding-inline-start: 30px;  /* keep your deeper indent */
}

/* ---- Dividers ---- */
.mm-divider {
    font-size: 12px;
    text-transform: uppercase;
}

/* ---- Current page highlight (optional but recommended) ---- */
.mm-listitem--selected > .mm-listitem__text {
    color: #fff;
    font-weight: bold;
}