/* Mediterranean Color Palette for Location T2 Giens */
:root {
    /* Primary colors - branding, buttons, accents */
    --mediterranean-blue: #0077B6;
    --turquoise-blue: #00B4D8;
    
    /* Secondary colors - backgrounds, soft sections */
    --sand-beige: #F4E9D8;
    --light-sky: #CAF0F8;
    
    /* Neutrals - text & structure */
    --dark-charcoal: #2B2D42;
    --soft-gray: #E5E5E5;
    
    /* Accent colors - details, hover effects */
    --coral-orange: #FF6B35;
    --pine-green: #4CAF50;
}

/* Base styles following Mediterranean theme */
body {
    background: linear-gradient(135deg, var(--light-sky) 0%, var(--sand-beige) 100%);
    color: var(--dark-charcoal);
    scroll-behavior: smooth;
}

/* Enhanced scrolling and animations */
* {
    scroll-behavior: smooth;
}

/* Custom animation durations */
.animate-pulse {
    animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
}

.animate-bounce {
    animation: bounce 5s infinite !important;
}

/* Header & Footer backgrounds - Mediterranean Blue */
header.header-bg {
    background: linear-gradient(135deg, var(--mediterranean-blue) 0%, var(--turquoise-blue) 100%);
}

footer {
    background: linear-gradient(135deg, var(--mediterranean-blue) 0%, var(--dark-charcoal) 100%);
    color: white;
}

/* Progressive section backgrounds for visual hierarchy */
section:nth-child(odd) {
    background: linear-gradient(135deg, var(--sand-beige) 0%, rgba(255, 255, 255, 0.8) 100%);
}

section:nth-child(even) {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, var(--light-sky) 100%);
}

/* Enhanced CTA Buttons with Mediterranean gradients */
.btn-primary,
.bg-orange-500,
a[class*="bg-orange"] {
    background: linear-gradient(135deg, var(--coral-orange) 0%, #FF8A5B 100%) !important;
    color: white !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
}

.btn-primary:hover,
.bg-orange-500:hover,
a[class*="bg-orange"]:hover {
    background: linear-gradient(135deg, var(--mediterranean-blue) 0%, var(--turquoise-blue) 100%) !important;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 25px rgba(0, 119, 182, 0.4);
}

/* Secondary buttons - Mediterranean Blue gradients */
.btn-secondary,
.bg-blue-500,
a[class*="bg-blue"] {
    background: linear-gradient(135deg, var(--mediterranean-blue) 0%, var(--turquoise-blue) 100%) !important;
    color: white !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 4px 15px rgba(0, 180, 216, 0.3);
}

.btn-secondary:hover,
.bg-blue-500:hover,
a[class*="bg-blue"]:hover {
    background: linear-gradient(135deg, var(--coral-orange) 0%, #FF8A5B 100%) !important;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 25px rgba(255, 107, 53, 0.4);
}

/* Enhanced hover states for all links */
a:hover {
    color: var(--turquoise-blue);
    transition: all 0.3s ease;
}

/* Improved text colors with better contrast */
.text-charcoal,
.text-gray-800,
body {
    color: var(--dark-charcoal) !important;
}

.text-mediterranean { color: var(--mediterranean-blue) !important; }
.text-turquoise { color: var(--turquoise-blue) !important; }
.text-coral { color: var(--coral-orange) !important; }
.text-pine { color: var(--pine-green) !important; }
.text-sand { color: var(--sand-beige) !important; }

/* Enhanced utility classes with gradients */
.bg-mediterranean { 
    background: linear-gradient(135deg, var(--mediterranean-blue) 0%, var(--turquoise-blue) 100%) !important; 
}
.bg-turquoise { 
    background: linear-gradient(135deg, var(--turquoise-blue) 0%, var(--light-sky) 100%) !important; 
}
.bg-sand { 
    background: linear-gradient(135deg, var(--sand-beige) 0%, rgba(255, 255, 255, 0.8) 100%) !important; 
}
.bg-coral { 
    background: linear-gradient(135deg, var(--coral-orange) 0%, #FF8A5B 100%) !important; 
}
.bg-pine { 
    background: linear-gradient(135deg, var(--pine-green) 0%, #66BB6A 100%) !important; 
}
.bg-light-sky {
    background: linear-gradient(135deg, var(--light-sky) 0%, rgba(255, 255, 255, 0.9) 100%) !important;
}

/* Enhanced section visual separation */
section {
    position: relative;
    transition: all 0.3s ease;
}

section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--mediterranean-blue) 50%, transparent 100%);
    opacity: 0.3;
}

/* Card and component enhancements */
.rounded-2xl {
    border-radius: 1rem !important;
}

.shadow-2xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}

/* Animation classes */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

.animate-float {
    animation: float 3s ease-in-out infinite;
}

/* Enhanced backdrop blur support */
.backdrop-blur-sm {
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}

/* Progressive disclosure hints */
.scroll-hint {
    opacity: 0.8;
    animation: bounce 5s infinite;
}

@keyframes bounce {
    0%, 20%, 53%, 80%, 100% {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        transform: translate3d(0, 0, 0);
    }
    40%, 43% {
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        transform: translate3d(0, -15px, 0);
    }
    70% {
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        transform: translate3d(0, -7px, 0);
    }
    90% {
        transform: translate3d(0, -2px, 0);
    }
}

/* Enhanced visual hierarchy for headings */
h1, h2, h3, h4, h5, h6 {
    color: var(--dark-charcoal) !important;
    font-weight: bold;
}

/* Special styling only for hero headings */
header h1 {
    background: linear-gradient(135deg, #ffffff 0%, var(--sand-beige) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: bold;
}

/* Ensure text remains readable on all backgrounds */
section h1, section h2, section h3, section h4, section h5, section h6 {
    color: var(--dark-charcoal) !important;
    background: none !important;
    -webkit-text-fill-color: unset !important;
}

/* Interactive elements enhancement */
.group:hover .group-hover\:scale-110 {
    transform: scale(1.1);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Mobile responsiveness enhancements */
@media (max-width: 768px) {
    .text-4xl { font-size: 2.5rem !important; }
    .text-6xl { font-size: 3rem !important; }
    .py-20 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
    .py-16 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
}

.border-soft { border-color: var(--soft-gray); }

/* Hero section gradient - Light Sky to Sand Beige */
.hero-gradient {
    background: linear-gradient(135deg, var(--light-sky), var(--sand-beige));
}

/* Subtle dividers/cards - Soft Gray */
.divider,
.card-border {
    border-color: var(--soft-gray);
}

/* Contact page specific styles */
.feature-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid var(--soft-gray);
}

.benefits-section {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.1), rgba(244, 233, 216, 0.5));
}

.property-section {
    background: linear-gradient(135deg, rgba(0, 180, 216, 0.1), rgba(255, 255, 255, 0.8));
}

/* Mediterranean themed gradients */
.gradient-sea {
    background: linear-gradient(135deg, var(--turquoise-blue), var(--mediterranean-blue));
}

.gradient-sunset {
    background: linear-gradient(135deg, var(--coral-orange), var(--sand-beige));
}

.gradient-beach {
    background: linear-gradient(135deg, var(--light-sky), var(--sand-beige));
}

/* Mobile Gallery Slider */
.gallery-container {
    position: relative;
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
}

.gallery-slider {
    display: flex;
    overflow-x: scroll;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    gap: 1rem;
    padding: 0 1rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
     /* allow the browser to decide gesture direction so vertical page scroll still works
         when the user starts touching images inside the gallery */
     touch-action: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    cursor: grab;
}

.gallery-slider:active {
    cursor: grabbing;
}

.gallery-slider::-webkit-scrollbar {
    display: none;
}

.gallery-slide {
    flex: 0 0 320px; /* Increased from 280px */
    scroll-snap-align: start;
    touch-action: manipulation;
}

/* Ensure images don't interfere with touch events */
.gallery-slide img {
    pointer-events: auto;
    user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
}

/* Mobile-specific touch improvements */
@media (max-width: 640px) {
    .gallery-container {
        /* enable normal vertical scrolling when touching gallery area */
        touch-action: auto;
        overflow: hidden;
    }
    
    .gallery-slider {
        cursor: grab;
        /* allow both vertical page scroll and horizontal gallery scroll; the
           browser will pick the direction based on user's gesture */
        touch-action: auto;
        /* Force scrolling on mobile */
        overflow-x: auto !important;
    }
    
    .gallery-slider:active {
        cursor: grabbing;
    }
    
    .gallery-slide {
          /* Make slides take most of the viewport width on small screens but
              not too large — use ~75% of viewport width for a balanced feel. */
          flex: 0 0 75vw;
          touch-action: manipulation;
          min-width: 260px;
          max-width: 80vw;
    }
}

/* Gallery Navigation Arrows */
.gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--mediterranean-blue);
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    font-size: 18px;
    box-shadow: 0 2px 8px rgba(0, 119, 182, 0.3);
    opacity: 0.9;
}

.gallery-nav:hover {
    background: var(--turquoise-blue);
    transform: translateY(-50%) scale(1.1);
    opacity: 1;
    box-shadow: 0 4px 12px rgba(0, 180, 216, 0.4);
}

.gallery-nav:active {
    transform: translateY(-50%) scale(0.95);
    background: var(--coral-orange);
}

.gallery-nav.prev {
    left: 10px;
}

.gallery-nav.next {
    right: 10px;
}

/* Gallery indicators with Mediterranean theme */
.gallery-indicators {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.gallery-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--soft-gray);
    cursor: pointer;
    transition: all 0.3s ease;
}

.gallery-dot:hover {
    background-color: var(--turquoise-blue);
    transform: scale(1.2);
}

.gallery-dot.active {
    background-color: var(--mediterranean-blue);
    transform: scale(1.3);
    box-shadow: 0 0 0 2px rgba(0, 119, 182, 0.3);
}

/* Utility used to hide elements (e.g., booking CTA) while LightGallery is open */
.hide-on-lightbox {
    display: none !important;
}

/* Hide arrows on larger screens */
@media (min-width: 640px) {
    .gallery-nav {
        display: none;
    }
}

/* Remove hover effects on mobile */
@media (max-width: 639px) {
    .gallery-slide img {
    /* Fill the slide area and crop with object-fit to maintain aspect ratio */
    width: 100%;
    height: calc(75vw * 0.55); /* slightly shorter for a less dominant image */
        object-fit: cover;
        transition: none;
    }
    
    .gallery-slide img:hover {
        transform: none;
    }
}

/* Keep hover effects on larger screens */
@media (min-width: 640px) {
    .gallery-slide img:hover {
        transform: scale(1.05);
    }
}


/* Responsive gallery layout */
@media (min-width: 640px) {
    .gallery-slider {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
        overflow: visible;
        scroll-snap-type: none;
        padding: 0;
    }
    
    .gallery-slide {
        flex: none;
    }
    
    .gallery-indicators {
        display: none;
    }
}

@media (min-width: 768px) {
    .gallery-slider {
        grid-template-columns: repeat(3, 1fr);
    }
}