/* Custom Evony Styles - Exact font family from Evony Global */
@layer base {
  html {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI',
      Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
      'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
      'Noto Color Emoji';
  }

  body {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI',
      Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
      'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
      'Noto Color Emoji';
    @apply bg-white text-gray-900 antialiased;
  }

  /* Navigation specific styles */
  nav {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI',
      Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  }
}

@layer components {
  /* Hero Slider Components */
  .hero-slider-container {
    @apply relative w-full overflow-hidden bg-gray-50;
    height: 600px;
  }

  .slider-wrapper {
    @apply relative w-full h-full;
  }

  .slider-slide {
    @apply absolute inset-0 w-full h-full transition-opacity duration-1000 ease-in-out;
  }

  .slider-slide.active {
    @apply opacity-100 z-10;
  }

  .slider-dot {
    @apply w-3 h-3 rounded-full cursor-pointer transition-all duration-300;
  }

  .slider-dot.active {
    @apply bg-green-600 scale-110;
  }

  .slider-prev,
  .slider-next {
    @apply w-12 h-12 bg-white bg-opacity-80 hover:bg-opacity-100 rounded-full flex items-center justify-center shadow-lg transition-all duration-300 cursor-pointer;
  }

  .slider-prev:hover,
  .slider-next:hover {
    @apply transform scale-105;
  }

  /* Button Components */
  .btn-primary {
    @apply bg-evony-secondary hover:bg-orange-600 text-white font-semibold py-3 px-6 rounded-lg transition-colors duration-200;
  }

  .btn-secondary {
    @apply bg-gray-800 hover:bg-gray-700 text-white font-semibold py-3 px-6 rounded-lg transition-colors duration-200;
  }

  .btn-outline {
    @apply border-2 border-evony-secondary text-evony-secondary hover:bg-evony-secondary hover:text-white font-semibold py-3 px-6 rounded-lg transition-all duration-200;
  }

  /* Navigation Components */
  .nav-link {
    @apply text-gray-700 hover:text-evony-secondary font-medium transition-colors duration-200;
  }

  .nav-link-active {
    @apply text-evony-secondary font-semibold;
  }

  /* Card Components */
  .card {
    @apply bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300;
  }

  .card-header {
    @apply p-6 border-b border-gray-100;
  }

  .card-body {
    @apply p-6;
  }

  /* Hero Section */
  .hero-title {
    @apply text-4xl md:text-5xl lg:text-6xl font-bold text-white leading-tight;
  }

  .hero-subtitle {
    @apply text-xl md:text-2xl text-gray-200 font-light;
  }

  /* Section Titles */
  .section-title {
    @apply text-3xl md:text-4xl font-bold text-gray-900 text-center mb-4;
  }

  .section-subtitle {
    @apply text-lg text-gray-600 text-center mb-12 max-w-2xl mx-auto;
  }
}

@layer utilities {
  /* Custom utilities for Evony styling */
  .text-gradient {
    background: linear-gradient(135deg, #f97316 0%, #dc2626 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .bg-gradient-evony {
    background: linear-gradient(135deg, #1a1a1a 0%, #0f0f0f 100%);
  }

  .shadow-evony {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  }
}

/* Product Page - Read More Functionality Override */
.product-main__text-wrapper {
  width: 100%;
  overflow: visible !important;
}

.js-product-full {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

.js-product-full p {
  margin-bottom: 1rem;
}

.js-product-full p:last-child {
  margin-bottom: 0;
}