/* Shared header menu for the homepages, the blog and /apply-yourself.
   Below 980px the links move into a panel under the header, opened by the
   .nav-toggle button (behaviour in /assets/site-nav.js). The compact sizes
   are the homepage's own mobile header rules, applied to every page so the
   button fits next to the language switcher and the call to action down to
   320px. Loaded after each page's own styles. */
.nav-toggle{display:none}

@media (max-width:980px){
  .nav-links{display:none}
  .nav-inner{padding:14px 18px;gap:12px}
  .logo-img{height:30px}
  .nav-right{gap:10px}

  .nav-toggle{
    display:inline-flex;align-items:center;justify-content:center;flex:0 0 38px;
    width:38px;height:38px;padding:0;border-radius:999px;
    border:1px solid var(--rule);background:transparent;color:var(--ink);cursor:pointer;
    transition:background .2s;
  }
  .nav-toggle:hover{background:rgba(19,36,31,.04)}
  .nav-toggle svg{width:18px;height:18px}
  .nav-toggle .nav-toggle-close,
  .nav-toggle[aria-expanded="true"] .nav-toggle-open{display:none}
  .nav-toggle[aria-expanded="true"] .nav-toggle-close{display:block}
  .nav-toggle:focus-visible,
  .nav.menu-open .nav-links a:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px}

  /* Open: the same surface as the scrolled header */
  .nav.menu-open{background:var(--cream);border-color:var(--rule-light)}
  .nav.menu-open .nav-links{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:absolute;top:100%;left:0;right:0;
    max-height:calc(100vh - 64px);overflow-y:auto;
    padding:4px 18px 16px;background:var(--cream);border-bottom:1px solid var(--rule-light);
    font-size:16px;
  }
  .nav.menu-open .nav-links a{padding:14px 2px;border-bottom:1px solid var(--rule-light)}
  .nav.menu-open .nav-links a:last-child{border-bottom:0}
}

@media (max-width:560px){
  .nav-inner{padding:12px 14px}
  .nav-right{gap:8px}
  .logo-img{height:28px}
  .nav-right .btn{padding:9px 12px;font-size:12px;letter-spacing:.01em;min-height:38px}
  .nav-right .btn svg{display:none}
  .nav-right .lang a,.nav-right .lang .active{padding:6px 5px}
}

@media (max-width:400px){
  .nav-right .lang a,.nav-right .lang .active{padding:6px 3px}
  .nav-right .btn{padding:9px 9px}
}

@media (max-width:360px){
  .logo-img{height:24px}
  .nav-right .btn{font-size:11px;padding:8px 8px;min-height:36px}
  .nav-toggle{width:36px;height:36px;flex-basis:36px}
}