/**
 * utilities.css - Utility classes and animations for D&H Engraving website
 * 
 * Purpose: Define helper classes, animations, and utility styles
 * Dependencies: base.css (for CSS variables)
 * 
 * Contents:
 * 1. Animations
 * 2. Visibility Utilities
 * 3. Text Utilities
 * 4. Spacing Utilities
 * 5. Accessibility
 * 
 * Utility classes for quick styling adjustments
 */

/* ============================================
   1. ANIMATIONS
   ============================================ */

/* Fade in animation for smooth content appearance */
@keyframes fadeIn {
  from {
    opacity: 0; /* Start invisible */
    transform: translateY(-0.625rem); /* Start 10px higher */
  }
  to {
    opacity: 1; /* End fully visible */
    transform: translateY(0); /* End at normal position */
  }
}

/* Logo scroll animation removed - now handled by JavaScript */
/* This provides better control and true seamless scrolling */

/* Pulse animation for attention-grabbing elements */
@keyframes pulse {
  0% {
    transform: scale(1); /* Normal size */
  }
  50% {
    transform: scale(1.05); /* Slightly larger */
  }
  100% {
    transform: scale(1); /* Back to normal */
  }
}

/* Slide in from left animation */
@keyframes slideInLeft {
  from {
    transform: translateX(-100%); /* Start off-screen left */
    opacity: 0; /* Start invisible */
  }
  to {
    transform: translateX(0); /* End at normal position */
    opacity: 1; /* End visible */
  }
}

/* Slide in from right animation */
@keyframes slideInRight {
  from {
    transform: translateX(100%); /* Start off-screen right */
    opacity: 0; /* Start invisible */
  }
  to {
    transform: translateX(0); /* End at normal position */
    opacity: 1; /* End visible */
  }
}

/* ============================================
   2. VISIBILITY UTILITIES
   ============================================ */

/* Hide element completely */
.hidden {
  display: none !important; /* Force hide */
}

/* Make element invisible but keep space */
.invisible {
  visibility: hidden !important; /* Hide but maintain layout */
}

/* Show element */
.visible {
  visibility: visible !important; /* Force visible */
}

/* Screen reader only - hide visually but keep for accessibility */
.sr-only {
  position: absolute !important; /* Remove from flow */
  width: 1px !important; /* Minimal width */
  height: 1px !important; /* Minimal height */
  padding: 0 !important; /* No padding */
  margin: -1px !important; /* Hide with negative margin */
  overflow: hidden !important; /* Hide overflow */
  clip: rect(0, 0, 0, 0) !important; /* Clip to nothing */
  white-space: nowrap !important; /* Don't wrap */
  border: 0 !important; /* No border */
}

/* Screen reader only but focusable */
.sr-only-focusable:active,
.sr-only-focusable:focus {
  position: static !important; /* Return to normal flow */
  width: auto !important; /* Normal width */
  height: auto !important; /* Normal height */
  margin: 0 !important; /* Normal margin */
  overflow: visible !important; /* Show overflow */
  clip: auto !important; /* Don't clip */
  white-space: normal !important; /* Normal wrapping */
}

/* ============================================
   3. TEXT UTILITIES
   ============================================ */

/* Text alignment */
.text-left {
  text-align: left !important; /* Align left */
}

.text-center {
  text-align: center !important; /* Center align */
}

.text-right {
  text-align: right !important; /* Align right */
}

.text-justify {
  text-align: justify !important; /* Justify text */
}

/* Text transform */
.uppercase {
  text-transform: uppercase !important; /* UPPERCASE TEXT */
}

.lowercase {
  text-transform: lowercase !important; /* lowercase text */
}

.capitalize {
  text-transform: capitalize !important; /* Capitalize First Letters */
}

/* Font weight */
.font-normal {
  font-weight: var(--font-weight-normal) !important; /* Normal weight */
}

.font-medium {
  font-weight: var(--font-weight-medium) !important; /* Medium weight */
}

.font-semibold {
  font-weight: var(--font-weight-semibold) !important; /* Semi-bold */
}

.font-bold {
  font-weight: var(--font-weight-bold) !important; /* Bold */
}

/* Text color utilities */
.text-primary {
  color: var(--color-primary) !important; /* Brand blue */
}

.text-secondary {
  color: var(--color-text-secondary) !important; /* Gray */
}

.text-muted {
  color: var(--color-text-muted) !important; /* Muted gray */
}

.text-white {
  color: white !important; /* White text */
}

.text-black {
  color: black !important; /* Black text */
}

/* Text size utilities */
.text-xs {
  font-size: var(--font-size-xs) !important; /* Extra small */
}

.text-sm {
  font-size: var(--font-size-sm) !important; /* Small */
}

.text-base {
  font-size: var(--font-size-base) !important; /* Base size */
}

.text-lg {
  font-size: var(--font-size-lg) !important; /* Large */
}

.text-xl {
  font-size: var(--font-size-xl) !important; /* Extra large */
}

.text-2xl {
  font-size: var(--font-size-2xl) !important; /* 2X large */
}

.text-3xl {
  font-size: var(--font-size-3xl) !important; /* 3X large */
}

/* Line height utilities */
.leading-tight {
  line-height: var(--line-height-tight) !important; /* Tight spacing */
}

.leading-normal {
  line-height: var(--line-height-base) !important; /* Normal spacing */
}

.leading-relaxed {
  line-height: var(--line-height-relaxed) !important; /* Relaxed spacing */
}

/* Text decoration */
.no-underline {
  text-decoration: none !important; /* Remove underline */
}

.underline {
  text-decoration: underline !important; /* Add underline */
}

.line-through {
  text-decoration: line-through !important; /* Strike through */
}

/* ============================================
   4. SPACING UTILITIES
   ============================================ */

/* Margin utilities - all sides */
.m-0 { margin: 0 !important; }
.m-xs { margin: var(--spacing-xs) !important; }
.m-sm { margin: var(--spacing-sm) !important; }
.m-md { margin: var(--spacing-md) !important; }
.m-lg { margin: var(--spacing-lg) !important; }
.m-xl { margin: var(--spacing-xl) !important; }
.m-2xl { margin: var(--spacing-2xl) !important; }
.m-3xl { margin: var(--spacing-3xl) !important; }
.m-auto { margin: auto !important; }

/* Margin top */
.mt-0 { margin-top: 0 !important; }
.mt-xs { margin-top: var(--spacing-xs) !important; }
.mt-sm { margin-top: var(--spacing-sm) !important; }
.mt-md { margin-top: var(--spacing-md) !important; }
.mt-lg { margin-top: var(--spacing-lg) !important; }
.mt-xl { margin-top: var(--spacing-xl) !important; }
.mt-2xl { margin-top: var(--spacing-2xl) !important; }
.mt-3xl { margin-top: var(--spacing-3xl) !important; }
.mt-auto { margin-top: auto !important; }

/* Margin right */
.mr-0 { margin-right: 0 !important; }
.mr-xs { margin-right: var(--spacing-xs) !important; }
.mr-sm { margin-right: var(--spacing-sm) !important; }
.mr-md { margin-right: var(--spacing-md) !important; }
.mr-lg { margin-right: var(--spacing-lg) !important; }
.mr-xl { margin-right: var(--spacing-xl) !important; }
.mr-2xl { margin-right: var(--spacing-2xl) !important; }
.mr-3xl { margin-right: var(--spacing-3xl) !important; }
.mr-auto { margin-right: auto !important; }

/* Margin bottom */
.mb-0 { margin-bottom: 0 !important; }
.mb-xs { margin-bottom: var(--spacing-xs) !important; }
.mb-sm { margin-bottom: var(--spacing-sm) !important; }
.mb-md { margin-bottom: var(--spacing-md) !important; }
.mb-lg { margin-bottom: var(--spacing-lg) !important; }
.mb-xl { margin-bottom: var(--spacing-xl) !important; }
.mb-2xl { margin-bottom: var(--spacing-2xl) !important; }
.mb-3xl { margin-bottom: var(--spacing-3xl) !important; }
.mb-auto { margin-bottom: auto !important; }

/* Margin left */
.ml-0 { margin-left: 0 !important; }
.ml-xs { margin-left: var(--spacing-xs) !important; }
.ml-sm { margin-left: var(--spacing-sm) !important; }
.ml-md { margin-left: var(--spacing-md) !important; }
.ml-lg { margin-left: var(--spacing-lg) !important; }
.ml-xl { margin-left: var(--spacing-xl) !important; }
.ml-2xl { margin-left: var(--spacing-2xl) !important; }
.ml-3xl { margin-left: var(--spacing-3xl) !important; }
.ml-auto { margin-left: auto !important; }

/* Margin horizontal (left and right) */
.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.mx-xs { margin-left: var(--spacing-xs) !important; margin-right: var(--spacing-xs) !important; }
.mx-sm { margin-left: var(--spacing-sm) !important; margin-right: var(--spacing-sm) !important; }
.mx-md { margin-left: var(--spacing-md) !important; margin-right: var(--spacing-md) !important; }
.mx-lg { margin-left: var(--spacing-lg) !important; margin-right: var(--spacing-lg) !important; }
.mx-xl { margin-left: var(--spacing-xl) !important; margin-right: var(--spacing-xl) !important; }
.mx-2xl { margin-left: var(--spacing-2xl) !important; margin-right: var(--spacing-2xl) !important; }
.mx-3xl { margin-left: var(--spacing-3xl) !important; margin-right: var(--spacing-3xl) !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }

/* Margin vertical (top and bottom) */
.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-xs { margin-top: var(--spacing-xs) !important; margin-bottom: var(--spacing-xs) !important; }
.my-sm { margin-top: var(--spacing-sm) !important; margin-bottom: var(--spacing-sm) !important; }
.my-md { margin-top: var(--spacing-md) !important; margin-bottom: var(--spacing-md) !important; }
.my-lg { margin-top: var(--spacing-lg) !important; margin-bottom: var(--spacing-lg) !important; }
.my-xl { margin-top: var(--spacing-xl) !important; margin-bottom: var(--spacing-xl) !important; }
.my-2xl { margin-top: var(--spacing-2xl) !important; margin-bottom: var(--spacing-2xl) !important; }
.my-3xl { margin-top: var(--spacing-3xl) !important; margin-bottom: var(--spacing-3xl) !important; }
.my-auto { margin-top: auto !important; margin-bottom: auto !important; }

/* Padding utilities - all sides */
.p-0 { padding: 0 !important; }
.p-xs { padding: var(--spacing-xs) !important; }
.p-sm { padding: var(--spacing-sm) !important; }
.p-md { padding: var(--spacing-md) !important; }
.p-lg { padding: var(--spacing-lg) !important; }
.p-xl { padding: var(--spacing-xl) !important; }
.p-2xl { padding: var(--spacing-2xl) !important; }
.p-3xl { padding: var(--spacing-3xl) !important; }

/* Padding top */
.pt-0 { padding-top: 0 !important; }
.pt-xs { padding-top: var(--spacing-xs) !important; }
.pt-sm { padding-top: var(--spacing-sm) !important; }
.pt-md { padding-top: var(--spacing-md) !important; }
.pt-lg { padding-top: var(--spacing-lg) !important; }
.pt-xl { padding-top: var(--spacing-xl) !important; }
.pt-2xl { padding-top: var(--spacing-2xl) !important; }
.pt-3xl { padding-top: var(--spacing-3xl) !important; }

/* Padding right */
.pr-0 { padding-right: 0 !important; }
.pr-xs { padding-right: var(--spacing-xs) !important; }
.pr-sm { padding-right: var(--spacing-sm) !important; }
.pr-md { padding-right: var(--spacing-md) !important; }
.pr-lg { padding-right: var(--spacing-lg) !important; }
.pr-xl { padding-right: var(--spacing-xl) !important; }
.pr-2xl { padding-right: var(--spacing-2xl) !important; }
.pr-3xl { padding-right: var(--spacing-3xl) !important; }

/* Padding bottom */
.pb-0 { padding-bottom: 0 !important; }
.pb-xs { padding-bottom: var(--spacing-xs) !important; }
.pb-sm { padding-bottom: var(--spacing-sm) !important; }
.pb-md { padding-bottom: var(--spacing-md) !important; }
.pb-lg { padding-bottom: var(--spacing-lg) !important; }
.pb-xl { padding-bottom: var(--spacing-xl) !important; }
.pb-2xl { padding-bottom: var(--spacing-2xl) !important; }
.pb-3xl { padding-bottom: var(--spacing-3xl) !important; }

/* Padding left */
.pl-0 { padding-left: 0 !important; }
.pl-xs { padding-left: var(--spacing-xs) !important; }
.pl-sm { padding-left: var(--spacing-sm) !important; }
.pl-md { padding-left: var(--spacing-md) !important; }
.pl-lg { padding-left: var(--spacing-lg) !important; }
.pl-xl { padding-left: var(--spacing-xl) !important; }
.pl-2xl { padding-left: var(--spacing-2xl) !important; }
.pl-3xl { padding-left: var(--spacing-3xl) !important; }

/* Padding horizontal (left and right) */
.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-xs { padding-left: var(--spacing-xs) !important; padding-right: var(--spacing-xs) !important; }
.px-sm { padding-left: var(--spacing-sm) !important; padding-right: var(--spacing-sm) !important; }
.px-md { padding-left: var(--spacing-md) !important; padding-right: var(--spacing-md) !important; }
.px-lg { padding-left: var(--spacing-lg) !important; padding-right: var(--spacing-lg) !important; }
.px-xl { padding-left: var(--spacing-xl) !important; padding-right: var(--spacing-xl) !important; }
.px-2xl { padding-left: var(--spacing-2xl) !important; padding-right: var(--spacing-2xl) !important; }
.px-3xl { padding-left: var(--spacing-3xl) !important; padding-right: var(--spacing-3xl) !important; }

/* Padding vertical (top and bottom) */
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-xs { padding-top: var(--spacing-xs) !important; padding-bottom: var(--spacing-xs) !important; }
.py-sm { padding-top: var(--spacing-sm) !important; padding-bottom: var(--spacing-sm) !important; }
.py-md { padding-top: var(--spacing-md) !important; padding-bottom: var(--spacing-md) !important; }
.py-lg { padding-top: var(--spacing-lg) !important; padding-bottom: var(--spacing-lg) !important; }
.py-xl { padding-top: var(--spacing-xl) !important; padding-bottom: var(--spacing-xl) !important; }
.py-2xl { padding-top: var(--spacing-2xl) !important; padding-bottom: var(--spacing-2xl) !important; }
.py-3xl { padding-top: var(--spacing-3xl) !important; padding-bottom: var(--spacing-3xl) !important; }

/* ============================================
   5. ACCESSIBILITY
   ============================================ */

/* Focus visible for keyboard navigation */
.focus-visible:focus {
  outline: 0.125rem solid var(--color-primary) !important; /* 2px blue outline */
  outline-offset: 0.125rem !important; /* 2px offset */
}

/* Skip to main content link */
.skip-to-main {
  position: absolute; /* Position off-screen */
  left: -9999px; /* Move far left */
  z-index: 999; /* High z-index */
  padding: var(--spacing-md) var(--spacing-lg); /* Padding when visible */
  background-color: var(--color-primary); /* Brand blue background */
  color: white; /* White text */
  text-decoration: none; /* No underline */
  border-radius: var(--radius-sm); /* Rounded corners */
}

/* Show skip link when focused */
.skip-to-main:focus {
  position: absolute; /* Keep absolute */
  left: 50%; /* Center horizontally */
  top: 0; /* Position at top */
  transform: translateX(-50%); /* Perfect center */
  outline: 0.125rem solid white; /* White outline */
  outline-offset: 0.125rem; /* Offset */
}

/* Reduced motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *, /* All elements */
  *::before, /* Pseudo elements */
  *::after { /* Pseudo elements */
    animation-duration: 0.01ms !important; /* Near instant animations */
    animation-iteration-count: 1 !important; /* Single iteration */
    transition-duration: 0.01ms !important; /* Near instant transitions */
    scroll-behavior: auto !important; /* No smooth scrolling */
  }
}

/* High contrast mode adjustments */
@media (prefers-contrast: high) {
  * {
    border-width: 0.125rem !important; /* Thicker borders */
  }
  
  a {
    text-decoration: underline !important; /* Always show underlines */
  }
  
  .cta-button,
  .order-button,
  .btn-review {
    border: 0.125rem solid currentColor !important; /* Visible borders */
  }
}

/* Dark mode support (future enhancement) */
@media (prefers-color-scheme: dark) {
  /* Dark mode variables can be defined here when ready */
  /* Currently not implemented but structure is in place */
}