:root{
  --page-bg: #0b0f1a; /* will be auto-adjusted by JS */
  --page-fg: #e5e7eb;
  --nav-bg: rgba(15, 23, 42, .55);
  --nav-fg: #e5e7eb;
  --nav-border: rgba(148,163,184,.22);
  --accent: #60a5fa; /* sky-400 */
  --chip-bg: rgba(148,163,184,.12);
  --chip-fg: var(--nav-fg);
}
:root[data-theme="light"]{
  --page-bg: #ffffff;
  --page-fg: #0f172a;
  --nav-bg: rgba(255,255,255,.65);
  --nav-fg: #0f172a;
  --nav-border: rgba(15,23,42,.12);
  --chip-bg: rgba(15,23,42,.06);
  --chip-fg: #0f172a;
}
html, body{ background: var(--page-bg); color: var(--page-fg); }

.navbar{
  position: sticky; top:0; z-index:1000;
  color:var(--nav-fg);
  border-bottom:1px solid var(--nav-border);
  background: var(--nav-bg);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}
/* --- Sticky navbar cross-browser hardening (no layout change) --- */
#navbar, .navbar{
  position: -webkit-sticky; /* iOS Safari */
  position: sticky;
  top: 0;
  z-index: 2147483647; /* stay above any content */
  width: 100%;
}

.glass-nav:before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background: linear-gradient(90deg, transparent, rgba(96,165,250,.6), transparent);
  opacity:.6; pointer-events:none;
}
.nav-inner{
  display:flex; align-items:center; gap:1rem; flex-wrap:nowrap;
  padding:.75rem 1rem; max-width:1200px; margin:0 auto;
}
.brand{display:flex; align-items:center; gap:.6rem; text-decoration:none; color:inherit;}
.brand img{height:40px; width:auto; border-radius:10px; box-shadow:0 2px 12px rgba(0,0,0,.15)}
.brand-text{font-weight:700; letter-spacing:.2px;}

.menu{margin-left:auto; display:flex; align-items:center; gap:1.2rem; list-style:none; padding:0; }
.link{position:relative; display:inline-block; color:inherit; text-decoration:none; font-weight:600; opacity:.9; padding:.25rem .1rem}
.link:after{
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:2px;
  transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.link:hover{opacity:1}
.link:hover:after{ transform:scaleX(1); }

.nav-tools{display:flex; gap:.5rem; align-items:center; margin-left:1rem;}
.chip{
  padding:.45rem .8rem; background:var(--chip-bg); color:var(--chip-fg);
  border:1px solid var(--nav-border); border-radius:9999px; cursor:pointer; font:inherit;
  transition: transform .15s ease, background-color .2s ease, border-color .2s ease;
}
.chip:hover{ transform: translateY(-1px); }
.chip.ghost{ background:transparent; }

.nav-toggle{display:none}
.nav-toggle .bar{display:block; width:22px; height:2px; background:var(--nav-fg); margin:4px 0; border-radius:2px}

@media (max-width: 900px){
  .navbar .menu{
    position: fixed;
    top: 68px; left: 0; right: 0; bottom: 0;
    z-index: 1001;
    background: var(--nav-bg);
    border-top:1px solid var(--nav-border);
    padding:1rem 1.25rem;
    gap:1rem;
    display:flex; flex-direction:column; align-items:flex-start;
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  }
  .navbar .menu.open{
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateY(0);
    transition: opacity .2s ease, transform .2s ease, visibility 0s;
  }
  .navbar .nav-toggle{display:none}
  body.no-scroll{ overflow: hidden; }
}

  .nav-toggle{display:none}
}

.navbar a{text-decoration:none}

/* --- NAVBAR FIX: keep navbar alignment constant regardless of page dir --- */
.navbar,
.navbar .nav-inner,
.navbar .menu,
.navbar .nav-tools {
  direction: ltr !important;
}
/* Render RTL text correctly inside LTR navbar without flipping layout */
.navbar .menu .link,
.navbar .brand-text {
  unicode-bidi: plaintext;
}

@media (max-width: 900px){
  .navbar .menu{
    position: fixed;
    top: 68px; left: 0; right: 0; bottom: 0;
    z-index: 1001;
    background: var(--nav-bg);
    border-top:1px solid var(--nav-border);
    padding:1rem 1.25rem;
    gap:1rem;
    display:flex; flex-direction:column; align-items:flex-start;
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  }
  .navbar .menu.open{
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateY(0);
    transition: opacity .2s ease, transform .2s ease, visibility 0s;
  }
  .navbar .nav-toggle{display:none}
  body.no-scroll{ overflow: hidden; }
}

  body.no-scroll{ overflow: hidden; }
}

/* === Mobile menu readability fix (no desktop/layout changes) === */
@media (max-width: 900px){
  /* Solid, high-contrast backdrop so links are readable over page content */
  .navbar .menu{
    background: rgba(15,23,42,.92); /* dark theme default */
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
  /* Light theme variant */
  :root[data-theme="light"] .navbar .menu{
    background: rgba(255,255,255,.98);
  }
  /* Ensure text and chips are clearly visible */
  .navbar .menu .link{
    color: var(--nav-fg);
    text-shadow: 0 1px 2px rgba(0,0,0,.15);
  }
  .navbar .menu .chip{
    background: var(--chip-bg);
    color: var(--nav-fg);
    border-color: var(--nav-border);
  }
}


/* Desktop guard: hide hamburger and keep inline menu */
@media (min-width: 901px){
  .navbar .nav-toggle{ display: none !important; }
  .navbar .menu{
    position: static !important;
    display: flex !important;
    opacity: 1 !important; visibility: visible !important; pointer-events: auto !important;
    transform: none !important;
    background: transparent !important;
    border-top: none !important;
    padding: 0 !important;
  }
  body.no-scroll{ overflow: auto !important; }
}


/* Force hamburger visible only on mobile */
@media (max-width: 900px){
  .navbar .nav-toggle{ display:block !important; }
}


/* === Mobile hamburger style + panel background fix === */
@media (max-width: 1024px){
  /* Hamburger button appearance */
  .navbar .nav-toggle{
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: 44px; height: 44px;
    padding: 10px;
    border-radius: 12px; /* match top bar geometry, not a pill */
  }
  .navbar .nav-toggle .bar{
    background: var(--nav-fg) !important;
    display:block; height:2px; width:22px;
    margin:5px 0; border-radius:2px;
  }

  /* Opened panel readability */
  .navbar .menu{
    background: rgba(15,23,42,.94) !important; /* dark */
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
  :root[data-theme="light"] .navbar .menu{
    background: rgba(255,255,255,.98) !important; /* light */
  }
  .navbar .menu.open{
    opacity: 1 !important; visibility: visible !important; pointer-events: auto !important;
    transform: translateY(0) !important;
  }
  .navbar .menu .link{
    color: var(--nav-fg) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.18);
  }
  .navbar .menu .chip{
    background: var(--chip-bg) !important;
    color: var(--nav-fg) !important;
    border-color: var(--nav-border) !important;
  }
}


/* === Mobile hamburger panel + overlay (centered box) === */
@media (max-width: 1024px){
  .navbar .menu{
    position: fixed !important;
    top: 72px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: min(640px, calc(100vw - 32px)) !important;
    max-height: calc(100vh - 88px) !important;
    overflow-y: auto !important;
    background: rgba(15,23,42,.96) !important; /* dark */
    border: 1px solid var(--nav-border) !important;
    border-radius: 16px !important;
    padding: .5rem !important;
    box-shadow: 0 12px 40px rgba(0,0,0,.35) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: .25rem !important;
  }
  :root[data-theme="light"] .navbar .menu{
    background: rgba(255,255,255,.98) !important;
  }
  /* Fullscreen dim/blur overlay behind the panel, clickable area */
  .navbar .menu::before{
    content:"";
    position: fixed;
    inset: 0;
    background: rgba(2,6,23,.45); /* slate-950 with alpha */
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    z-index: -1;
  }
  .navbar .menu li{ width: 100% !important; }
  .navbar .menu .link{
    display:block !important;
    padding: .9rem 1rem !important;
    border-radius: 10px !important;
    color: var(--nav-fg) !important;
  }
  .navbar .menu .link:hover{
    background: rgba(148,163,184,.12) !important;
  }
  .navbar .nav-toggle{
    background: transparent !important; border:none !important; box-shadow:none !important;
    width: 44px; height: 44px; padding: 10px; border-radius: 10px;
  }
  .navbar .nav-toggle .bar{
    background: var(--nav-fg) !important; height:2px; width:22px; margin:5px 0; border-radius:2px;
  }
}


/* === Mobile overlay + panel stacking and readability === */
@media (max-width: 1024px){
  .menu-overlay{
    position: fixed;
    inset: 0;
    background: rgba(2,6,23,.45); /* slate-950 with alpha */
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    z-index: 1000;
  }
  .navbar .menu{
    z-index: 1001 !important; /* above overlay */
  }
  .navbar .menu.open{
    opacity: 1 !important; visibility: visible !important; pointer-events: auto !important;
  }
  .navbar .menu .link{
    color: var(--nav-fg) !important;
  }
}