/* ========================================
   Utilities
   ======================================== */

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

/* --- Skip link --- */
.skip-link {
  position: fixed;
  top: -100%;
  left: var(--space-md);
  z-index: 10000;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-text-primary);
  color: var(--color-bg-primary);
  border-radius: var(--border-radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: var(--space-md);
}

/* --- Spacing utilities --- */
.mt-sm  { margin-top: var(--space-sm); }
.mt-md  { margin-top: var(--space-md); }
.mt-lg  { margin-top: var(--space-lg); }
.mt-xl  { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }
.mt-3xl { margin-top: var(--space-3xl); }

.mb-sm  { margin-bottom: var(--space-sm); }
.mb-md  { margin-bottom: var(--space-md); }
.mb-lg  { margin-bottom: var(--space-lg); }
.mb-xl  { margin-bottom: var(--space-xl); }
.mb-2xl { margin-bottom: var(--space-2xl); }
.mb-3xl { margin-bottom: var(--space-3xl); }

/* --- Max width constraints --- */
.max-w-narrow { max-width: 540px; }
.max-w-medium { max-width: 720px; }

/* --- No scroll (body lock for mobile menu) --- */
.no-scroll {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
}