/* Critical CSS first for faster loading */
@tailwind base;

/* Performance optimizations */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Load components and utilities after base styles */
@tailwind components;
@tailwind utilities;

:root {
  --background: hsl(0, 0%, 100%);
  --foreground: hsl(20, 14.3%, 4.1%);
  --muted: hsl(60, 4.8%, 95.9%);
  --muted-foreground: hsl(25, 5.3%, 44.7%);
  --popover: hsl(0, 0%, 100%);
  --popover-foreground: hsl(20, 14.3%, 4.1%);
  --card: hsl(0, 0%, 100%);
  --card-foreground: hsl(20, 14.3%, 4.1%);
  --border: hsl(20, 5.9%, 90%);
  --input: hsl(20, 5.9%, 90%);
  --primary: hsl(207, 90%, 54%);
  --primary-foreground: hsl(211, 100%, 99%);
  --secondary: hsl(60, 4.8%, 95.9%);
  --secondary-foreground: hsl(24, 9.8%, 10%);
  --accent: hsl(60, 4.8%, 95.9%);
  --accent-foreground: hsl(24, 9.8%, 10%);
  --destructive: hsl(0, 84.2%, 60.2%);
  --destructive-foreground: hsl(60, 9.1%, 97.8%);
  --ring: hsl(20, 14.3%, 4.1%);
  --radius: 0.5rem;
  
  /* Brand Colors */
  --brand-blue: hsl(213, 78%, 31%);
  --brand-gray: hsl(215, 25%, 27%);
  --brand-orange: hsl(45, 93%, 47%);
  --brand-light: hsl(210, 20%, 98%);
}

.dark {
  --background: hsl(240, 10%, 3.9%);
  --foreground: hsl(0, 0%, 98%);
  --muted: hsl(240, 3.7%, 15.9%);
  --muted-foreground: hsl(240, 5%, 64.9%);
  --popover: hsl(240, 10%, 3.9%);
  --popover-foreground: hsl(0, 0%, 98%);
  --card: hsl(240, 10%, 3.9%);
  --card-foreground: hsl(0, 0%, 98%);
  --border: hsl(240, 3.7%, 15.9%);
  --input: hsl(240, 3.7%, 15.9%);
  --primary: hsl(207, 90%, 54%);
  --primary-foreground: hsl(211, 100%, 99%);
  --secondary: hsl(240, 3.7%, 15.9%);
  --secondary-foreground: hsl(0, 0%, 98%);
  --accent: hsl(240, 3.7%, 15.9%);
  --accent-foreground: hsl(0, 0%, 98%);
  --destructive: hsl(0, 62.8%, 30.6%);
  --destructive-foreground: hsl(0, 0%, 98%);
  --ring: hsl(240, 4.9%, 83.9%);
  --radius: 0.5rem;
}

/* Performance mode - minimal animations only */
.performance-mode * {
  animation: none !important;
  transition: color 0.15s ease !important;
}

/* Critical fade-in only */
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  * { 
    animation: none !important; 
    transition: none !important;
    scroll-behavior: auto !important; 
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply font-sans antialiased bg-background text-foreground;
  }
}

/* Emergency beacon animations moved to animations.css for performance */

/* High contrast accessibility improvements */
.text-white { color: #ffffff !important; }
.text-black { color: #000000 !important; }
.bg-white { background-color: #ffffff !important; }
.bg-black { background-color: #000000 !important; }

/* Focus improvements for better accessibility */
*:focus-visible {
  outline: 3px solid #3b82f6;
  outline-offset: 2px;
}

/* Emergency glow moved to animations.css for performance */

@layer utilities {
  .brand-blue {
    color: var(--brand-blue);
  }
  .bg-brand-blue {
    background-color: var(--brand-blue);
  }
  .brand-gray {
    color: var(--brand-gray);
  }
  .bg-brand-gray {
    background-color: var(--brand-gray);
  }
  .brand-orange {
    color: var(--brand-orange);
  }
  .bg-brand-orange {
    background-color: var(--brand-orange);
  }
  .bg-brand-light {
    background-color: var(--brand-light);
  }
}

.hero-gradient {
  background: linear-gradient(135deg, var(--brand-blue) 0%, hsl(220, 78%, 31%) 100%);
}

/* Image optimization */
img {
  image-rendering: optimizeQuality;
  image-rendering: -webkit-optimize-contrast;
}

.hero-image {
  will-change: transform;
  backface-visibility: hidden;
}

/* Custom Tawk.to Widget Styling */
#tawk-bubble, .tawk-bubble {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  box-shadow: 0 3px 10px rgba(245, 158, 11, 0.4) !important;
  border-radius: 50% !important;
}

#tawk-bubble:hover, .tawk-bubble:hover {
  transform: scale(1.05) !important;
  transition: transform 0.2s ease !important;
}

.tawk-chatbox-frame {
  border-radius: 15px !important;
  box-shadow: 0 5px 20px rgba(30, 64, 175, 0.3) !important;
  border: 2px solid #1e40af !important;
}

.tawk-header {
  background: linear-gradient(135deg, #1e40af, #1d4ed8) !important;
}

/* Enhanced Mobile Optimizations */
@media (max-width: 768px) {
  /* Ensure mobile viewport is respected */
  html {
    width: 100vw;
    overflow-x: hidden;
  }
  
  body {
    width: 100vw;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
  }
  
  /* Prevent horizontal scrolling on mobile */
  * {
    max-width: 100vw;
    box-sizing: border-box;
  }
  
  /* Fix containers that might overflow */
  .container, 
  .max-w-7xl,
  .max-w-6xl,
  .max-w-5xl,
  .max-w-4xl {
    max-width: calc(100vw - 2rem);
    margin: 0 auto;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  /* Mobile-specific container fixes */
  .max-w-7xl {
    max-width: 100vw;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  /* Mobile hero image optimization */
  .hero-image {
    width: 100vw;
    height: 250px;
    object-fit: cover;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    max-width: none;
  }
  
  /* Mobile typography improvements */
  h1 {
    font-size: 1.875rem !important;
    line-height: 2.25rem !important;
  }
  
  h2 {
    font-size: 1.5rem !important;
    line-height: 2rem !important;
  }
  
  /* Mobile navigation improvements */
  .mobile-menu {
    width: 100vw;
    left: 0;
    right: 0;
  }
  
  /* Mobile contact form improvements */
  .contact-form {
    width: 100%;
    padding: 1rem;
  }
  
  /* Mobile button improvements */
  .mobile-cta {
    width: 100%;
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
    word-wrap: break-word;
    hyphens: auto;
  }
  
  /* Mobile text wrapping fixes */
  .mobile-text {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
  }
  
  /* Grid improvements for mobile */
  .grid {
    gap: 1rem;
  }
  
  .grid-cols-1 {
    grid-template-columns: 1fr;
  }
  
  /* Tawk.to mobile responsiveness */
  .tawk-chatbox-frame {
    width: 90% !important;
    height: 70% !important;
    right: 5% !important;
    bottom: 10% !important;
  }
  
  #tawk-bubble, .tawk-bubble {
    width: 50px !important;
    height: 50px !important;
    right: 15px !important;
    bottom: 80px !important; /* Position above mobile emergency bar */
  }
}

/* Additional Performance Optimizations */
.loading-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* WebP support optimization */
.webp .hero-image {
  background-size: cover;
  background-position: center;
}

/* Font optimization for performance */
@font-face {
  font-family: 'Inter-Performance';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiA.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}