/* Lia AI public header navigation.
 * Scoped to the desktop public navigation so dashboard and mobile controls
 * keep the upstream New API behavior. */
@media (min-width: 640px) {
  header nav > div.hidden > a:not([href='/sign-in']) {
    position: relative;
    border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
    border-radius: 9999px;
    padding: 0.45rem 0.8rem;
    background: color-mix(in oklab, var(--muted) 52%, transparent);
    color: color-mix(in oklab, var(--foreground) 68%, transparent) !important;
    transition:
      color 180ms ease,
      background-color 180ms ease,
      border-color 180ms ease,
      box-shadow 180ms ease,
      transform 180ms ease !important;
  }

  header nav > div.hidden > a:not([href='/sign-in']):hover {
    border-color: color-mix(in oklab, #0d9488 24%, var(--border));
    background: color-mix(in oklab, #14b8a6 9%, var(--background));
    color: color-mix(in oklab, #0f766e 88%, var(--foreground)) !important;
    box-shadow: 0 4px 14px -9px rgb(13 148 136 / 55%);
    transform: translateY(-1px);
  }

  header nav > div.hidden > a:not([href='/sign-in']).text-foreground {
    border-color: color-mix(in oklab, #14b8a6 32%, var(--border));
    background: linear-gradient(
      135deg,
      color-mix(in oklab, #14b8a6 15%, var(--background)),
      color-mix(in oklab, #0ea5e9 10%, var(--background))
    );
    color: color-mix(in oklab, #0f766e 90%, var(--foreground)) !important;
    box-shadow:
      0 5px 16px -11px rgb(13 148 136 / 75%),
      inset 0 1px 0 rgb(255 255 255 / 45%);
  }

  .dark header nav > div.hidden > a:not([href='/sign-in']):hover,
  .dark header nav > div.hidden > a:not([href='/sign-in']).text-foreground {
    color: #5eead4 !important;
  }
}