/* base.css */

/* General body styling */
body {
    font-family: 'Inter', sans-serif;
    background-color: #f8f9fa; /* Light grey background */
}

/* Custom scrollbar for better aesthetics */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Specific styles from index.html */
.hero-background {
    background-image: url('ImageFiles/Children-Main-image.JPG'); /* Updated image */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.loading-spinner {
    border: 4px solid #f3f3f3; /* Light grey */
    border-top: 4px solid #6a0dad; /* Purple */
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: spin 1s linear infinite;
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Mobile menu specific styles (common across multiple files) */
@media (max-width: 767px) {
    .mobile-menu-hidden {
        display: none;
    }

    .mobile-menu-visible {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .mobile-menu-visible li {
        width: 100%;
        text-align: center;
        padding: 8px 0;
    }

    .mobile-menu-visible .group .absolute {
        position: static; /* Remove absolute positioning for mobile dropdown */
        box-shadow: none;
        width: 100%;
    }

    .mobile-menu-visible .group:hover .absolute {
        display: flex;
        flex-direction: column;
    }

    .mobile-menu-visible .group .absolute a {
        padding-left: 32px; /* Indent dropdown items */
    }
}

/* Additional header adjustments for mobile from get-involved.html (to ensure consistency if needed) */
@media (max-width: 767px) {
    #main-nav.flex {
        display: flex;
    }
    #main-nav.hidden {
        display: none;
    }
}

/* Custom CSS for image overlay text - NEWLY ADDED */
.image-overlay-container {
    position: relative;
    width: 100%;
    height: 300px; /* Explicit height for consistency with the 500x300 idea */
    overflow: hidden; /* Ensures text doesn't spill if image is smaller */
}

.image-overlay-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the container */
}

.image-overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 2.25rem; /* text-4xl from Tailwind for large text */
    font-weight: bold; /* font-bold from Tailwind */
    text-align: center;
    width: 100%;
    padding: 0 1rem; /* Add some padding */
    box-sizing: border-box; /* Include padding in width */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7); /* Optional: add shadow for readability */
}