/**
 * =============================================================================
 *  Project:        EnterraHost 
 *  Filename:       header.css
 *  Description:    CSS for the header element
 *  
 *  Author:         Slade Labuschagne
 *  Created:        April 19 2023
 *  Updated:        April 19 2023
 *  
 *  Version:        1.0
 *  License:        
 *  Website:        enterrahost.com
 *  Copyright :     (c) 2025 EnterraHost. All rights reserved.
 * 
 * =============================================================================
 * || 
 * ||               INDEX :
 * ||
 * ||   Menu
 * || 
 * ============================================================================= */
 
/*
============================================================
    Menu
============================================================
*/

.menu-section{
    position: Fixed; 
    top: -100px; 
    width: 40%;
    min-width: 600px;
    left: 50%;
    transform: translateX(-50%);
    display: flex; 
    justify-content: space-between;
    z-index:999;
    padding: 0.5rem 0.5rem 0.25rem 0.5rem;
    border-radius: 2.5rem;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 11px 09px 18px rgba(0, 0, 0, 0.2);
    background-color: rgb(255, 255, 255);
    overflow: hidden;
    opacity: 90%;
}

.nav-button{
    margin: 0rem;
    padding-bottom: 0.25rem;
}

.ilb-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.nav-left{
    display: flex;
    justify-content: end;
    gap: 1.5rem;
    width: 40%;
}
.nav-right {
    display: flex;
    justify-content: start;
    gap: 1.5rem;
    width: 40%;
}

.nav-center {
    display: flex;
    justify-content: center;
    flex: 1;
    pointer-events: none; /* keeps spacing perfect */
}

.nav-center a {
    pointer-events: auto; /* clickable again */
}

#nav-logo {
    width: 2.5rem;
}

@media (max-width: 600px) {
    .menu-section{
        width: 90% !important;
        min-width: 0 !important;
        font-size: 0.9rem;
        padding: 0.25rem 0.5rem 0rem 0.5rem;
    }
}

@media (max-width: 1350px) {
    .menu-section{
        padding: 0.25rem 0.5rem 0rem 0.5rem;
    }
}