/* ==========================================================================
   GLOBAL.CSS (Clean Specificity - No !important tags)
   Core Engine: Variables, Resets, Utilities, Local Fonts, and Dark Mode
   ========================================================================== */

/* ==========================================================================
   LOCAL FONT ENGINE (WOFF2 Format)
   ========================================================================== */
/* Aleo Serif */
@font-face {
    font-family: 'Aleo';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/aleo-latin-400-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Aleo';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/aleo-latin-700-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Aleo';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('../fonts/aleo-latin-900-normal.woff2') format('woff2');
}

/* Roboto Sans */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/roboto-latin-400-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/roboto-latin-400-italic.woff2') format('woff2');
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/roboto-latin-500-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/roboto-latin-700-normal.woff2') format('woff2');
}

/* ==========================================================================
   CSS Variables & Custom Properties
   ========================================================================== */
:root {
    /* Colors */
    --color-text: #111;
    --color-text-muted: #666;
    --color-bg: #ffffff;
    --color-surface: #f8f9fa;
    --color-border: #eaeaea;
    --color-fashion: #e0a98b;
    --color-celebrity: #fb8b8b;
    --color-culture: #6b4ce6;
    --color-global: #1ea0d1; 
    --color-story: #f87d22;  
    --color-orange: #f99d21;
    --color-hot: #ff00ff;
    --color-trending-up: #28a745;
    --color-dark-bg: #151515;
    --color-logo-pink: #e6107b;
    
    /* Typography */
    --font-sans: 'Roboto', sans-serif;
    --font-serif: 'Aleo', serif;
    --font-meta: 'Roboto', sans-serif;
    
    /* Spacing & Layout */
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 2rem;
    --radius-md: 8px;
    --radius-lg: 16px;
    --container-max: 1280px;
}

/* ==========================================================================
   Base Resets
   ========================================================================== */
* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
}

body {
    font-family: var(--font-meta);
    color: var(--color-text);
    background-color: var(--color-bg);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

a { 
    text-decoration: none; 
    color: inherit; 
}

img { 
    max-width: 100%; 
    height: auto; 
    display: block; 
    object-fit: cover; 
}

ul { 
    list-style: none; 
}

/* ==========================================================================
   Layout Utilities
   ========================================================================== */
.container { 
    width: 100%; 
    max-width: var(--container-max); 
    margin: 0 auto; 
    padding: 0 var(--spacing-md); 
}

.in-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.section-padding { 
    padding-bottom: 4rem; 
}

/* ==========================================================================
   Global Component Styles
   ========================================================================== */

/* Standardized Section Headings */
.section-title, 
.latest-news-header h2, 
#more-music-heading, 
#sports-heading, 
#birthdays-heading, 
#trending-heading,
.cat-section-title,
.sports-header-title {
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--spacing-lg);
    border-bottom: 2px solid var(--color-text);
    display: inline-block;
    padding-bottom: 0.25rem;
}

/* Base Category Tag */
.category-tag, 
.tag-music-news, 
.tag-sports-item, 
.tag-f1 {
    font-family: 'Aleo', serif;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase; 
    color: #fff; 
    background-color: #111; 
    padding: 4px 10px; 
    display: inline-block; 
    letter-spacing: 0.5px;
}

/* Specific Category Colors */
.tag-fashion { background-color: var(--color-fashion); }
.tag-celebrity { background-color: var(--color-celebrity); }
.tag-culture { background-color: var(--color-culture); }
.tag-music { background-color: #8a2be2; } 
.tag-sports { background-color: #ff4500; } 
.tag-uncategorized { background-color: #666666; }

/* Universal Timestamp Styling */
.post-meta, 
.list-item .post-meta,
.card-side .post-meta,
.mr-list-item .post-meta,
.author-date { 
    font-family: var(--font-meta); 
    font-size: 0.625rem; 
    font-weight: 500; 
    color: var(--color-text-muted); 
    text-transform: uppercase; 
    letter-spacing: 0.5px;
}

/* Timestamp Alignment Fixes */
.post-meta, 
.list-item .post-meta, 
.card-side .post-meta {
    display: flex; 
    justify-content: space-between;
    align-items: center;
}

.author-date { 
    display: flex; 
    align-items: center; 
    gap: 4px; 
}

/* Author Mentions in Loops */
.author-name, 
.meta-author, 
.f1-author, 
.sports-author, 
.sb-latest-meta {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 500;
}

/* ==========================================================================
   Screen Reader Utilities
   ========================================================================== */
.screen-reader-text { 
    border: 0; 
    clip: rect(1px, 1px, 1px, 1px); 
    clip-path: inset(50%); 
    height: 1px; 
    margin: -1px; 
    overflow: hidden; 
    padding: 0; 
    position: absolute; 
    width: 1px; 
    word-wrap: normal; 
}

.screen-reader-text:focus { 
    background-color: #fff; 
    border-radius: 4px; 
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); 
    clip: auto; 
    clip-path: none; 
    color: #111; 
    display: block; 
    font-family: var(--font-meta); 
    font-size: 0.875rem; 
    font-weight: 700; 
    height: auto; 
    left: 5px; 
    line-height: normal; 
    padding: 15px 23px 14px; 
    text-decoration: none; 
    top: 5px; 
    width: auto; 
    z-index: 100000; 
}

/* ==========================================================================
   Dark Mode Engine (Base Rules)
   ========================================================================== */
[data-theme="dark"] {
    --color-text: #eaeaea;
    --color-text-muted: #a0a0a0;
    --color-bg: #111111;
    --color-surface: #1e1e1e;
    --color-border: #333333;
    --color-dark-bg: #0a0a0a;
}

/* Global Link Interactions */
article h2 a:hover, 
article h2 a:active,
article h3 a:hover, 
article h3 a:active,
article h4 a:hover, 
article h4 a:active {
    color: var(--color-fashion); 
    text-decoration: underline;
    text-underline-offset: 4px; 
    text-decoration-thickness: 1px;
    transition: color 0.2s ease;
}

[data-theme="dark"] article h2 a:hover, 
[data-theme="dark"] article h2 a:active,
[data-theme="dark"] article h3 a:hover, 
[data-theme="dark"] article h3 a:active,
[data-theme="dark"] article h4 a:hover, 
[data-theme="dark"] article h4 a:active {
    color: var(--color-fashion); 
}

/* Dark Mode Excerpt Fix */
[data-theme="dark"] .excerpt,
[data-theme="dark"] .hero-main-article .excerpt,
[data-theme="dark"] .feed-content .excerpt {
    color: #bbb;
}