/* ── Shared nav bar — hamburger menu (pure HTML <details>/<summary>, zero JS) ── */
  .nav-bar {
    position: sticky; top: 0; z-index: 100;
    background: #0d1117e6; backdrop-filter: blur(12px);
    border-bottom: 1px solid #30363d;
    height: 56px; display: flex; align-items: center;
  }
  .nav-inner {
    max-width: 960px; margin: 0 auto; width: 100%;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 20px; position: relative;
  }
  .nav-brand {
    font-size: 16px; font-weight: 600; color: #e6edf3;
    text-decoration: none; display: flex; align-items: center;
    gap: 8px; white-space: nowrap;
  }
  .nav-brand:hover { color: #d2a85c; }
  .logo { width: 24px; height: 24px; flex-shrink: 0; }

  /* ── Hamburger button ── */
  .nav-menu {
    position: relative;
    display: inline-block;  /* prevent flex stretching */
  }
  .nav-menu[open] .nav-menu-btn { background: #1c2128; }
  .nav-menu-btn {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; cursor: pointer;
    border-radius: 6px; transition: background 0.15s;
    list-style: none;
  }
  .nav-menu-btn::-webkit-details-marker,
  .nav-menu-btn::marker { display: none; }
  .nav-menu-btn:hover { background: #1c2128; }

  /* Hamburger icon lines → animates to X when open */
  .hamburger, .hamburger::before, .hamburger::after {
    display: block; width: 20px; height: 2px;
    background: #8b949e; border-radius: 2px;
    transition: all 0.2s ease;
  }
  .hamburger { position: relative; }
  .hamburger::before, .hamburger::after {
    content: ""; position: absolute; left: 0;
  }
  .hamburger::before { top: -6px; }
  .hamburger::after  { top: 6px; }

  .nav-menu[open] .hamburger { background: transparent; }
  .nav-menu[open] .hamburger::before {
    top: 0; transform: rotate(45deg); background: #d2a85c;
  }
  .nav-menu[open] .hamburger::after {
    top: 0; transform: rotate(-45deg); background: #d2a85c;
  }

  /* ── Dropdown — VERTICAL, button-style links ── */
  .nav-dropdown {
    position: absolute; top: calc(100% + 8px); right: 0;
    min-width: 220px; background: #161b22;
    border: 1px solid #30363d; border-radius: 8px;
    padding: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    z-index: 200;
    display: block;  /* CRITICAL: override any inherited flex */
    flex-direction: column;  /* also block for safety */
  }
  .nav-dropdown a {
    display: block !important;   /* FORCE vertical stacking */
    width: 100%;                 /* full-width buttons */
    padding: 10px 14px;
    margin-bottom: 2px;
    border-radius: 6px;
    color: #8b949e;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.15s;
    box-sizing: border-box;
  }
  .nav-dropdown a:last-child { margin-bottom: 0; }
  .nav-dropdown a:hover {
    color: #e6edf3; background: #1c2128;
  }

  @media (max-width: 480px) {
    .nav-inner { padding: 0 14px; }
    .nav-brand { font-size: 15px; }
    .nav-dropdown {
      min-width: 200px; right: -8px;
      padding: 6px;
    }
    .nav-dropdown a {
      font-size: 15px; padding: 12px 16px; margin-bottom: 3px;
    }
  }