/* Mobile navigation — CSS-only hamburger toggle (site-nav.js adds close-on-navigate/Escape).
   Desktop keeps the inline-styled nav row untouched; everything below 900px collapses.

   Loaded by: index.html, contact.html, innovating-out-loud.html, 404.html (full hamburger,
   paired with site-nav.js) and cortx-health.html (header wrapping only — that page has a
   single link rather than a menu, so it needs no toggle and does not load the script).

   Markup contract: .site-nav must contain, in this source order, the logo link, then
   input.nav-toggle, then label.nav-burger, then div.nav-links. The open/closed rules use
   sibling combinators (.nav-toggle:checked ~ .nav-links), so reordering those elements
   silently breaks the menu. Dropping the toggle entirely is the safe failure: the links
   then stay visible and wrap, rather than collapsing with no way to open them. */

.site-nav{position:relative;z-index:20}

.nav-toggle,.nav-burger{display:none}

@media (max-width:900px){

  /* Nav rows with a single inline link (CORTX) wrap instead of running off the page. */
  .site-nav{flex-wrap:wrap}
  .nav-ext-link{font-size:12px !important;letter-spacing:0.16em !important}

  /* The real control: focusable for keyboard/AT, invisible to the eye. */
  .nav-toggle{
    display:block;position:absolute;top:0;left:0;
    width:1px;height:1px;margin:0;padding:0;border:0;
    opacity:0;pointer-events:none;-webkit-appearance:none;appearance:none;
  }

  .nav-burger{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
    flex:none;width:44px;height:44px;margin-right:-10px;
    border-radius:12px;cursor:pointer;-webkit-tap-highlight-color:transparent;
  }
  .nav-burger:hover{background:rgba(80,98,117,0.07)}
  .nav-burger-bar{
    display:block;width:24px;height:2px;border-radius:2px;background:#506275;
    transition:transform .24s cubic-bezier(.4,0,.2,1),opacity .16s ease;
  }
  .nav-toggle:focus-visible ~ .nav-burger{outline:2px solid #506275;outline-offset:2px}

  /* Bars fold into a cross while the panel is open. */
  .nav-toggle:checked ~ .nav-burger .nav-burger-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle:checked ~ .nav-burger .nav-burger-bar:nth-child(2){opacity:0}
  .nav-toggle:checked ~ .nav-burger .nav-burger-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* Links collapse by default and drop down as a card when open. */
  /* Scoped to `.nav-toggle ~` on purpose: if the toggle/burger markup is ever dropped
     from a page, the links stay visible and wrap instead of becoming unreachable. */
  .site-nav .nav-toggle ~ .nav-links{display:none !important}
  .site-nav .nav-toggle:checked ~ .nav-links{
    display:flex !important;
    flex-direction:column;align-items:stretch !important;gap:2px !important;
    position:absolute;top:calc(100% + 14px);
    left:clamp(24px,5vw,72px);right:clamp(24px,5vw,72px);
    box-sizing:border-box;padding:10px;
    background:#fff;border:1px solid rgba(80,98,117,0.16);border-radius:18px;
    box-shadow:0 20px 44px rgba(46,55,66,0.16);
    animation:navPanelIn .22s cubic-bezier(.2,.8,.2,1) both;
  }
  .site-nav .nav-toggle:checked ~ .nav-links > a{
    padding:14px !important;border-bottom:0 !important;border-radius:12px;line-height:1.35;
  }
  .site-nav .nav-toggle:checked ~ .nav-links > a:hover{background:#EBEFF5}
  .site-nav .nav-toggle:checked ~ .nav-links > a.nav-active{
    color:#3F464C !important;background:rgba(161,195,100,0.18);
  }
}

@keyframes navPanelIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .site-nav .nav-toggle:checked ~ .nav-links{animation:none}
  .nav-burger-bar{transition:none}
}