/* Charcoal — Bloomberg-inspired dark corporate with soft blue accents */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap');

:root {
    --font-headline: 'DM Sans', -apple-system, sans-serif;
    --font-body: 'DM Sans', -apple-system, sans-serif;
    --font-sans: 'DM Sans', -apple-system, sans-serif;
    --color-ink: #e6edf3;
    --color-paper: #0d1117;
    --color-rule: #30363d;
    --color-rule-light: #21262d;
    --color-accent: #d29922;
    --color-muted: #8b949e;
}

body { background: var(--color-paper); color: var(--color-ink); }
a { color: var(--color-ink); }
a:hover { color: var(--color-accent); }

/* Masthead */
.masthead { background: #010409; border-bottom: 1px solid #21262d; }
.masthead-title a { color: #fff !important; letter-spacing: -0.3px; }
.masthead-subtitle { color: var(--color-accent); }
.masthead-date { color: #8b949e; }

/* Nav */
.category-nav { background: #161b22; border-bottom: 1px solid #21262d; }
.category-nav .cat-link, .category-nav .nav-link { color: #8b949e; font-weight: 500; }
.category-nav .cat-link:hover, .category-nav .nav-link:hover, .category-nav .cat-link.active, .category-nav .nav-link.active { color: #fff; background: rgba(210,153,34,0.1); }

/* Lead */
.lead-article { border-color: #21262d; }
.lead-headline a { color: #e6edf3; }
.lead-headline a:hover { color: var(--color-accent); }
.lead-summary { color: #8b949e; }

/* Sidebar */
.sidebar-story { border-color: #21262d; }
.sidebar-headline a { color: #e6edf3; }
.sidebar-headline a:hover { color: var(--color-accent); }
.sidebar-summary { color: #8b949e; }

/* Grid */
.grid-article { border-color: #21262d; border-radius: 8px; background: #161b22; padding: 16px; margin-bottom: 8px; }
.grid-article:hover { border-color: #30363d; background: #1c2128; }
.grid-headline a { color: #e6edf3; }
.grid-headline a:hover { color: var(--color-accent); }
.grid-summary { color: #8b949e; }
.grid-category { color: var(--color-accent); font-size: 0.62rem; }
.section-label { color: var(--color-accent); }
.section-rule { border-color: #21262d; }

/* Article page */
.article-page-headline { color: #e6edf3; }
.article-page-summary { color: #8b949e; }
.article-content { color: #c9d1d9; line-height: 1.85; }
.article-content h2, .article-content h3 { color: #e6edf3; }
.article-content blockquote { border-color: var(--color-accent); color: #8b949e; }
.article-disclaimer { border-color: #21262d; color: #8b949e; }

/* Newsletter */
.newsletter-box, .newsletter-optin { background: #161b22; border: 1px solid #21262d; }
.newsletter-box .btn, .newsletter-optin .btn { background: var(--color-accent); color: #0d1117; border: none; font-weight: 700; }
.newsletter-box .form-control, .newsletter-optin .form-control { background: #0d1117; border-color: #30363d; color: #e6edf3; }

/* Pagination */
.pagination .page-link { background: #161b22; border-color: #30363d; color: #e6edf3; }
.pagination .active .page-link { background: var(--color-accent); border-color: var(--color-accent); color: #0d1117; }
.pagination .page-link:hover { background: #21262d; }

/* Footer */
.newspaper-footer { background: #010409; border-top: 1px solid #21262d; }
.breadcrumb-item a { color: var(--color-accent); }
.breadcrumb-item.active { color: #8b949e; }

/* Featured image */
.featured-image-container { border-color: #21262d !important; background: #0d1117 !important; }


/* Newsletter clip-path traveling border */
.charcoal-nl {
    position: relative;
    overflow: visible !important;
    border: 1px solid color-mix(in srgb, var(--color-accent) 30%, #21262d) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 15%, transparent);
}
.charcoal-nl::before,
.charcoal-nl::after {
    content: '';
    position: absolute;
    top: -4%; bottom: -4%; left: -1%; right: -1%;
    z-index: 0;
    box-shadow: inset 0 0 0 3px var(--color-accent), inset 0 0 8px 0 var(--color-accent), 0 0 8px 0 var(--color-accent);
    filter: drop-shadow(0 0 6px var(--color-accent));
    animation: charcoalClipBorder 8s linear infinite;
    pointer-events: none;
    border-radius: inherit;
}
.charcoal-nl::before {
    animation-delay: -4s;
}
@keyframes charcoalClipBorder {
    0%, 100% { clip-path: inset(0 0 calc(100% - 3px) 0); }
    25%       { clip-path: inset(0 calc(100% - 3px) 0 0); }
    50%       { clip-path: inset(calc(100% - 3px) 0 0 0); }
    75%       { clip-path: inset(0 0 0 calc(100% - 3px)); }
}
@media (prefers-reduced-motion: reduce) {
    .charcoal-nl::before,
    .charcoal-nl::after {
        animation: none;
        clip-path: none;
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 35%, transparent);
    }
}
/* Responsive: tighten glow pseudo-elements on tablet */
@media (max-width: 768px) {
    .charcoal-nl::before,
    .charcoal-nl::after {
        top: -2px; bottom: -2px; left: -2px; right: -2px;
    }
}
/* Responsive: flush on phone to prevent horizontal scroll */
@media (max-width: 576px) {
    .charcoal-nl {
        overflow: hidden !important;
    }
    .charcoal-nl::before,
    .charcoal-nl::after {
        top: -1px; bottom: -1px; left: -1px; right: -1px;
    }
    .charcoal-nl form {
        flex-direction: column !important;
    }
    .charcoal-nl form .charcoal-nl-input {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 44px;
        font-size: 16px !important;
    }
    .charcoal-nl form button {
        width: 100% !important;
        min-height: 44px;
    }
}

/* Bull/Bear Verdict — dark override (inline styles in article HTML) */
.article-content div[style*="background:#f8f9fa"] {
    background: #161b22 !important;
    border: 1px solid #30363d !important;
    color: #c9d1d9 !important;
}
.article-content div[style*="background:#f8f9fa"] h3 { color: #e6edf3 !important; }
.article-content div[style*="background:#f8f9fa"] p { color: #c9d1d9 !important; }
.article-content div[style*="background:#f8f9fa"] strong[style*="#16a34a"] { color: #22c55e !important; }
.article-content div[style*="background:#f8f9fa"] strong[style*="#dc2626"] { color: #ef4444 !important; }