/**
 * File: header-visibility-helper.css
 * Purpose: Controls which top navigation bar is displayed based on viewport width.
 * Usage: Always included — toggles `.desktop-top-nav` and `.mobile-top-nav` visibility
 * Dependencies: Used alongside `header-top-nav-desktop.css` and `header-top-nav-mobile.css`
 *
 * Notes:
 * - Sets `display: flex` for the active navigation variant, and `display: none` for the inactive one
 * - Helps keep layout logic separate from visibility logic
 * - Viewport breakpoint set at 821px for switching between desktop and mobile/tablet
 */


/* ========================== */
/* ===== Header Top Nav ===== */
/* ========================== */

/* Desktop Styles */
@media all and (min-width: 821px) {
    .mobile-top-nav{
        display: none;
    }  
    .desktop-top-nav{
        display: flex;
    }        
}

/* Mobile Styles and Tablet Styles */
@media all and (max-width: 820px) {
    .mobile-top-nav{
        display: flex;
    }  
    .desktop-top-nav{
        display: none;
    }        
}



/* ========================== */
/* ===== Header Main Nav ==== */
/* ========================== */

/* Desktop Styles */
@media all and (min-width: 821px) {  
    .mobile-main-nav > .primary-menu-container > ul, 
    .mobile-main-nav {
        display: none;
    }

    .main-nav > .primary-menu-container > ul, 
    .main-nav {
        display: flex;
    }

}

/* Mobile Styles and Tablet Styles */
@media all and (max-width: 820px) {  
    .mobile-main-nav > .primary-menu-container > ul, 
    .mobile-main-nav {
        display: flex;
    }

    .main-nav > .primary-menu-container > ul, 
    .main-nav {
        display: none;
    }

}