/*
 * Beyond 'Biz' Experience - Style 4 Styles
 * 
 * @package Beyond_Biz_Experience
 * @author Susan Robichaud
 * @copyright Copyright © 2024 Susan Robichaud International
 * @version 1.0.0
 */

/* ==========================================================================
   STYLE #4 — PLATFORM NAVIGATION - CENTERED LOGO WITH BACKGROUND
   ========================================================================== */

/* Hide the main site-branding area when Style 4 is active */
body.navigation-style-style-4 .site-branding {
    display: none !important;
}



/* Hide by default - only show when visible class is added */
#sticky-floating-menu {
    display: none !important;
}

#sticky-floating-menu.visible {
    display: block !important;
}



/* Main wrapper for Style 4 */
.navigation-style-4-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    position: relative !important;
    background-color: #ffffff !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    box-sizing: border-box !important;
}

/* Inner content container - this gets the max-width */
.navigation-style-4-wrapper .style-4-header-content {
    max-width: 1200px !important;
    margin: 0 auto !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* Style 4 Logo Container */
.navigation-style-4-wrapper .style-4-logo-container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 20px !important;
    z-index: 2 !important;
    position: relative !important;
}

/* Logo styling for Style 4 */
.navigation-style-4-wrapper .custom-logo {
    max-height: 120px !important;
    width: auto !important;
    display: block !important;
    transition: all 0.3s ease !important;
}

/* Site title fallback if no logo */
.navigation-style-4-wrapper .site-title {
    font-size: 32px !important;
    font-weight: 300 !important;
    margin: 0 !important;
    color: inherit !important;
    text-decoration: none !important;
}

.navigation-style-4-wrapper .site-title-link {
    text-decoration: none !important;
    color: inherit !important;
}

.navigation-style-4-wrapper .site-title-link:hover {
    opacity: 0.8 !important;
}

/* Navigation Menu Styles */
.main-navigation.navigation-style-style-4 {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    z-index: 2 !important;
    position: relative !important;
    margin: 0 !important;
}

/* Menu Items Container */
.main-navigation.navigation-style-style-4 .nav-menu {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
}

.main-navigation.navigation-style-style-4 .nav-menu > li {
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    margin: 0 !important;
    list-style: none !important;
}

.main-navigation.navigation-style-style-4 .nav-menu > li > a {
    color: #333333 !important;
    font-size: 16px !important;
    font-weight: 300 !important;
    text-decoration: none !important;
    padding: 10px 15px !important;
    margin: 0 15px !important;
    display: block !important;
    transition: all 0.3s ease !important;
    border-radius: 0 !important;
    position: relative !important;
    line-height: 1.4 !important;
}

/* Menu Hover Effects */
.main-navigation.navigation-style-style-4 .nav-menu > li > a:hover,
.main-navigation.navigation-style-style-4 .nav-menu > li.current-menu-item > a,
.main-navigation.navigation-style-style-4 .nav-menu > li.current_page_item > a {
    color: #4a9eff !important;
    transform: translateY(-2px) !important;
}

/* Submenu Styles */
.main-navigation.navigation-style-style-4 .nav-menu li ul {
    display: none !important;
    position: absolute !important;
    left: 0px !important;
    top: 100% !important;
    transform: none !important;
    min-width: 220px !important;
    background: #ffffff !important;
    border-radius: 6px !important;
    z-index: 9999 !important;
    padding: 15px 0 !important;
    margin: 0 !important;
    list-style: none !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.3s ease !important;
    margin-top: 10px !important;
}

.main-navigation.navigation-style-style-4 .nav-menu li:hover > ul,
.main-navigation.navigation-style-style-4 .nav-menu li:focus-within > ul {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.main-navigation.navigation-style-style-4 .nav-menu li ul li a {
    color: #333333 !important;
    padding: 12px 20px !important;
    border-radius: 0 !important;
    transition: all 0.3s ease !important;
    display: block !important;
    text-decoration: none !important;
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}

.main-navigation.navigation-style-style-4 .nav-menu li ul li a:hover {
    color: #4a9eff !important;
    background: rgba(74, 158, 255, 0.1) !important;
    padding-left: 25px !important;
}

/* Submenu Arrow - Using > symbol rotated */
.main-navigation.navigation-style-style-4 .nav-menu > li.menu-item-has-children > a:after {
    content: ">" !important;
    font-size: 0.8em !important;
    margin-left: 8px !important;
    transform: rotate(90deg) !important;
    display: inline-block !important;
    transition: transform 0.3s ease !important;
    font-weight: bold !important;
}

.main-navigation.navigation-style-style-4 .nav-menu > li.menu-item-has-children:hover > a:after {
    transform: rotate(270deg) !important;
}