/* ==========================================================================
   Nav Link component sheet
   Shared grid/table styles live in sheet.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Nav link — reusable atom
   Self-contained: no dependency on .link-demo from text-link.css.
   -------------------------------------------------------------------------- */
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2xs);
  color: var(--text-link);
  text-decoration: none;
  box-sizing: border-box;
  border: none;
  appearance: none;
  -webkit-appearance: none;
}

.nav-link:hover {
  color: var(--text-link-hover);
}

.nav-link:focus-visible {
  outline: var(--border-width-focus) solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

.nav-link__icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
  fill: currentColor;
}

.nav-link__label {
  font-family: var(--type-family-primary), system-ui, sans-serif;
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line-height);
  text-decoration: none;
  white-space: nowrap;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.nav-link:hover .nav-link__label,
.nav-link:focus-visible .nav-link__label {
  color: var(--text-link-hover);
}

/* --------------------------------------------------------------------------
   Simulated state modifiers — sheet use only
   -------------------------------------------------------------------------- */
.nav-link--hover {
  color: var(--text-link-hover);
}

.nav-link--hover .nav-link__label {
  color: var(--text-link-hover);
}

.nav-link--focus,
.nav-link--focus-hover {
  outline: var(--border-width-focus) solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

.nav-link--focus-hover .nav-link__label {
  color: var(--text-link-hover);
}