/* ==========================================================================
   SECTION A: DESKTOP ONLY NAVIGATION (MIN-WIDTH: 769px)
   All styling and precise positioning for the horizontal & absolute drop menus live here.
   ========================================================================== */
@media screen and (min-width: 769px) {

    /* Outer layout alignment stripe container */
    #site-navigation.main-navigation {
        display: block;
        width: 100%;                    
        clear: both;                    
        padding: 0; 
        box-sizing: border-box;
    }

    /* Primary horizontal link track row */
    .main-navigation ul.menu,
    .main-navigation ul.nav-menu {
        display: flex;
        width: 100%;                    
        justify-content: flex-start;    
        gap: 28px;                      
        list-style: none;
        margin: 0;
    }

    .main-navigation ul li {
        position: relative; /* Structural anchor for absolute sub-menus */
		padding: 20px 0px;
    }

    .main-navigation ul.menu > li > a {
        display: block;
        padding: 0px 0;
        text-decoration: none;
    }

    /* -------------------------------------------
       DESKTOP DROP-DOWN (LEVEL 2) POSITIONING
       ------------------------------------------- */
    .main-navigation ul ul.sub-menu {
        display: none;                  
        position: absolute;
        top: 100%;                      /* Drops down right below the top-level parent link */
        left: 0;                        /* Aligns flush with left edge of the parent link */
        min-width: 200px;
        margin: 0;
        list-style: none;
        z-index: 99999;
        overflow: visible !important;   
    }

    /* Display level 2 on hover */
    .main-navigation ul li:hover > ul.sub-menu,
    .main-navigation ul li.focus > ul.sub-menu,
    .main-navigation ul li:focus-within > ul.sub-menu {
        display: flex;                  
        flex-direction: column;         
        gap: 0;
    }

    .main-navigation ul ul.sub-menu li {
        position: relative !important;  
        width: 100%;
    }

    .main-navigation ul ul.sub-menu a {
        display: block;
        padding: 10px 20px;
        text-decoration: none;
        white-space: nowrap;            
    }

    /* -------------------------------------------
       DESKTOP SIDE-FLYOUT (LEVEL 3) POSITIONING
       ------------------------------------------- */
    
    /* Keep Level 3 completely hidden until its Level 2 parent is hovered */
    .main-navigation ul ul.sub-menu ul.sub-menu {
        display: none !important;      
    }

    /* Display level 3 on hover */
    .main-navigation ul ul.sub-menu li:hover > ul.sub-menu,
    .main-navigation ul ul.sub-menu li.focus > ul.sub-menu,
    .main-navigation ul ul.sub-menu li:focus-within > ul.sub-menu {
        display: flex !important;
        flex-direction: column;
    }

    .main-navigation ul ul ul.sub-menu {
        position: absolute !important;
        top: -8px;                      /* Aligns vertically with the top of the current dropdown item */
        left: 100% !important;          /* Flies out completely to the right side of the dropdown box */
    }

} /* END DESKTOP MEDIA QUERY */


/* ==========================================================================
   SECTION B: MOBILE ONLY NAVIGATION (MAX-WIDTH: 768px)
   All styling, sticky behavior, hamburger physics, and flat exposed drawers live here.
   ========================================================================== */
@media screen and (max-width: 768px) {
    
    /* Pinned header bar holding the layout items inline */
    .site-header {
        position: -webkit-sticky;       
        position: sticky;
        top: 0 !important;              
        z-index: 999999;                
        padding: 10px 20px !important;
        
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        
        background-color: #ffffff;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
        box-sizing: border-box;
        width: 100% !important;
    }

    /* Inline mobile brand wrap adjustments */
    .site-branding {
        padding: 0 !important; 
        margin: 0 !important;
        height: auto !important;
        max-width: 70%; 
        flex: 0 1 auto;
    }
    
    .site-title, .site-description {
        margin: 0;
        line-height: 1.2;
    }

    /* Isolated structural block container for the mobile navigation wrapper track */
    #site-navigation.main-navigation {
        display: block !important; 
        width: auto !important; 
        clear: none !important; 
        background-color: transparent !important;
        flex: 0 0 auto;
    }

    #site-navigation.main-navigation .container {
        display: flex !important;
        justify-content: flex-end !important; 
        align-items: center !important;
        padding: 0 !important;
        margin: 0 !important;
        width: auto !important;
    }

    /* Hamburger menu toggle button layout configurations */
    .menu-toggle {
        display: block !important;     
        position: relative !important;
        background: transparent !important;
        border: none !important;
        width: 28px !important;
        height: 22px !important;
        cursor: pointer;
        padding: 0 !important;
        text-indent: -9999px;          
        overflow: hidden;
        z-index: 1000000;
        margin: 0 !important;
    }

    /* Geometric Hamburger Icon Lines */
    .menu-toggle::before,
    .menu-toggle::after,
    .menu-toggle span {
        content: "";
        position: absolute;
        left: 0;
        width: 100%;
        height: 3px;
        background-color: #333333; 
        border-radius: 3px;
        transition: all 0.3s ease-in-out;
    }

    .menu-toggle::before { top: 0; }        
    .menu-toggle span { top: 9px; }         
    .menu-toggle::after { bottom: 0; }      

    /* Cross X menu open transformation */
    .main-navigation.toggled .menu-toggle::before { transform: translateY(9px) rotate(45deg); }
    .main-navigation.toggled .menu-toggle span { opacity: 0; transform: translateX(-20px); }
    .main-navigation.toggled .menu-toggle::after { transform: translateY(-10px) rotate(-45deg); }

    /* -------------------------------------------
       MOBILE SLIDING DRAWER POSITIONING
       ------------------------------------------- */
    .main-navigation ul.menu,
    .main-navigation ul.nav-menu {
        display: flex !important;       
        flex-direction: column;
        position: fixed !important;     
        
        /* 
           FIXED POSITIONING: Set to a precise pixel value matching your header height.
           This tells the menu exactly where to attach on the screen viewport.
        */
        top: 175px !important;           
        left: 0 !important;             
        width: 100vw !important;        /* Fills the device screen edge-to-edge full width */
        right: auto !important;
        
        padding: 0 30px;               
        gap: 0;
        box-sizing: border-box;         
        
        /* Animation Timing System */
        max-height: 0;                  
        opacity: 0;                     
        visibility: hidden;             
        overflow: hidden;               
        transition: max-height 0.4s cubic-bezier(0.25, 1, 0.5, 1), 
                    opacity 0.25s ease-in-out, 
                    padding 0.4s ease;
    }

    /* Trigger settings when menu is toggled open */
    .main-navigation.toggled ul.menu,
    .main-navigation.toggled ul.nav-menu {
        max-height: calc(100vh - 60px) !important; /* Subtract header height from full viewport height */
        opacity: 1;                     
        visibility: visible;            
        padding: 15px 30px;             
        overflow-y: auto;               
    }

    .main-navigation ul.menu > li > a {
        padding: 12px 0 6px 0;
        font-size: 16px;
    }

    /* -------------------------------------------
       MOBILE ACCORDION SUB-MENUS
       ------------------------------------------- */
    
    /* Force 2nd & 3rd level sublinks open by default entirely inside the mobile drawer track layout */
    .main-navigation ul ul.sub-menu,
    .main-navigation ul ul.sub-menu ul.sub-menu,
    .main-navigation.toggled ul ul.sub-menu,
    .main-navigation.toggled ul ul.sub-menu ul.sub-menu {
        display: flex !important;       
        flex-direction: column !important;
        position: static !important;    /* Static breaks absolute behavior so it flows down naturally */
        visibility: visible !important;
        opacity: 1 !important;
        max-height: none !important;
        padding: 4px 0 4px 15px !important; /* Left indent visually maps hierarchy tree */
        min-width: 100% !important;
        overflow: visible !important;
    }

    .main-navigation ul ul.sub-menu a {
        padding: 8px 0 !important;
        font-size: 15px !important;
    }
} /* END MOBILE MEDIA QUERY */