/* =========================================
   Khushi Travels – Custom Site Styles
   ========================================= */

/* ---- CSS Custom Properties (Color Palette) ---- */
:root {
    --color-navy: #0f172a;
    --color-gold: #d4a017;
    --color-gold-dark: #b8860b;
    --color-whatsapp: #25d366;
}

/* ---- Tailwind Color Extensions (match tailwind.config) ---- */
/* These utility classes mirror the custom Tailwind config values */
.bg-navy {
    background-color: var(--color-navy);
}

.text-navy {
    color: var(--color-navy);
}

.border-navy {
    border-color: var(--color-navy);
}

.bg-gold {
    background-color: var(--color-gold);
}

.text-gold {
    color: var(--color-gold);
}

.border-gold {
    border-color: var(--color-gold);
}

.bg-gold-dark {
    background-color: var(--color-gold-dark);
}

.hover\:bg-gold-dark:hover {
    background-color: var(--color-gold-dark);
}

.hover\:bg-navy:hover {
    background-color: var(--color-navy);
}

.hover\:text-gold:hover {
    color: var(--color-gold);
}

.hover\:text-white:hover {
    color: #ffffff;
}

.hover\:border-gold:hover {
    border-color: var(--color-gold);
}

.bg-whatsapp {
    background-color: var(--color-whatsapp);
}

.text-whatsapp {
    color: var(--color-whatsapp);
}

.bg-gold\/10 {
    background-color: color-mix(in srgb, var(--color-gold) 10%, transparent);
}

.bg-gold\/5 {
    background-color: color-mix(in srgb, var(--color-gold) 5%, transparent);
}

.border-gold\/20 {
    border-color: color-mix(in srgb, var(--color-gold) 20%, transparent);
}

.text-gold\/80 {
    color: color-mix(in srgb, var(--color-gold) 80%, transparent);
}

/* ---- Font Family Extensions ---- */
.font-serif {
    font-family: 'Playfair Display', Georgia, serif;
}

.font-sans {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ---- Hero Backgrounds ---- */
.hero-img {
    background-image:
        linear-gradient(to bottom, rgba(15, 23, 42, 0.82), rgba(15, 23, 42, 0.28), rgba(15, 23, 42, 1)),
        url('https://images.unsplash.com/photo-1544620347-c4fd4a3d5957?auto=format&fit=crop&q=80&w=1920');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hero-bg {
    background:
        linear-gradient(to bottom, rgba(15, 23, 42, 0.82), rgba(15, 23, 42, 0.28), rgba(15, 23, 42, 1)),
        url('https://images.unsplash.com/photo-1544620347-c4fd4a3d5957?auto=format&fit=crop&q=80&w=1920') center/cover;
}

/* ---- Image Hover Zoom ---- */
.img-zoom img {
    transition: transform 0.7s ease;
}

.img-zoom:hover img {
    transform: scale(1.08);
}

/* ---- Card Hover Lift ---- */
.card-hover {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.card-hover:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.12);
}

/* ---- FAQ Details Arrow ---- */
details summary::-webkit-details-marker {
    display: none;
}

/* ---- SVG Icon Sizes ---- */
.icon-sm {
    width: 16px;
    height: 16px;
}

.icon-md {
    width: 20px;
    height: 20px;
}

.icon-lg {
    width: 24px;
    height: 24px;
}

.icon-xl {
    width: 32px;
    height: 32px;
}

.icon-2xl {
    width: 40px;
    height: 40px;
}

/* ---- SVG Icons fill/stroke helper ---- */
.icon-current {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---- Floating WhatsApp animation ---- */
@keyframes pulse-wa {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5);
    }

    50% {
        box-shadow: 0 0 0 12px rgba(37, 211, 102, 0);
    }
}

.float-wa {
    animation: pulse-wa 2.5s ease-in-out infinite;
}

/* ---- Smooth scroll & base box model ---- */
html {
    scroll-behavior: smooth;
}

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

/* ---- Prevent horizontal overflow ---- */
body {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

/* ==============================================
   UNIVERSAL CONTENT WIDTH (STRICT 90%)
   Every container fits 90% of screen width
   ============================================== */
[class*="max-w-7xl"],
[class*="max-w-5xl"],
[class*="max-w-4xl"],
[class*="max-w-3xl"],
[class*="max-w-2xl"],
.container {
    width: 90% !important;
    max-width: 1440px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ==============================================
   STANDARD AUTO-ADJUST TYPOGRAPHY
   Fluid scaling for all screen sizes
   ============================================== */
h1 {
    font-size: clamp(2rem, 6vw + 0.2rem, 4.5rem) !important;
    line-height: 1.15 !important;
}

h2 {
    font-size: clamp(1.5rem, 4vw + 0.2rem, 3.25rem) !important;
    line-height: 1.2 !important;
}

h3 {
    font-size: clamp(1.2rem, 2vw + 0.2rem, 1.75rem) !important;
    line-height: 1.25 !important;
}

p {
    line-height: 1.6 !important;
}

/* ---- GLOBAL MOBILE AUTO-ALIGNMENT (Center Everything) ---- */
@media (max-width: 768px) {

    /* Force center on all alignment/flex utility patterns */
    html,
    body {
        overflow-x: hidden !important;
    }

    h1,
    h2,
    h3,
    h4,
    p,
    span,
    a,
    label,
    .text-left,
    .text-right,
    .text-justify,
    [class*="items-"],
    [class*="justify-"],
    .flex,
    .grid,
    section,
    div {
        text-align: center !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Standardized padding/margin scaling */
    .py-32,
    .py-24,
    .py-20 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    .p-16,
    .p-12,
    .p-10,
    .p-8 {
        padding: 1.25rem !important;
    }

    .px-12,
    .px-10,
    .px-4 {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    .mb-32,
    .mb-24,
    .mb-20,
    .mb-16 {
        margin-bottom: 1.5rem !important;
    }

    .mt-32,
    .mt-24,
    .mt-20 {
        margin-top: 1.5rem !important;
    }

    /* Universal stacking for flex/grid (with navigation exceptions) */
    .flex:not(header .flex):not(.top-bar .flex):not(.fixed),
    .grid:not(.fixed) {
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
    }

    /* Ensure small row-based flex containers (icons, badges, nav) stay as rows */
    .inline-flex,
    .inline-flex *,
    header div.flex,
    nav.flex,
    .top-bar .flex,
    .fixed,
    .flex-row-mobile {
        flex-direction: row !important;
    }
}

/* Standard typography classes */
.text-2xl {
    font-size: clamp(1.1rem, 1.5vw + 0.5rem, 1.5rem) !important;
}

.text-xl {
    font-size: clamp(1rem, 1.2vw + 0.4rem, 1.25rem) !important;
}

.text-lg {
    font-size: clamp(0.95rem, 1vw + 0.3rem, 1.125rem) !important;
}

/* Hero subtitle / large body */
.text-2xl {
    font-size: clamp(1.1rem, 2vw + 0.2rem, 1.5rem) !important;
    line-height: 1.5 !important;
}

.text-xl {
    font-size: clamp(1rem, 1.5vw + 0.2rem, 1.25rem) !important;
    line-height: 1.5 !important;
}

/* Section body text */
.text-lg {
    font-size: clamp(0.95rem, 1.2vw + 0.15rem, 1.125rem) !important;
    line-height: 1.65 !important;
}

/* Card headings */
h3.text-2xl {
    font-size: clamp(1.1rem, 1.8vw + 0.2rem, 1.5rem) !important;
}

/* ==============================================
   MOBILE FRIENDLY IMPROVEMENTS
   ============================================== */

/* ---- Touch-friendly tap targets ---- */
a,
button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

/* Fix block anchors (cards, nav links) */
a.block,
a.flex,
a.group {
    min-height: unset;
}

/* ---- Mobile padding for sections ---- */
@media (max-width: 640px) {
    section {
        padding-top: 3.5rem !important;
        padding-bottom: 3.5rem !important;
    }

    .px-4 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Single column on mobile for grids */
    .grid.grid-cols-2,
    .grid.grid-cols-3,
    .grid.grid-cols-4 {
        grid-template-columns: 1fr !important;
    }

    /* Reduce hero min-height on mobile */
    .min-h-screen {
        min-height: 85vh;
    }

    /* Stack flex rows on mobile */
    .md\:flex-row {
        flex-direction: column;
    }

    /* Full-width buttons on mobile */
    .hero-img a,
    .hero-bg a {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 768px) {

    /* 2-col grids become 1-col on tablet */
    .lg\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .lg\:grid-cols-3 {
        grid-template-columns: repeat(1, 1fr) !important;
    }

    /* Reduce large padding on tablet */
    .p-12,
    .p-10 {
        padding: 1.75rem !important;
    }

    /* Table horizontal scroll on mobile */
    .overflow-x-auto {
        -webkit-overflow-scrolling: touch;
    }
}

/* ---- Improve mobile nav ---- */
@media (max-width: 768px) {
    header nav {
        padding-left: 1rem;
        padding-right: 1rem;
        height: 4.5rem !important;
        /* Compact header */
    }

    /* Floating WhatsApp – safe positioning */
    .fixed.bottom-6.right-6 {
        bottom: 1.25rem;
        right: 1.25rem;
        padding: 0.75rem !important;
    }

    /* Center and stack flex items inside cards and pricing rows */
    .p-8 .flex.items-center.justify-between,
    .px-2 .flex.items-start.justify-between,
    footer .grid,
    footer .flex {
        flex-direction: column !important;
        text-align: center !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 1rem !important;
    }

    /* Center text specifically */
    .text-right {
        text-align: center !important;
    }

    /* Gallery Modal responsiveness on narrow screens */
    #galleryModal .max-w-6xl {
        aspect-ratio: 4/5 !important;
        max-height: 80vh;
        border-radius: 2rem !important;
        width: 90% !important;
    }

    #galleryModal button.left-8,
    #galleryModal button.right-8 {
        left: 0.5rem !important;
        right: 0.5rem !important;
        top: auto !important;
        bottom: 2rem !important;
        /* Move controls to bottom on mobile for easy reach */
        transform: none !important;
        padding: 0.6rem !important;
    }

    #galleryModal button.right-8 {
        left: auto !important;
    }
}

/* ---- Images always responsive ---- */
img {
    max-width: 100%;
    height: auto;
}

/* ---- Tables scroll on mobile ---- */
table {
    width: 100%;
}

@media (max-width: 900px) {
    .overflow-hidden>.overflow-x-auto>table {
        min-width: 600px;
    }
}

/* Standard responsiveness utilities */
@media (max-width: 768px) {
    #galleryModal .max-w-6xl {
        aspect-ratio: 4/5 !important;
        max-height: 80vh;
        width: 90% !important;
    }

    /* Specific Home Page adjustments */
    #home-page .h-96 {
        height: 18rem !important;
    }

    .hero-img {
        min-height: 70vh !important;
    }
}