/* Mobile Responsive Styles */

/* Expedition & Trek Card Image Containers - Make them square and larger */
.expedition-card .expedition-image-container,
.trek-card .trek-image-container {
    width: 100%;
    padding-bottom: 100%; /* 1:1 Aspect Ratio (Square) */
    position: relative;
    overflow: hidden;
}

.expedition-card .expedition-image-container > *,
.trek-card .trek-image-container > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Desktop - Larger square images */
@media (min-width: 1024px) {
    .expedition-card .expedition-image-container,
    .trek-card .trek-image-container {
        padding-bottom: 100%; /* Keep square on desktop */
    }
}

/* Tablet - Medium square images */
@media (min-width: 768px) and (max-width: 1023px) {
    .expedition-card .expedition-image-container,
    .trek-card .trek-image-container {
        padding-bottom: 100%; /* Keep square on tablet */
    }
}

/* Mobile - Slightly rectangular for better mobile viewing */
@media (max-width: 767px) {
    .expedition-card .expedition-image-container,
    .trek-card .trek-image-container {
        padding-bottom: 85%; /* Slightly wider on mobile for better viewing */
    }
    
    /* Adjust title size on mobile */
    .expedition-card h3,
    .trek-card h3 {
        font-size: 1.25rem !important;
    }
}

/* Hide Breadcrumbs on Mobile - They take up too much space */
@media (max-width: 767px) {
    /* Hide breadcrumb navigation completely on mobile */
    nav[aria-label="Breadcrumb"],
    section nav[aria-label="Breadcrumb"],
    .breadcrumb,
    [class*="breadcrumb"] {
        display: none !important;
    }
}

/* Desktop Navigation - Always show on large screens (1024px and above) */
@media (min-width: 1024px) {
    /* Hide hamburger on desktop */
    #mobileMenuBtn {
        display: none !important;
    }
    
    /* Ensure desktop nav is visible */
    nav .hidden.lg\:flex {
        display: flex !important;
    }
}

/* Ensure hamburger button is clickable on mobile/tablet only */
@media (max-width: 1023px) {
    #mobileMenuBtn {
        position: relative;
        z-index: 100 !important;
        cursor: pointer;
        pointer-events: auto !important;
        min-width: 44px;
        min-height: 44px;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
}

/* Make it obvious on mobile - add tap highlight */
#mobileMenuBtn:active {
    background-color: rgba(59, 130, 246, 0.1);
    border-radius: 0.375rem;
}

/* Mobile Menu Overlay Animation - Full Screen */
#mobileMenuOverlay {
    transition: opacity 0.4s ease, visibility 0.4s ease;
    z-index: 9999 !important; /* Ensure it's above everything */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
}

/* Override Tailwind's hidden class */
#mobileMenuOverlay.hidden {
    display: none !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

#mobileMenuOverlay.active {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Fade in animation */
#mobileMenuOverlay.active nav ul li {
    animation: slideInUp 0.5s ease forwards;
    opacity: 0;
}

#mobileMenuOverlay.active nav ul li:nth-child(1) { animation-delay: 0.1s; }
#mobileMenuOverlay.active nav ul li:nth-child(2) { animation-delay: 0.15s; }
#mobileMenuOverlay.active nav ul li:nth-child(3) { animation-delay: 0.2s; }
#mobileMenuOverlay.active nav ul li:nth-child(4) { animation-delay: 0.25s; }
#mobileMenuOverlay.active nav ul li:nth-child(5) { animation-delay: 0.3s; }
#mobileMenuOverlay.active nav ul li:nth-child(6) { animation-delay: 0.35s; }

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Global Font Styles */
body {
    font-family: 'Open Sans', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Display text (hero sections) */
.font-display {
    font-family: 'Bebas Neue', cursive;
    letter-spacing: 0.05em;
}

/* Mobile Typography - Better Readability */
@media (max-width: 1023px) {
    /* Headings - Better Hierarchy */
    h1 {
        font-size: 2rem !important; /* 32px - Larger for impact */
        line-height: 1.2 !important;
        margin-bottom: 1rem !important;
    }
    
    h2 {
        font-size: 1.625rem !important; /* 26px - Section headers */
        line-height: 1.3 !important;
        margin-bottom: 0.875rem !important;
    }
    
    h3 {
        font-size: 1.375rem !important; /* 22px - Subsection headers */
        line-height: 1.4 !important;
        margin-bottom: 0.75rem !important;
    }
    
    h4 {
        font-size: 1.125rem !important; /* 18px - Card titles, etc */
        line-height: 1.4 !important;
        margin-bottom: 0.5rem !important;
    }
    
    h5, h6 {
        font-size: 1rem !important; /* 16px */
        line-height: 1.4 !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* Body text - Readable and comfortable */
    p {
        font-size: 0.9375rem !important; /* 15px - Better readability */
        line-height: 1.7 !important;
        margin-bottom: 1rem !important;
    }
    
    /* Lists - Comfortable spacing */
    li {
        font-size: 0.9375rem !important; /* 15px */
        line-height: 1.7 !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* General divs and spans */
    div, span {
        font-size: inherit; /* Inherit from parent */
        line-height: inherit;
    }
    
    /* Itinerary Section - Compact for Mobile */
    .itinerary-day,
    .accordion-header h4,
    .accordion-header strong {
        font-size: 1rem !important; /* 16px - Day headers */
        font-weight: 700 !important;
        line-height: 1.4 !important;
        margin-bottom: 0.5rem !important;
    }
    
    .accordion-body p {
        font-size: 0.875rem !important; /* 14px - Day descriptions */
        line-height: 1.6 !important;
        margin-bottom: 0.625rem !important;
    }
    
    .accordion-body li {
        font-size: 0.875rem !important; /* 14px - List items */
        line-height: 1.6 !important;
        margin-bottom: 0.375rem !important;
        padding-left: 0.25rem !important;
    }
    
    .accordion-body div {
        font-size: 0.875rem !important; /* 14px */
        line-height: 1.6 !important;
    }
    
    .accordion-item {
        padding: 0.875rem !important; /* Slightly less padding */
        margin-bottom: 0.625rem !important;
        border-radius: 0.5rem !important;
    }
    
    /* Services Section (Included/Not Included) */
    .services-list li,
    .included-services li,
    .not-included-services li,
    [class*="service"] li {
        font-size: 0.9375rem !important; /* 15px */
        line-height: 1.7 !important;
        margin-bottom: 0.625rem !important;
        padding-left: 0.5rem !important;
    }
    
    .services-list h3,
    .included-services h3,
    .not-included-services h3 {
        font-size: 1.25rem !important; /* 20px - Service section headers */
        margin-bottom: 0.875rem !important;
    }
    
    /* Detail Pages - Overview, Description, etc */
    .overview p,
    .description p,
    .details p,
    [class*="overview"] p,
    [class*="description"] p {
        font-size: 0.9375rem !important; /* 15px */
        line-height: 1.7 !important;
        margin-bottom: 1rem !important;
    }
    
    /* Info Cards/Boxes */
    .info-card p,
    .info-box p,
    [class*="info"] p {
        font-size: 0.875rem !important; /* 14px - Slightly smaller for info */
        line-height: 1.6 !important;
    }
    
    /* Metadata (duration, altitude, etc) */
    .metadata,
    .trek-info,
    .expedition-info,
    [class*="meta"] {
        font-size: 0.875rem !important; /* 14px */
        line-height: 1.5 !important;
    }
}
    
}

/* Mobile Buttons and Cards */
@media (max-width: 1023px) {
    /* Buttons - Smaller and More Touch-Friendly */
    button, .btn, a.button, a[class*="btn"], [class*="button"] {
        font-size: 0.875rem !important; /* 14px */
        padding: 0.625rem 1rem !important; /* Smaller padding */
        border-radius: 0.375rem !important; /* 6px border radius */
    }
    
    /* Primary/Secondary Buttons - Specific Sizing */
    .btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-warning, .btn-info,
    [class*="bg-blue"], [class*="bg-green"], [class*="bg-red"], [class*="bg-yellow"] {
        font-size: 0.875rem !important;
        padding: 0.625rem 1rem !important;
        min-height: 44px !important; /* iOS touch target */
    }
    
    /* Cards - More Compact and Smaller */
    .card, [class*="card"], .expedition-card, .trek-card, .team-card {
        padding: 0.75rem !important;
        margin-bottom: 0.75rem !important;
        font-size: 0.875rem !important;
    }
    
    /* Card Titles - Smaller */
    .card h1, .card h2, .card h3, .card h4,
    [class*="card"] h1, [class*="card"] h2, [class*="card"] h3, [class*="card"] h4,
    .expedition-card h3, .trek-card h3, .team-card h3 {
        font-size: 1.125rem !important; /* 18px */
        margin-bottom: 0.5rem !important;
    }
    
    /* Card Descriptions/Text - Smaller */
    .card p, .card li, .card span,
    [class*="card"] p, [class*="card"] li, [class*="card"] span,
    .expedition-card p, .trek-card p, .team-card p {
        font-size: 0.8125rem !important; /* 13px */
        line-height: 1.5 !important;
    }
    
    /* Card Buttons - Smaller and Full Width */
    .card button, .card a[class*="btn"], .card .btn,
    [class*="card"] button, [class*="card"] a[class*="btn"], [class*="card"] .btn,
    .expedition-card button, .trek-card button, .team-card button,
    .expedition-card a[class*="btn"], .trek-card a[class*="btn"], .team-card a[class*="btn"] {
        font-size: 0.8125rem !important; /* 13px */
        padding: 0.5rem 0.75rem !important;
        width: 100% !important;
        display: block !important;
        text-align: center !important;
        margin-top: 0.5rem !important;
    }
    
    /* Card Images - Smaller Height */
    .card img, [class*="card"] img,
    .expedition-card img, .trek-card img, .team-card img {
        max-height: 180px !important;
        object-fit: cover !important;
        border-radius: 0.5rem !important;
    }
    
    /* Images - Responsive */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* Container padding */
    .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* Sections spacing */
    section {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    
    /* Grid adjustments */
    .grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    /* Flex adjustments - EXCEPT navbar and cards */
    .flex:not(header .flex):not(nav .flex):not(header nav > div):not(.featured-item .flex):not(a.group .flex):not(.group.relative .flex) {
        flex-direction: column !important;
        gap: 1rem !important;
    }
    
    /* Keep navbar flex row on mobile */
    header nav > div.flex,
    header .flex {
        flex-direction: row !important;
    }
    
    /* Keep card content flex column on mobile - cards use absolute positioning */
    .featured-item,
    a.group.relative,
    .group.relative {
        display: block !important;
    }
    
    /* Ensure card images stay full size on mobile */
    .featured-item .absolute.inset-0,
    a.group.relative .absolute.inset-0,
    .group.relative .absolute.inset-0 {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
    }
}

/* Small phones (< 375px) - Even More Compact */
@media (max-width: 375px) {
    h1 {
        font-size: 1.75rem !important; /* 28px */
    }
    
    h2 {
        font-size: 1.5rem !important; /* 24px */
    }
    
    p, li, span, div {
        font-size: 0.875rem !important; /* 14px */
    }
    
    /* Extra small cards */
    .card, [class*="card"], .expedition-card, .trek-card, .team-card {
        padding: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* Extra small card images */
    .card img, [class*="card"] img,
    .expedition-card img, .trek-card img, .team-card img {
        max-height: 150px !important;
    }
    
    /* Extra small buttons */
    button, .btn, a.button, a[class*="btn"] {
        font-size: 0.8125rem !important; /* 13px */
        padding: 0.5rem 0.75rem !important;
    }
    
    /* Container - Less padding */
    .container {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
}

/* Tablet (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    h1 {
        font-size: 2.5rem !important; /* 40px */
    }
    
    h2 {
        font-size: 2rem !important; /* 32px */
    }
    
    p {
        font-size: 1rem !important; /* 16px */
    }
}

/* Touch-friendly buttons on mobile */
@media (max-width: 1023px) {
    button, a[href], .clickable {
        min-height: 44px; /* iOS recommended touch target */
        min-width: 44px;
    }
}

/* Mobile navigation improvements */
@media (max-width: 1023px) {
    /* Header */
    header {
        padding: 0.5rem 0 !important;
    }
    
    /* Navbar container - reduce padding */
    header nav {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    
    /* Navbar flex container - tighter spacing */
    header nav > div.flex {
        padding-left: 0 !important;
        padding-right: 0 !important;
        gap: 0.5rem !important;
    }
    
    /* Logo size */
    header img {
        height: 3rem !important; /* 48px */
        max-height: 3rem !important;
    }
    
    /* Mobile menu button - ensure it's compact */
    #mobileMenuBtn {
        padding: 0.5rem !important;
        margin: 0 !important;
    }
    
    /* Mobile menu */
    #mobileMenuOverlay > div {
        width: 80% !important;
        max-width: 300px !important;
    }
    
    /* Mobile menu links */
    #mobileMenuOverlay ul li {
        padding: 0.75rem 0;
        border-bottom: 1px solid #e5e7eb;
    }
    
    #mobileMenuOverlay ul li a {
        font-size: 1.1rem !important;
        display: block;
        padding: 0.5rem;
    }
}

/* Form inputs mobile friendly */
@media (max-width: 1023px) {
    input, textarea, select {
        font-size: 16px !important; /* Prevents zoom on iOS */
        padding: 0.75rem !important;
    }
}

/* Hero section mobile adjustments */
@media (max-width: 1023px) {
    .min-h-screen {
        min-height: 100vh !important;
    }
    
    /* Hero text */
    section.relative.min-h-screen h1 {
        font-size: 2.5rem !important;
        margin-bottom: 1rem !important;
    }
    
    section.relative.min-h-screen p {
        font-size: 1.1rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    /* Hero buttons */
    section.relative.min-h-screen a {
        font-size: 1rem !important;
        padding: 0.875rem 1.5rem !important;
        width: 100%;
        text-align: center;
    }
}

/* Stats section mobile */
@media (max-width: 1023px) {
    .stat-item {
        margin-bottom: 1.5rem !important;
    }
    
    .stat-number {
        font-size: 2.5rem !important;
    }
}

/* Featured expeditions/treks cards - New Elegant Design */
@media (max-width: 1023px) {
    /* Card container - maintain height on mobile */
    .featured-item,
    a.group.relative.h-\[450px\],
    .group.relative.h-\[450px\] {
        height: 400px !important; /* Slightly smaller on mobile */
        margin-bottom: 1.5rem !important;
        padding: 0 !important; /* Remove padding for absolute positioned content */
    }
    
    /* Ensure absolute positioning works on mobile */
    .featured-item,
    a.group.relative,
    .group.relative {
        position: relative !important;
        overflow: hidden !important;
    }
    
    /* Card images - Full size within container */
    .featured-item .absolute.inset-0 img,
    a.group.relative .absolute.inset-0 img,
    .group.relative .absolute.inset-0 img,
    .featured-item img.slide,
    a.group.relative img.slide,
    .group.relative img.slide {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        max-height: none !important;
        border-radius: 0 !important;
    }
    
    /* Card titles - Smaller on mobile */
    .featured-item h3,
    a.group.relative h3,
    .group.relative h3 {
        font-size: 1.5rem !important; /* Smaller than desktop 2xl-3xl */
        line-height: 1.3 !important;
    }
    
    /* Card descriptions - Hidden on mobile for clean look */
    .featured-item p,
    a.group.relative p,
    .group.relative p {
        font-size: 0.875rem !important;
    }
    
    /* Badges - Slightly smaller on mobile */
    .featured-item .absolute.top-4,
    a.group.relative .absolute.top-4,
    .group.relative .absolute.top-4 {
        padding: 0.375rem 0.75rem !important;
        font-size: 0.75rem !important;
    }
    
    /* Book Now button - Full width on mobile */
    .featured-item button,
    a.group.relative button,
    .group.relative button {
        width: 100% !important;
        padding: 0.75rem 1rem !important;
        font-size: 0.875rem !important;
    }
}

/* Footer Headings - Make them stand out */
footer h3 {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.5px;
}

/* Footer mobile */
@media (max-width: 1023px) {
    footer {
        padding: 2rem 1rem !important;
    }
    
    footer h3 {
        font-size: 1.25rem !important;
        margin-bottom: 1rem !important;
        color: #ffffff !important;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        text-align: left !important;
    }
    
    footer p, footer a, footer li {
        font-size: 0.95rem !important;
        text-align: left !important;
    }
    
    /* Force left alignment for all footer content on mobile */
    footer .container > div > div {
        text-align: left !important;
    }
    
    /* Ensure contact info items are left aligned */
    footer ul {
        text-align: left !important;
        padding-left: 0 !important;
    }
    
    footer ul li {
        text-align: left !important;
        justify-content: flex-start !important;
    }
    
    /* Footer grid - single column on mobile, left aligned */
    footer .grid {
        grid-template-columns: 1fr !important;
        text-align: left !important;
    }
    
    footer .grid > div {
        text-align: left !important;
        margin-bottom: 2rem !important;
    }
}

/* Overflow handling */
@media (max-width: 1023px) {
    body {
        overflow-x: hidden;
    }
    
    * {
        max-width: 100vw;
    }
}

/* Spacing utilities for mobile */
@media (max-width: 1023px) {
    .space-y-8 > * + * {
        margin-top: 1.5rem !important;
    }
    
    .space-y-6 > * + * {
        margin-top: 1rem !important;
    }
    
    .space-y-4 > * + * {
        margin-top: 0.75rem !important;
    }
    
    .gap-8 {
        gap: 1.5rem !important;
    }
    
    .gap-6 {
        gap: 1rem !important;
    }
    
    .gap-4 {
        gap: 0.75rem !important;
    }
}

/* Make WhatsApp widget mobile friendly */
@media (max-width: 1023px) {
    .whatsapp-button {
        bottom: 70px !important; /* Move up to avoid navigation */
        right: 15px !important;
        width: 55px !important;
        height: 55px !important;
    }
    
    .whatsapp-chat-box {
        width: calc(100vw - 2rem) !important;
        max-width: 350px !important;
        bottom: 130px !important;
        right: 15px !important;
    }
}