/*
 * Sticky header. At the top it is the full-width bar; once the page scrolls it
 * becomes a floating glass pill with a reading-progress hairline.
 * The header's own box never changes size (no layout shift when the state flips),
 * and the blur lives on a pseudo-element, not on an ancestor of the mobile menu:
 * backdrop-filter on an ancestor would trap the fixed-position overlay.
 */
.wp-site-blocks > header.wp-block-template-part {
  position: sticky;
  top: var(--wp-admin--admin-bar--height, 0px);
  z-index: 100;
  margin-block: 0;
}

.p-header { position: relative; isolation: isolate; background: transparent !important; border-bottom: 0 !important; }
.p-header::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  border-bottom: 1px solid #eef2f8;
  background: #fff;
  transition: inset .5s cubic-bezier(.16, 1, .3, 1), border-radius .5s cubic-bezier(.16, 1, .3, 1), background-color .4s, box-shadow .5s, border-color .4s;
}

html.is-scrolled .p-header::before {
  inset: 10px max(12px, calc((100% - 1216px) / 2));
  border: 1px solid #ffffffb3;
  border-radius: 18px;
  background: #ffffffc7;
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  backdrop-filter: blur(16px) saturate(170%);
  box-shadow: 0 1px 0 #ffffff inset, 0 14px 40px -18px #14356b40, 0 0 0 1px #0b13240d;
}

/* Reading progress along the pill's bottom edge (scroll-driven; absent where unsupported). */
.p-header::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset-inline: max(30px, calc((100% - 1180px) / 2));
  bottom: 10px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #1877ff00, #1877ff);
  transform-origin: right center;
  transform: scaleX(0);
  opacity: 0;
  transition: opacity .4s;
}
html.is-scrolled .p-header::after { opacity: 1; }
@supports (animation-timeline: scroll()) {
  .p-header::after { animation: p-read linear both; animation-timeline: scroll(root); }
  @keyframes p-read { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* Nav links: a hairline slides in from the reading side. */
@media (min-width: 701px) {
  .p-nav .wp-block-navigation-item > .wp-block-navigation-item__content { position: relative; transition: color .22s; }
  .p-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
    content: ''; position: absolute; inset-inline: 0; bottom: -6px; height: 2px; border-radius: 2px;
    background: #1877ff; transform: scaleX(0); transform-origin: right center; transition: transform .35s cubic-bezier(.16, 1, .3, 1);
  }
  .p-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover::after,
  .p-nav .wp-block-navigation__container > .current-menu-item > .wp-block-navigation-item__content::after { transform: scaleX(1); }
  .p-nav .wp-block-navigation-item > .wp-block-navigation-item__content:hover,
  .p-nav .current-menu-item > .wp-block-navigation-item__content { color: #1877ff; }
}

/* Anchors land below the sticky bar. */
html { scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + 96px); }

@media (prefers-reduced-motion: reduce) {
  .p-header::before, .p-header::after, .p-nav .wp-block-navigation-item__content::after { transition: none !important; }
}