/* --- 1. CORE LAYOUT & CONTAINER --- */
.main-header { background: #ffffff; border-bottom: 1px solid #e0e0e0; padding: 10px 0 8px 0; position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.navbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; width: 100%; height: 55px; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* --- 2. LOGO & NAV LINKS --- */
.nav-logo { justify-self: start; }
.nav-logo a { font: 900 24px sans-serif; text-decoration: none; color: #222; letter-spacing: -1px; }
.nav-logo span { color: #0056b3; }

.nav-links { justify-self: center; display: flex; list-style: none; margin: 0; padding: 0; gap: 20px; align-items: center; }
.nav-links li { position: relative; }
.nav-links a { text-decoration: none; color: #444; font: 700 12px sans-serif; letter-spacing: 0.5px; transition: color 0.3s ease; text-transform: uppercase; }
.nav-links a:hover { color: #0056b3; }

/* --- 3. CATEGORY DROPDOWN (Simple Dropdown) --- */
.simple-dropdown { position: relative; cursor: pointer; }
.dropdown-content { display: none; position: absolute; background: #fff; min-width: 200px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); top: 100%; left: 0; border-radius: 6px; border: 1px solid #eee; padding: 5px 0; list-style: none; z-index: 1001; }
.simple-dropdown:hover .dropdown-content { display: block; animation: fadeIn 0.2s ease; }
.dropdown-content li a { color: #333 !important; padding: 10px 15px !important; font-weight: 500 !important; text-transform: none !important; border-bottom: 1px solid #f9f9f9; display: block !important; }
.dropdown-content li:last-child a { border-bottom: none; }
.dropdown-content li a:hover { background: #f8fafc !important; color: #0056b3 !important; padding-left: 18px !important; }

/* --- 4. CENTERED SEARCH STRIP --- */
.search-form-centered { position: relative; width: 100%; max-width: 600px; display: flex; align-items: center; margin-top: 5px; }
.search-form-centered input { width: 100%; padding: 8px 100px 8px 20px; border: 1px solid #d1d5db; border-radius: 50px; font-size: 13px; outline: none; transition: all 0.2s; background: #fff; }
.search-form-centered input:focus { border-color: #0056b3; box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.1); }
.search-form-centered button { position: absolute; right: 4px; top: 4px; bottom: 4px; background: #0056b3; color: white; border: none; border-radius: 50px; padding: 0 20px; font: 800 10px sans-serif; cursor: pointer; letter-spacing: 0.5px; transition: background 0.2s; }
.search-form-centered button:hover { background: #004494; }

/* --- 5. SEARCH LIVE RESULTS DROPDOWN --- */
.search-dropdown { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 600px; max-width: 95vw; background: white; border-radius: 0 0 12px 12px; box-shadow: 0 15px 40px rgba(0,0,0,0.2); z-index: 999; border: 1px solid #ddd; border-top: none; overflow: hidden; }
.search-split-container { display: flex; flex-direction: row; }
.search-col { flex: 1; padding: 15px; }
.search-col-left { background: #f8fafc; border-right: 1px solid #eee; }
.search-heading { margin-bottom: 10px; font: bold 11px sans-serif; text-transform: uppercase; color: #64748b; letter-spacing: 0.5px; }
.search-col li a { display: flex; align-items: center; padding: 8px 10px; text-decoration: none; color: #333; font-size: 14px; border-radius: 6px; }
.search-col li a:hover { background: #e0f2fe; color: #0056b3; }

/* --- 6. UTILITIES & BUTTONS --- */
.nav-hero-link { justify-self: end; }
.hero-btn { color: #0056b3; text-decoration: none; font: 800 13px sans-serif; letter-spacing: 1px; text-transform: uppercase; padding: 8px 18px; border: 2px solid #0056b3; border-radius: 4px; transition: all 0.3s; }
.hero-btn:hover { background: #0056b3; color: #fff; box-shadow: 0 4px 8px rgba(0,86,179,0.2); transform: translateY(-1px); }
.tool-badge { font: bold 9px sans-serif; background: #e0f2fe; color: #0056b3; padding: 2px 5px; border-radius: 4px; text-transform: uppercase; margin-left: 5px; }

/* --- 7. ANIMATIONS & RESPONSIVE --- */
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

/* --- 1. THE FLOATING BROWSE ICON (Top Right) --- */
.nav-hero-link { position:absolute; right:20px; top:15px; z-index:1001; }

.browse-icon-btn { 
    display:flex; align-items:center; justify-content:center; 
    width:40px; height:40px; background:#fff; 
    border:2px solid #0056b3; border-radius:50%; /* Perfect Circle */
    text-decoration:none; transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
    box-shadow: 0 4px 6px rgba(0, 86, 179, 0.1); 
}

.browse-icon-btn .icon { font-size:18px; line-height:1; }

.browse-icon-btn:hover { 
    background:#0056b3; transform:rotate(15deg) scale(1.1); 
    box-shadow: 0 6px 12px rgba(0, 86, 179, 0.2); 
}

.browse-icon-btn:hover .icon { filter: brightness(0) invert(1); } /* Flips icon to white on hover */

/* --- MOBILE RESPONSIVENESS (BELOW 1099PX) --- */
@media (max-width: 1099px) {
    /* Stack Logo, Nav, and Search vertically */
    .navbar { display: flex; flex-direction: column; height: auto; gap: 15px; padding: 10px 0; }

    /* Center Logo */
    .nav-logo { justify-self: center; text-align: center; width: 100%; }
    .nav-logo a { font-size: 19px; }

    /* Show Nav Links in center (No Hamburger) */
    .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; width: 100%; }
    .nav-links a { font-size: 8px; padding: 3px; }

    /* Reposition Browse Button below Links */
    .nav-hero-link { justify-self: center; margin-top: 5px; }
    .hero-btn { font-size: 10px; padding: 6px 12px; }

    /* Center Search Bar below everything */
    .search-form-centered { margin: 7px auto 0 auto; max-width: 95%; }
    .search-dropdown { width: 100%; left: 0; transform: none; }
    .search-split-container { flex-direction: column; }
    .search-col-left { border-right: none; border-bottom: 1px solid #eee; }

    /* Adjust Dropdown positioning for centered links */
    .simple-dropdown .dropdown-content { left: 50%; transform: translateX(-50%); }
    
    /* Mega Menu (if used) stays full width */
    .mega-menu { position: static; width: 100%; transform: none; box-shadow: none; border-top: none; padding: 10px; }
    .mega-grid { grid-template-columns: 1fr; gap: 20px; }

        /* Keep the icon in the corner even on mobile */
        .nav-hero-link { right:15px; top:12px; }
        .browse-icon-btn { width:35px; height:35px; border-width:1.5px; }
        .browse-icon-btn .icon { font-size:16px; }
    
}