/* =========================================================
   Utilities (safe: no visual changes unless used)
========================================================= */

/* screen reader only */
.u-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* prevent layout shift for images */
.u-img-fluid {
  max-width: 100%;
  height: auto;
  display: block;
}

/* simple stack spacing (use carefully) */
.u-stack > * + * {
  margin-top: 12px;
}

/* shared hover baseline for clickable UI (button-like + card-like anchors) */
:where(
  button,
  [role="button"],
  a[class*="btn"],
  a[class*="button"],
  a[class*="cta"],
  a[class*="card"],
  a[class*="item"],
  a[class*="thumb"],
  a[class*="media"],
  a[class*="photo"]
) {
  transition: border-color 0.12s ease, background 0.12s ease, transform 0.12s ease;
}

:where(
  button,
  [role="button"],
  a[class*="btn"],
  a[class*="button"],
  a[class*="cta"],
  a[class*="card"],
  a[class*="item"],
  a[class*="thumb"],
  a[class*="media"],
  a[class*="photo"]
):where(:not([disabled])):where(:not(.is-disabled)):hover {
  border-color: rgba(0, 194, 255, 0.45);
  background: var(--nfu-primary);
  transform: translateY(-1px);
}