/* ######### Matt Black Strip Main Menu Bar CSS ######### */
.mattblackmenu ul {
    margin: 0;
    padding: 0;
    /* Layout */
    list-style: none;
    display: flex;
    align-items: center;
    width: 100%;
    /* Typography */
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    /* Background */
    background-color: #17194A;
    /* ✅ TOP curved corners only */
    border-radius: 10px 10px 0 0;
    /* Divider */
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    /* Required for curve to render cleanly */
    overflow: hidden;
}

        .mattblackmenu li{
        display: inline;
        margin: 0;
        }

            .mattblackmenu li a {
                display: flex;
                align-items: center;
                padding: 10px 14px;
                margin: 0;
                /* Typography */
                font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
                font-size: 14px;
                font-weight: 500;
                color: #ffffff;
                text-decoration: none;
                white-space: nowrap;
                /* Flat Background */
                background-color: #17194A;
                /* Divider */
                border-right: 0px solid rgba(255, 255, 255, 0.15);
                /* ✅ Reserve space for underline */
                border-bottom: 3px solid transparent;
                /* Interaction */
                transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
            }

                .mattblackmenu li a:hover {
                    color: #ffffff;
                    background-color: #17194A; /* keep flat */
                    border-bottom: 3px solid #ffffff; /* ✅ underline */
                }

                .mattblackmenu li a.active {
                    font-weight: 600;
                    border-bottom: 3px solid #ffffff;
                }


                .mattblackmenu li a:focus-visible {
                    outline: none;
                    border-bottom: 3px solid #ffffff;
                }



/*.mattblackmenu li a:visited{
color: white;
}

        .mattblackmenu li a:hover {
            background: #2B0057CC;*/ /*background of tabs for hover state */
            /*font-style: italic;
        }

.mattblackmenu a.selected {
    background: #2B0057CC;*/ /*background of tab with "selected" class assigned to its LI */
/*}*/