/* nav.css — sticky nav, links, mobile layout, toggle, hamburger */
nav.sticky{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.65);backdrop-filter: blur(10px);border-bottom:1px solid var(--border)}
:root[data-theme="dark"] nav.sticky{background:rgba(12,14,18,.55)}
nav .inner{display:flex;align-items:center;justify-content:space-between;padding:calc(var(--space)*.7) var(--space)}
.brand{display:flex;align-items:center;gap:.65rem;font-weight:800;letter-spacing:.2px}
.brand .logo{width:28px;height:28px}
.actions{display:flex;align-items:center;gap:.6rem}
.toggle{width:54px;height:32px;border-radius:999px;background:var(--card);border:1px solid var(--border);position:relative;cursor:pointer}
.toggle .dot{position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:var(--muted);transition:transform .25s}
:root[data-theme="dark"] .toggle .dot{transform:translateX(22px)}
.hamburger{display:none; width:44px;height:36px;border:1px solid var(--border);border-radius:10px;background:var(--card);align-items:center;justify-content:center;cursor:pointer}
.hamburger i{display:block;width:20px;height:2px;background:var(--text);position:relative}
.hamburger i::before,.hamburger i::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--text)}
.hamburger i::before{top:-6px}.hamburger i::after{top:6px}
nav .links{display:flex;gap:1rem;align-items:center}
@media (max-width: 900px){
  .hamburger{display:flex}
  nav .links{display:none;position:absolute;left:0;right:0;top:100%;background:var(--card);border-bottom:1px solid var(--border);
    box-shadow:0 10px 24px rgba(0,0,0,.12);padding:1rem;z-index:20}
  nav.open .links{display:grid;gap:.8rem}
  nav .links a{padding:.5rem .6rem;border-radius:10px}

  /* Ensure layout is flex and order elements explicitly */
  nav.sticky .inner.container{display:flex;align-items:center;gap:.8rem;position:relative}

  /* 1) Brand stays first */
  nav.sticky .brand{order:1}

  /* 2) Links panel comes after (visually below due to absolute pos) */
  nav.sticky .links{order:5}

  /* 3) Actions (theme toggle) sits immediately BEFORE hamburger on the right */
  nav.sticky .actions{
    order:4;
    display:flex;align-items:center;gap:.6rem;
    margin-left:auto;            /* pushes actions + hamburger to right edge */
  }
  nav.sticky .actions .btn{display:none}     /* hide action buttons on mobile, keep toggle */
  nav.sticky .actions .toggle{display:inline-flex}

  /* 4) Hamburger sits at the far right, after actions */
  nav.sticky .hamburger{
    order:5;
    display:flex;
    margin-left:0;               /* ensure it follows the actions tightly */
  }
}

/* Desktop-only link dividers */
@media (min-width: 901px) {
  nav .links a {
    position: relative;
    padding: .4rem .8rem;
  }

  /* Add a divider before each link except the first */
  nav .links a + a::before {
    content: "";
    position: absolute;
    left: -.2rem;                 /* space between text and divider */
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 1.1em;                /* shorter than text height looks nicer */
    background: var(--border);    /* adapts to theme */
    opacity: .85;
  }

  /* Slightly softer in dark mode */
  :root[data-theme="dark"] nav .links a + a::before {
    opacity: .5;
  }
}