/* =============================================================================
   ULTRA-PREMIUM OMNI-DEVICE OPTIMIZATION
   Steve Jobs-level precision for all devices, browsers, and resolutions
   ============================================================================= */

/* =============================================================================
   CORE RENDERING OPTIMIZATION
   ============================================================================= */

/* Force GPU acceleration for smooth animations */
.defendra-cta-hero,
.defendra-cta-header,
button,
a {
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Prevent layout shift during font loading */
@font-face {
  font-display: swap;
}

/* =============================================================================
   RESPONSIVE BREAKPOINT OPTIMIZATION
   ============================================================================= */

/* Mobile First: 320px - 767px */
@media (max-width: 767px) {
  /* Ensure touch targets are at least 44x44px (Apple HIG) */
  button, a, input, select {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Optimize font sizes for mobile readability */
  h1 {
    font-size: clamp(2rem, 8vw, 3rem);
    line-height: 1.1;
  }
  
  h2 {
    font-size: clamp(1.75rem, 6vw, 2.5rem);
    line-height: 1.2;
  }
  
  /* Prevent horizontal scroll */
  body {
    overflow-x: hidden;
  }
  
  /* Optimize CTA buttons for mobile */
  .defendra-cta-hero {
    padding: 1rem 1.5rem;
    font-size: 0.875rem;
  }
}

/* Tablet: 768px - 1023px */
@media (min-width: 768px) and (max-width: 1023px) {
  .container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* Desktop: 1024px - 1439px */
@media (min-width: 1024px) and (max-width: 1439px) {
  .container {
    max-width: 1200px;
  }
}

/* Large Desktop: 1440px+ */
@media (min-width: 1440px) {
  .container {
    max-width: 1400px;
  }
}

/* Ultra-wide: 1920px+ */
@media (min-width: 1920px) {
  .container {
    max-width: 1600px;
  }
}

/* =============================================================================
   BROWSER-SPECIFIC OPTIMIZATIONS
   ============================================================================= */

/* Safari-specific fixes */
@supports (-webkit-appearance: none) {
  button, input, select {
    -webkit-appearance: none;
    appearance: none;
  }
  
  /* Fix Safari's aggressive button styling */
  button {
    border-radius: inherit;
  }
}

/* Firefox-specific optimizations */
@-moz-document url-prefix() {
  * {
    scrollbar-width: thin;
    scrollbar-color: oklch(0.7 0.15 195) oklch(0.15 0.04 260);
  }
}

/* Edge/Chromium optimizations */
@supports (backdrop-filter: blur(10px)) {
  header {
    backdrop-filter: blur(12px) saturate(180%);
  }
}

/* =============================================================================
   HIGH-DPI DISPLAY OPTIMIZATION (Retina, 4K, 5K)
   ============================================================================= */

@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi),
       (min-resolution: 2dppx) {
  /* Sharper borders on high-DPI displays */
  .defendra-cta-hero,
  .defendra-cta-header,
  button,
  input,
  select {
    border-width: 0.5px;
  }
  
  /* Optimize SVG rendering */
  svg {
    shape-rendering: geometricPrecision;
  }
}

/* 4K and above (3840x2160+) */
@media (min-width: 3840px) {
  html {
    font-size: 18px;
  }
}

/* =============================================================================
   OPERATING SYSTEM OPTIMIZATIONS
   ============================================================================= */

/* macOS/iOS specific */
@supports (-webkit-backdrop-filter: blur(10px)) {
  /* Use native macOS blur */
  header {
    -webkit-backdrop-filter: blur(12px) saturate(180%);
  }
}

/* Windows specific */
@media (prefers-contrast: high) {
  /* Enhance contrast for Windows High Contrast mode */
  button, a {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }
}

/* Android specific */
@media (hover: none) and (pointer: coarse) {
  /* Optimize for Android touch */
  button, a {
    -webkit-tap-highlight-color: rgba(0, 217, 255, 0.2);
  }
}

/* =============================================================================
   ORIENTATION OPTIMIZATION
   ============================================================================= */

/* Landscape mobile optimization */
@media (max-height: 500px) and (orientation: landscape) {
  header {
    height: 60px;
  }
  
  h1 {
    font-size: 2rem;
  }
  
  .defendra-cta-hero {
    padding: 0.75rem 1.25rem;
  }
}

/* =============================================================================
   ACCESSIBILITY ENHANCEMENTS
   ============================================================================= */

/* Keyboard navigation focus indicators */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid oklch(0.8 0.18 220);
  outline-offset: 2px;
}

/* Ensure sufficient color contrast */
@media (prefers-contrast: more) {
  body {
    --foreground: oklch(1 0 0);
    --background: oklch(0 0 0);
  }
}

/* Dark mode optimization (if system preference changes) */
@media (prefers-color-scheme: light) {
  /* Maintain dark theme but optimize for ambient light */
  body {
    filter: brightness(1.05);
  }
}

/* =============================================================================
   PERFORMANCE OPTIMIZATIONS
   ============================================================================= */

/* Contain layout recalculations */
section {
  contain: layout style paint;
}

/* Optimize animation performance */
@media (prefers-reduced-motion: no-preference) {
  * {
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
}

/* Optimize image loading */
img {
  content-visibility: auto;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* =============================================================================
   PRINT OPTIMIZATION
   ============================================================================= */

@media print {
  * {
    background: white !important;
    color: black !important;
  }
  
  header, footer {
    position: static;
  }
  
  button, a[href^="http"]::after {
    content: " (" attr(href) ")";
  }
}

/* =============================================================================
   SAFE AREA INSETS (iPhone X+, Android with notch)
   ============================================================================= */

@supports (padding: max(0px)) {
  body {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }
  
  header {
    padding-top: max(0px, env(safe-area-inset-top));
  }
}

/* =============================================================================
   FOLDABLE DEVICE OPTIMIZATION
   ============================================================================= */

@media (horizontal-viewport-segments: 2) {
  .container {
    grid-template-columns: env(viewport-segment-width 0 0) env(viewport-segment-width 1 0);
  }
}