/* Sticky navigation styles */
#stickyNavBar {
    transition: transform 0.3s ease;
}

#stickyNavBar.nav-hidden {
    transform: translateY(-100%);
}

/* Equal height cards */
@media (min-width: 768px) {
    .feature-blog-container {
        display: flex;
        align-items: stretch;
    }
    
    .feature-blog-container > div {
        display: flex;
        flex-direction: column;
    }
    
    .feature-blog-container .flex-grow {
        flex: 1;
        min-height: 0;
    }
    
    /* Set minimum height for the blog post and sections to ensure consistency */
    .blog-post-container, .sections-container {
        min-height: 280px;
        height: 100%; /* Make sure both cards take up equal height */
    }
    
    /* Handle cases with few items in the sections container */
    .sections-container .grid {
        align-content: start; /* Start from the top instead of stretching if not many items */
    }
    
    /* Handle cases with different content height */
    .feature-blog-container {
        align-items: flex-start; /* Align to top */
    }
}

/* Blog image fill container properly */
.blog-image-container {
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
}

.blog-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.sport-hero h3, .sport-hero p {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5)!important; 
}

@media (max-width: 524px) {
    .space-x-4 {
        --space-x-reverse: 0 !important;
    }
}
/* Base styles for the #bread element */
#bread {
    display: none; 
}

:root {
        --sport-primary-color: {{ sport.primary_color }};
    }

/* Light Mode Gradient */
.hero-gradient {
    background: linear-gradient(
        to bottom,
        rgba(53, 53, 53, 0.4) 0%,
        color-mix(in srgb, var(--sport-color, #3B82F6) 60%, transparent) 90%,
        var(--sport-color, #3B82F6) 100%
    );
}

.header-social-icon {
    width: 24px;
    height: 24px;
    border-radius: 50em;
    padding: 0;
    margin: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

h1.text-white, h2.text-white, .white-shadow-lg {
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4),
                    0 2px 5px rgba(0, 0, 0, 0.3),
                    0 3px 7px rgba(0, 0, 0, 0.2);
    }

.dark h1, .dark  h2, .dark  h3, .dark  h4, .dark  h5, .dark  h6, .dark  p, .dark  a, .dark span, .dark div {
    text-shadow: none;
}

/* Dark Mode Gradient */
.dark .hero-gradient {
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.4) 0%,
        color-mix(in srgb, var(--sport-color, #3B82F6) 60%, transparent) 90%,
        var(--sport-color, #3B82F6) 100%
    );
}

#today-post  p {
    margin-bottom: 1.25em;
}

#today-post  ul,
#today-post  ol {
    margin-left: 1.5em;
    margin-bottom: 1.25em;
}

#today-post  ul {
    list-style-type: disc;
}

#today-post  ol {
    list-style-type: decimal;
}

#today-post  li {
    margin-bottom: 0.5em;
}

#today-post  a {
    color: theme('colors.blue.600');
    text-decoration: underline;
    transition: color 0.2s;
}

.dark #today-post  a {
    color: theme('colors.blue.400');
}

#today-post  a:hover {
    color: theme('colors.blue.800');
}

.dark #today-post  a:hover {
    color: theme('colors.blue.300');
}

#today-post  blockquote {
    border-left: 4px solid theme('colors.gray.300');
    padding-left: 1em;
    margin: 1.5em 0;
    font-style: italic;
    color: theme('colors.gray.600');
}

.dark #today-post  blockquote {
    border-left-color: theme('colors.gray.600');
    color: theme('colors.gray.400');
}
.media-expanded {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 110;  /* Increased from 60 */
    max-width: 90vw;
    max-height: 90vh;
    width: auto;
    height: auto;
    object-fit: contain;
}

.media-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 105;  /* Increased from 55 */
    display: none;
    padding: 2rem;
}
.space-x-8 {
    gap: 8px;
}


/* Improved scrollbar styling */
#blogModal ::-webkit-scrollbar {
    width: 8px;
}

#blogModal ::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
}

#blogModal ::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}

/* Mobile optimizations */
@media (max-width: 768px) {
    #blogModal .flex.items-start {
        padding: 0;
    }
    
    #blogModal .bg-gray-900 {
        border-radius: 0;
        margin: 0;
    }

    .handle-text {
        display: none;
    }
}

/* Mobile sticky nav custom styling */
@media (max-width: 767px) {
    .sections-container {
        display: none;
    }
    
    /* Chrome URL bar fix - always stick to actual bottom */
    #stickyNavBar {
        /* Force to actual bottom regardless of URL bar */
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        /* Use viewport height instead of safe area */
        height: auto !important;
        padding-bottom: 8px !important;
    }
    
    /* Add padding to body for sticky nav space */
    body {
        padding-bottom: 90px !important;
    }
    
    #stickyNavBar .overflow-x-auto::-webkit-scrollbar {
        display: none;  /* Chrome, Safari, Opera */
    }
    
    /* Mobile back to top button styling */
    #mobileBackToTop {
        transition: all 0.3s;
        background-color: transparent !important;
        border-bottom-width: 1px;
        opacity: 0.6;
        transform: translateY(0);
    }
    
    #mobileBackToTop:hover {
        opacity: 0.8;
    }
    
    #mobileBackToTop.active {
        opacity: 1;
        border-bottom-width: 2px;
        transform: scale(1.05);
    }
    
    /* Jump pills styling */
    #stickyNavBar .flex-grow {
        -ms-overflow-style: none; /* IE and Edge */
        scrollbar-width: none; /* Firefox */
    }
    
    /* Improved spacing and padding */
    #stickyNavBar .container {
        padding-top: 8px;
        padding-bottom: 10px;
    }
    
    /* Ensure the pills have proper height and vertical alignment */
    #stickyNavBar a.rounded-full {
        display: inline-flex;
        align-items: center;
        height: 28px;
    }
    
    /* Dashed up arrow styling */
    #mobileBackToTop svg path {
        stroke-dasharray: 2 2;
    }
}