@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
:root {
  --vpt-theme-headline-font: "Inter", ui-sans-serif, sans-serif;
  --vpt-theme-text-font: "Inter", ui-sans-serif, sans-serif;
  --vpt-theme-header-background-color: #00386b;
  --vpt-theme-header-text-color: white;
  --vpt-theme-banner-background-color: #00386b;
  --vpt-theme-banner-text-color: white;
  --vpt-theme-footer-background-color: ghostwhite;
  --vpt-theme-footer-text-color: black;
  --vpt-theme-primary-color: #00386b;
  --vpt-theme-on-primary-color: white;
  --vpt-theme-roundness: 6;
  --K15t-link: #346ddb;
  --K15t-background-neutral-subtle-selected: #e6edfb;
}

a:hover {
  color: #1f4183;
}

.toc-link:hover {
  text-decoration: none;
  background-color: #f6f6f6;
}

a {
  transition-property: color,background-color,border-color,text-decoration-color,fill,stroke;
  transition-timing-function: cubic-bezier(.4,0,.2,1);
  transition-duration: .15s;
}

:root[data-vp-page-template="portal"] .header__navigation--heading {
  display: none;
}

ul.footer__attribution-line--copyright li:nth-child(2) {
  display: none;
}

.vp-search-bar__input-container {
  height: 50px;
}

.render-links {
  display: none;
}

/* Make sure that lower resolutions see TOC */
@media (min-width: 1160px) {
  .vp-article__content-panel {
    grid-template-columns: minmax(0,1fr) 260px;
    padding-inline-end: var(--_content-padding-inline);
  }
}

@media (min-width: 1160px) {
  .vp-article__aside-right {
    display: block;
    grid-column: 2/3;
    grid-row: 1/3;
  }
}

table p {
  font-size: 12px;
}

.code-macro {
  margin-bottom: .75rem;
}

a.vp-button:hover {
  color: white !important;
}

/* AI button */
#ai-search-secondary {
  padding: 10px 15px;
  border: 1px solid #00000030;
  border-bottom: none;
  border-radius: 50px;
  background-color: #ffffff;
  font-size: 16px;
  cursor: pointer;
  text-decoration: none;
}

div:has(> #ai-search-secondary) {
  margin-right: 5px;
}

/* 1) Define an animatable custom property for the X position */
@property --bgx {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 0%;
}

/* 2) Animate that property on the BUTTON (one animation, one clock) */
#ai-search-secondary {
  --underline-thickness: 1px;     /* sharp line thickness */
  --glow-thickness: 5px;          /* glow height */
  --speed: 3s;                    /* animation duration */
  --radius: 50px;

  /* your existing tweaks */
  position: relative;
  padding: var(--pad-y, 0.65rem) var(--pad-x, 1rem);
  border-radius: var(--radius);
  color: #00000080;
  cursor: pointer;

  /* single source of truth for the gradient */
  --rainbow: linear-gradient(
    90deg,
    #ff004c,
    #ff8a00,
    #ffee00,
    #00d084,
    #00c2ff,
    #7b61ff,
    #ff4ecd,
    #ff004c
  );

  /* animate the phase */
  animation: rainbow-phase var(--speed) linear infinite;
}

/* 3) Both layers read the SAME background-position from --bgx */
#ai-search-secondary::after,
#ai-search-secondary::before {
  background: var(--rainbow);
  background-size: 300% 100%;
  background-position: var(--bgx) 50%; /* <— shared phase */
  pointer-events: none;
}

/* sharp line (top) */
#ai-search-secondary::after {
  content: "";
  position: absolute;
  left: 12.5%; bottom: 0;
  width: 75%;
  height: var(--underline-thickness);
  border-bottom-right-radius: calc(var(--radius) - 2px);
  z-index: 2;
}

/* blurred glow (under) */
#ai-search-secondary::before {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: var(--glow-thickness);
  filter: blur(6px);
  /* keep your preferred opacity or use a mask if you want pure colors */
  opacity: 0.3;
  z-index: 1;
}

/* one keyframes controls both layers via the custom property */
@keyframes rainbow-phase {
  from { --bgx: 0%; }
  to   { --bgx: 300%; }
}

/* keep your hover speed-up, now applied to the single animation */
#ai-search-secondary:hover,
#ai-search-secondary:focus-visible {
  animation-duration: calc(var(--speed) * 0.5);
}

@media (prefers-reduced-motion: reduce) {
  #ai-search-secondary { animation: none; }
}