/* Polished, consistent navigation styles (simple & conservative) */
:root{
    --nav-bg:#26323f; /* dark blue-gray */
    --nav-text:#ffffff;
    --nav-accent:#f0a500;
}

/* Make the navbar use the full viewport width even when the "container" class
   is present in the injected markup. This lets the nav occupy the side gutters
   while preserving inner spacing via padding. It only overrides .container
   when used on .navbar so other containers keep their max-width. */
.navbar.container{
    max-width:100%;
    width:100%;
    margin:0; /* remove auto-centering for this element */
    padding-left:2rem; /* keep some inner gutter */
    padding-right:2rem;
    background: linear-gradient(90deg, rgba(38,50,63,0.96), rgba(18,27,38,0.86));
    box-shadow: 0 8px 32px rgba(2,6,23,0.35);
}

/* Fixed header that stays consistent across pages */
.navbar{
    background:var(--nav-bg);
    color:var(--nav-text);
    display:flex;
    align-items:center;
    justify-content:flex-start; /* logo left, links on the right */
    position:fixed;
    top:0; left:0; right:0;
    z-index:1000;
    box-sizing:border-box;
    height:76px;
    padding:12px 26px;
}

/* Centered nav for supplier pages to improve visual alignment */
.supplier-page .navbar {
    justify-content: center;
}
.supplier-page .nav-links {
    justify-content: center;
}

.nav-logo{
    color:var(--nav-text);
    font-weight:700;
    text-decoration:none;
    font-size:1.15rem;
    margin-right:24px;
    display:inline-block;
    font-weight:800;
    letter-spacing:0.6px;
    padding:6px 10px;
    border-radius:8px;
    background: rgba(255,255,255,0.02);
}

.nav-links{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex:1 1 auto;
    flex-wrap:wrap; /* allow links to wrap to the next line instead of overflowing */
    align-items:center;
    justify-content:flex-end; /* keep links right-aligned */
    gap:14px;
    /* white-space removed so links can wrap when container is narrow */
}

.nav-link{
    color:var(--nav-text);
    text-decoration:none;
    font-size:0.95rem;
    font-weight:600;
    padding:9px 14px;
    border-radius:7px;
    transition:background-color .18s ease, color .18s ease;
}

.nav-link:hover{ background: rgba(255,255,255,0.04); }
.nav-link.active{ color:var(--nav-accent); }

/* Mobile: collapse into a toggleable column */
.mobile-menu-toggle{
    display:none;
    background:none;
    border:0;
    color:var(--nav-text);
    cursor:pointer;
    padding:8px 12px;
    line-height:1;
}
.mobile-menu-toggle i{
    width:28px;
    height:28px;
    stroke-width:2.5;
}

@media (max-width:800px){
    .nav-links{
        position:fixed;
        top:76px;
        left:0;
        right:0;
        background:var(--nav-bg);
        padding:12px 21px;
        /* Stack items from the top on mobile */
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction:column;
        gap:6px;
        transform:translateY(-100%);
        opacity:0;
        visibility:hidden;
        transition:all 0.3s ease;
        border-top:1px solid rgba(255,255,255,0.1);
        max-height:calc(100vh - 76px);
        overflow-y:auto;
        display:none;
    }
    
    .nav-links li{
        display:block;
        width:100%;
    }
    
    .nav-links.show{
        display:flex;
        transform:translateY(0);
        opacity:1;
        visibility:visible;
        z-index:999;
    }

    /* Ensure link text is visible on top of the dark mobile menu */
    .nav-links.show .nav-link {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        text-align: left;
        font-size: 1rem;
    }

    /* Stronger override to counteract other global text-clip/fill rules */
    .header .navbar .nav-links.show .nav-link,
    .header .navbar .nav-links.show .nav-link * {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        -webkit-background-clip: unset !important;
        background-clip: unset !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    .mobile-menu-toggle{ display:inline-block; margin-left:auto; }
    .nav-link{ padding:12px 9px; }
    .navbar{ height:auto; padding:12px 19px; }
    body{ padding-top:85px; }
}

/* Desktop body top padding to avoid content under fixed header */
@media (min-width:801px){
    body{ padding-top:78px; }
}