/* Digotech header extras (parts/header.html), on top of the bar and its floating shape in base.css (.nav.is-floating):
   reading progress line, the menu's sliding highlight (header.js), the Style button, and where the quick search
   button (blocks/command-palette) sits in the bar. */
.nav{
  --hd-prog-h: 2px;
  --hd-ink-dur: 420ms;
  --hd-z-link: 1;
}

/* reading progress: a brand line along the bottom of the bar, driven by the page scroll itself (no script); browsers
   without scroll-driven animations simply do not show it */
@supports (animation-timeline: scroll()){
  .nav__inner::before{content:"";position:absolute;inset:auto var(--r-pill) 0;height:var(--hd-prog-h);border-radius:var(--hd-prog-h);background:var(--accent-fill);transform:scaleX(0);transform-origin:0 50%;pointer-events:none;animation:hd-prog linear both;animation-timeline:scroll(root)}
}
@keyframes hd-prog{to{transform:scaleX(1)}}

/* sliding highlight: one tinted pill under the menu links, moved by header.js to the hovered / focused link and back to
   the current page; it replaces each link's own hover tint (base.css) once the script has added it */
.nav__links.hd-ink-on{position:relative}
.nav__links.hd-ink-on .wp-block-navigation__container > .wp-block-navigation-item{position:relative;z-index:var(--hd-z-link)}
.nav__links.hd-ink-on .wp-block-navigation-item__content:hover{background-color:transparent}
.hd-ink{--hd-ink-x:0px;--hd-ink-y:0px;--hd-ink-w:0px;--hd-ink-h:0px;position:absolute;top:0;left:0;width:var(--hd-ink-w);height:var(--hd-ink-h);border-radius:var(--r);background:var(--accent-tint);opacity:0;pointer-events:none;transform:translate(var(--hd-ink-x), var(--hd-ink-y));
  transition:transform var(--hd-ink-dur) var(--ease-out),width var(--hd-ink-dur) var(--ease-out),height var(--hd-ink-dur) var(--ease-out),opacity var(--dur-mode) var(--ease-out)}
.hd-ink.is-on{opacity:1}
/* appearing from nothing: placed at once, then fades in */
.hd-ink.is-jump{transition:opacity var(--dur-mode) var(--ease-out)}

/* Style button (Button block, class hd-style on Buttons): icon only, its words stay as the name screen readers read;
   shown by header.js only when the style switcher is on the page */
.nav .hd-style{display:none}
.nav .hd-style.is-on{display:flex}
.hd-style .wp-block-button__link{width:var(--ctl-s);height:var(--ctl-s);min-height:var(--ctl-s);padding:0;border:1px solid var(--rule);border-radius:var(--r);background:transparent;color:var(--ink);box-shadow:none;gap:0;font-size:0;transition:border-color var(--dur) var(--ease-press)}
.hd-style .wp-block-button__link:is(:hover,:active){border-color:var(--ink-2);box-shadow:none;transform:none}
.hd-style .wp-block-button__link::before{content:"";flex:none;width:var(--icon-m);height:var(--icon-m);background:currentColor;-webkit-mask:url(../../../icons/style.svg) center / contain no-repeat;mask:url(../../../icons/style.svg) center / contain no-repeat}

/* quick search button (as the design): the floating bar and screens up to 1240px keep the icon and the key hint;
   up to 1180px only the icon */
.nav.is-floating .hd-pal__lbl{display:none}
@media (max-width: 1240px){
  .nav .hd-pal__lbl{display:none}
}
@media (max-width: 1180px){
  .nav .hd-pal__open{width:var(--ctl-s);padding:0;justify-content:center}
  .nav .hd-pal__kbd{display:none}
  /* room for the extra buttons next to the six links (as in the design at this width) */
  .nav__inner,.nav__right{gap:var(--s-3)}
  .nav__links .wp-block-navigation__container{gap:0}
  .nav__links .wp-block-navigation-item__content{padding-inline:var(--s-2)}
}
@media (max-width: 374px){
  .nav .nav__tools{gap:var(--s-1)}
}

@media (prefers-reduced-motion: reduce){
  .hd-ink,.hd-style .wp-block-button__link{transition:none}
}