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

@layer base {
  body {
    @apply text-gray-900 bg-white;
  }
}

@layer components {
  .hero-overlay {
    background: linear-gradient(135deg, rgba(243, 216, 160, 0.9) 0%, rgba(200, 150, 100, 0.8) 100%);
  }
  
  .section-alt {
    @apply bg-[#f3d8a0] text-gray-900;
  }
  
  .section-main {
    @apply bg-white text-gray-900;
  }
  
  .btn-primary {
    @apply bg-[#f3d8a0] hover:bg-[#e0c890] text-gray-900 font-semibold transition-all duration-300 shadow-lg hover:shadow-xl;
    border: 2px solid #000000 !important;
    padding: 15px !important;
    border-radius: 50px !important;
  }
  
  .btn-secondary {
    @apply bg-gray-800 hover:bg-gray-900 text-white font-semibold transition-all duration-300 shadow-lg hover:shadow-xl;
    border: 2px solid #000000 !important;
    padding: 15px !important;
    border-radius: 50px !important;
  }
  
  .card {
    @apply bg-white rounded-lg shadow-lg p-6 hover:shadow-xl transition-shadow duration-300;
  }
  
  .cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #111827;
    color: white;
    padding: 1rem;
    z-index: 9999;
    box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1), 0 -2px 4px -1px rgba(0, 0, 0, 0.06);
    display: none;
  }
  
  .cookie-banner.show {
    display: block;
    animation: slideUp 0.3s ease-out;
  }
  
  @keyframes slideUp {
    from {
      transform: translateY(100%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
}

/* Custom animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-up {
  animation: fadeInUp 0.6s ease-out;
}

/* Mobile menu */
.mobile-menu {
  @apply fixed top-0 left-0 w-full h-full bg-white z-50 transform transition-transform duration-300;
}

.mobile-menu.open {
  @apply translate-x-0;
}

.mobile-menu.closed {
  @apply -translate-x-full;
}

/* Contrast text */
.text-contrast {
  @apply text-gray-900;
}

.bg-contrast {
  @apply bg-white;
}

/* Panoramic hero sections */
section[class*="aspect-[3/1]"] {
  min-height: 200px;
}

@media (min-width: 768px) {
  section[class*="aspect-[3/1]"] {
    min-height: 250px;
  }
}

@media (min-width: 1024px) {
  section[class*="aspect-[3/1]"] {
    min-height: 300px;
  }
}

/* Panoramic images */
img[class*="aspect-[3/2]"] {
  min-height: 20rem;
}

@media (min-width: 768px) {
  img[class*="aspect-[3/2]"] {
    min-height: 24rem;
  }
}

@media (min-width: 1024px) {
  img[class*="aspect-[3/2]"] {
    min-height: 28rem;
  }
}

/* Cookie banner mobile optimization */
@media (max-width: 640px) {
  .cookie-banner {
    padding: 1rem;
  }
  
  .cookie-banner p {
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
  }
  
  .cookie-banner .btn-primary,
  .cookie-banner .btn-secondary {
    width: 100%;
    padding: 0.75rem;
    font-size: 0.875rem;
  }
  
  .cookie-banner .text-xs {
    font-size: 0.7rem;
    text-align: center;
    margin-top: 0.5rem;
  }
}

/* Logo styles */
header img[src*="logo.svg"] {
  max-width: 200px;
  height: auto;
  object-fit: contain;
}

/* Accordion buttons */
.accordion-button {
  border: 2px solid #000000 !important;
}

/* Mobile optimization for 320px */
@media (max-width: 320px) {
  .container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  
  .btn-primary,
  .btn-secondary {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
  }
  
  .text-4xl {
    font-size: 1.5rem;
  }
  
  .text-5xl {
    font-size: 2rem;
  }
  
  .text-3xl {
    font-size: 1.25rem;
  }
  
  .text-2xl {
    font-size: 1.125rem;
  }
  
  .text-xl {
    font-size: 1rem;
  }
  
  section[class*="aspect-[3/1]"] {
    min-height: 150px;
  }
  
  .cookie-banner {
    padding: 0.75rem;
  }
  
  .cookie-banner p {
    font-size: 0.75rem;
  }
  
  header img[src*="logo.svg"] {
    max-width: 150px;
    height: 2.5rem;
  }
}