/* =========================
   Navbar theme variables
   ========================= */
:root{
    --nav-bg: #fbfbfb;
    --nav-fg: #111;
    --nav-muted: rgba(17,17,17,0.62);
    --nav-border: rgba(17,17,17,0.10);
  
    /* gray base + indigo hint + tiny lavender */
    --nav-accent: #2f3a8c;                 /* indigo blue */
    --nav-accent-2: #a78bfa;               /* soft lavender */
    --nav-accent-soft: rgba(47,58,140,0.10);

    --purple-main: #7c6fd6;    /* muted lavender */
  }
  
  .dark-mode{
    --nav-bg: #161a22;
    --nav-fg: rgba(255,255,255,0.92);
    --nav-muted: rgba(255,255,255,0.72);
    --nav-border: rgba(255,255,255,0.14);
  
    --nav-accent: #9aa7ff;                 /* softer indigo in dark */
    --nav-accent-2: #c4b5fd;               /* lavender */
    --nav-accent-soft: rgba(154,167,255,0.18);

    --purple-main: #a79bff;
  }
  
  /* =========================
     Fixed outer bar
     ========================= */
.navbar-outer{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
  
    /* subtle tint to unify with paper palette */
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--nav-bg) 97%, var(--nav-accent-2) 3%),
      var(--nav-bg)
    );
  
    z-index: 1000;
    border-bottom: 1px solid var(--nav-border);
}
  
/* Center container */
.navbar-inner{
    max-width: 1180px;
    margin: 0 auto;
    padding: 12px 20px;
}
  
/* Main row */
.navbar{
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    gap: 18px;
}
  
/* =========================
Brand
========================= */
.navbar-brand{
display: inline-flex !important;
flex-direction: row !important;
align-items: center;
gap: 9px;
text-decoration: none;
color: var(--nav-fg);
font-weight: 650;
font-size: 28px;
line-height: 1;
white-space: nowrap;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}

.brand-icon{
width: 22px;
height: 22px;
display: block;
flex-shrink: 0;
stroke: currentColor;
stroke-width: 1.8;
fill: none;
opacity: 0.92;
}

.brand-name{
display: inline-block;
line-height: 1;
font-weight: 620;
letter-spacing: -0.015em;
transform: translateY(-0.5px);
color: color-mix(in srgb, var(--nav-fg) 92%, #6d5efc 8%);
}

.dark-mode .brand-name{
color: color-mix(in srgb, var(--nav-fg) 90%, #9b8cff 10%);
}      

.navbar-brand:hover .brand-icon{
    color: var(--purple-main);
}

.navbar-brand:hover .brand-name{
    color: var(--purple-main);
}

.dark-mode .navbar-brand:hover .brand-icon{
    color: var(--purple-main);
}

.dark-mode .navbar-brand:hover .brand-name{
    color: var(--purple-main);
}

.brand-icon,
.brand-name{
transition: color 0.15s ease, opacity 0.15s ease;
}

/* =========================
    Menu (desktop centered)
    ========================= */
.navbar-menu{
list-style: none;
display: flex;
align-items: center;
gap: 18px;
margin: 0 auto;
padding: 0;
}

.navbar-menu li{
margin: 0;
padding: 0;
}

.navbar-menu .nav-link{
position: relative;
text-decoration: none;
color: var(--nav-muted);
font-size: 18px;
padding: 6px 0;
white-space: nowrap;
transition: color 0.15s ease;
}

/* underline animation */
.navbar-menu .nav-link::after{
content: "";
position: absolute;
left: 0;
bottom: -6px;
width: 100%;
height: 2px;

/* more premium underline */
background: linear-gradient(
    90deg,
    transparent,
    var(--nav-accent),
    color-mix(in srgb, var(--nav-accent) 55%, var(--nav-accent-2) 45%),
    transparent
);

transform: scaleX(0);
transform-origin: center;
transition: transform 0.16s ease;
opacity: 0.85;
}

.navbar-menu .nav-link:hover{
color: var(--nav-fg);
}

.navbar-menu .nav-link:hover::after{
transform: scaleX(1);
}

.navbar-menu .nav-link.active{
color: var(--nav-fg);
}

.navbar-menu .nav-link.active::after{
transform: scaleX(1);
}

/* =========================
    Right side (mode button)
    ========================= */
.navbar-right{
margin-left: auto;
display: flex;
align-items: center;
}

.mode-toggle-btn{
border: 1px solid var(--nav-border);
background: transparent;
color: var(--nav-fg);
padding: 8px 12px;
border-radius: 999px;
cursor: pointer;
font-size: 16px;
line-height: 1;

transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.12s ease,
    box-shadow 0.12s ease;
}

.mode-toggle-btn:focus{
  outline: none;
  box-shadow: none;
}

.mode-toggle-btn:focus-visible{
  outline: none;
  box-shadow: none;
}

.mode-toggle-btn:hover{
background: linear-gradient(
    180deg,
    var(--nav-accent-soft),
    /* color-mix(in srgb, var(--nav-accent-soft) 70%, var(--nav-accent-2) 30%) */
);
border-color: color-mix(in srgb, var(--nav-border) 70%, var(--nav-accent-2) 30%);
transform: translateY(-1px);
box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.dark-mode .mode-toggle-btn:hover{
box-shadow: 0 2px 12px rgba(0,0,0,0.25);
}

.mode-toggle-btn:focus-visible{
outline: 2px solid color-mix(in srgb, var(--nav-accent) 55%, var(--nav-accent-2) 45%);
outline-offset: 2px;
}


/* =========================
     Mobile toggle
     ========================= */
    .nav-toggle{
    display: none;
    width: 44px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid var(--nav-border);
    background: transparent;
    cursor: pointer;
    padding: 10px;
    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        transform 0.12s ease,
        box-shadow 0.12s ease;
}
    
    .nav-toggle:hover{
        /* background: var(--nav-accent-soft); */
        background: linear-gradient(
            180deg,
            var(--nav-accent-soft),
            /* color-mix(in srgb, var(--nav-accent-soft) 70%, var(--nav-accent-2) 30%) */
        );
        border-color: color-mix(in srgb, var(--nav-border) 70%, var(--nav-accent-2) 30%);
        transform: translateY(-1px);
        box-shadow: 0 2px 10px rgba(0,0,0,0.08);
        }

    .hamburger {
    position: relative;
    width: 18px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    }
    
    .hamburger::before,
    .hamburger::after {
    content: "";
    position: absolute;
    left: 0;
    width: 18px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    }
    
    .hamburger::before {
    top: -6px;
    }
    
    .hamburger::after {
    top: 6px;
    }
      
      /* =========================
         Mobile behavior
         ========================= */
      @media (max-width: 960px){
        .navbar-inner{
          padding: 12px 16px;
        }
      
        .navbar-brand{
          font-size: 24px;
        }
      
        .nav-toggle{
          display: inline-flex;
          align-items: center;
          justify-content: center;
        }
      
        /* menu becomes dropdown under bar */
        .navbar-menu{
          display: none;
          position: absolute;
          left: 0;
          right: 0;
          top: calc(100% + 1px);
          margin: 0;
          padding: 10px 16px 14px;
          background: var(--nav-bg);
          border-bottom: 1px solid var(--nav-border);
          flex-direction: column;
          gap: 10px;
          z-index: 999;
        }

        /* .navbar-menu{
            background: linear-gradient(
              180deg,
              color-mix(in srgb, var(--nav-bg) 97%, var(--nav-accent-2) 3%),
              var(--nav-bg)
        );
        } */
      
        .navbar-menu.is-open{
          display: flex;
        }
        
      
        .navbar-menu .nav-link{
          font-size: 18px;
          padding: 10px 0;
        }
      
        .navbar-menu .nav-link::after{
          bottom: -2px;
        }
      
        /* keep right button on the bar */
        .navbar-right{
          margin-left: 0;
        }
      }
      
    
      @media (max-width: 820px){
        .navbar-menu.is-open{
          display: flex !important;
        }
      }