/* Silent Bloom Underline — zero-JS, a11y-first (Oct 7, 2026)
   A quiet dotted underline that gently "opens" on focus/hover.
   Honors reduced motion and forced colors; keeps visible focus outlines. */

:root {
  --sbloom-accent: currentColor;
  --sbloom-thin: 1px;
  --sbloom-thick: 3px;
  --sbloom-gap: 2px;
}

/* Base underline utility */
.sbloom-underline {
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--sbloom-accent);
  text-underline-offset: 2px;
  text-decoration-thickness: var(--sbloom-thin);
  transition: text-decoration-thickness .18s ease, text-underline-offset .18s ease;
}

/* Hover/focus: the bloom quietly opens */
.sbloom-underline:where(:hover, :focus-visible) {
  text-decoration-style: solid;
  text-decoration-thickness: var(--sbloom-thick);
  text-underline-offset: 3px;
}

/* Respect prefers-reduced-motion: disable thickness/offset transitions */
@media (prefers-reduced-motion: reduce) {
  .sbloom-underline { transition: none; }
}

/* Forced colors (high contrast): rely on system colors */
@media (forced-colors: active) {
  .sbloom-underline {
    text-decoration-color: CanvasText;
    forced-color-adjust: none;
  }
}

/* Keyboard focus ring remains visible beyond underline change */
.sbloom-underline:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Print: keep it calm and legible */
@media print {
  .sbloom-underline {
    text-decoration-style: solid;
    text-decoration-thickness: var(--sbloom-thin);
  }
}