/* ============================================================================
   news-article.css — puts news pages on the shared BizziKit design system
   ----------------------------------------------------------------------------
   News pages carry an inline <style> from an older design that hardcodes its
   own font stack, a dark page gradient, a translucent black nav and fixed
   hex colours, none of which match the rest of the site.

   Everything below is expressed in the tokens from css/bizzikit-common.css —
   the same ones the dashboard, the tools and the blog use — so news inherits
   any future change to the palette, radius or type scale instead of drifting
   again. Loaded AFTER each page's inline <style> so it wins without editing
   137 inline blocks.
   ========================================================================= */

/* ---- page ground and type ----------------------------------------------- */
body {
    font-family: var(--font-sans);
    background: url('../images/tilable_bg.jpg') repeat !important;
    background-size: 1800px !important;
    color: var(--mono-900);
    line-height: var(--leading-relaxed);
    -webkit-font-smoothing: antialiased;
}

/* ---- nav: the navy sticky bar used site-wide ---------------------------- */
.site-nav {
    background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-navy-light) 100%);
    padding: var(--space-3) var(--space-5);
    position: sticky;
    top: var(--space-2);
    z-index: var(--z-sticky);
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.4);
    margin: var(--space-2) var(--space-3) 0;
    border-radius: var(--radius-2xl);
    backdrop-filter: none;
}
.site-nav-container     { max-width: 1200px; margin: 0 auto; }
.site-nav-logo          { color: var(--mono-white); font-weight: var(--font-semibold); }
.site-nav-links a       { color: rgba(255, 255, 255, 0.85); font-size: var(--text-sm); }
.site-nav-links a:hover { color: var(--mono-white); }

/* ---- article header ----------------------------------------------------- */
.article-header h1 {
    color: var(--mono-900);
    font-weight: var(--font-extrabold);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
}
.article-meta    { color: var(--mono-600); font-size: var(--text-sm); }
.article-meta a  { color: var(--mono-600); }
.back-link       { color: var(--mono-700); font-size: var(--text-sm); }
.back-link:hover { color: var(--mono-900); }

/* ---- category badge: the same palette the news index uses ---------------- */
.category {
    background: var(--brand-primary-light);
    color: var(--brand-primary);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: var(--tracking-wide);
}
.category.cat-ai,
.category.cat-tech,
.category.cat-business    { background: #dbeafe; color: #1e40af; }
.category.cat-crypto      { background: #fef3c7; color: #92400e; }
.category.cat-defense     { background: #fee2e2; color: #991b1b; }
.category.cat-economy,
.category.cat-energy      { background: #d1fae5; color: #065f46; }
.category.cat-ev          { background: #e0e7ff; color: #3730a3; }
.category.cat-finance     { background: #fce7f3; color: #9d174d; }
.category.cat-games       { background: #f3e8ff; color: #7c3aed; }
.category.cat-lifestyle   { background: #ffedd5; color: #c2410c; }
.category.cat-software    { background: #e0e7ff; color: #4338ca; }
.category.cat-compliance  { background: #fef9c3; color: #854d0e; }
.category.cat-space       { background: #f3e8ff; color: #6b21a8; }
.category.cat-startups    { background: #e0f2fe; color: #0369a1; }
.category.cat-trade       { background: #ccfbf1; color: #0f766e; }

/* ---- article surface: the site's card ----------------------------------- */
.article-content {
    background: var(--bg-gradient-card, var(--mono-white));
    border: 2px solid var(--mono-200);
    border-radius: var(--radius-2xl);
    padding: var(--space-12);
    box-shadow: var(--shadow-md);
}
.article-content p,
.article-content li,
.article-content td { color: var(--mono-800); font-size: var(--text-lg); }
.article-content h2 {
    color: var(--mono-900);
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    letter-spacing: var(--tracking-tight);
}
.article-content h3 { color: var(--mono-900); font-weight: var(--font-semibold); }
.article-content strong { color: var(--mono-900); font-weight: var(--font-semibold); }
.article-content a       { color: var(--brand-primary); }
.article-content a:hover { color: var(--brand-primary-hover); }
.article-content hr      { border: 0; border-top: 1px solid var(--mono-200); }
.article-content code {
    font-family: var(--font-mono);
    background: var(--mono-100);
    color: var(--mono-900);
    border-radius: var(--radius-sm);
}
.article-content pre {
    background: var(--brand-navy);
    border: 1px solid var(--brand-navy-light);
    border-radius: var(--radius-lg);
    font-family: var(--font-mono);
}
.article-content pre code { background: none; color: #e2e8f0; }

figure.article-fig img {
    border: 1px solid var(--mono-200);
    border-radius: var(--radius-lg);
}
figure.article-fig figcaption { color: var(--mono-600); font-size: var(--text-sm); }

/* ---- callout panels ----------------------------------------------------- */
.faq-block   { border-top: 1px solid var(--mono-200); }
.faq-q       { color: var(--mono-900); font-weight: var(--font-bold); }
.faq-a       { color: var(--mono-800); }
.product-cta {
    background: var(--brand-primary-light);
    border: 1px solid #c7d2fe;
    border-radius: var(--radius-xl);
}
.product-cta p { color: #3730a3; }
.disclosure {
    background: var(--warning-50);
    border-left: 4px solid var(--warning-500);
    border-radius: var(--radius-md);
}
.disclosure p { color: var(--warning-700); }
.keydates {
    background: var(--info-50, #eff6ff);
    border: 1px solid #bae6fd;
    border-radius: var(--radius-lg);
}
.keydates .kd-title { color: #075985; font-weight: var(--font-bold); }
.keydates ul, .keydates li { color: #0c4a6e; }
.keydates .kd-foot { color: #0369a1; font-size: var(--text-sm); }

.key-stats { background: var(--accent-50); border-radius: var(--radius-lg); }
.key-stats h3 { color: var(--accent-700); }
.key-stats li { color: var(--accent-600); }
.game-rating {
    background: var(--warning-50);
    border: 1px solid var(--warning-100);
    border-radius: var(--radius-lg);
}
.game-rating h3 { color: var(--warning-700); }
.stars, .rating-score { color: var(--warning-500); }
.rating-label   { color: var(--warning-700); }

.related-articles { background: var(--mono-50); border-radius: var(--radius-lg); }
.related-articles h3 { color: var(--mono-900); }
.related-articles a  { color: var(--brand-primary); }

/* ---- comments ----------------------------------------------------------- */
.comments-section  { border-top: 1px solid var(--mono-200); }
.comments-section h3 { color: var(--mono-900); }
.comment-form, .comment { background: var(--mono-50); border-radius: var(--radius-lg); }
.comment-form input, .comment-form textarea {
    font-family: var(--font-sans);
    border: 1px solid var(--mono-300);
    border-radius: var(--radius-md);
    color: var(--mono-900);
}
.comment-form button {
    background: var(--brand-primary);
    color: var(--mono-white);
    border-radius: var(--radius-md);
    font-weight: var(--font-semibold);
}
.comment-form button:hover { background: var(--brand-primary-hover); }
.comment-author { color: var(--mono-900); }
.comment-date   { color: var(--mono-500); }
.comment-text   { color: var(--mono-800); }
.no-comments    { color: var(--mono-500); }

/* ---- advertising: never reserve visible space for an unfilled slot ------- */
.inline-ad, .ad-banner { background: transparent; border: 0; padding: 0; min-height: 0; }
ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; }
.ad-sidebar:empty { display: none; }

/* ============================================================================
   Category hub pages (news/<cat>/index.html)
   ========================================================================= */
.wrap .crumb, .wrap .crumb a { color: var(--mono-600); font-size: var(--text-sm); }
.wrap h1 {
    color: var(--mono-900);
    font-weight: var(--font-extrabold);
    letter-spacing: var(--tracking-tight);
}
.wrap .intro p { color: var(--mono-800); }
.wrap .intro a { color: var(--brand-primary); }
.wrap .count   { color: var(--mono-600); border-top: 1px solid var(--mono-200); font-size: var(--text-sm); }
.wrap .badge   { color: var(--brand-navy); border-radius: var(--radius-full); font-weight: var(--font-bold); }

.hub-card {
    background: var(--bg-gradient-card, var(--mono-white));
    border: 2px solid var(--mono-200);
    border-radius: var(--radius-2xl);
    padding: var(--space-6);
    margin-bottom: var(--space-4);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
}
.hub-card:hover      { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.hub-card h2 a       { color: var(--mono-900); font-weight: var(--font-bold); }
.hub-card h2 a:hover { color: var(--brand-primary); }
.hub-card p          { color: var(--mono-700); }
.hub-meta            { color: var(--mono-500) !important; font-size: var(--text-sm) !important; }

.others   { border-top: 1px solid var(--mono-200); }
.others h2{ color: var(--mono-900); }
.others a {
    background: var(--mono-white);
    border: 1px solid var(--mono-200);
    border-radius: var(--radius-full);
    color: var(--mono-800);
    transition: all var(--transition-fast);
}
.others a:hover { border-color: var(--brand-primary); color: var(--brand-primary); }

/* ---- footer links stay legible on the navy footer ------------------------ */
footer a { color: var(--mono-white); }