/* ═══════════════════════════════════════════════════════════════════════════
 *                                 BUTTONS
 ═══════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════
 *                               BASE STYLES
 ═══════════════════════════════════════════════════════════════════════════ */
/* #region BASE STYLES */

/* ═══════════════════════════════════════════════════════════════════════════

 *                       Layout, spacing & typography

 ═══════════════════════════════════════════════════════════════════════════ */
.button-link {
  --button-radius: .9rem;
  position: relative;
  display: inline-block;
  padding: 0.8rem 1.15rem;
  border: 1px solid transparent;
  border-radius: var(--button-radius);
  color: var(--NV-Black);
  background:
    linear-gradient(
      color-mix(in srgb, var(--NV-Ivory) 92%, transparent),
      color-mix(in srgb, var(--NV-Gold-200) 85%, transparent)
    ) padding-box;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--NV-Black) 12%, transparent),
    0 2px 5px color-mix(in srgb, var(--NV-Black) 28%, transparent),
    0 0 0 1px color-mix(in srgb, var(--NV-Black) 8%, transparent);
  text-decoration: none;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  overflow: hidden;
  isolation: isolate;
  transition: transform 140ms ease, box-shadow 140ms ease;
}

/* ═══════════════════════════════════════════════════════════════════════════

 *                   Inner highlight overlay (inset glow)

 ═══════════════════════════════════════════════════════════════════════════ */
.button-link::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: color-mix(in srgb, var(--NV-Ivory) 28%, transparent);
  z-index: -2;
}

/* ═══════════════════════════════════════════════════════════════════════════

 *                  Stacks label text above pseudo layers

 ═══════════════════════════════════════════════════════════════════════════ */
.button-link__label {
  position: relative;
  z-index: 1;
}



/* #endregion BASE STYLES */


/* ═══════════════════════════════════════════════════════════════════════════


 *                                  STATES


 ═══════════════════════════════════════════════════════════════════════════ */
/* #region STATES */

/* ═══════════════════════════════════════════════════════════════════════════

 *                          Hover and focus styles

 ═══════════════════════════════════════════════════════════════════════════ */
.button-link:hover,
.button-link:focus-visible {
  transform: translateY(1px);
  box-shadow:
    inset 0 3px 5px color-mix(in srgb, var(--NV-Black) 28%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--NV-Black) 22%, transparent);
}



/* #endregion STATES */


/* ═══════════════════════════════════════════════════════════════════════════


 *                                 VARIANTS


 ═══════════════════════════════════════════════════════════════════════════ */
/* #region VARIANTS */

/* ═══════════════════════════════════════════════════════════════════════════

 *             Ghost variant — transparent with subtle border

 ═══════════════════════════════════════════════════════════════════════════ */
.button-link--ghost {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--NV-Black) 25%, transparent);
  box-shadow: none;
  font-size: 0.8rem;
  padding: 0.55rem 0.9rem;
}

.button-link--ghost::after {
  display: none;
}

.button-link--ghost:hover,
.button-link--ghost:focus-visible {
  background: color-mix(in srgb, var(--NV-Black) 8%, transparent);
  box-shadow: none;
  transform: none;
}

/* ═══════════════════════════════════════════════════════════════════════════

 *     Dark variant — for use on dark backgrounds (gold border/text)

 ═══════════════════════════════════════════════════════════════════════════ */
.button-link--dark {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--NV-Primary) 40%, transparent);
  color: var(--NV-Ivory);
  box-shadow: none;
}

.button-link--dark::after {
  display: none;
}

.button-link--dark:hover,
.button-link--dark:focus-visible {
  background: color-mix(in srgb, var(--NV-Primary) 12%, transparent);
  border-color: var(--NV-Primary);
  color: var(--NV-Primary);
  box-shadow: none;
  transform: none;
}

/* ═══════════════════════════════════════════════════════════════════════════

 *     Gold variant — solid gold fill for primary actions on dark bg

 ═══════════════════════════════════════════════════════════════════════════ */
.button-link--gold {
  background: var(--NV-Primary);
  border: 1px solid var(--NV-Primary);
  color: var(--NV-Black);
  box-shadow: none;
}

.button-link--gold::after {
  display: none;
}

.button-link--gold:hover,
.button-link--gold:focus-visible {
  background: color-mix(in srgb, var(--NV-Primary) 80%, var(--NV-Ivory));
  border-color: color-mix(in srgb, var(--NV-Primary) 80%, var(--NV-Ivory));
  color: var(--NV-Black);
  box-shadow: none;
  transform: none;
}

/* #endregion VARIANTS */


/* ═══════════════════════════════════════════════════════════════════════════


 *                              ACCESSIBILITY


 ═══════════════════════════════════════════════════════════════════════════ */
/* #region ACCESSIBILITY */

/* ═══════════════════════════════════════════════════════════════════════════

 *            Disables animations for reduced-motion preference

 ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .button-link::after {
    animation: none;
  }
}



/* #endregion ACCESSIBILITY */