/* =============================================================================
   utilities.css — Single-purpose helpers
   Rule: one class = one job. No visual appearance, only structural or
   accessibility concerns. Add new utilities here only when the same pattern
   is needed in three or more places across the project.
   ============================================================================= */

/* ─── Accessibility ──────────────────────────────────────────────────────────
   .sr-only hides content from the visual layout while keeping it readable by
   screen readers and other assistive technology. */

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

/* Native hidden attribute — honour it consistently across browsers */
[hidden] {
  display: none !important;
}

/* ─── Visibility ─────────────────────────────────────────────────────────────
   Use .visually-hidden when content must be invisible but still occupy space
   (e.g. keeping layout stable while hiding text). */

.visually-hidden {
  visibility: hidden;
}

/* ─── Text alignment ─────────────────────────────────────────────────────────
   Keep these to a minimum — prefer component-level alignment over global utils. */

.text-center { text-align: center; }
.text-left   { text-align: left; }

/* ─── Spacing ────────────────────────────────────────────────────────────────
   Intentionally minimal. Use the --nexus-section-gap token for section rhythm;
   use component padding for everything else. Only add a spacing util here if
   you find yourself inlining margin/padding in three or more unrelated places. */

.mt-0  { margin-top: 0; }
.mb-0  { margin-bottom: 0; }

/* ─── Flex composition ───────────────────────────────────────────────────────
   .stack and .cluster are the only layout compositions defined here.
   .stack  — vertical flex column. Gap controlled via --stack-gap or inline style.
   .cluster — horizontal flex row that wraps. Gap controlled via --cluster-gap. */

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap, 1rem);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cluster-gap, 0.75rem);
}

/* ─── Reduced motion ─────────────────────────────────────────────────────────
   Disables CSS transitions and animations when the user has requested reduced
   motion. JS-driven animations (GSAP) handle this independently via the
   prefers-reduced-motion media query check in each module. */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}