/* ============================================================
   HOTEL DELUXE — style.css
   Merged stylesheet: Tailwind config + all custom styles
   Sections: Config | Global | Scrollbar | Loader | Hero |
             Cards | Navbar | Floating | Modal | Animations |
             FAQ | Forms | Responsive
   ============================================================ */

/* ——————————————————————————————————————————————————
   TAILWIND CUSTOM CONFIGURATION
   (Injected via global script tag in each HTML file head.
    Kept here as reference — the actual config lives in
    the <script> block before Tailwind CDN loads.)
   ——————————————————————————————————————————————————
   tailwind.config = {
     theme: {
       extend: {
         colors: {
           'brand-gold':  '#D4AF37',
           'brand-dark':  '#1a1a1a',
           'brand-green': '#2C3E50',
           'brand-cream': '#F9F9F5',
         },
         fontFamily: {
           serif: ['"Playfair Display"', 'serif'],
           sans:  ['"Lato"', 'sans-serif'],
         }
       }
     }
   }
   ——————————————————————————————————————————————————— */

/* ============================================================
   GLOBAL STYLES
   ============================================================ */

html {
    scroll-behavior: smooth;
}

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   CUSTOM SCROLLBAR
   ============================================================ */

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #D4AF37;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #b5952f;
}

/* Hide scrollbar for horizontal scroll containers but keep functionality */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

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

/* ============================================================
   PRELOADER
   ============================================================ */

#loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #1a1a1a;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

/* ============================================================
   HERO SECTION
   ============================================================ */

/* Dark gradient overlay for all hero headers */
.hero-overlay {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7));
}

/* Hero background image smooth transition */
#hero-bg {
    transition: background-image 1s ease-in-out;
}

/* ============================================================
   NAVIGATION
   ============================================================ */

/* Navbar transitions are handled by Tailwind classes in HTML + JS */

/* ============================================================
   ROOM / VILLA CARDS
   ============================================================ */

/* Card container — clips the image zoom */
.villa-card {
    overflow: hidden;
}

/* Zoom image on card hover */
.villa-card:hover .villa-img {
    transform: scale(1.1);
}

/* Smooth image zoom transition */
.villa-img {
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ============================================================
   FLOATING CONTACT ICONS
   ============================================================ */

.floating-icon {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.floating-icon:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

/* ============================================================
   MODAL
   ============================================================ */

#villa-modal {
    backdrop-filter: blur(5px);
}

.modal-content {
    max-height: 90vh;
    overflow-y: auto;
}

/* ============================================================
   ANIMATIONS — KEYFRAMES
   ============================================================ */

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fade-in-up 0.5s ease-out;
}

/* ============================================================
   TEXT UTILITIES
   ============================================================ */

/* Two-line text clamp for card descriptions */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============================================================
   FAQ ACCORDION
   ============================================================ */

.faq-item {
    transition: background-color 0.2s ease;
}

.faq-question {
    cursor: pointer;
    user-select: none;
}

.faq-answer {
    transition: all 0.3s ease;
}

/* Rotate the + icon when FAQ is open */
.faq-question.open i {
    transform: rotate(45deg);
}

/* ============================================================
   FORM STYLES
   ============================================================ */

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: #D4AF37 !important;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}

/* Consistent placeholder styling */
::placeholder {
    color: #aaa;
    font-weight: 300;
}

/* ============================================================
   TABLE
   ============================================================ */

table th,
table td {
    border-bottom: 1px solid #f0f0f0;
}

/* ============================================================
   PARALLAX BACKGROUNDS
   ============================================================ */

.bg-fixed {
    background-attachment: fixed;
}

/* Disable parallax on mobile — prevents janky rendering */
@media (max-width: 768px) {
    .bg-fixed {
        background-attachment: scroll;
    }
}

/* ============================================================
   MOBILE MENU
   ============================================================ */

#mobile-menu {
    transition: all 0.3s ease-in-out;
}

/* ============================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================ */

@media (max-width: 768px) {
    /* Modal takes more vertical space on mobile */
    .modal-content {
        max-height: 95vh;
    }

    /* Reduce hero headline on very small screens */
    h1 {
        word-break: break-word;
    }

    /* Stack the check-in strip neatly */
    .check-info-strip span {
        display: block;
        margin-bottom: 0.5rem;
    }
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */

button:focus-visible,
a:focus-visible {
    outline: 2px solid #D4AF37;
    outline-offset: 3px;
}

/* ============================================================
   PRINT STYLES
   ============================================================ */

@media print {
    #loader,
    .floating-icon,
    #navbar,
    #mobile-menu {
        display: none !important;
    }

    body {
        font-size: 12pt;
    }
}