/* Custom CSS overrides for Complyn theme */

/* Fix logo display issues - allow full logo to be visible */
html[data-placement=horizontal] .nav-container .logo img,
html[data-placement=horizontal] .nav-container .logo .img,
html[data-placement=vertical] .nav-container .logo img,
html[data-placement=vertical] .nav-container .logo .img {
    width: auto !important;
    max-width: 150px !important;
    height: auto !important;
    min-height: 35px !important;
    max-height: 45px !important;
    object-fit: contain !important;
    object-position: left center !important;
}

/* Ensure logo container doesn't clip the logo */
html[data-placement=vertical] .nav-container .nav-content .logo a,
html[data-placement=horizontal] .nav-container.mobile-side-ready .nav-content .logo a,
html[data-placement=vertical] .nav-container.mobile-side-ready .nav-content .logo a {
    overflow: visible !important;
    width: auto !important;
    max-width: 150px !important;
}

/* Logo container adjustments */
.logo {
    overflow: visible !important;
    width: auto !important;
    max-width: 150px !important;
}

/* Ensure logo is properly sized on mobile */
@media (max-width: 767px) {

    html[data-placement=horizontal] .nav-container .logo img,
    html[data-placement=horizontal] .nav-container .logo .img,
    html[data-placement=vertical] .nav-container .logo img,
    html[data-placement=vertical] .nav-container .logo .img {
        max-width: 120px !important;
        max-height: 40px !important;
    }
}

/* For horizontal navigation, ensure proper spacing */
html[data-placement=horizontal] .nav-container .logo {
    margin-right: 20px !important;
}

/* Mobile menu submenu fixes */
@media (max-width: 767px) {

    /* Ensure mobile submenus are visible and properly styled */
    #menu .dropdown-menu.show,
    #menu .collapse.show,
    #menu ul.show {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        position: static !important;
        transform: none !important;
        box-shadow: none !important;
        border: none !important;
        background: transparent !important;
        padding-left: 20px !important;
    }

    /* Mobile submenu items styling */
    #menu .dropdown-menu.show li,
    #menu .collapse.show li,
    #menu ul.show li {
        display: block !important;
        width: 100% !important;
    }

    /* Mobile submenu links styling */
    #menu .dropdown-menu.show a,
    #menu .collapse.show a,
    #menu ul.show a {
        display: block !important;
        padding: 10px 15px !important;
        color: var(--light-text) !important;
        text-decoration: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    /* Style the mobile submenu text to be white */
    #menu .dropdown-menu.show .mobile-submenu-text,
    #menu .dropdown-menu.show a .label,
    #menu .dropdown-menu.show .dropdown-item {
        color: white !important;
    }

    /* Ensure submenu text is white on mobile regardless of theme state */
    .mobile-submenu-text {
        color: white !important;
    }

    /* Additional specificity for mobile states */
    html[data-mobile="true"] #menu .dropdown-menu.show .mobile-submenu-text,
    html[data-dimension="mobile"] #menu .dropdown-menu.show .mobile-submenu-text {
        color: white !important;
    }

    /* Ensure parent menu items with submenus are clickable */
    #menu .dropdown>a,
    #menu a[data-bs-toggle="collapse"],
    #menu .dropdown-toggle {
        position: relative !important;
    }

    /* Hide any existing dropdown icons/arrows from the theme */
    #menu .dropdown>a .dropdown-toggle::after,
    #menu .dropdown>a::before,
    #menu a[data-bs-toggle="dropdown"]::before {
        display: none !important;
    }

    /* Use the same dropdown arrow style as desktop */
    #menu .dropdown>a:after,
    #menu a[data-bs-toggle="dropdown"]:after,
    #menu .dropdown-toggle:after {
        content: "" !important;
        display: inline-block !important;
        width: 5px !important;
        height: 5px !important;
        border: initial !important;
        border-top: 1px solid var(--light-text) !important;
        border-right: 1px solid var(--light-text) !important;
        transform: rotate(45deg) !important;
        position: absolute !important;
        right: 15px !important;
        top: 50% !important;
        margin-top: -2.5px !important;
        transition: transform 0.3s ease !important;
        vertical-align: middle !important;
    }

    /* Rotate indicator when expanded - same as desktop */
    #menu .dropdown.show>a:after,
    #menu a[data-bs-toggle="dropdown"][aria-expanded="true"]:after,
    #menu .dropdown-toggle[aria-expanded="true"]:after {
        transform: rotate(135deg) !important;
    }

    /* Ensure mobile menu container allows overflow for submenus */
    .nav-container.mobile-side-in .menu-container {
        overflow: visible !important;
    }

    /* Fix mobile menu positioning */
    html[data-mobile="true"] #menu,
    html[data-dimension="mobile"] #menu {
        position: static !important;
        width: 100% !important;
    }
}