/* 
 * Sports Theme Styles
 * Applied to sports pages (template-sport.php), sports category pages, and single sports posts
 * Light beige background theme for sports content
 */

:root {
    --sport-bg-light: #FFF6E0; /* Light beige for sports theme */
}

/* Sports page background - body level */
body.sport-view:not(.dark-mode) {
    background: var(--sport-bg-light);
}

/* Main containers and layout elements */
body.sport-view:not(.dark-mode) .site-main,
body.sport-view:not(.dark-mode) .content-area,
body.sport-view:not(.dark-mode) .front-page-container {
    background: var(--sport-bg-light);
}

/* Article containers and elements */
body.sport-view:not(.dark-mode) .main-article,
body.sport-view:not(.dark-mode) .single-post-article,
body.sport-view:not(.dark-mode) .single-post-container {
    background: var(--sport-bg-light);
}

/* Desktop specific containers */
body.sport-view:not(.dark-mode) .single-post-container.desktop-layout,
body.sport-view:not(.dark-mode) .single-post-left-column,
body.sport-view:not(.dark-mode) .single-post-right-column {
    background: var(--sport-bg-light);
}

/* Mobile layout with higher specificity to override any existing !important rules */
body.sport-view:not(.dark-mode) .single-post-container.mobile-layout {
    background: var(--sport-bg-light) !important;
}

/* Sidebar and world news columns on desktop */
body.sport-view:not(.dark-mode) .sidebar-column,
body.sport-view:not(.dark-mode) .world-news-column {
    background: var(--sport-bg-light);
}

/* Article feed and grid containers */
body.sport-view:not(.dark-mode) .articles-column {
    background: var(--sport-bg-light);
}

/* Dark mode overrides for sports theme */
body.sport-view.dark-mode {
    background: var(--dark-background-light);
}

/* Main containers and layout elements - dark mode */
body.sport-view.dark-mode .site-main,
body.sport-view.dark-mode .content-area,
body.sport-view.dark-mode .front-page-container {
    background: var(--dark-background-light) !important;
}

/* Article containers and elements - dark mode */
body.sport-view.dark-mode .main-article,
body.sport-view.dark-mode .single-post-article,
body.sport-view.dark-mode .single-post-container {
    background: var(--dark-background-light) !important;
}

/* Desktop specific containers - dark mode */
body.sport-view.dark-mode .single-post-container.desktop-layout,
body.sport-view.dark-mode .single-post-left-column,
body.sport-view.dark-mode .single-post-right-column {
    background: var(--dark-background-light) !important;
}

/* Mobile layout - dark mode */
body.sport-view.dark-mode .single-post-container.mobile-layout {
    background: var(--dark-background-light) !important;
}

/* Sidebar and world news columns - dark mode */
body.sport-view.dark-mode .sidebar-column,
body.sport-view.dark-mode .world-news-column {
    background: var(--dark-background-light) !important;
}

/* Article feed and grid containers - dark mode */
body.sport-view.dark-mode .articles-column {
    background: var(--dark-background-light) !important;
}

/* VNA Toggle Buttons - Sport Theme Overrides */
/* Light mode: Use sportvinkeln beige colors */
body.sport-view:not(.dark-mode) .vna-view-toggle {
    background: var(--sport-bg-light) !important;
    border-color: #E8D7B0 !important; /* Slightly darker beige for border */
}

body.sport-view:not(.dark-mode) .vna-view-toggle-btn {
    background: #FDFBF7 !important; /* Very light beige for buttons */
    border-color: #E8D7B0 !important;
    color: #6B5B47 !important; /* Muted warm gray-brown text */
}

body.sport-view:not(.dark-mode) .vna-view-toggle-btn:hover {
    background: #F5F2EC !important; /* Slightly darker beige on hover */
    border-color: #D4C19A !important;
    transform: translateY(-1px);
}

body.sport-view:not(.dark-mode) .vna-view-toggle-btn.active {
    background: #A59688 !important; /* Muted taupe active background */
    border-color: #A59688 !important;
    color: #FFFFFF !important; /* Pure white text for maximum contrast */
    font-weight: 600 !important; /* Slightly bolder for better visibility */
    box-shadow: 0 1px 3px 0 rgba(165, 150, 136, 0.3), 0 1px 2px -1px rgba(165, 150, 136, 0.3) !important;
}

/* Dark mode: Use darker sport-themed colors */
body.sport-view.dark-mode .vna-view-toggle {
    background: var(--dark-background-light) !important;
    border-color: #4A4A4A !important;
}

body.sport-view.dark-mode .vna-view-toggle-btn {
    background: #2C2F33 !important;
    border-color: #4A4A4A !important;
    color: #B8860B !important; /* Darker gold text */
}

body.sport-view.dark-mode .vna-view-toggle-btn:hover {
    background: #36393D !important;
    border-color: #5A5A5A !important;
    transform: translateY(-1px);
}

body.sport-view.dark-mode .vna-view-toggle-btn.active {
    background: #B8860B !important; /* Darker gold active */
    border-color: #B8860B !important;
    color: #ffffff !important;
    box-shadow: 0 1px 3px 0 rgba(184, 134, 11, 0.2), 0 1px 2px -1px rgba(184, 134, 11, 0.2) !important;
}

/* Additional sports-specific styling can be added below */

/* Comment Login Section - Sport Theme */
body.sport-view:not(.dark-mode) .comment-login-required {
    background: #A59688 !important; /* Match active VNA button color */
    border-color: #A59688 !important;
}

body.sport-view:not(.dark-mode) .comment-login-required p {
    color: #FFFFFF !important; /* White text for contrast on A59688 background */
}

body.sport-view:not(.dark-mode) .login-popup-trigger {
    background: #FFFFFF !important; /* White background for button */
    border-color: #A59688 !important;
    color: #A59688 !important; /* A59688 text color */
}

body.sport-view:not(.dark-mode) .login-popup-trigger:hover {
    background: #F5F2EC !important; /* Very light beige on hover */
    border-color: #A59688 !important;
    color: #A59688 !important;
}

/* Related Articles - Sport Theme */
body.sport-view:not(.dark-mode) .related-article-card {
    background: var(--sport-bg-light) !important;
    border-color: #E8D7B0 !important;
}

body.sport-view:not(.dark-mode) .related-article-title {
    color: #6B5B47 !important; /* Muted warm gray-brown text */
}

body.sport-view:not(.dark-mode) .related-article-meta {
    color: #8B7355 !important; /* Slightly lighter brown for meta text */
}

body.sport-view:not(.dark-mode) .related-articles-section {
    border-top-color: #E8D7B0 !important;
}

/* Dark mode overrides for sports comment login and related articles */
body.sport-view.dark-mode .comment-login-required {
    background: var(--dark-background-light) !important;
    border-color: #4A4A4A !important;
}

body.sport-view.dark-mode .comment-login-required p {
    color: #D4AF37 !important; /* Gold text for dark mode */
}

body.sport-view.dark-mode .login-popup-trigger {
    background: #B8860B !important; /* Darker gold background */
    color: #ffffff !important;
}

body.sport-view.dark-mode .login-popup-trigger:hover {
    background: #DAA520 !important; /* Lighter gold on hover */
}

body.sport-view.dark-mode .related-article-card {
    background: var(--dark-background-light) !important;
    border-color: #4A4A4A !important;
}

body.sport-view.dark-mode .related-article-title {
    color: #D4AF37 !important; /* Gold text for dark mode */
}

body.sport-view.dark-mode .related-article-meta {
    color: #B8860B !important; /* Darker gold for meta text */
}

body.sport-view.dark-mode .related-articles-section {
    border-top-color: #4A4A4A !important;
}

/* Sports category pills could have different styling if needed */
/* body.sport-view .category-pill.sport-category { } */

/* Sports-specific header adjustments if needed */
/* body.sport-view .site-header { } */

/* Sports-specific article card adjustments if needed */
/* body.sport-view .main-article { } */