/*
 * global.css
 * Global styles that apply to all pages of the AquaFlow Club website.
 * This file should be linked before any page-specific CSS files in your HTML.
 */

/* ========================================= */
/* Base Styles */
/* ========================================= */

body {
    /* Set a default background color for the entire site */
    background-color: #f8fafc; /* Tailwind's bg-gray-50 */
    /* Set a default text color */
    color: #333; /* A slightly darker grey for good readability */
    /* Apply the Inter font family globally */
    font-family: 'Inter', sans-serif;
    /* Smooth scrolling for anchor links */
    scroll-behavior: smooth;
    /* Ensure the body takes at least the full viewport height and enables flex for footer sticking */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Main content area to push the footer down */
main {
    flex: 1; /* Allows the main content area to grow and fill available space */
}

/* ========================================= */
/* Container for consistent content width */
/* ========================================= */

.container {
    max-width: 1200px; /* Max width for content */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem; /* Tailwind's px-6 */
    padding-right: 1.5rem; /* Tailwind's px-6 */
}

/* ========================================= */
/* Header & Navigation Styles */
/* ========================================= */

/* Styles for the main header (site-header class in index.html) */
.site-header {
    /* Tailwind classes already define fixed, w-full, top-0, z-50, rounded-b-lg, shadow-md, py-4, px-6 */
    border-bottom: 1px solid rgba(0, 0, 0, 0.05); /* Subtle bottom border */
}

/* Styles for the main navigation links (nav-item class in index.html) */
.nav-item {
    /* Tailwind classes define text-gray-700, hover:text-blue-600, font-medium, transition, duration-300, px-3, py-2, rounded-md, hover:bg-blue-50 */
    position: relative; /* For underline effect */
}

.nav-item::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px; /* Position below text */
    left: 50%;
    transform: translateX(-50%);
    background-color: #2563eb; /* Tailwind's blue-600 */
    transition: width 0.3s ease-out;
}

.nav-item:hover::after {
    width: 100%; /* Expand underline on hover */
}

/* Styles for authentication buttons (btn-login, btn-signup) */
.btn-login,
.btn-signup {
    /* Tailwind classes handle most styling */
    white-space: nowrap; /* Prevent text wrapping on small screens */
}


/* ========================================= */
/* Footer Styles */
/* ========================================= */

/* Styles for the main footer (site-footer class in index.html) */
.site-footer {
    /* Tailwind classes already define bg-gray-800, text-white, py-10, mt-12, rounded-t-lg */
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Subtle top border */
}

/* Styles for footer headings */
.footer-heading {
    /* Tailwind classes define text-2xl/xl, font-bold/semibold, mb-4, text-blue-400 */
    /* No custom styles needed here unless overriding Tailwind */
}

/* Styles for footer links */
.footer-link {
    /* Tailwind classes define text-gray-400, hover:text-blue-300, transition, duration-300 */
    /* No custom styles needed here unless overriding Tailwind */
}

/* Styles for social media icons in the footer */
.social-icon {
    /* Tailwind classes define text-gray-400, hover:text-blue-300, transition, duration-300 */
    /* No custom styles needed here unless overriding Tailwind */
}

/* ========================================= */
/* General Utility Styles (Optional, if not covered by Tailwind) */
/* ========================================= */

/* Example: A utility class for hidden elements (though Tailwind's 'hidden' is preferred) */
/* .hidden {
    display: none !important;
} */

/* Example: A utility class for visible elements (though Tailwind's 'block', 'flex' etc. are preferred) */
/* .visible {
    display: block !important;
} */

/* You can add more general styles here that you want to apply across your entire website. */