/* Horizontal Menus 1.0.2
 * Assertive top-level rules intended to override theme layouts such as Graphene
 * while preserving nested submenu behavior.
 */

.hm-horizontal-container {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    clear: both !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

ul.hm-horizontal-menu,
ol.hm-horizontal-menu,
.hm-horizontal-menu {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    clear: both !important;
    margin: 0 auto !important;
    padding: 0 !important;
    list-style: none !important;
    box-sizing: border-box !important;
}

.hm-horizontal-menu.hm-align-left { justify-content: flex-start !important; }
.hm-horizontal-menu.hm-align-center { justify-content: center !important; }
.hm-horizontal-menu.hm-align-right { justify-content: flex-end !important; }

.hm-horizontal-menu > li,
.hm-horizontal-menu > li.menu-item {
    display: block !important;
    float: none !important;
    clear: none !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    list-style: none !important;
    background: transparent !important;
    box-sizing: border-box !important;
}

.hm-horizontal-menu > li > a {
    display: block !important;
    width: auto !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

/* Neutralize theme-created top-level separators/floats. */
.hm-horizontal-menu > li::before,
.hm-horizontal-menu > li::after {
    float: none !important;
}


/*
 * Theme/grid compatibility.
 * A theme may place the nav-menu widget itself inside a partial-width grid
 * column (Graphene commonly uses Bootstrap col-sm-* classes). Centering the
 * UL then centers it only inside that partial-width box. Expand only widgets
 * that actually contain a Horizontal Menus menu to the full parent row.
 */
.hm-horizontal-widget,
.widget_nav_menu:has(.hm-horizontal-menu) {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    float: none !important;
    clear: both !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

.hm-horizontal-widget > .hm-horizontal-container,
.widget_nav_menu:has(.hm-horizontal-menu) > .hm-horizontal-container {
    width: 100% !important;
    max-width: 100% !important;
}