.mega-menu .mega-menu-header {
    color: var(--mega-menu-header) !important;
    font-weight: bold;
    margin-bottom: .5rem;
    display: block;
}

/* --- Force visible unified border on mega-menu list-groups (both light & dark) --- */
.mega-menu .mega-content .list-group,
.mega-menu .list-group {
    border: 1px solid #6d6d6d !important; /* visible unified border */
    border-radius: 6px;
    overflow: hidden; /* keep rounded corners clean */
    background-clip: padding-box;
}

    /* Make internal items clean (no outer borders) and readable */
    .mega-menu .mega-content .list-group .list-group-item,
    .mega-menu .list-group .list-group-item,
    .mega-menu .mega-content .mega-links a,
    .mega-menu .mega-links a {
        border: 0 !important; /* remove bootstrap item borders that conflict */
        background: transparent; /* keep group background visible */
        display: block;
        color: var(--white) !important; /* unified readable color */
    }

        /* subtle separators between items (adjust opacity/color if needed) */
        .mega-menu .mega-content .list-group .list-group-item + .list-group-item,
        .mega-menu .list-group .list-group-item + .list-group-item,
        .mega-menu .mega-links a + a {
            border-top: 1px solid rgba(255,255,255,0.06);
        }

/* tweak separator for light mode so it remains visible on light backgrounds */
html[data-bs-theme="light"] .mega-menu .mega-content .list-group .list-group-item + .list-group-item,
html[data-bs-theme="light"] .mega-menu .list-group .list-group-item + .list-group-item,
html[data-bs-theme="light"] .mega-menu .mega-links a + a {
    border-top: 1px solid rgba(0,0,0,0.06);
}

/* hover highlight (same for plain links & list-group items) */
.mega-menu .mega-content .list-group .list-group-item:hover,
.mega-menu .mega-links a:hover,
.mega-menu .list-group .list-group-item:hover {
    background-color: var(--nav-link-background-hover) !important;
    color: var(--nav-link-hover-color) !important;
    text-decoration: none;
}

/* Disable hover effect for non-link div.list-group-item used as a divider */
.mega-menu .list-group div.list-group-item {
    pointer-events: none; /* prevent hover/click */
    cursor: default; /* show normal cursor */
    background: transparent !important; /* keep background clear */
    font-weight: bold; /* make it look like a section title */
    color: var(--white) !important; /* unify text colour */
}

    /* Optional: remove hover background from divider explicitly */
    .mega-menu .list-group div.list-group-item:hover {
        background: transparent !important;
        color: var(--white) !important;
    }

.mega-menu .mega-menu-header {
    padding-left: 10px !important;
    font-size: 10pt !important;
}

.mega-menu .mega-content .mega-links a {
    display: block;
    padding: 0.5rem 0.75rem;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.2s, color 0.2s;
}

/* Light mode */
html[data-bs-theme="light"] .mega-menu .mega-content .mega-links a {
    color: var(--white) !important; /* Bootstrap’s default text colour for light theme */
}

    html[data-bs-theme="light"] .mega-menu .mega-content .mega-links a:hover {
        background-color: var(--bs-primary-bg-subtle, #e9ecef);
        color: var(--bs-primary-text, #000);
    }

/* Dark mode */
html[data-bs-theme="dark"] .mega-menu .mega-content .mega-links a {
    color: var(--white) !important;
}

    html[data-bs-theme="dark"] .mega-menu .mega-content .mega-links a:hover {
        background-color: var(--bs-primary-bg-subtle);
        color: var(--bs-primary-text);
    }