/* Header, part 2 (all pages): slightly smaller nav text, and on scroll the bar collapses into a floating pill that holds only
   the Nagina logo and the Résumé button. html.am-nav-pill is toggled by pill.js. The header band keeps its height (no layout
   shift on the static pages where the header is sticky); only the inner .wrap morphs. */
html{--am-nav-ease:cubic-bezier(.32,.72,0,1)}

/* ---- slightly smaller text ---- */
header.nav .links a{font-size:16px}
header.nav .resume{font-size:14px;padding:12px 22px}
header.nav .menu-btn{font-size:14px;padding:11px 16px}
header.nav .am-lang button{font-size:11.5px}

/* ---- links truly centred: logo side and right-hand side take equal shares, the links sit between them ---- */
header.nav .brand{flex:1 1 0}
header.nav .nav-r{flex:1 1 0;justify-content:flex-end}
header.nav .links{flex:none}

/* ---- morphing parts ---- */
header.nav{display:flow-root;transition:background-color .45s ease,border-color .45s ease,backdrop-filter .45s ease,-webkit-backdrop-filter .45s ease}
header.nav .wrap{border:1px solid transparent;border-radius:0;transition:max-width .65s var(--am-nav-ease),height .65s var(--am-nav-ease),margin .65s var(--am-nav-ease),padding .65s var(--am-nav-ease),gap .65s var(--am-nav-ease),border-radius .65s var(--am-nav-ease),background-color .45s ease,box-shadow .65s ease,border-color .45s ease,backdrop-filter .45s ease,-webkit-backdrop-filter .45s ease}
header.nav .nav-r{transition:gap .65s var(--am-nav-ease)}
/* the pieces that fold away (higher specificity + !important: taste.css sets !important transitions on these buttons) */
html header.nav .links,html header.nav .am-lang,html header.nav .am-theme,html header.nav .menu-btn{max-width:600px;overflow:hidden;white-space:nowrap;visibility:visible;
  transition:max-width .65s var(--am-nav-ease),opacity .3s ease,margin .65s var(--am-nav-ease),padding .65s var(--am-nav-ease),border-width .65s var(--am-nav-ease),visibility 0s linear 0s,color .3s ease,background-color .3s ease,transform .5s var(--am-nav-ease)!important}
html header.nav .am-lang{max-width:140px}html header.nav .am-theme{max-width:48px}html header.nav .menu-btn{max-width:140px}

/* once the entrance animation has played, release the fill-mode so opacity can be driven by the collapse */
html.am-nav-ready header.nav .brand,html.am-nav-ready header.nav .links a,html.am-nav-ready header.nav .nav-r>*{animation:none}

/* ---- collapsed: floating pill ---- */
html.am-nav-pill header.nav{background:transparent!important;border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;pointer-events:none}
html.am-nav-pill header.nav .wrap{pointer-events:auto;max-width:340px;height:56px;margin-top:14px;padding:0 8px 0 22px;gap:0;border-radius:999px;border-color:var(--line);
  background:rgba(254,252,250,.9);-webkit-backdrop-filter:saturate(1.2) blur(14px);backdrop-filter:saturate(1.2) blur(14px);box-shadow:0 12px 32px -14px rgba(32,31,29,.35)}
html.am-nav-pill[data-theme="dark"] header.nav .wrap{background:rgba(29,27,25,.88);border-color:rgba(243,241,236,.16);box-shadow:0 12px 32px -14px rgba(0,0,0,.6)}
html.am-nav-pill header.nav .nav-r{gap:0}
html.am-nav-pill header.nav .links,html.am-nav-pill header.nav .am-lang,html.am-nav-pill header.nav .am-theme,html.am-nav-pill header.nav .menu-btn{max-width:0;opacity:0;margin:0;padding-left:0;padding-right:0;border-width:0;pointer-events:none;visibility:hidden;
  transition:max-width .65s var(--am-nav-ease),opacity .3s ease,margin .65s var(--am-nav-ease),padding .65s var(--am-nav-ease),border-width .65s var(--am-nav-ease),visibility 0s linear .65s,color .3s ease,background-color .3s ease,transform .5s var(--am-nav-ease)!important}
/* the Résumé button stays (it is hidden on phones in the normal bar, where the Menu button replaces it) */
html.am-nav-pill header.nav .resume{display:inline-flex}
@media (max-width:809.98px){
  html.am-nav-pill header.nav .wrap{height:48px;margin-top:10px;max-width:300px;padding:0 6px 0 18px}
}
@media (prefers-reduced-motion:reduce){
  header.nav,header.nav .wrap,header.nav .nav-r,html header.nav .links,html header.nav .am-lang,html header.nav .am-theme,html header.nav .menu-btn{transition-duration:.01s!important;transition-delay:0s!important}
}

/* the link underline (hover + current page) sits below the text box: only clip the links while they fold away into the pill */
html header.nav .links{overflow:visible}
html.am-nav-pill header.nav .links{overflow:hidden}

/* inactive links are dimmed (colour, not opacity, so the entrance animation does not fight it); the current page, hover and keyboard focus bring a link back to full strength */
header.nav .links a:not([aria-current]){color:color-mix(in srgb,var(--ink) 55%,transparent);transition:color .3s ease}
header.nav .links a:not([aria-current]):hover,header.nav .links a:not([aria-current]):focus-visible{color:var(--ink)}