/* AllPrima navigation feedback. */

.site-header .header-link,
.site-header .theme-toggle {
  position: relative;
  isolation: isolate;
  overflow: visible;
  color: var(--_color---theme--text);
  background: transparent;
  text-decoration: none;
}

.site-header .header-link {
  border-radius: .5rem;
}

.site-header .theme-toggle {
  border: 0;
  padding: 0;
  border-radius: 50%;
}

.site-header .header-link::before,
.site-header .theme-toggle::before {
  content: "";
  position: absolute;
  inset: 0 -.625rem;
  z-index: -1;
  pointer-events: none;
  border-radius: .5rem;
  opacity: 0;

  background: linear-gradient(
    145deg,
    color-mix(
      in srgb,
      var(--_color---theme--accent) 36%,
      transparent
    ),
    color-mix(
      in srgb,
      var(--_color---theme--text) 7%,
      transparent
    )
  );

  box-shadow:
    inset 0 .0625rem .125rem rgb(255 255 255 / .18),
    0 .1875rem .5rem -.25rem rgb(0 0 0 / .18);

  transition:
    opacity 160ms ease,
    transform 160ms ease;
}

.site-header .theme-toggle::before {
  inset: 0;
  border-radius: 50%;
}

/* Mouse and other precise hover-capable pointers. */
@media (hover: hover) and (pointer: fine) {
  .site-header .header-link:hover::before,
  .site-header .theme-toggle:hover::before {
    opacity: 1;
  }
}

/* Keyboard feedback. */
.site-header .header-link:focus-visible::before,
.site-header .theme-toggle:focus-visible::before,
.site-header .header-link[data-wf-focus-visible]::before,
.site-header .theme-toggle[data-wf-focus-visible]::before {
  opacity: 1;
}

.site-header .header-link:focus-visible,
.site-header .theme-toggle:focus-visible,
.site-header .header-link[data-wf-focus-visible],
.site-header .theme-toggle[data-wf-focus-visible] {
  outline: .125rem solid var(--_color---theme--text);
  outline-offset: .25rem;
}

/* Press feedback affects only the highlight. */
.site-header .header-link:active::before,
.site-header .theme-toggle:active::before {
  opacity: 1;
  transform: scale(.96);
  transition-duration: 70ms;
}

@media (prefers-reduced-motion: reduce) {
  .site-header .header-link::before,
  .site-header .theme-toggle::before,
  .site-header .header-link:active::before,
  .site-header .theme-toggle:active::before {
    transition: none;
    transform: none;
  }
}

@media (forced-colors: active) {
  .site-header .header-link::before,
  .site-header .theme-toggle::before {
    display: none;
  }

  .site-header .header-link:hover,
  .site-header .theme-toggle:hover {
    outline: .0625rem solid Highlight;
    outline-offset: .25rem;
  }

  .site-header .header-link:focus-visible,
  .site-header .theme-toggle:focus-visible {
    outline-color: Highlight;
  }
}

  /* Keep magnetic movement and the header's frosted hover highlight. */
  .site-header .header-magnetic > .ap-magnetic-fill > .ap-button-fill {
    display: none;
  }

  /* Home button: solid contrast behind the logo in both themes. */
  .site-header .header-bar > .header-brand {
    padding: .25rem .5rem;
    margin: -.25rem -.5rem;
    border-radius: 999rem;
    background: var(--_color---brand--dark-green, #141916);

    box-shadow:
      inset 0 .0625rem .125rem rgb(255 255 255 / .18),
      0 .1875rem .625rem -.25rem rgb(0 0 0 / .30);

    transition:
      background-color 180ms ease,
      box-shadow 180ms ease,
      transform 180ms ease;
  }

  @media (hover: hover) and (pointer: fine) {
    .site-header .header-bar > .header-brand:hover {
      background: color-mix(
        in srgb,
        var(--_color---brand--dark-green, #141916) 96%,
        var(--_color---brand--off-white, #fff7f3)
      );

      transform: translateY(-.0625rem);

      box-shadow:
        inset 0 .0625rem .125rem rgb(255 255 255 / .28),
        0 .375rem .875rem -.25rem rgb(0 0 0 / .38);
    }
  }

  .site-header .header-bar > .header-brand:active {
    transform: scale(.97);
  }

  @media (prefers-reduced-motion: reduce) {
    .site-header .header-bar > .header-brand,
    .site-header .header-bar > .header-brand:hover,
    .site-header .header-bar > .header-brand:active {
      transition: none;
      transform: none;
    }
  }