/**
 * Utility Classes
 * Single-purpose helper classes for common patterns
 */

/* ==========================================================================
   DISPLAY UTILITIES
   ========================================================================== */

.block { display: block; }
.inline-block { display: inline-block; }
.inline { display: inline; }
.hidden { display: none; }

/* Responsive display */
@media (max-width: 639px) {
  .hidden-mobile { display: none; }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .hidden-tablet { display: none; }
}

@media (min-width: 1024px) {
  .hidden-desktop { display: none; }
}

@media (max-width: 1023px) {
  .hidden-until-desktop { display: none; }
}

@media (min-width: 640px) {
  .hidden-from-tablet { display: none; }
}

/* ==========================================================================
   WIDTH UTILITIES
   ========================================================================== */

.w-full { width: 100%; }
.w-auto { width: auto; }
.max-w-none { max-width: none; }
.max-w-prose { max-width: var(--container-text); }
.max-w-narrow { max-width: var(--container-narrow); }
.max-w-content { max-width: var(--container-content); }

/* ==========================================================================
   HEIGHT UTILITIES
   ========================================================================== */

.h-full { height: 100%; }
.h-screen { height: 100vh; }
.min-h-screen { min-height: 100vh; }

/* ==========================================================================
   OVERFLOW UTILITIES
   ========================================================================== */

.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-y-auto { overflow-y: auto; }

/* ==========================================================================
   BACKGROUND UTILITIES
   ========================================================================== */

.bg-transparent { background-color: transparent; }
.bg-white { background-color: var(--color-white); }
.bg-neutral-50 { background-color: var(--color-neutral-50); }
.bg-neutral-100 { background-color: var(--color-neutral-100); }
.bg-neutral-800 { background-color: var(--color-neutral-800); }
.bg-neutral-900 { background-color: var(--color-neutral-900); }
.bg-accent { background-color: var(--color-accent); }
.bg-accent-light { background-color: var(--color-accent-light); }

/* ==========================================================================
   BORDER UTILITIES
   ========================================================================== */

.border { border: 1px solid var(--color-neutral-300); }
.border-0 { border: none; }
.border-t { border-top: 1px solid var(--color-neutral-300); }
.border-b { border-bottom: 1px solid var(--color-neutral-300); }

.border-neutral-200 { border-color: var(--color-neutral-200); }
.border-neutral-300 { border-color: var(--color-neutral-300); }
.border-accent { border-color: var(--color-accent); }

.rounded { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }

/* ==========================================================================
   SHADOW UTILITIES
   ========================================================================== */

.shadow-none { box-shadow: none; }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

/* ==========================================================================
   OPACITY UTILITIES
   ========================================================================== */

.opacity-0 { opacity: 0; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/* ==========================================================================
   CURSOR UTILITIES
   ========================================================================== */

.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }
.cursor-not-allowed { cursor: not-allowed; }

/* ==========================================================================
   POINTER EVENTS
   ========================================================================== */

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

/* ==========================================================================
   USER SELECT
   ========================================================================== */

.select-none { user-select: none; }
.select-text { user-select: text; }
.select-all { user-select: all; }

/* ==========================================================================
   LIST UTILITIES
   ========================================================================== */

.list-none { list-style: none; }
.list-disc { list-style-type: disc; }
.list-decimal { list-style-type: decimal; }

/* ==========================================================================
   Z-INDEX UTILITIES
   ========================================================================== */

.z-0 { z-index: var(--z-base); }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }

/* ==========================================================================
   TRANSITION UTILITIES
   ========================================================================== */

.transition-none { transition: none; }
.transition { transition: all var(--transition-base); }
.transition-fast { transition: all var(--transition-fast); }
.transition-slow { transition: all var(--transition-slow); }

/* ==========================================================================
   TRANSFORM UTILITIES
   ========================================================================== */

.translate-y-0 { transform: translateY(0); }
.translate-y-1 { transform: translateY(-1px); }
.-translate-y-1 { transform: translateY(1px); }

/* ==========================================================================
   ASPECT RATIO UTILITIES
   ========================================================================== */

.aspect-square { aspect-ratio: 1 / 1; }
.aspect-video { aspect-ratio: 16 / 9; }
.aspect-auto { aspect-ratio: auto; }

/* ==========================================================================
   OBJECT FIT UTILITIES
   ========================================================================== */

.object-cover { object-fit: cover; }
.object-contain { object-fit: contain; }
.object-fill { object-fit: fill; }
.object-center { object-position: center; }

/* ==========================================================================
   ACCESSIBILITY UTILITIES
   ========================================================================== */

/* Screen reader only - hide visually but keep accessible */
.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;
}

/* Not screen reader only - undo sr-only */
.not-sr-only {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* Focus visible only */
.focus-visible:focus:not(:focus-visible) {
  outline: none;
}

/* ==========================================================================
   PRINT UTILITIES
   ========================================================================== */

@media print {
  .print-hidden { display: none !important; }
  .print-block { display: block !important; }
}

/* ==========================================================================
   BODY SCROLL LOCK
   Used when mobile menu is open
   ========================================================================== */

body.scroll-locked {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
}

/* ==========================================================================
   REDUCED MOTION SAFE ANIMATIONS
   Only animate when user hasn't requested reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  .motion-safe\:animate-bounce {
    animation: bounce 2s infinite;
  }

  .motion-safe\:transition {
    transition: all var(--transition-base);
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-reduce\:transition-none {
    transition: none;
  }
}