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

/* Price Range Slider Styles */
.slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: #e5e7eb;
  border-radius: 3px;
  outline: none;
  z-index: 1;
}

.slider-thumb::-webkit-slider-track {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: #e5e7eb;
  border-radius: 3px;
}

.slider-thumb::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: #2563eb;
  cursor: pointer;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  z-index: 2;
  will-change: transform;
  transition: transform 0.2s ease-out;
}

.slider-thumb::-webkit-slider-thumb:hover {
  transform: scale(1.05);
}

.slider-thumb::-moz-range-track {
  height: 6px;
  background: #e5e7eb;
  border-radius: 3px;
  border: none;
}

.slider-thumb::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #2563eb;
  cursor: pointer;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  z-index: 2;
}

:root {
  --background: 0 0% 99%; /* Warm white */
  --foreground: 215 28% 17%; /* Sophisticated charcoal */
  --muted: 35 12% 95%; /* Warm neutral */
  --muted-foreground: 215 15% 50%;
  --popover: 0 0% 100%;
  --popover-foreground: 215 28% 17%;
  --card: 0 0% 100%;
  --card-foreground: 215 28% 17%;
  --border: 35 8% 88%; /* Subtle warm border */
  --input: 35 8% 88%;
  --primary: 38 84% 46%; /* Refined gold - less bright */
  --primary-foreground: 0 0% 100%;
  --secondary: 215 84% 34%; /* Deep navy for elegance */
  --secondary-foreground: 0 0% 100%;
  --accent: 38 45% 95%; /* Very subtle gold tint */
  --accent-foreground: 215 28% 17%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 60 9.1% 97.8%;
  --success: 158 58% 46%; /* Sophisticated teal */
  --success-foreground: 0 0% 100%;
  --ring: 215 84% 34%;
  --radius: 0.75rem;
}

/* Removed custom scrollbar utilities to reduce unused CSS */

/* Hero headline text wrapping control */
.hero-headline {
  word-break: keep-all;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .hero-headline {
    white-space: normal;
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .hero-headline {
    font-size: 3rem !important;
    line-height: 1.1 !important;
  }
}

/* Removed horizontal scrollbar styling to reduce unused CSS */

/* Removed will-change utilities to reduce unused CSS; prefer per-element inline usage when needed */

/* Mobile optimizations */
@media (max-width: 768px) {
  .slider-thumb::-webkit-slider-thumb,
  .slider-thumb::-moz-range-thumb {
    width: 24px;
    height: 24px;
  }
}

.dark {
  --background: 240 10% 3.9%;
  --foreground: 0 0% 98%;
  --muted: 240 3.7% 15.9%;
  --muted-foreground: 240 5% 64.9%;
  --popover: 240 10% 3.9%;
  --popover-foreground: 0 0% 98%;
  --card: 240 10% 3.9%;
  --card-foreground: 0 0% 98%;
  --border: 240 3.7% 15.9%;
  --input: 240 3.7% 15.9%;
  --primary: 16 90% 60%;
  --primary-foreground: 0 0% 100%;
  --secondary: 240 3.7% 15.9%;
  --secondary-foreground: 0 0% 98%;
  --accent: 35 91% 51%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 0 0% 98%;
  --success: 142 71% 45%;
  --success-foreground: 0 0% 100%;
  --ring: 240 4.9% 83.9%;
  --radius: 0.5rem;
}

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

  body {
    @apply font-sans antialiased bg-background text-foreground;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  }

  html {
    scroll-behavior: smooth;
  }

  /* Media defaults for faster, stable rendering */
  img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
  }

  img, picture, video {
    height: auto;
  }

  /* Respect user preference; reduce main-thread work when possible */
  @media (prefers-reduced-motion: reduce) {
    * {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

@layer utilities {
  .text-success {
    color: hsl(var(--success));
  }
  
  .bg-success {
    background-color: hsl(var(--success));
  }
  
  .hover\:bg-success:hover {
    background-color: hsl(142 71% 40%);
  }
  
  .border-success {
    border-color: hsl(var(--success));
  }

  /* Rendering performance helpers */
  .cv-auto {
    content-visibility: auto;
    contain-intrinsic-size: 1px 600px; /* prevents layout jump before paint */
  }

  .contain-paint {
    contain: layout paint; /* isolate layout/paint to reduce reflow cost */
  }

  .contain-content {
    contain: content;
  }

  .intrinsic-300 {
    contain-intrinsic-size: 1px 300px;
  }

  .intrinsic-500 {
    contain-intrinsic-size: 1px 500px;
  }

  .intrinsic-700 {
    contain-intrinsic-size: 1px 700px;
  }
}

.slick-prev:before {
  display: none;
}

.slick-next:before {
  display: none;
}

.blog-details-content-style h1,h2,h3,h4,h5,h6,p {
  margin: 0 0 20px 0;
}

.blog-details-content-style ul li p {
  margin: 0;
}

.blog-details-content-style ul  {
  list-style: disc;
  padding: 0 0 20px 20px;
}

.blog-details-content-style ul li  {
  padding: 0 0 5px 0;
}

.blog-details-content-style h2 {
  font-size: 28px;
  line-height: 38px;
  font-weight: 500;
}


.blog-details-content-style h3 {
  font-size: 24px;
  line-height: 34px;
}

.blog-details-content-style h4 {
  font-size: 22px;
  line-height: 32px;
}

.blog-details-content-style h5 {
  font-size: 20px;
  line-height: 30px;
}

.blog-details-content-style {
  padding: 40px 0 0 0;
}

.blog-details-content-style a {
  color: #2563eb;
}