/* ============================================================================
   UTILITIES & HELPERS
   Generated by: Agent 6 (Utilities & Helpers CSS Generator)
   Cross-component reusable patterns
   ============================================================================ */

/* Shadow Utilities - Standard Elevation System
   ────────────────────────────────────────────────────────────────────────── */

.shadow-xs {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.shadow-sm {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.shadow-base {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
}

.shadow-md {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.shadow-lg {
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.18);
}

.shadow-xl {
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.22);
}

.shadow-none {
  box-shadow: none;
}

/* Shadow Utilities - Contextual Colored Shadows
   ────────────────────────────────────────────────────────────────────────── */

.shadow-navy {
  box-shadow: 0 8px 32px rgba(21, 55, 109, 0.3);
}

.shadow-blue {
  box-shadow: 0 4px 16px rgba(33, 43, 88, 0.4);
}

.shadow-blue-hover {
  box-shadow: 0 6px 24px rgba(33, 43, 88, 0.5);
}

.shadow-white {
  box-shadow: 0 4px 16px rgba(255, 255, 255, 0.3);
}

.shadow-icon {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* Glow Animation (Blue-tinted for Liverpool)
   ────────────────────────────────────────────────────────────────────────── */

@keyframes glow {
  0% {
    box-shadow: 0 0 5px rgba(33, 43, 88, 0.5);
  }
  50% {
    box-shadow: 0 0 20px rgba(33, 43, 88, 0.8);
  }
  100% {
    box-shadow: 0 0 5px rgba(33, 43, 88, 0.5);
  }
}

.glow-animation {
  animation: glow 2s ease-in-out infinite;
}

/* Rotate Animation (Spinner)
   ────────────────────────────────────────────────────────────────────────── */

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.spinner-icon {
  animation: rotate 2s infinite linear;
}

/* Transform Utilities - Hover Effects
   ────────────────────────────────────────────────────────────────────────── */

.hover\:scale-105:hover {
  transform: scale(1.05);
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.hover\:scale-102:hover {
  transform: scale(1.02);
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.hover\:translate-y-2:hover {
  transform: translateY(-2px);
  transition: transform 300ms ease-out;
}

.hover\:translate-x-2:hover {
  transform: translateX(2px);
  transition: transform 200ms ease;
}

.hover\:translate-x-neg-2:hover {
  transform: translateX(-2px);
  transition: transform 200ms ease;
}

.active\:scale-98:active {
  transform: scale(0.98);
  transition: transform 50ms ease;
}

/* Accessibility Helpers - Screen Reader Only
   ────────────────────────────────────────────────────────────────────────── */

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

.sr-only-focusable:active,
.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* Skip Link Pattern (WCAG 2.1.1 Keyboard)
   ────────────────────────────────────────────────────────────────────────── */

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #212b58;
  color: white;
  padding: 8px 16px;
  text-decoration: none;
  z-index: 9999;
  border-radius: 0 0 4px 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
}

.skip-link:focus {
  top: 0;
}

/* Accessibility Helpers - Focus Visible
   ────────────────────────────────────────────────────────────────────────── */

.focus-ring:focus-visible {
  outline: 2px solid #212b58;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(33, 43, 88, 0.15);
}

.focus-ring-white:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.2);
}

/* Utility Classes - Text Color
   ────────────────────────────────────────────────────────────────────────── */

.text-blue {
  color: #212b58;
}

.text-navy {
  color: #15376D;
}

.text-navy-dark {
  color: #0E2447;
}

.text-teal {
  color: #00A689;
}

.text-charcoal {
  color: #333F48;
}

.text-grey {
  color: #8d9695;
}

.text-white {
  color: #FFFFFF;
}

.text-black {
  color: #000000;
}

/* Utility Classes - Background Color
   ────────────────────────────────────────────────────────────────────────── */

.bg-blue {
  background-color: #212b58;
}

.bg-navy {
  background-color: #15376D;
}

.bg-navy-dark {
  background-color: #0E2447;
}

.bg-teal {
  background-color: #00A689;
}

.bg-stone {
  background-color: #DBDBD3;
}

.bg-white {
  background-color: #FFFFFF;
}

/* Utility Classes - Border
   ────────────────────────────────────────────────────────────────────────── */

.border-blue {
  border-color: #212b58;
}

.border-navy {
  border-color: #15376D;
}

.border-teal {
  border-color: #00A689;
}

.border-stone {
  border-color: #DBDBD3;
}

.border-left-blue {
  border-left: 3px solid #212b58;
}

.border-left-accent {
  border-left: 3px solid #212b58;
}

.border-top-accent {
  border-top: 3px solid #212b58;
}

/* Utility Classes - Sizing
   ────────────────────────────────────────────────────────────────────────── */

.h-200px {
  height: 200px;
}

.mw-300px {
  max-width: 300px;
}

.right-0 {
  right: 0;
}

/* Glassmorphism Utilities
   ────────────────────────────────────────────────────────────────────────── */

.backdrop-blur-sm {
  backdrop-filter: blur(10px);
}

.backdrop-blur-md {
  backdrop-filter: blur(20px);
}

.backdrop-blur-lg {
  backdrop-filter: blur(30px);
}

/* Transition Utilities
   ────────────────────────────────────────────────────────────────────────── */

.transition-all {
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.transition-transform {
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.transition-shadow {
  transition: box-shadow 300ms ease-out;
}

.transition-colors {
  transition: background-color 150ms ease, color 150ms ease;
}

.transition-fast {
  transition-duration: 150ms;
}

.transition-slow {
  transition-duration: 500ms;
}

/* Mark Element Reset
   ────────────────────────────────────────────────────────────────────────── */

mark {
  padding: 0;
  background-color: #FFD100;
  color: #000000;
}

/* Overflow Utilities
   ────────────────────────────────────────────────────────────────────────── */

.overflow-hidden {
  overflow: hidden;
}

.overflow-auto {
  overflow: auto;
}

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

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

/* Z-Index Utilities
   ────────────────────────────────────────────────────────────────────────── */

.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;
}

.z-auto {
  z-index: auto;
}

/* Responsive Display Utilities
   ────────────────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  .d-mobile-none {
    display: none !important;
  }

  .d-mobile-block {
    display: block !important;
  }
}

@media (min-width: 768px) {
  .d-desktop-none {
    display: none !important;
  }

  .d-desktop-block {
    display: block !important;
  }
}

/* Print Styles - Optimize for Print Media
   ────────────────────────────────────────────────────────────────────────── */

@media print {
  /* Hide interactive elements */
  .no-print,
  button,
  .btn,
  nav,
  .navigation,
  .sidebar {
    display: none !important;
  }

  /* Show print-only content */
  .print-only {
    display: block !important;
  }

  /* Optimize page breaks */
  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
    page-break-inside: avoid;
  }

  p, li {
    orphans: 3;
    widows: 3;
  }

  /* Ensure text is black for readability */
  body {
    color: #000000;
    background: #FFFFFF;
  }

  /* Expand links to show URLs */
  a[href]:after {
    content: " (" attr(href) ")";
  }

  /* Remove shadows and unnecessary styling */
  * {
    box-shadow: none !important;
    text-shadow: none !important;
  }
}

/* Reduced Motion Support - Respect User Preferences (WCAG 2.3.3)
   ────────────────────────────────────────────────────────────────────────── */

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

  .glow-animation,
  .spinner-icon {
    animation: none !important;
  }
}