/* 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;
}

/* 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;
}

.nav-logo{
    color:var(--nav-text);
    font-weight:700;
    text-decoration:none;
    font-size:1.15rem;
    margin-right:24px;
    display:inline-block;
}

.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;
}
.mobile-menu-toggle i{ width:26px; height:26px; }

.nav-links.show{
    display:flex;
    flex-direction:column;
    position:absolute;
    top:100%; left:0; right:0;
    background:var(--nav-bg);
    padding:12px 21px;
    box-shadow:0 6px 18px rgba(0,0,0,0.2);
}

@media (max-width:800px){
    .nav-links{ display:none; }
    .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; }
}