/**
 * WORLDNEWS — Custom Stylesheet
 *
 * Supplements Tailwind CSS with custom properties, animations,
 * dark mode overrides, and utility classes.
 */

/* ═══════════════════════════════════════════════════════════════════
   CSS Custom Properties — Light Theme (default)
   ═══════════════════════════════════════════════════════════════════ */
:root {
    /* Primary palette */
    --color-primary:              #0037b0;
    --color-primary-light:        #d6e3ff;
    --color-primary-dark:         #001f6e;
    --color-primary-container:    #dae2ff;
    --color-on-primary:           #ffffff;
    --color-on-primary-container: #001849;

    /* Tertiary / Breaking */
    --color-tertiary:             #8f000b;
    --color-tertiary-light:       #ffdad5;
    --color-tertiary-dark:        #690004;
    --color-tertiary-container:   #ffdad5;
    --color-on-tertiary:          #ffffff;
    --color-on-tertiary-container:#410001;

    /* Surface system */
    --color-surface:               #f7f9fc;
    --color-surface-dim:           #d7d9dd;
    --color-surface-bright:        #f7f9fc;
    --color-surface-container:     #ebedf1;
    --color-surface-container-low: #f1f3f7;
    --color-surface-container-high:#e5e7eb;
    --color-surface-container-lowest: #ffffff;
    --color-on-surface:            #191c20;
    --color-on-surface-variant:    #44474e;

    /* Outline */
    --color-outline:         #74777f;
    --color-outline-variant:  #c4c6d0;

    /* Misc */
    --color-error:     #ba1a1a;
    --color-on-error:  #ffffff;
    --color-success:   #006e2c;
    --color-warning:   #795900;

    /* Font families */
    --font-serif:   'Noto Serif', Georgia, serif;
    --font-sans:    'Public Sans', system-ui, -apple-system, sans-serif;

    /* Shadows */
    --shadow-sm:  0 1px 2px rgba(0,0,0,0.05);
    --shadow-md:  0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
    --shadow-lg:  0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.05);
    --shadow-xl:  0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.05);

    /* Header */
    --header-height: 4rem;
}

/* ═══════════════════════════════════════════════════════════════════
   CSS Custom Properties — Dark Theme
   ═══════════════════════════════════════════════════════════════════ */
html.dark {
    --color-primary:              #afc6ff;
    --color-primary-light:        #d6e3ff;
    --color-primary-dark:         #0037b0;
    --color-primary-container:    #00429e;
    --color-on-primary:           #002b75;
    --color-on-primary-container: #dae2ff;

    --color-tertiary:             #ffb4ab;
    --color-tertiary-light:       #ffdad5;
    --color-tertiary-dark:        #8f000b;
    --color-tertiary-container:   #930010;
    --color-on-tertiary:          #690004;
    --color-on-tertiary-container:#ffdad5;

    --color-surface:               #0f172a;
    --color-surface-dim:           #111318;
    --color-surface-bright:        #37393e;
    --color-surface-container:     #1e293b;
    --color-surface-container-low: #191c20;
    --color-surface-container-high:#283240;
    --color-surface-container-lowest: #0c0e13;
    --color-on-surface:            #e2e2e6;
    --color-on-surface-variant:    #c4c6d0;

    --color-outline:         #8e9099;
    --color-outline-variant:  #44474e;

    --shadow-sm:  0 1px 2px rgba(0,0,0,0.3);
    --shadow-md:  0 4px 6px -1px rgba(0,0,0,0.4), 0 2px 4px -2px rgba(0,0,0,0.3);
    --shadow-lg:  0 10px 15px -3px rgba(0,0,0,0.5), 0 4px 6px -4px rgba(0,0,0,0.3);
    --shadow-xl:  0 20px 25px -5px rgba(0,0,0,0.5), 0 8px 10px -6px rgba(0,0,0,0.3);
}

/* ═══════════════════════════════════════════════════════════════════
   Base & Typography
   ═══════════════════════════════════════════════════════════════════ */
html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-sans);
    color: var(--color-on-surface);
    background-color: var(--color-surface);
}

/* Selection color */
::selection {
    background-color: var(--color-primary-container);
    color: var(--color-on-primary-container);
}

html.dark ::selection {
    background-color: #00429e;
    color: #dae2ff;
}

/* Focus visible ring for accessibility */
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ═══════════════════════════════════════════════════════════════════
   Material Symbols settings
   ═══════════════════════════════════════════════════════════════════ */
.material-symbols-outlined {
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24;
    vertical-align: middle;
}

.material-symbols-outlined.filled {
    font-variation-settings:
        'FILL' 1,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24;
}

/* ═══════════════════════════════════════════════════════════════════
   Glassmorphism
   ═══════════════════════════════════════════════════════════════════ */
.glassmorphism {
    background: rgba(247, 249, 252, 0.85);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    backdrop-filter: blur(12px) saturate(180%);
}

html.dark .glassmorphism {
    background: rgba(15, 23, 42, 0.85);
}

/* ═══════════════════════════════════════════════════════════════════
   Breaking News Ticker — scroll animation
   ═══════════════════════════════════════════════════════════════════ */
.ticker-wrap {
    overflow: hidden;
    position: relative;
}

.ticker-content {
    display: flex;
    animation: ticker-scroll 30s linear infinite;
    will-change: transform;
}

.ticker-content:hover {
    animation-play-state: paused;
}

@keyframes ticker-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ═══════════════════════════════════════════════════════════════════
   Pulse Dot — live / breaking indicator
   ═══════════════════════════════════════════════════════════════════ */
.pulse-dot {
    position: relative;
}

.pulse-dot::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: inherit;
    animation: pulse-ring 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-ring {
    0%        { opacity: 0.7; transform: scale(1); }
    70%, 100% { opacity: 0;   transform: scale(2.5); }
}

/* ═══════════════════════════════════════════════════════════════════
   Sticky header shadow on scroll
   ═══════════════════════════════════════════════════════════════════ */
#site-header.scrolled {
    box-shadow: var(--shadow-md);
}

/* ═══════════════════════════════════════════════════════════════════
   No-scrollbar utility
   ═══════════════════════════════════════════════════════════════════ */
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════════
   Custom Scrollbar
   ═══════════════════════════════════════════════════════════════════ */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-surface-container);
}

::-webkit-scrollbar-thumb {
    background: var(--color-outline-variant);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-outline);
}

html.dark ::-webkit-scrollbar-track {
    background: #1e293b;
}

html.dark ::-webkit-scrollbar-thumb {
    background: #475569;
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--color-outline-variant) var(--color-surface-container);
}

/* ═══════════════════════════════════════════════════════════════════
   Newspaper-tear clip-path for 404 page
   ═══════════════════════════════════════════════════════════════════ */
.newspaper-tear {
    clip-path: polygon(
        0% 0%, 5% 2%, 10% 0%, 15% 3%, 20% 0%, 25% 2%, 30% 0%, 35% 3%,
        40% 0%, 45% 2%, 50% 0%, 55% 3%, 60% 0%, 65% 2%, 70% 0%, 75% 3%,
        80% 0%, 85% 2%, 90% 0%, 95% 3%, 100% 0%, 100% 100%,
        95% 97%, 90% 100%, 85% 97%, 80% 100%, 75% 97%, 70% 100%, 65% 97%,
        60% 100%, 55% 97%, 50% 100%, 45% 97%, 40% 100%, 35% 97%, 30% 100%,
        25% 97%, 20% 100%, 15% 97%, 10% 100%, 5% 97%, 0% 100%
    );
}

/* ═══════════════════════════════════════════════════════════════════
   Sparkline colors (for inline charts in rates widget)
   ═══════════════════════════════════════════════════════════════════ */
.sparkline-up {
    stroke: #22c55e;
    fill: rgba(34, 197, 94, 0.1);
}

.sparkline-down {
    stroke: #ef4444;
    fill: rgba(239, 68, 68, 0.1);
}

/* ═══════════════════════════════════════════════════════════════════
   Theme Transition Utilities
   ═══════════════════════════════════════════════════════════════════ */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
    transition: background-color 0.3s ease, color 0.2s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* ═══════════════════════════════════════════════════════════════════
   Safe area for mobile bottom nav
   ═══════════════════════════════════════════════════════════════════ */
.safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Body scroll lock (when mobile menu is open) */
body.menu-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
}

/* ═══════════════════════════════════════════════════════════════════
   RTL Support Basics
   ═══════════════════════════════════════════════════════════════════ */
[dir="rtl"] .ticker-content {
    animation-name: ticker-scroll-rtl;
}

@keyframes ticker-scroll-rtl {
    0%   { transform: translateX(0); }
    100% { transform: translateX(50%); }
}

[dir="rtl"] .material-symbols-outlined.mirror-rtl {
    transform: scaleX(-1);
}

/* ═══════════════════════════════════════════════════════════════════
   Ad Slot — reserved space to prevent CLS
   ═══════════════════════════════════════════════════════════════════ */
.ad-slot {
    min-height: 90px;
    contain: layout style;
}

/* ═══════════════════════════════════════════════════════════════════
   Back-to-top button states
   ═══════════════════════════════════════════════════════════════════ */
#back-to-top.visible {
    opacity: 1;
    visibility: visible;
}

/* ═══════════════════════════════════════════════════════════════════
   Cookie consent slide-up animation
   ═══════════════════════════════════════════════════════════════════ */
#cookie-consent {
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

#cookie-consent.visible {
    display: block;
    transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════════════
   Print Styles
   ═══════════════════════════════════════════════════════════════════ */
@media print {
    /* Hide non-essential elements */
    #site-header,
    #mobile-bottom-nav,
    #mobile-menu,
    #mobile-overlay,
    #back-to-top,
    #cookie-consent,
    #breaking-ticker,
    .ad-slot,
    footer,
    nav {
        display: none !important;
    }

    body {
        background: white !important;
        color: black !important;
        font-size: 12pt;
        line-height: 1.5;
    }

    /* Remove header spacer */
    body > .h-16:first-of-type {
        display: none !important;
    }

    /* Show link URLs */
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }

    /* Prevent page breaks inside articles */
    article {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   Lazy image fade-in
   ═══════════════════════════════════════════════════════════════════ */
img[data-src] {
    opacity: 0;
    transition: opacity 0.4s ease;
}

img[data-src].loaded {
    opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════════
   Line clamp utilities (supplement for older browsers)
   ═══════════════════════════════════════════════════════════════════ */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}