/*
Theme Name: Cheetah Adventures
Description: A premium travel agency WordPress theme with multilingual support, mobile-first design, and sophisticated navigation.
Version: 1.0.0
Author: Sallar
Text Domain: cheetah-adventures
*/

/* Tailwind CSS v4 */
@import url('https://cdn.jsdelivr.net/npm/tailwindcss@4.1.7/dist/tailwind.min.css');

/* CSS Variables */
:root {
  --primary-purple: #6B46C1;
  --primary-purple-dark: #553C9A;
  --secondary-blue: #3B82F6;
  --accent-green: #10B981;
  --text-dark: #1F2937;
  --text-light: #6B7280;
  --bg-light: #F9FAFB;
}

/* Base Styles */
* {
  box-sizing: border-box;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.6;
  color: var(--text-dark);
  margin: 0;
  padding: 0;
  background-color: #f3f4f6;
}

.page,
.site,
main {
  background-color: #ffffff;
}

:root {
  --cheetah-container-max: 1200px;
  --cheetah-container-max-xl: 1340px;
  --cheetah-container-horizontal: 1.25rem;
  --cheetah-container-horizontal-lg: 2.5rem;
}

.container,
.container-fluid {
  width: 100%;
  max-width: var(--cheetah-container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--cheetah-container-horizontal);
  padding-right: var(--cheetah-container-horizontal);
}

@media (min-width: 1280px) {
  .container,
  .container-fluid {
    max-width: var(--cheetah-container-max-xl);
    padding-left: var(--cheetah-container-horizontal-lg);
    padding-right: var(--cheetah-container-horizontal-lg);
  }
}

@media (max-width: 640px) {
  .container,
  .container-fluid {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* Header Styles */
.site-header {
  background: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 1000;
}

.header-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
}

/* Logo Styles */
.site-logo img {
  max-height: 60px;
  width: auto;
  object-fit: contain;
}

/* Alpine.js Mega Menu Styles */
.group:hover .group-hover\:block {
  display: block !important;
}

.menu-item-li {
  list-style: none;
}

/* Mega Menu Hover Effects */
.group:hover .hidden {
  display: block;
}

/* Menu Button Styles */
.font-semibold {
  font-weight: 600;
}

.hover\:text-red-450:hover {
  color: #ef4444;
}

.hover\:text-blue-600:hover {
  color: #2563eb;
}

/* Special Menu Item Styles */
.bg-gray-100 {
  background-color: #f3f4f6;
}

.hover\:bg-gray-200:hover {
  background-color: #e5e7eb;
}

.rounded-full {
  border-radius: 9999px;
}

/* Mega Menu Grid */
.grid {
  display: grid;
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gap-6 {
  gap: 1.5rem;
}

/* Text Styles */
.uppercase {
  text-transform: uppercase;
}

.text-gray-500 {
  color: #6b7280;
}

.text-gray-800 {
  color: #1f2937;
}

.font-medium {
  font-weight: 500;
}

.font-normal {
  font-weight: 400;
}

/* Spacing */
.mt-4 {
  margin-top: 1rem;
}

.space-y-2 > * + * {
  margin-top: 0.5rem;
}

/* Transitions */
.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* Mobile Menu Styles - Alpine.js */
.menu-open {
  overflow: hidden;
}

/* Prevent body scroll when mobile menu is open */
body.overflow-hidden {
  overflow: hidden !important;
  position: fixed !important;
  width: 100% !important;
}

/* Mobile menu overlay */
.mobile-menu-overlay {
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* Ensure mobile menu stays fixed regardless of scroll */
.mobile-menu-nav {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  height: 100vh !important;
  width: 18rem !important;
  max-width: 90vw !important;
  z-index: 9999 !important;
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-menu-nav.show {
  transform: translateX(0);
}

/* Animated Burger Icon */
.burger-icon {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.burger-line {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
}

/* Smooth transitions for mobile menu */
[x-cloak] {
  display: none !important;
}

#mobile-menu-toggle-footer {
  transition: all 0.3s ease;
}

#mobile-menu-toggle-footer.active {
  background: #6B46C1;
  color: white;
  transform: scale(1.05);
}

#mobile-menu-toggle-footer.active svg {
  transform: rotate(90deg);
}

/* Mobile Menu Button - Hide top burger menu */
@media (max-width: 1024px) {
  #mobile-menu-toggle {
    display: none !important;
  }
}

/* Ensure mobile menu only shows when needed */
@media (min-width: 1024px) {
  #mobile-menu {
    display: none !important;
  }
}

/* Tours Carousel - Beautiful & Responsive */
.tours-carousel-container {
  position: relative;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.tours-carousel {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.tours-carousel-item {
  width: 100%;
  min-width: 0;
}

/* Responsive carousel widths */
@media (max-width: 639px) {
  .tours-carousel-item {
    width: 100%;
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .tours-carousel-item {
    width: 50%;
  }
}

@media (min-width: 1024px) {
  .tours-carousel-item {
    width: 33.333333%;
  }
}

/* Carousel Controls */
.tours-carousel-container button {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.tours-carousel-container button:hover {
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 20px 25px rgba(0, 0, 0, 0.15);
}

.tours-carousel-container button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  transform: translateY(-50%) scale(1);
}

/* Carousel Indicators */
.carousel-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #cbd5e1;
  transition: all 0.3s ease;
  cursor: pointer;
}

.carousel-indicator.active {
  background: #6B46C1;
  transform: scale(1.2);
}

.carousel-indicator:hover {
  background: #8b5cf6;
  transform: scale(1.1);
}

/* Custom scrollbar for carousel */
.tours-carousel::-webkit-scrollbar {
  display: none;
}

.tours-carousel {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Ensure no blur overlays on main content */
body:not(.menu-open) {
  backdrop-filter: none !important;
  filter: none !important;
}

/* Fix any potential blur issues */
.hero-overlay {
  backdrop-filter: none;
}

/* Utility Classes */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Mega Menu Auto Width */
.mega-menu-auto {
  width: auto;
  min-width: 400px;
  max-width: 600px;
}

/* Responsive Mega Menu */
@media (max-width: 768px) {
  .mega-menu-auto {
    min-width: 300px;
    max-width: 90vw;
  }
  
  .grid-cols-2 {
    grid-template-columns: 1fr;
  }
}

/* Menu Item Hover Effects */
.menu-item-li > a:hover {
  color: #f1081a !important;
  text-decoration: none !important;
}

a:hover {
  color: #f1081a !important;
  text-decoration: none !important;
}

/* WordPress Block List Fix */
.wp-block-list {
  margin-right: 40px !important;
}