/* Dynamic Spacing Fix - Responsive navbar to content spacing */

/* Calculate navbar height dynamically and adjust content spacing */
:root {
    --navbar-height: 70px; /* Base navbar height */
    --navbar-padding: 20px; /* Additional padding for content separation */
}

/* Dynamic spacing for hero sections */
.hero-section {
    padding-top: calc(var(--navbar-height) + var(--navbar-padding)) !important;
    min-height: calc(100vh - var(--navbar-height)) !important;
}

/* Reduced mobile spacing for better mobile experience */
@media (max-width: 768px) {
    .hero-section,
    .teams-banner, 
    .coaching-banner, 
    .schedule-banner, 
    .news-banner, 
    .contact-banner, 
    .merchandise-banner {
        padding-top: 50px !important;
        margin-top: 0 !important;
    }
}

/* Responsive navbar height adjustments */
@media (max-width: 768px) {
    :root {
        --navbar-height: 70px; /* Updated for new navbar height */
        --navbar-padding: 20px;
    }
}

@media (max-width: 576px) {
    :root {
        --navbar-height: 70px; /* Compact mobile navbar */
        --navbar-padding: 5px;
    }
}

@media (max-width: 420px) {
    :root {
        --navbar-height: 70px; /* Consistent compact height */
        --navbar-padding: 5px;
    }
}

/* Dynamic spacing for banner sections on other pages */
.teams-banner, 
.coaching-banner, 
.schedule-banner, 
.news-banner, 
.contact-banner, 
.merchandise-banner,
.tournament-banner {
    margin-top: calc(var(--navbar-height) + var(--navbar-padding)) !important;
}

/* Grade tabs and filter sections */
.grade-tabs {
    margin-top: calc(var(--navbar-height) + 10px) !important;
}

/* Content sections after navbar */
.main-content {
    padding-top: calc(var(--navbar-height) + var(--navbar-padding)) !important;
}

/* Fix for pages without hero sections */
body:not(.has-hero) .container:first-of-type {
    margin-top: calc(var(--navbar-height) + var(--navbar-padding)) !important;
}

/* Ensure proper spacing on all viewport sizes */
@media (min-width: 1200px) {
    :root {
        --navbar-height: 65px; /* Slightly smaller on large screens */
        --navbar-padding: 25px; /* More padding on large screens */
    }
}

@media (min-width: 1400px) {
    :root {
        --navbar-height: 60px; /* Smallest on very large screens */
        --navbar-padding: 30px; /* Maximum padding */
    }
}

/* Override any fixed spacing */
.hero-content,
.banner-content {
    padding-top: 0 !important; /* Remove any additional padding */
}

/* Ensure tournament tiles don't overlap */
.tournament-tile,
.team-tile,
.coach-tile {
    margin-top: 0 !important; /* Reset any conflicting margins */
}

/* Fix for specific elements that might have fixed positioning */
.upcoming-events,
.team-grid-container,
.coach-grid-container,
.news-content,
.contact-content {
    margin-top: 0 !important; /* Ensure no additional top margin */
}