/*
Theme Name: Worldlyfeed Custom
Theme URI: https://worldlyfeed.com
Author: Antigravity Custom
Description: A bespoke, ultra-lightweight, and modernized theme for Worldlyfeed replicating the Newsup layout structure but completely modernized with a clean, high-performance UI and zero framework bloat.
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: worldlyfeed
*/

/* ==========================================================================
   1. DESIGN SYSTEM & ROOT VARIABLES
   ========================================================================== */

:root {
    /* Harmonious Harmonized Palette */
    --color-bg-site: #f8fafc;
    --color-bg-card: #ffffff;
    --color-text-main: #0f172a;
    --color-text-muted: #475569;
    
    --color-primary: #1151d3;
    --color-primary-hover: #0d44b2;
    --color-primary-light: #eef4ff;
    
    --color-dark: #0f172a;
    --color-dark-muted: #1e293b;
    --color-border: #e2e8f0;
    
    /* Functional Accents */
    --color-success: #10b981;
    --color-success-dark: #059669;
    --color-danger: #ef4444;
    --color-warning: #f59e0b;
    
    /* Layout Tokens */
    --max-width-container: 1180px;
    --border-radius-sm: 6px;
    --border-radius-md: 10px;
    --border-radius-lg: 14px;
    
    /* Transition Variables */
    --transition-fast: 0.15s ease;
    --transition-smooth: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Elevation Shadows */
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.05);
    --shadow-md: 0 4px 18px rgba(15, 23, 42, 0.04);
    --shadow-lg: 0 10px 30px rgba(15, 23, 42, 0.06);
}

/* ==========================================================================
   2. GLOBAL CORE RESETS
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    background-color: var(--color-bg-site);
    color: var(--color-text-main);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-primary-hover);
}

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

button, input, textarea, select {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    outline: none;
}

/* Typography Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    color: var(--color-dark);
    line-height: 1.25;
    margin-bottom: 0.5em;
}

/* ==========================================================================
   3. BASE LAYOUT UTILITIES
   ========================================================================== */
.container {
    max-width: var(--max-width-container);
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
    box-sizing: border-box;
}

.screen-reader-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    border: 0 !important;
    white-space: nowrap !important;
}

.screen-reader-text:focus {
    clip: auto !important;
    clip-path: none !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 8px 12px !important;
    left: 8px !important;
    top: 8px !important;
    z-index: 99999 !important;
    background: #fff !important;
    color: var(--color-primary) !important;
    border-radius: var(--border-radius-sm) !important;
    border: 1px solid var(--color-border) !important;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

/* Fix visibility of login trigger, theme toggle, and user profile buttons in both themes */
.site-navigation-bar .btn-login-trigger, 
.site-navigation-bar .btn-login-trigger svg, 
.site-navigation-bar .btn-theme-toggle svg,
.site-navigation-bar .btn-user-profile {
    color: #cbd5e1 !important;
    stroke: #cbd5e1 !important;
}
.site-navigation-bar .btn-login-trigger:hover, 
.site-navigation-bar .btn-login-trigger:hover svg, 
.site-navigation-bar .btn-theme-toggle:hover svg,
.site-navigation-bar .btn-user-profile:hover {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

/* User profile dropdown text inside dark theme */
[data-theme="dark"] .user-profile-dropdown span {
    color: #ffffff !important;
}
[data-theme="dark"] .user-profile-dropdown {
    background: var(--color-bg-card, #1e293b) !important;
    border-color: var(--color-border, #334155) !important;
}

/* Top Readers Leaderboard styles inside dark theme */
[data-theme="dark"] .wf-leaderboard-widget {
    background: var(--color-bg-card, #1e293b) !important;
    border-color: var(--color-border, #334155) !important;
}
[data-theme="dark"] .wf-leaderboard-widget h3,
[data-theme="dark"] .wf-leaderboard-widget p,
[data-theme="dark"] .wf-leaderboard-widget span {
    color: #ffffff !important;
}
[data-theme="dark"] .wf-leaderboard-widget div {
    border-bottom-color: #334155 !important;
}
[data-theme="dark"] .wf-leaderboard-widget span[style*="color: var(--color-primary)"],
[data-theme="dark"] .wf-leaderboard-widget span[style*="color:#6366f1"],
[data-theme="dark"] .wf-leaderboard-widget span[style*="color:var(--color-primary)"] {
    color: #818cf8 !important;
}

/* Premium Light Theme Header Tagline/Logo Area Background Styling */
:root[data-theme="light"] .site-header,
:root:not([data-theme="dark"]) .site-header {
    background-color: #ffffff !important;
    background-image: 
        radial-gradient(circle at 10% 20%, rgba(99, 102, 241, 0.04) 0%, transparent 45%),
        radial-gradient(circle at 90% 80%, rgba(16, 185, 129, 0.03) 0%, transparent 45%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200' fill='none'%3E%3Cpath d='M0,128 C280,180 420,80 720,128 C1020,176 1160,80 1440,128 L1440,200 L0,200 Z' fill='%23f1f5f9' opacity='0.3'/%3E%3Cpath d='M0,96 C360,160 540,64 900,128 C1260,192 1380,96 1440,96' stroke='%23cbd5e1' stroke-width='1.5' stroke-dasharray='4,4' opacity='0.6'/%3E%3Cpath d='M100,40 Q250,150 400,60 T700,80 T1000,50 T1300,90' stroke='rgba(99,102,241,0.08)' stroke-width='2.5' stroke-linecap='round' fill='none'/%3E%3Cpath d='M50,80 Q200,190 350,100 T650,120 T950,90 T1250,130' stroke='rgba(16,185,129,0.06)' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") !important;
    background-size: cover, cover, 100% 100% !important;
    background-position: center !important;
    border-bottom: 1px solid var(--color-border) !important;
}
:root[data-theme="light"] .site-description,
:root:not([data-theme="dark"]) .site-description {
    color: var(--color-text-muted, #475569) !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px !important;
}
:root[data-theme="dark"] .site-description {
    color: #cbd5e1 !important;
}
:root[data-theme="dark"] .site-header {
    background-color: #0f172a !important;
    background-image: none !important;
    border-bottom: 1px solid #1e293b !important;
}

/* Fluid CSS Theme Color & Background transitions */
body, header, footer, .wf-widget, .wf-leaderboard-widget, article, .entry-content, .btn-theme-toggle, .user-profile-dropdown, .wf-bookmarks-drawer, .site-news-ticker, button, a {
    transition: background 0.4s ease, background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease !important;
}