/* =========================================================
   MIRACLE LIQUORS – LINKS v1.0
   Design System

   Rollen:
   - inline link      = link in lopende tekst
   - text link        = zelfstandige tertiaire actie
   - quiet link       = subtiele ondersteunende link
   - inverse link     = link op donkere achtergrond

   Vereist:
   - variables.css
   - typography.css
   ========================================================= */


/* =========================================================
   1. INLINE LINKS BINNEN DESIGN-SYSTEM CONTENT
   ========================================================= */

.ml-page :where(p, li, blockquote) a:not(.ml-button):not(.ml-text-link) {
  color: var(--ml-color-primary);
  text-decoration-line: underline;
  text-decoration-color: color-mix(
    in srgb,
    var(--ml-color-primary) 42%,
    transparent
  );
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition:
    color var(--ml-transition-interactive),
    text-decoration-color var(--ml-transition-interactive);
}

.ml-page :where(p, li, blockquote) a:not(.ml-button):not(.ml-text-link):hover {
  color: var(--ml-color-primary-hover);
  text-decoration-color: currentColor;
}

.ml-page :where(p, li, blockquote) a:not(.ml-button):not(.ml-text-link):focus-visible {
  outline: var(--ml-border-width-medium) solid var(--ml-color-accent);
  outline-offset: var(--ml-space-004);
  border-radius: var(--ml-radius-subtle);
}


/* =========================================================
   2. STANDALONE TEXT LINK
   Voor tertiary acties: "Ontdek meer →"
   ========================================================= */

.ml-text-link {
  display: inline-flex;
  width: fit-content;
  min-height: var(--ml-touch-target-min);
  align-items: center;
  gap: var(--ml-space-008);

  color: var(--ml-color-primary);
  font-family: var(--ml-font-ui);
  font-size: var(--ml-text-ui);
  font-weight: var(--ml-font-weight-semibold);
  line-height: var(--ml-leading-ui);
  letter-spacing: var(--ml-tracking-ui);
  text-decoration: none !important;

  transition:
    color var(--ml-transition-interactive),
    gap var(--ml-transition-interactive);
}

.ml-text-link:hover {
  gap: var(--ml-space-012);
  color: var(--ml-color-primary-hover);
  text-decoration: none !important;
}

.ml-text-link:focus-visible {
  outline: var(--ml-border-width-medium) solid var(--ml-color-accent);
  outline-offset: var(--ml-space-004);
  border-radius: var(--ml-radius-subtle);
}


/* =========================================================
   3. LINK ICON
   ========================================================= */

.ml-text-link__icon {
  display: inline-flex;
  width: var(--ml-icon-sm);
  height: var(--ml-icon-sm);
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}

.ml-text-link__icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}


/* =========================================================
   4. UNDERLINE VARIANT
   Voor zelfstandige links die duidelijker als link moeten lezen.
   ========================================================= */

.ml-text-link--underline {
  min-height: 0;
  gap: var(--ml-space-004);
  text-decoration-line: underline !important;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.ml-text-link--underline:hover {
  gap: var(--ml-space-004);
}


/* =========================================================
   5. QUIET
   ========================================================= */

.ml-text-link--quiet {
  color: var(--ml-color-text-muted);
}

.ml-text-link--quiet:hover {
  color: var(--ml-color-primary);
}


/* =========================================================
   6. ACCENT
   Schaars gebruiken.
   ========================================================= */

.ml-text-link--accent {
  color: var(--ml-gold-700);
}

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


/* =========================================================
   7. INVERSE
   ========================================================= */

.ml-text-link--inverse {
  color: var(--ml-color-text-inverse);
}

.ml-text-link--inverse:hover {
  color: var(--ml-color-accent-soft);
}

.ml-type--inverse
:where(p, li, blockquote)
a:not(.ml-button):not(.ml-text-link) {
  color: var(--ml-color-text-inverse);
  text-decoration-color: rgba(255, 255, 255, 0.48);
}

.ml-type--inverse
:where(p, li, blockquote)
a:not(.ml-button):not(.ml-text-link):hover {
  color: var(--ml-color-accent-soft);
  text-decoration-color: currentColor;
}


/* =========================================================
   8. EXTERNAL LINK
   Icoon wordt via HTML toegevoegd; geen gegenereerde content.
   ========================================================= */

.ml-text-link--external .ml-text-link__icon {
  width: 14px;
  height: 14px;
}


/* =========================================================
   9. DISABLED
   ========================================================= */

.ml-text-link[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: var(--ml-opacity-disabled);
  pointer-events: none;
}


/* =========================================================
   10. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .ml-text-link,
  .ml-page :where(p, li, blockquote) a {
    transition: none;
  }

  .ml-text-link:hover {
    gap: var(--ml-space-008);
  }

  .ml-text-link--underline:hover {
    gap: var(--ml-space-004);
  }
}