/* Shared Navigation Styles (extracted from former inline block) */
.desktop-nav { display:flex !important; }
.nav-dropdown { position:relative; }
.nav-dropdown-btn { display:inline-flex;align-items:center;padding:0.25rem 0.25rem;font-size:0.875rem;font-weight:500;color:#6b7280;background:none;border:none;cursor:pointer;border-bottom:2px solid transparent;transition:all .2s ease; }
.nav-dropdown-btn:hover { color:#374151;border-bottom-color:#d1d5db; }
.nav-dropdown-content { position:absolute;top:100%;left:0;z-index:50;display:none;min-width:12rem;margin-top:.5rem;background:#fff;border-radius:.375rem;box-shadow:0 10px 15px -3px rgba(0,0,0,.1);border:1px solid rgba(0,0,0,.05);padding:.25rem 0;transition:opacity .3s ease,visibility .3s ease;opacity:0;visibility:hidden; }
.nav-dropdown:hover .nav-dropdown-content, .nav-dropdown-content:hover { display:block;opacity:1;visibility:visible; }
#global-search-input:focus { outline:none;box-shadow:0 0 0 2px #3b82f6;border-color:transparent;background-color:#fff; }
.nav-dropdown-content a { display:block;padding:.5rem 1rem;font-size:.875rem;color:#374151;text-decoration:none;transition:background-color .2s ease; }
.nav-dropdown-content a:hover { background-color:#f9fafb; }
.nav-link { display:inline-flex;align-items:center;padding:0.25rem 0.25rem;font-size:.875rem;font-weight:500;color:#6b7280;text-decoration:none;border-bottom:2px solid transparent;transition:all .2s ease; }
.nav-link:hover { color:#374151;border-bottom-color:#d1d5db; }
.mobile-menu-btn { display:none;align-items:center;justify-content:center;padding:.5rem;border-radius:.375rem;color:#6b7280;background:none;border:none;cursor:pointer;transition:all .2s ease; }
.mobile-menu-btn:hover { color:#374151;background-color:#f9fafb; }
.mobile-menu { border-top:1px solid #e5e7eb;background:#fff; }
.mobile-nav-section { margin-bottom:1.5rem; }
.mobile-nav-section h3 { font-size:.75rem;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem; }
.mobile-nav-section a { display:block;padding:.75rem .75rem;margin-bottom:.25rem;border-radius:.375rem;font-size:1rem;font-weight:500;color:#374151;text-decoration:none;transition:background-color .2s ease; }
.mobile-nav-section a:hover { background-color:#f3f4f6; }

/* Device-based navigation display - ONLY use server-side detection */
/* Mobile/Tablet devices - hide desktop nav, show mobile menu button */
.is-mobile .desktop-nav, .is-tablet .desktop-nav { display:none !important; }
.is-mobile .mobile-menu-btn, .is-tablet .mobile-menu-btn { display:flex !important; }
.is-mobile .mobile-menu.hidden, .is-tablet .mobile-menu.hidden { display:none; }

/* Desktop devices - always show desktop nav, hide mobile elements */
.is-desktop .mobile-menu { display:none !important; }
.is-desktop .mobile-menu-btn { display:none !important; }
.is-desktop .desktop-nav { display:flex !important; }

/* FALLBACK for DevTools mobile emulation: Allow narrow viewports to show mobile nav */
/* This only applies when viewport is very narrow AND on desktop (for testing) */
@media (max-width: 640px) {
    .is-desktop .desktop-nav { 
        display:none !important; 
    }
    .is-desktop .mobile-menu-btn { 
        display:flex !important; 
    }
    /* Ensure the layout is mobile-friendly on narrow screens */
    .is-desktop nav > div {
        padding: 0 !important;
        width: 100% !important;
    }
    .is-desktop nav > div > div {
        height: 3.5rem !important;
        padding: 0 0.5rem !important;
    }
}

/* Mobile navigation layout - ensure logo is visible */
@media (max-width: 768px) {
    /* Hide desktop navigation elements */
    .desktop-nav,
    nav .desktop-nav,
    .nav-dropdown,
    .nav-link {
        display: none !important;
    }
    
    /* Reset navbar layout */
    nav {
        height: auto !important;
        padding: 0.75rem 1rem !important;
    }
    
    nav > div {
        padding: 0 !important;
    }
    
    nav > div > div {
        position: relative !important;
        display: grid !important;
        grid-template-columns: 48px 1fr 48px !important;
        gap: 1rem !important;
        align-items: center !important;
    }
    
    /* Logo on left */
    nav > div > div > div:first-child {
        justify-self: start !important;
        min-width: 48px !important;
    }
    
    /* Ensure logo link and span have size */
    nav > div > div > div:first-child a {
        display: flex !important;
        align-items: center !important;
        min-width: 48px !important;
        min-height: 40px !important;
    }
    
    nav > div > div > div:first-child a #nav-logo {
        display: flex !important;
        align-items: center !important;
        min-width: 48px !important;
        min-height: 40px !important;
        line-height: 1 !important;
    }
    
    /* Ensure nested spans in logo are visible */
    nav > div > div > div:first-child a #nav-logo span {
        display: inline !important;
    }
    
    /* Search box centered */
    nav > div > div > div:nth-child(2) {
        justify-self: center !important;
        max-width: 280px !important;
    }
}

/* Hide full logo text on mobile, show abbreviated "mA.I" version */
@media (max-width: 768px) {
    .logo-full-text {
        display: none !important;
    }
}