/* =============================================================================
   UTILITIES.CSS
   Single-Purpose Helper Classes for Caparros UI
   ============================================================================= */

/* -----------------------------------------------------------------------------
   DISPLAY UTILITIES
----------------------------------------------------------------------------- */

.u-hidden {
  display: none !important;
}

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

.u-block {
  display: block !important;
}

.u-flex {
  display: flex !important;
}

.u-grid {
  display: grid !important;
}

/* -----------------------------------------------------------------------------
   TEXT ALIGNMENT
----------------------------------------------------------------------------- */

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

/* -----------------------------------------------------------------------------
   TEXT TRANSFORMS
----------------------------------------------------------------------------- */

.u-uppercase  { text-transform: uppercase; }
.u-lowercase  { text-transform: lowercase; }
.u-capitalize { text-transform: capitalize; }

/* -----------------------------------------------------------------------------
   FONT FAMILIES
----------------------------------------------------------------------------- */

.u-font-serif { font-family: var(--font-serif); }
.u-font-sans  { font-family: var(--font-sans); }

/* -----------------------------------------------------------------------------
   OVERFLOW
----------------------------------------------------------------------------- */

.u-overflow-hidden  { overflow: hidden; }
.u-overflow-x-hidden { overflow-x: hidden; }

/* -----------------------------------------------------------------------------
   POINTER EVENTS
----------------------------------------------------------------------------- */

.u-pointer-events-none { pointer-events: none; }
.u-pointer-events-auto { pointer-events: auto; }

/* -----------------------------------------------------------------------------
   POSITION HELPERS
----------------------------------------------------------------------------- */

.u-relative { position: relative; }
.u-absolute { position: absolute; }

/* -----------------------------------------------------------------------------
   WIDTH HELPERS
----------------------------------------------------------------------------- */

.u-w-full  { width: 100%; }
.u-h-full  { height: 100%; }
.u-max-w-narrow { max-width: 700px; }

/* -----------------------------------------------------------------------------
   SPACING MARGIN TOP UTILITIES
----------------------------------------------------------------------------- */

.u-mt-0  { margin-top: 0; }
.u-mt-4  { margin-top: var(--space-4); }
.u-mt-8  { margin-top: var(--space-8); }
.u-mt-12 { margin-top: var(--space-12); }
.u-mt-16 { margin-top: var(--space-16); }

/* -----------------------------------------------------------------------------
   NO ANIMATION (for users with reduced motion preference)
----------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .no-motion-animation {
    animation: none !important;
    transition: none !important;
  }
}