/* Sri Lanka Tropical Blue Theme */
:root {
    --primary: #0284c7;
    /* Sky 600 */
    --primary-dark: #0369a1;
    --secondary: #0f172a;
    --accent: #f59e0b;
    /* Amber 500 */
    --sand: #f1f5f9;
    --text-main: #1e293b;
}

body {
    font-family: 'Outfit', sans-serif;
    color: var(--text-main);
    overflow-x: hidden;
    background-color: #f8fafc;
}

h1,
h2,
h3,
h4,
.serif {
    font-family: 'Playfair Display', serif;
}

/* Smooth Scroll Reveal */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1s cubic-bezier(0.5, 0, 0, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Hero Parallax Text */
.hero-text-shadow {
    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 0, 0, 0.3);
}

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

.img-zoom-rotate:hover img {
    transform: scale(1.1) rotate(2deg);
}

/* Glassmorphism Dark */
.glass-dark {
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Artistic brush stroke behind text */
.brush-stroke {
    position: relative;
    z-index: 1;
}

.brush-stroke::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: -5px;
    width: 105%;
    height: 30%;
    background-color: rgba(2, 132, 199, 0.2);
    /* Blue tint */
    z-index: -1;
    transform: skewX(-15deg);
}

/* Floating Leafs Animation */
@keyframes floatLeaf {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }

    50% {
        transform: translate(20px, 20px) rotate(10deg);
    }

    100% {
        transform: translate(0, 0) rotate(0deg);
    }
}

.leaf-anim {
    animation: floatLeaf 8s ease-in-out infinite;
}

/* Vertical Text */
.vertical-text {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
}

/* Card Depth */
.card-depth {
    transition: all 0.4s ease;
}

.card-depth:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px -10px rgba(2, 132, 199, 0.3);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

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

::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 10px;
}

/* Grid Asymmetry */
.asym-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 2rem;
}


/* =============================================
   MOBILE RESPONSIVE - ONLY affects < 768px
   Desktop stays 100% unchanged
   ============================================= */

/* ---- Tablet/Small Laptop (768px - 1023px) ---- */
@media (max-width: 1023px) and (min-width: 768px) {
    /* No font changes here - Tailwind md: breakpoint handles it */
    /* Only minor spacing adjustments if needed */
}

/* ---- Tablets (640px - 767px) ---- */
@media (max-width: 767px) and (min-width: 640px) {

    /* Slightly scale down very large headings that have no md: variant */
    section {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
}

/* =============================================
   MOBILE PHONES (< 640px) - Main responsive block
   ============================================= */
@media (max-width: 639px) {

    /* ---- HERO SECTION FONTS ---- */
    /* Hero h1 - the big "The Pearl of the Indian Ocean" */
    section .text-4xl,
    section .text-5xl,
    section .text-6xl,
    section .text-7xl {
        font-size: 2rem !important;
        line-height: 1.15 !important;
    }

    /* Hero subtitle/badge text */
    section .text-\[10px\],
    section .text-\[11px\] {
        font-size: 10px !important;
    }

    /* Hero description */
    section .text-xl {
        font-size: 1rem !important;
    }

    section .text-2xl {
        font-size: 1.2rem !important;
    }

    /* ---- SECTION HEADINGS ---- */
    /* Section titles like "Must Visit Destinations", "Signature Experiences" */
    .container .text-4xl,
    .container .text-5xl,
    .container .text-6xl {
        font-size: 1.75rem !important;
        line-height: 1.2 !important;
    }

    .container .text-3xl {
        font-size: 1.45rem !important;
        line-height: 1.25 !important;
    }

    .container .text-2xl {
        font-size: 1.2rem !important;
    }

    /* ---- CARD CONTENT ---- */
    /* Card titles */
    .container .text-xl {
        font-size: 1.05rem !important;
    }

    .container .text-lg {
        font-size: 0.95rem !important;
    }

    /* Body text */
    .container p {
        font-size: 0.875rem !important;
        line-height: 1.6 !important;
    }

    .container .text-sm {
        font-size: 0.8rem !important;
    }

    .container .text-xs {
        font-size: 0.7rem !important;
    }

    /* ---- NAVIGATION ---- */
    nav .site-name-text {
        font-size: 1rem !important;
    }

    nav img#nav-logo-img {
        height: 2rem !important;
    }

    /* Mobile menu links */
    #mobile-menu a {
        font-size: 0.95rem !important;
        padding: 0.6rem 0.75rem !important;
    }

    /* ---- BUTTONS ---- */
    /* Hero buttons & CTA buttons */
    a[class*="rounded-full"][class*="uppercase"] {
        font-size: 0.65rem !important;
        padding: 0.85rem 1.5rem !important;
        letter-spacing: 0.12em !important;
    }

    /* Standard buttons */
    button[type="submit"] {
        font-size: 0.875rem !important;
        padding: 1rem !important;
    }

    /* ---- FOOTER ---- */
    footer h3 {
        font-size: 1.05rem !important;
    }

    footer .text-3xl {
        font-size: 1.25rem !important;
    }

    footer p,
    footer li,
    footer a,
    footer span {
        font-size: 0.8rem !important;
    }

    footer .text-sm {
        font-size: 0.75rem !important;
    }

    /* Social links */
    footer .w-10 {
        width: 2.25rem !important;
        height: 2.25rem !important;
    }

    footer .w-10 svg {
        width: 1rem !important;
        height: 1rem !important;
    }

    /* ---- SPACING ---- */
    /* Reduce section padding */
    .py-24 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    .py-20 {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }

    .py-16 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    /* Reduce gaps in grids */
    .gap-12 {
        gap: 1.5rem !important;
    }

    .gap-16 {
        gap: 2rem !important;
    }

    .gap-8 {
        gap: 1.25rem !important;
    }

    /* Card padding */
    .p-8 {
        padding: 1.25rem !important;
    }

    .p-10 {
        padding: 1.5rem !important;
    }

    .p-6 {
        padding: 1rem !important;
    }

    /* Section margin-bottom */
    .mb-16 {
        margin-bottom: 2rem !important;
    }

    .mb-12 {
        margin-bottom: 1.5rem !important;
    }

    .mb-8 {
        margin-bottom: 1rem !important;
    }

    /* Container horizontal padding */
    .px-4 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* ---- HERO SECTION HEIGHT ---- */
    .h-screen {
        min-height: 100vh;
        min-height: 100svh;
        /* safe viewport height for mobile browsers */
    }

    .h-\[60vh\] {
        height: 50vh !important;
    }

    .h-\[50vh\] {
        height: 45vh !important;
    }

    /* ---- LETTER SPACING (reduce on mobile) ---- */
    .tracking-\[0\.4em\],
    .tracking-\[0\.5em\] {
        letter-spacing: 0.15em !important;
    }

    .tracking-\[0\.2em\] {
        letter-spacing: 0.1em !important;
    }

    .tracking-widest {
        letter-spacing: 0.08em !important;
    }

    /* ---- TEXT WRAPPING ---- */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* ---- FORM INPUTS (prevent iOS zoom) ---- */
    input,
    select,
    textarea {
        font-size: 16px !important;
    }

    /* ---- ABOUT SECTION ---- */
    /* About section heading */
    .lg\:w-7\/12 .text-5xl {
        font-size: 1.75rem !important;
    }

    /* About features title */
    .lg\:w-7\/12 h4 {
        font-size: 1rem !important;
    }

    /* ---- DESTINATION CARDS ---- */
    .auto-rows-\[300px\] {
        grid-auto-rows: 200px !important;
    }

    /* Destination name overlay */
    .absolute.bottom-6 h3 {
        font-size: 1.3rem !important;
    }

    /* ---- PACKAGES SECTION ---- */
    /* Package card image */
    .h-80 {
        height: 14rem !important;
    }

    /* Package name */
    .text-2xl.font-serif {
        font-size: 1.15rem !important;
    }

    /* Package price */
    .text-primary.text-xl {
        font-size: 1rem !important;
    }

    /* ---- STATS SECTION ---- */
    .text-4xl.font-bold,
    .text-5xl.font-bold {
        font-size: 1.75rem !important;
    }

    /* ---- CTA / FOOTER PRE-SECTION ---- */
    .bg-primary .text-4xl,
    .bg-sky-600 .text-3xl,
    .bg-sky-600 .text-5xl {
        font-size: 1.5rem !important;
        line-height: 1.25 !important;
    }

    /* ---- ITINERARY INTRO ---- */
    .max-w-3xl .text-5xl,
    .max-w-3xl .text-6xl {
        font-size: 1.65rem !important;
    }

    /* ---- BOOKING HERO ---- */
    .text-transparent.bg-clip-text {
        font-size: inherit !important;
    }

    /* ---- FAQ ---- */
    .bg-slate-800 h4,
    .bg-slate-50 h4 {
        font-size: 0.95rem !important;
    }
}

/* ---- Extra Small screens (< 380px) ---- */
@media (max-width: 379px) {

    section .text-4xl,
    section .text-5xl,
    section .text-6xl,
    section .text-7xl {
        font-size: 1.6rem !important;
        line-height: 1.15 !important;
    }

    .container .text-4xl,
    .container .text-5xl,
    .container .text-6xl {
        font-size: 1.4rem !important;
    }

    .container .text-3xl {
        font-size: 1.2rem !important;
    }

    nav .site-name-text {
        font-size: 0.85rem !important;
    }

    a[class*="rounded-full"][class*="uppercase"] {
        font-size: 0.6rem !important;
        padding: 0.7rem 1.2rem !important;
    }

    /* Destination cards even shorter */
    .auto-rows-\[300px\] {
        grid-auto-rows: 180px !important;
    }

    .h-80 {
        height: 12rem !important;
    }

    .py-24 {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }
}