/*
 * index.css
 * Styles specific to the index.html (Home Page)
 * This file should be linked after global.css in your index.html
 */

/* ========================================= */
/* Global/Foundational Styles (often in global.css, but noted here for context) */
/* ========================================= */
/* Styles for .site-header, .main-content, and general body/font settings
   are typically set in global.css or directly via Tailwind utility classes. */


/* ========================================= */
/* Hero Section Specific Styles */
/* ========================================= */

/* Ensure hero content is centered and readable over the background image */
.hero-content {
    /* Tailwind classes already handle most of this, but adding here for clarity if custom overrides are needed */
    /* background-color: rgba(0, 0, 0, 0.5); /* Example: a darker overlay if needed */
    padding: 2rem; /* Example: more padding */
    border-radius: 0.75rem; /* Example: rounded corners */
}

/* Animations for hero text elements */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
}

/* Adding delays for staggered animation */
.animate-fade-in-up.delay-200 {
    animation-delay: 0.2s;
}

.animate-fade-in-up.delay-400 {
    animation-delay: 0.4s;
}

/* ========================================= */
/* Section Titles (Applies to About, Services, Coaches, Testimonials sections) */
/* ========================================= */

/* General styling for main section titles on the home page */
.section-title {
    /* Tailwind classes cover most, but you can add custom font sizes or colors here */
    /* font-size: 3rem; /* Example: larger font size */
    /* color: #1a202c; /* Example: specific dark color */
    margin-bottom: 2.5rem; /* Consistent spacing below titles */
}

/* ========================================= */
/* Card Styles (Services, Coaches, Testimonials) */
/* ========================================= */

/* Base styling for all cards to ensure consistency */
.service-card,
.coach-card,
.testimonial-card {
    /* Tailwind provides shadow, padding, rounded-lg. Add custom border or background here if needed */
    border: 1px solid rgba(0, 0, 0, 0.05); /* Subtle border for definition */
    transition: all 0.3s ease-in-out; /* Smooth transitions for hover effects */
}

.service-card:hover,
.coach-card:hover,
.testimonial-card:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* Enhanced shadow on hover */
    transform: translateY(-5px); /* Lift effect on hover */
}

/* Specific adjustments for coach photos */
.coach-photo {
    object-fit: cover; /* Ensures images fill their space without distortion */
    border: 4px solid #60A5FA; /* Example: a blue border around coach photos */
}

/* ========================================= */
/* Call-to-Action Buttons (Applies to all CTA buttons on the home page) */
/* ========================================= */

/* General styling for CTA buttons */
.hero-cta-button,
.btn-learn-more,
.btn-view-all-services,
.btn-view-all-coaches,
.btn-read-all-reviews,
.btn-member-feature {
    /* Tailwind classes handle most, but custom effects can be added here */
    letter-spacing: 0.05em; /* Slightly increased letter spacing for emphasis */
    text-transform: uppercase; /* Make text uppercase for buttons */
}

/* ========================================= */
/* Mobile Navigation Dropdown */
/* ========================================= */

/* Basic styling for the mobile menu dropdown */
.mobile-nav-dropdown {
    /* Tailwind handles hidden/block. Add custom styling if needed */
    border-top: 1px solid #e2e8f0; /* A light border at the top */
    /* padding-top: 1rem; */
}

.mobile-nav-item {
    /* Tailwind handles hover. Add custom padding or margin */
    padding: 0.75rem 1rem;
}

/* You can add more specific styles here as your design evolves */