/* OpenClinicalHistory — navigation
   Desktop: inline links.
   Mobile (<=760px): a Menu button opens a panel under the bar.
   Previously the links were set to display:none below 640px with nothing
   to open them, so only "Get access" was reachable on a phone. */

/* The frosted bar sits on a pseudo-element rather than on .nav itself.
   backdrop-filter on .nav makes it a backdrop root, which stops the mobile
   panel hanging below it from painting its own background properly. */
.nav{position:sticky; top:0; z-index:50; border-bottom:1px solid var(--line)}
.nav::before{content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(5,6,10,.72); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; height:var(--nav-h)}
.brand{display:flex; align-items:center; gap:10px; font-family:"Space Grotesk",sans-serif;
  font-weight:700; color:var(--bone-bright); text-decoration:none; letter-spacing:-.01em; font-size:16px}
.brand .mark{width:26px; height:26px; display:block; flex:none; border-radius:6px;
  box-shadow:0 0 16px -1px rgba(255,158,46,.55)}
.nav-links{display:flex; gap:26px; align-items:center}
.nav-links a{font-size:14px; color:var(--bone-dim); text-decoration:none; transition:color .2s}
.nav-links a:hover{color:var(--bone-bright)}
.nav-links a[aria-current="page"]{color:var(--bone-bright)}
.nav-gh{border:1px solid var(--line-2); padding:8px 14px; border-radius:8px; color:var(--bone) !important}
.nav-gh:hover{border-color:var(--amber); color:var(--amber) !important}

/* ---- the Menu button (hidden until the mobile breakpoint) ---- */
.nav-toggle{display:none; align-items:center; gap:10px; background:none; cursor:pointer;
  border:1px solid var(--line-2); border-radius:8px; padding:8px 12px 8px 11px;
  color:var(--bone); font-family:"IBM Plex Mono",monospace; font-size:11.5px;
  letter-spacing:.16em; text-transform:uppercase; transition:.2s}
.nav-toggle:hover{border-color:var(--amber); color:var(--amber)}
.nav-toggle .bars{display:block; width:16px; height:12px; position:relative}
.nav-toggle .bars span{position:absolute; left:0; width:100%; height:1.5px; border-radius:2px;
  background:currentColor; transition:transform .22s ease, opacity .18s ease}
.nav-toggle .bars span:nth-child(1){top:0}
.nav-toggle .bars span:nth-child(2){top:5.25px}
.nav-toggle .bars span:nth-child(3){top:10.5px}
.nav.is-open .nav-toggle{border-color:var(--amber); color:var(--amber)}
.nav.is-open .nav-toggle .bars span:nth-child(1){transform:translateY(5.25px) rotate(45deg)}
.nav.is-open .nav-toggle .bars span:nth-child(2){opacity:0}
.nav.is-open .nav-toggle .bars span:nth-child(3){transform:translateY(-5.25px) rotate(-45deg)}

@media(max-width:900px){.nav-links{gap:20px}}
@media(max-width:820px){.nav-links{gap:16px} .nav-links a:not(.nav-gh){font-size:13px}}

/* ---- mobile: collapse into the panel (JS only) ---- */
@media(max-width:760px){
  html.js .nav-toggle{display:inline-flex}
  html.js .nav-links{
    position:absolute; top:100%; left:0; right:0;
    display:block; padding:4px 28px 22px;
    background:var(--ink);
    border-bottom:1px solid var(--line);
    box-shadow:0 24px 50px -28px rgba(0,0,0,.95);
    visibility:hidden; opacity:0; transform:translateY(-10px); pointer-events:none;
    transition:opacity .2s ease, transform .2s ease, visibility .2s;
  }
  html.js .nav.is-open .nav-links{visibility:visible; opacity:1; transform:none; pointer-events:auto}
  html.js .nav-links a{display:block; font-size:16px; padding:15px 0;
    border-top:1px solid var(--line); color:var(--bone)}
  html.js .nav-links a:first-child{border-top:0}
  html.js .nav-links a[aria-current="page"]{color:var(--amber)}
  html.js .nav-links a.nav-gh{margin-top:16px; text-align:center; padding:14px 16px;
    border-radius:10px; border:1px solid var(--line-2)}

  /* No JavaScript: let the bar grow and wrap rather than hiding the links. */
  html.no-js .nav .wrap{height:auto; flex-wrap:wrap; gap:10px; padding-top:12px; padding-bottom:14px}
  html.no-js .nav-links{flex-wrap:wrap; gap:14px 18px}
}