/* mobile-styles.css - Applies for screens <= 800px (The stacking breakpoint) */

/* === CORE LAYOUT RESET: Header Alignment (Below 800px) === */

@media screen and (max-width: 800px) {

        *{

            margin:0; 
            padding:0;
            box-sizing: border-box;
        }

        .page-header {
            /* Critical: Ensures it manages space and pushes content down */
            display: flex; 
            justify-content: space-between; 
            flex-wrap: wrap; /* Allows navigation links to wrap below icon/logo */
            padding: 1rem 1rem;
            position: static; /* Prevents overlap with main content */
            width: 100%;
        }

        .logo-area {
            /* Logo and Title Left */
            display: flex;
            align-items: center;
            order: 1; 
            width: auto;
        }

        .logo-link img {
                width:60%;
                height:60%;           
        }

        .page-header .page-title {
            font-size: 0.9rem; /* Reduced size to prevent clipping */
            white-space: nowrap;
        }

        .main-nav-module {
            /* Navigation Icon Right */
            order: 2; 
            width: auto;
        }

        /* Show Hamburger Icon (Hidden in wide view) */
        .nav-toggle-label {
            display: block; 
            cursor: pointer;
            /* FIX: Added padding/height to ensure the icon has vertical space to render completely */
            padding: 5px; 
            min-height: 25px; 
        }

        /* Hamburger Icon Structure */
        .nav-icon, .nav-icon::before, .nav-icon::after {
            display: block;
            background: var(--primary-color);
            height: 3px;
            width: 25px;
            position: relative;
            transition: transform 0.3s ease-in-out, top 0.3s ease-in-out;
        }

        .nav-icon::before { top: -8px; content: ''; }
        .nav-icon::after { top: 5px; content: ''; } /* Adjusted top to compensate for icon height */

        /* Hamburger Animation */
        .nav-toggle-input { display: none; } 
        .nav-toggle-input:checked + .nav-toggle-label .nav-icon { background: transparent; }
        .nav-toggle-input:checked + .nav-toggle-label .nav-icon::before { top: 0; transform: rotate(45deg); }
        .nav-toggle-input:checked + .nav-toggle-label .nav-icon::after { top: 0; transform: rotate(-45deg); }


        /* Navigation Links (When toggled on) */
        .nav-links {
            display: none; 
            flex-direction: column;
            text-align: center;
            width: 100%; /* Links take full width below header items */
            order: 3; /* Forces links to a new line */
            padding-top: 10px;
            border-top: 1px solid var(--secondary-color);
            padding-left: 20px; 
            padding-right: 20px;
            box-sizing: border-box; 
        }

        .nav-toggle-input:checked ~ .nav-links {
            display: flex;
        }

        /* Hide the dropdown hover content */
        .dropdown-content {
                display: none !important;
                position: static;
                box-shadow: none;
                border-top: 1px solid #eee;
            }    

        /* Force dropdown content to show when the parent menu is expanded */
        .nav-toggle-input:checked ~ .nav-links .dropdown-content {
                display: block !important;
                position: static; /* Force it back into the normal flow */
                width: 100%;
            }

        /* Style the submenu links for clarity */
        .dropdown-content a {
            font-size: 0.9em;
            padding: 8px 10px;
            color: #666; /* Slightly lighter color to show hierarchy */
        }
    
}
       
  
 
@media screen and (min-width: 200px) and (max-width: 415px) {    

        .logo-link img {
            width:40%! important;
            height:40%! important; 
        }
}
@media screen and (min-width: 416px) and (max-width: 900px) {
  
        .logo-link img {
            width:60%;
            height:60%; 
        }
}
@media screen and (min-width: 600px) and (max-width: 1440px) {
        
        .logo-link img {
            width:60%! important;
            height:60%; 
            
        }
}