/* Force Horizontal Navigation - Override All WordPress Defaults */

/* Main navigation container */
#site-navigation,
.main-navigation {
    display: flex !important;
    justify-content: center !important;
}

/* Menu container */
#primary-menu,
.nav-menu,
.menu,
ul.menu,
ul.nav-menu,
.fallback-menu {
    display: flex !important;
    flex-direction: row !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    gap: 20px !important;
    flex-wrap: nowrap !important;
}

/* Menu items */
#primary-menu > li,
.nav-menu > li,
.menu > li,
ul.menu > li,
ul.nav-menu > li {
    display: inline-block !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    list-style: none !important;
}

/* Menu links */
#primary-menu a,
.nav-menu a,
.menu a {
    display: inline-block !important;
    padding: 8px 16px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

/* Dropdown menus */
.sub-menu,
.children {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    background: white !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
    min-width: 200px !important;
    z-index: 9999 !important;
}

.menu-item-has-children:hover .sub-menu,
.menu-item-has-children:hover .children {
    display: block !important;
}

.sub-menu li,
.children li {
    display: block !important;
    width: 100% !important;
}

/* Remove any default WordPress menu styling */
.menu-item {
    margin: 0 !important;
    padding: 0 !important;
}

/* For OceanWP specific overrides */
#site-navigation-wrap .dropdown-menu > li {
    display: inline-block !important;
    float: none !important;
}

#site-navigation-wrap .dropdown-menu {
    display: flex !important;
    flex-direction: row !important;
}

/* Breadcrumb fix */
.breadcrumbs ol,
.breadcrumbs ul {
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;
}

.breadcrumbs li {
    display: inline-block !important;
}

/* Mobile styles */
@media screen and (max-width: 768px) {
    #primary-menu,
    .nav-menu,
    .menu {
        flex-direction: column !important;
    }
    
    #primary-menu > li,
    .nav-menu > li,
    .menu > li {
        display: block !important;
        width: 100% !important;
    }
}