/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Exclude specific elements from transition if needed */
img, svg, video {
    transition: opacity 0.3s ease;
}

/* CSS Variables - Design System */
:root {
    /* Colors */
    --color-primary-start: #667eea;
    --color-primary-end: #764ba2;
    --color-primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --color-background-dark: #2c3e50;
    --color-background-light: #f8f9fa;
    --color-text-primary: #222; /* Darker than #333 for better contrast */
    --color-text-secondary: #555; /* Darker than #666 */
    --color-text-muted: #bdc3c7;
    --color-white: #ffffff;
    --color-danger: #e74c3c;
    --color-danger-hover: #c0392b;
    --color-success: #27ae60;
    --color-gold: #FFD700;
    --color-gold-gradient: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-xxl: 3rem;
    
    /* Navigation */
    --nav-height: 60px; /* Reduced from 75px */
    --nav-icon-size: 1.0rem; /* Reduced from 1.2rem */
    --nav-font-size: 0.6rem; /* Slightly reduced */
    --header-height: 64px; /* Header height: padding (1rem top + 1rem bottom) + logo (2rem) ≈ 64px */
    
    /* Typography */
    --font-family: 'Inter', sans-serif;
    --font-size-xs: 0.65rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.5rem;
    --font-size-xxl: 2rem;
    --line-height-base: 1.5; /* REDUCED from 1.6 */
    --line-height-tight: 1.2;
    
    /* Z-index Scale */
    --z-index-base: 100;
    --z-index-header: 200;
    --z-index-modal: 1000;
    --z-index-modal-overlay: 2000;
    --z-index-tooltip: 3000;
    
    /* Breakpoints (for reference, use in media queries) */
    --breakpoint-mobile: 480px;
    --breakpoint-tablet: 768px;
    --breakpoint-desktop: 1024px;
    
    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 8px rgba(0,0,0,0.1);
    --shadow-lg: 0 8px 16px rgba(0,0,0,0.15);
    --shadow-xl: 0 20px 40px rgba(0,0,0,0.3);
    --shadow-primary: 0 4px 15px rgba(102, 126, 234, 0.4);
    --shadow-gold: 0 2px 4px rgba(255, 215, 0, 0.6);
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* Dark Theme Variables */
[data-theme="dark"] {
    --color-background-light: #1a1a1a;
    --color-background-dark: #0f0f0f;
    --color-text-primary: #f0f0f0; /* Lighter than #e0e0e0 */
    --color-text-secondary: #d0d0d0; /* Lighter than #b0b0b0 */
    --color-text-muted: #707070;
    --color-white: #ffffff;
    
    /* Keep primary gradient same or adjust slightly */
    --color-primary-start: #667eea;
    --color-primary-end: #764ba2;
    
    /* Update shadows for dark theme */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.7);
    
    /* Header background for dark theme */
    --header-bg-dark: #1a1a1a;
}

html {
    /* Removed overflow-x: hidden to allow proper sticky positioning behavior */
    /* Changed from height: 100% to min-height: 100% to allow proper sticky positioning */
    min-height: 100%;
    min-height: -webkit-fill-available; /* For mobile browsers - handles dynamic viewport */
    scroll-behavior: smooth;
    /* Ensure html is the scroll container for sticky positioning */
    height: auto;
}

/* Mobile Scroll Snap Container */
@media (max-width: 768px) {
    html {
        scroll-snap-type: y mandatory;
        /* Matches Category Nav height (~46px) */
        scroll-padding-top: 46px;
    }
}

/* Tablet Scroll Snap Container */
@media (min-width: 769px) and (max-width: 1024px) {
    html {
        scroll-snap-type: y mandatory;
        /* Matches Category Nav height (~57px) */
        scroll-padding-top: 57px;
    }
}

body {
    font-family: var(--font-family);
    line-height: var(--line-height-base);
    color: var(--color-text-primary);
    background-color: var(--color-background-light);
    min-height: 100vh;
    min-height: -webkit-fill-available; /* For mobile browsers - handles dynamic viewport */
    /* Removed overflow-x: hidden to allow proper sticky positioning behavior */
    /* Ensure sticky positioning works - viewport is the scroll container */
    /* Position relative kept for absolute positioning of children, but doesn't interfere with sticky */
    position: relative;
    /* Don't set overflow-y: auto as it creates a nested scroll container - let viewport handle scrolling */
}

/* Dark theme body background */
[data-theme="dark"] body {
    background-color: var(--color-background-dark);
    color: var(--color-text-primary);
}

/* Main Content */
.main-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
    padding-bottom: 0;
}

/* Mobile - Add padding for bottom nav only (category nav bar is sticky, not fixed) */
@media (max-width: 768px) {
    .main-content {
        padding: 0; /* No padding - articles start immediately after category nav bar */
        padding-bottom: 0;
    }
    
    body {
        padding-bottom: var(--nav-height); /* Space for bottom nav */
        padding-top: 0; /* No padding needed - category nav bar is sticky, not fixed */
    }
}

/* Focus styles for accessibility - KEYBOARD ONLY */
.news-card:focus-visible,
.nav-link:focus-visible,
button:focus-visible,
input:focus-visible,
a:focus-visible {
    outline: 2px solid #667eea;
    outline-offset: 3px;
    border-radius: 4px;
}

/* Remove ALL focus outlines for mouse clicks */
.news-card:focus:not(:focus-visible),
.nav-link:focus:not(:focus-visible),
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
    border-color: inherit !important;
}

/* Input fields keep focus for UX */
input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* Remove active state highlights for mouse clicks */
.news-card:active,
.nav-link:active,
button:active,
a:active {
    outline: none !important;
    box-shadow: none !important;
}

/* Smooth click feedback without persistent highlights */
button,
.nav-link,
a,
.home-nav-item {
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Improve click responsiveness */
button,
.nav-link,
a,
.home-nav-item {
    touch-action: manipulation;
    cursor: pointer;
}

/* Print styles */
@media print {
    .header,
    .footer {
        display: none;
    }
    
    .main-content {
        padding: 0;
    }
    
    .news-card {
        break-inside: avoid;
        margin-bottom: 1rem;
    }
}