/* PDX Medical Supply - Custom Enhancements & Accessibility Styles */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --color-navy-950: #090e17;
  --color-navy-900: #0f172a;
  --color-navy-800: #1e293b;
  --color-navy-700: #334155;
  --color-cyan-600: #0284c7;
  --color-cyan-700: #0369a1;
  --color-teal-600: #0d9488;
  --color-teal-700: #0f766e;
  --color-sterile-50: #f8fafc;
  --color-sterile-100: #f1f5f9;
  --color-sterile-200: #e2e8f0;
}

html {
  scroll-behavior: smooth;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--color-navy-900);
  background-color: var(--color-sterile-50);
}

h1, h2, h3, h4, .font-heading {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Accessibility Focus States (WCAG AA Compliant 3:1 contrast) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2.5px solid #0284c7;
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.25);
}

/* Subtle PNW Mountain/Topographic Pattern in Hero */
.bg-pnw-mesh {
  background-color: #0f172a;
  background-image: 
    radial-gradient(at 15% 10%, rgba(2, 132, 199, 0.18) 0px, transparent 50%),
    radial-gradient(at 85% 90%, rgba(13, 148, 136, 0.15) 0px, transparent 50%),
    radial-gradient(at 50% 50%, rgba(15, 23, 42, 0.95) 0px, transparent 100%);
}

.bg-clinical-grid {
  background-size: 32px 32px;
  background-image: 
    linear-gradient(to right, rgba(226, 232, 240, 0.6) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(226, 232, 240, 0.6) 1px, transparent 1px);
}

/* Glassmorphism Navigation */
.nav-scrolled {
  background-color: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.08);
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}

/* Interactive Card Transitions */
.feature-card {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease;
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px -4px rgba(15, 23, 42, 0.08), 0 6px 12px -2px rgba(15, 23, 42, 0.04);
}

/* Custom Checkbox Pill */
.category-chip input:checked + label {
  background-color: #0284c7;
  color: #ffffff;
  border-color: #0284c7;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.35);
}

/* Pulse animation for live dispatch indicator */
@keyframes pulse-ring {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(13, 148, 136, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 8px rgba(13, 148, 136, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(13, 148, 136, 0);
  }
}

.live-indicator {
  animation: pulse-ring 2s infinite cubic-bezier(0.45, 0, 0.55, 1);
}

/* Screen Reader Only Utility */
.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;
}

/* Reduced Motion Preference */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .feature-card,
  .live-indicator,
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}