@tailwind base;
@tailwind components;
@tailwind utilities;

/* French Typography & Emergency Service Optimizations */

/* Custom properties for consistent branding */
:root {
  --color-primary: 220 38 38; /* Red-600 for emergency services */
  --color-secondary: 31 41 55; /* Gray-800 for text */
  --color-accent: 34 197 94; /* Green-500 for success/trust */
  --color-warning: 245 158 11; /* Amber-500 for urgency */
}

/* Base typography optimized for French content */
body {
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* French punctuation spacing (guillemets, etc.) */
.french-spacing {
  /* Ensure proper spacing before punctuation marks */
}

.french-spacing::before {
  content: '\00A0'; /* Non-breaking space */
}

/* High-contrast emergency CTA styles */
.emergency-cta {
  background: linear-gradient(135deg, rgb(220 38 38) 0%, rgb(185 28 28) 100%);
  box-shadow: 0 4px 14px 0 rgba(220, 38, 38, 0.25);
  transition: all 0.2s ease-in-out;
}

.emergency-cta:hover {
  background: linear-gradient(135deg, rgb(185 28 28) 0%, rgb(153 27 27) 100%);
  box-shadow: 0 6px 20px 0 rgba(220, 38, 38, 0.35);
  transform: translateY(-2px);
}

/* Pulse animation for emergency indicators */
@keyframes emergency-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.05);
  }
}

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

/* Trust indicators styling */
.trust-badge {
  background: linear-gradient(135deg, rgb(34 197 94) 0%, rgb(22 163 74) 100%);
  border-radius: 6px;
  padding: 8px 12px;
  color: white;
  font-weight: 500;
  font-size: 0.875rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Accessibility improvements */
.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;
}

.focus\:not-sr-only:focus {
  position: static;
  width: auto;
  height: auto;
  padding: inherit;
  margin: inherit;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* Loading performance optimizations */
img {
  content-visibility: auto;
}

/* Form styling for French forms */
.form-input {
  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.form-input:focus {
  outline: none;
  border-color: rgb(59 130 246);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-input.error {
  border-color: rgb(239 68 68);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* Service card hover effects */
.service-card {
  transition: all 0.3s ease-in-out;
  border: 1px solid rgb(229 231 235);
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  border-color: rgb(220 38 38);
}

/* Testimonial styling */
.testimonial {
  background: linear-gradient(135deg, rgb(249 250 251) 0%, rgb(243 244 246) 100%);
  border-left: 4px solid rgb(34 197 94);
}

/* Responsive utilities for French content */
@media (max-width: 640px) {
  .text-responsive {
    font-size: clamp(0.875rem, 2.5vw, 1rem);
  }

  .heading-responsive {
    font-size: clamp(1.5rem, 5vw, 2.25rem);
  }
}

/* Print styles for French business cards/invoices */
@media print {
  .no-print {
    display: none !important;
  }

  body {
    font-size: 12pt;
    line-height: 1.4;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .emergency-cta {
    background: rgb(0 0 0);
    border: 2px solid rgb(255 255 255);
  }

  .trust-badge {
    background: rgb(0 100 0);
    border: 1px solid rgb(255 255 255);
  }
}