/**
 * Header Responsiveness Fixes for Extra Large Screens
 * ====================================================
 * This file fixes CSS breaking issues on screens larger than 1920px (2K, 4K, ultrawide monitors)
 * Apply these fixes to theme.css or load this as a separate stylesheet after theme.css
 */

/* ========================================
   CRITICAL FIXES - Load First
   ======================================== */

/* Fix 1: Hide ALL submenu variations by default on extra large screens */
@media all and (min-width: 1900px) {

    /* Target ALL submenu classes used in the template */
    .sk__navbar .sk__submenu-ul,
    .sk__navbar .sk__menu-sub-ul,
    .sk__navbar .sk__sub-submenu-ul,
    ul.sk__sub-submenu-ul,
    .nav-item .sk__sub-submenu-ul,
    .sk__navbar .navbar-nav>li>.sk__submenu-ul,
    .sk__navbar .navbar-nav>li>ul>.nav-subwrap>li>ul {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
    }

    /* Show submenus only on hover */
    .sk__navbar .navbar-nav>li:hover>.sk__submenu-ul,
    .sk__navbar .sk__menu-li:hover>.sk__submenu-ul,
    .sk__navbar .sk__menu-li:hover>.sk__menu-sub-ul,
    .sk__navbar .sk__menu-li:hover>.sk__sub-submenu-ul,
    .nav-item:hover>.sk__sub-submenu-ul {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* Show sub-submenus on hover */
    .sk__navbar .navbar-nav>li>ul>.nav-subwrap>li.menu-item-has-children:hover>ul {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        max-height: none !important;
    }

    /* Prevent expanded children from showing by default */
    .sk__navbar .navbar-nav>li>ul>.nav-subwrap>li.sk__expand-children li,
    .sk__navbar .navbar-nav>li>ul>.nav-subwrap>li.sk__expand-children a {
        max-height: 0 !important;
        opacity: 0 !important;
        overflow: hidden !important;
    }

    /* Show expanded children only when parent is hovered */
    .sk__navbar .navbar-nav>li:hover>ul>.nav-subwrap>li.sk__expand-children li,
    .sk__navbar .navbar-nav>li:hover>ul>.nav-subwrap>li.sk__expand-children a {
        max-height: 38px !important;
        opacity: 1 !important;
    }
}

/* Fix 2: Improve logo visibility - Remove fade effect and increase size */
@media all and (min-width: 1900px) {

    /* Make logo fully visible and prominent */
    .navbar-brand,
    .navbar-brand img,
    .sk__navbar .navbar-brand,
    .sk__navbar .navbar-brand img {
        opacity: 1 !important;
        filter: brightness(1.2) !important;
        -webkit-filter: brightness(1.2) !important;
        visibility: visible !important;
        display: block !important;
    }

    /* Increase logo size for better visibility */
    .navbar-brand img {
        width: 80px !important;
        height: 80px !important;
        max-width: none !important;
        max-height: none !important;
    }

    /* Ensure smooth transitions but maintain full opacity */
    .navbar-brand img {
        transition: height 0.4s ease 0s, width 0.4s ease 0s, opacity 0.3s ease 0s;
    }

    /* Keep logo bright on scroll */
    body.sk__scrolling-started .sk__navbar .navbar-brand img {
        opacity: 1 !important;
        width: 60px !important;
        height: 60px !important;
    }
}

/* Fix 3: Better submenu transitions */
@media all and (min-width: 1900px) {

    .sk__navbar .navbar-nav>li>.sk__submenu-ul {
        transition: opacity 0.3s ease 0s, visibility 0.3s ease 0s, transform 0.3s ease 0s;
        transform: scaleY(0);
        transform-origin: top center;
    }

    .sk__navbar .navbar-nav>li:hover>.sk__submenu-ul {
        transform: scaleY(1);
    }

    /* Ensure dropdown wrapper animates properly */
    .sk__navbar .navbar-nav>li:hover .sk__submenu-ul .nav-subwrap {
        transform: translateY(0);
        transition: transform 0.4s ease 0s;
    }
}

/* Fix 4: Hide mobile elements and ensure desktop menu layout */
@media all and (min-width: 1900px) {

    /* Hide mobile toggle */
    .sk__menu-toggle,
    .navbar-toggler {
        display: none !important;
    }

    /* Hide off-canvas menu */
    .hc-offcanvas-nav {
        display: none !important;
    }

    /* Ensure proper navbar layout */
    .sk__navbar {
        display: flex !important;
        align-items: center !important;
    }
}

/* ========================================
   Screen-Specific Responsive Fixes
   ======================================== */

/* Fix for screens 1921px - 2560px (2K displays) */
@media all and (min-width: 1921px) and (max-width: 2560px) {

    /* Ensure proper navbar container width */
    .sk__navbar {
        max-width: 100%;
        width: 100%;
    }

    /* Adjust nav link spacing for better distribution */
    .sk__navbar.navbar-expand-lg .navbar-nav>li>a.nav-link {
        padding: 36px 24px 34px 28px;
        font-size: 15px;
    }

    body.sk__scrolling-started .sk__navbar.navbar-expand-lg .navbar-nav>li>a.nav-link {
        padding: 15px 24px 15px 28px;
    }

    /* Menu items with children need extra padding */
    .sk__navbar.navbar-expand-lg .navbar-nav>li.menu-item-has-children>a.nav-link {
        padding: 36px 32px 34px 28px;
    }

    body.sk__scrolling-started .sk__navbar.navbar-expand-lg .navbar-nav>li.menu-item-has-children>a.nav-link {
        padding: 15px 32px 15px 28px;
    }

    /* Logo sizing */
    .navbar-brand img {
        height: 110px !important;
        width: 110px !important;
        max-height: 110px !important;
    }

    body.sk__scrolling-started .sk__navbar .navbar-brand img {
        height: 65px !important;
        width: 65px !important;
    }

    /* Adjust navbar right margin for better spacing */
    .sk__navbar.navbar-dark .navbar-nav {
        margin-right: 45px;
    }
}

/* Fix for screens 2561px - 3840px (Large 2K to 4K displays) */
@media all and (min-width: 2561px) and (max-width: 3840px) {

    /* Increase font size for better readability */
    .sk__navbar a.nav-link {
        font-size: 16px;
    }

    /* Generous spacing for nav items */
    .sk__navbar.navbar-expand-lg .navbar-nav>li>a.nav-link {
        padding: 36px 30px 34px 32px;
        font-size: 16px;
    }

    body.sk__scrolling-started .sk__navbar.navbar-expand-lg .navbar-nav>li>a.nav-link {
        padding: 15px 30px 15px 32px;
    }

    /* Menu items with children */
    .sk__navbar.navbar-expand-lg .navbar-nav>li.menu-item-has-children>a.nav-link {
        padding: 36px 38px 34px 32px;
    }

    body.sk__scrolling-started .sk__navbar.navbar-expand-lg .navbar-nav>li.menu-item-has-children>a.nav-link {
        padding: 15px 38px 15px 32px;
    }

    /* Larger logo for 4K screens */
    .navbar-brand img {
        height: 130px !important;
        width: 130px !important;
        max-height: 130px !important;
    }

    body.sk__scrolling-started .sk__navbar .navbar-brand img {
        height: 75px !important;
        width: 75px !important;
    }

    /* Dropdown indicator position adjustment */
    .navbar-nav>li.menu-item-has-children:before {
        padding-top: 38px;
        font-size: 15px;
        transform: translateX(-22px);
    }

    body.sk__scrolling-started .navbar-nav>li.menu-item-has-children:before {
        padding-top: 16px;
    }

    /* Navbar right margin */
    .sk__navbar.navbar-dark .navbar-nav {
        margin-right: 55px;
    }
}

/* Fix for screens 3841px and above (Ultra 4K and 8K displays) */
@media all and (min-width: 3841px) {

    /* Scale up all navbar elements proportionally */
    .sk__navbar a.nav-link {
        font-size: 18px;
    }

    /* Ultra-wide spacing */
    .sk__navbar.navbar-expand-lg .navbar-nav>li>a.nav-link {
        padding: 40px 36px 38px 38px;
        font-size: 18px;
    }

    body.sk__scrolling-started .sk__navbar.navbar-expand-lg .navbar-nav>li>a.nav-link {
        padding: 18px 36px 18px 38px;
    }

    /* Menu items with children */
    .sk__navbar.navbar-expand-lg .navbar-nav>li.menu-item-has-children>a.nav-link {
        padding: 40px 44px 38px 38px;
    }

    body.sk__scrolling-started .sk__navbar.navbar-expand-lg .navbar-nav>li.menu-item-has-children>a.nav-link {
        padding: 18px 44px 18px 38px;
    }

    /* Extra large logo for 8K */
    .navbar-brand img {
        height: 150px !important;
        width: 150px !important;
        max-height: 150px !important;
    }

    body.sk__scrolling-started .sk__navbar .navbar-brand img {
        height: 85px !important;
        width: 85px !important;
    }

    /* Dropdown indicator */
    .navbar-nav>li.menu-item-has-children:before {
        padding-top: 42px;
        font-size: 16px;
        transform: translateX(-24px);
    }

    body.sk__scrolling-started .navbar-nav>li.menu-item-has-children:before {
        padding-top: 18px;
    }

    /* Navbar right margin */
    .sk__navbar.navbar-dark .navbar-nav {
        margin-right: 65px;
    }

    /* Submenu font size */
    .sk__navbar.navbar-expand-lg .navbar-nav>li>ul a.nav-link {
        font-size: 16px;
        padding: 10px 24px;
    }
}

/* Additional fixes for all extra large screens */
@media all and (min-width: 1921px) {

    /* Prevent navbar from breaking with flex properties */
    .sk__navbar .navbar-nav {
        flex-wrap: nowrap;
        align-items: center;
    }

    /* Ensure navbar expands properly */
    nav.navbar.sk__navbar {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
    }

    /* Fix navbar brand flex */
    .sk__navbar .navbar-brand {
        flex-shrink: 0;
    }

    /* Submenu dropdown positioning */
    .sk__navbar .navbar-nav>li>.sk__submenu-ul {
        min-width: 250px;
    }

    /* Prevent text wrapping in menu items */
    .sk__navbar.navbar-expand-lg .navbar-nav .nav-link {
        white-space: nowrap;
    }

    /* Hover background adjustment */
    .navbar-nav>li>a.nav-link:before {
        transition: all 0.3s ease 0s;
    }
}

/* Fix container max-width for ultra-wide screens */
@media all and (min-width: 2561px) and (max-width: 3200px) {

    .sk__supercontainer.container,
    .sk__supercontainer.container-lg,
    .sk__supercontainer.container-md,
    .sk__supercontainer.container-sm,
    .sk__supercontainer.container-xl {
        max-width: 2200px;
    }
}

@media all and (min-width: 3201px) {

    .sk__supercontainer.container,
    .sk__supercontainer.container-lg,
    .sk__supercontainer.container-md,
    .sk__supercontainer.container-sm,
    .sk__supercontainer.container-xl {
        max-width: 2800px;
    }
}