/* -------------------------------------------------------------------------- */
/* 1. BASE / GLOBAL STYLES */
/* -------------------------------------------------------------------------- */

html {
    scroll-behavior: smooth;
}

/* Custom Typography Definitions */
.font-inter {
    font-family: 'Inter', sans-serif;
}

.font-playfair {
    font-family: 'Playfair Display', serif;
}

/* Global Transition Utility */
.transition-colors {
    /* Smooth transition for all color changes, useful for dark mode */
    transition: background-color 0.5s ease, color 0.5s ease;
}





/* Route Tile Styling (The key changes are here) */
        .route-item {
            /* Base style: transparent background (bg-white/0) and light border */
            background-color: rgba(255, 255, 255, 0.1); /* Slightly visible light fill */
            padding: 1rem;
            border-radius: 0.5rem; /* rounded-lg */
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        /* Hover Effect: Full opacity white/transparent background */
        .route-item:hover {
            background-color: rgba(255, 255, 255, 0.3); /* Slightly brighter transparent white */
            color: white; /* Maintain white text color */
            transform: scale(1.05);
            border-color: var(--proddy-orange); /* Border highlights on hover */
        }



/* Update this class in your style.css */
.scroll-lock {
    overflow: hidden; 
    /* This line is critical for the fix: use position:fixed */
    position: fixed; 
    width: 100%;
    /* Add top: 0 to avoid layout issues, but we will control the offset via JS */
    top: 0;
}
#menu-overlay {
    /* * KEY FIX: 'fixed' ensures it stays in the viewport
     * 'inset-0' is shorthand for setting top, right, bottom, and left to 0
     */
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    
    /* Layering: Should be behind the menu but above the page content */
    z-index: 40; 
    
    /* Background properties */
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
    
    /* Transition for smooth fade in/out */
    transition: opacity 300ms ease-in-out;
    
    /* Initial state (hidden) */
    display: none; 
    opacity: 0;
}
#mobile-menu {
    /* * KEY FIX: 'fixed' ensures it stays in the viewport
     * Anchors the menu to the top-right corner
     */
    position: fixed;
    top: 70;
    bottom: 0;
    right: 0;
    
    /* Sizing and background */
    width: 256px; /* Example width (w-64 in Tailwind) */
    max-width: 80%; /* Ensures it doesn't overwhelm smaller screens */
    background-color: white; /* Or your desired menu background */
    
    /* Layering: Must be above the overlay */
    z-index: 50; 
    
    /* Transition for slide in/out */
    transition: transform 300ms ease-in-out;
    
    /* Initial state (off-screen) - Adjust if you're using Tailwind's translate classes */
    transform: translateX(100%); 
    
    /* Make sure content inside can scroll if the menu is long */
    overflow-y: auto; 
}
/* Class added by JavaScript to open the menu */
#mobile-menu.scale-y-100 {
    /* Resets the transform to bring it onto the screen */
    transform: translateX(0); 
}





       /* Custom CSS for Card Collapse and Day/Night Mode */

/* --- Card Collapse Transition --- */
.collapsible-content {
    /* Set up the transition for a smooth collapse/expand */
    transition: max-height 0.35s ease-in-out, opacity 0.35s ease-in;
    overflow: hidden;
    /* max-height and opacity will be controlled by JavaScript */
}

/* --- Expand Icon Rotation --- */
/* The expand-icon class already exists in your HTML, 
   we just need to define the smooth rotation. */
.expand-icon {
    transition: transform 0.3s ease;
}
.expand-icon.rotate-180 {
    transform: rotate(180deg);
}


/* --- Day/Night Custom Classes (Needed for your existing JS to work) --- */

.card-bg-day {
    background-color: white; 
}
.card-bg-night {
    background-color: #2d3748; /* proddy-dark-card */
}

.text-day-mode-h2 {
    color: #1a202c; /* proddy-heading */
}
.text-night-mode-h2 {
    color: #e2e8f0; /* proddy-dark-h2 */
}

.text-day-mode {
    color: #4a5568; /* proddy-paragraph */
}
.text-night-mode {
    color: #a0aec0; /* proddy-dark-text */
}

.list-item-day {
    color: #4a5568; /* For list items */
}
.list-item-night {
    color: #a0aec0; /* For list items */
}








/* Loader and Checkmark */
.loader {
    width: 20px;
    height: 20px;
    border: 3px solid white;
    border-top: 3px solid transparent;
    border-radius: 50%;
    display: inline-block;
    animation: spin 0.8s linear infinite;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.checkmark {
    font-size: 1.5rem;
    color: white;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}


/* CSS for Hero Image Layers (REQUIRED for transitions to work) */
.hero-bg-layer {
    opacity: 0;
    transition: opacity 2s ease-in-out; /* The fade duration */
    /* Other necessary styles applied via JS, but good to have in CSS too: */
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    will-change: opacity, transform; 
    transform: translateZ(0);
}

.hero-bg-layer.active {
    opacity: 1 !important; /* Use !important to test if anything is overriding it */
    z-index: 10;
}

/* Custom shield icon gradient for the trust strip */
        .shield-icon {
            color: #1e3a8a; /* proddy-blue */
            -webkit-text-fill-color: transparent;
            background-image: linear-gradient(45deg, #1e3a8a, #f59e0b);
            -webkit-background-clip: text;
            background-clip: text;
        }

/* -------------------------------------------------------------------------- */
/* 4. MEDIA QUERIES (RESPONSIVENESS) 📐 */
/* -------------------------------------------------------------------------- */

/* --- A. MOBILE XS SCREENS (Max 479px - Very Small Phones) --- */
@media (min-width: 400px) (max-width: 479px) {

    /* --- Base Font Scaling for Tiny Screens --- */
    html {
        /* Slightly reduce base font size to fit more content comfortably */
        font-size: 15px; 
    }

    /* --- Global Spacing Reduction --- */
    .px-6 { padding-left: 0.75rem; padding-right: 0.75rem; }
    .py-16 { padding-top: 2rem; padding-bottom: 2rem; }
    .py-20 { padding-top: 3rem; padding-bottom: 3rem; }
    .py-10 { padding-top: 2rem; padding-bottom: 2rem; }

    /* --- Hero Section - Headings Reduction --- */
    #hero-content h1 {
        font-size: 1.65rem; /* Drastic reduction for smallest screens */
        line-height: 2rem;
    }
    #hero-content p {
        font-size: 0.85rem;
    }
    #hero-content a {
        padding: 0.75rem 1.25rem;
        font-size: 0.9rem;
    }
    
    /* --- General Section Headings Reduction (H2 & H3) --- */
    h2, .section-heading,
    .services-intro h2,
    .other-services h2,
    #how-it-works h3,
    #Faq-section h2,
    .routes-banner h2 {
        font-size: 1.5rem; 
    }

    /* --- Plan Cards (Stacking and Font Size Reduction) --- */
    #planCardsContainer {
        grid-template-columns: repeat(1, 1fr) !important; 
        gap: 1rem; /* Slightly reduced gap */
    }
    .plan-card {
         /* Card width is now 100% of the single-column grid */
    }
    .plan-card h3 {
        font-size: 1.15rem; /* Reduced card title font */
    }
    .plan-card p.text-sm {
        font-size: 0.8rem; /* Reduced card description font */
    }
    .collapsible-content ul li,
    .collapsible-content a {
        font-size: 0.85rem; /* Reduced font in collapsible details */
    }
    
    /* --- Routes Banner --- */
    /* Force 1 column for route tiles on the smallest screens */
    .routes-banner .grid {
        grid-template-columns: repeat(1, 1fr);
        gap: 0.5rem;
    }
}


/* --- B. MOBILE SM SCREENS (Max 639px - General Mobile View) --- */
@media (max-width: 639px) {

    /* --- Navigation --- */
    header a.text-2xl {
        font-size: 1.5rem;
    }
    
    /* --- Hero Section --- */
    .hero-section {
        min-height: 85vh;
    }
    #hero-content h1 {
        font-size: 2.25rem;
        line-height: 2.5rem;
    }

    /* --- General Section Headings Reduction (H2) --- */
    .story-section h2,
    #plans h2 {
        font-size: 2rem; /* Reduced from default desktop size */
    }
    h2 {
        font-size: 1.75rem; 
    }
    .story-section img {
        margin-bottom: 1.5rem;
        max-height: 300px;
    }

    /* --- Services Grid, How It Works, Footer (Vertical Stack) --- */
    #services + section .grid,
    #how-it-works .grid,
    footer .grid {
        grid-template-columns: repeat(2, 1fr); 
        gap: 1.5rem;
    }

    /* --- Plan Cards (Stacking and Font Size Reduction) --- */
    #planCardsContainer {
        grid-template-columns: repeat(1, 1fr) !important; /* Forces single column */
        gap: 1.5rem;
    }
    .plan-card h3 {
        font-size: 1.25rem;
    }
    .plan-card p.text-sm {
        font-size: 0.875rem;
    }
    
    /* --- Routes Banner (Two Column Layout for wider phones) --- */
    .routes-banner .grid {
        grid-template-columns: repeat(2, 1fr); 
        gap: 0.75rem;
    }
    .section-link{
        font-size: 10px;

    }
}


/* --- C. TABLET MD SCREENS (640px to 1023px - Transition View) --- */
@media (min-width: 640px) and (max-width: 1023px) {
    
    /* --- Larger Hero Text for Tablets --- */
    #hero-content h1 {
        font-size: 4.5rem;
        line-height: 5rem;
    }

    /* --- Services Grid, Plans, Footer (Multi-Column Layouts) --- */
    #services + section .grid {
        grid-template-columns: repeat(2, 1fr);
    }
    #planCardsContainer {
        grid-template-columns: repeat(2, 1fr) !important; /* 2 columns for pricing plans */
    }
    .routes-banner .grid {
        grid-template-columns: repeat(3, 1fr); 
    }
    
    /* Keep How It Works in 3 columns if space allows */
    #how-it-works .grid {
        grid-template-columns: repeat(3, 1fr); 
    }
    footer .grid {
        grid-template-columns: repeat(3, 1fr); 
    }
}