/* ==========================================================================
   Page styles: pages/news-article.html
   Global/shared styles live in assets/css/style.css (and tailwind.css).
   ========================================================================== */

/* Article body content styling - High Readability & Contrast across Light/Dark modes */
.article-content {
    color: #334155;
    font-size: 1.125rem;
    line-height: 1.85;
    word-break: break-word;
}
.article-content h1, .article-content h2, .article-content h3,
.article-content h4, .article-content h5, .article-content h6 {
    font-weight: 800;
    color: #0f172a;
    margin: 2rem 0 0.85rem;
    line-height: 1.25;
    letter-spacing: -0.02em;
}
.article-content h1 { font-size: 2.25rem; }
.article-content h2 { font-size: 1.75rem; }
.article-content h3 { font-size: 1.35rem; }
.article-content h4 { font-size: 1.15rem; }
.article-content p,
.article-content div,
.article-content span,
.article-content li,
.article-content td,
.article-content th {
    color: #334155;
}
.article-content p  { margin: 1.25rem 0; line-height: 1.85; }
.article-content ul, .article-content ol { margin: 1.25rem 0 1.25rem 1.75rem; }
.article-content li { margin: 0.5rem 0; color: #334155; line-height: 1.75; }
.article-content strong, .article-content b {
    font-weight: 700;
    color: #0f172a;
}
.article-content blockquote {
    border-left: 4px solid #c41e3a;
    padding: 0.85rem 1.35rem;
    margin: 1.75rem 0;
    background: #fef2f2;
    border-radius: 0 0.75rem 0.75rem 0;
    font-style: italic;
    color: #475569;
}
.article-content img, #articleImage { max-width: 100%; border-radius: 1rem; display: block; margin: 1.5rem auto; cursor: zoom-in; transition: filter 0.2s ease, transform 0.2s ease; }
.article-content img:hover, #articleImage:hover { filter: brightness(1.05); }
.article-content img:not([style*="height"]) { height: auto; }
.article-content img[style*="float: left"], .article-content img.img-wrap-left { float: left; margin: 0.5rem 1.5rem 1rem 0; max-width: 50%; display: block; }
.article-content img[style*="float: right"], .article-content img.img-wrap-right { float: right; margin: 0.5rem 0 1rem 1.5rem; max-width: 50%; display: block; }
.article-content img.img-break-text { display: block; margin: 1.5rem auto; clear: both; }
.article-content img.img-inline { display: inline-block; margin: 0.25rem 0.5rem; float: none; vertical-align: baseline; }
.article-content a { color: #dc2626; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s ease; }
.article-content a:hover { color: #b91c1c; }

/* Dark Mode: Vibrant, Crystal-Clear Post Readability */
.dark .article-content {
    color: #e2e8f0 !important;
}
.dark .article-content p,
.dark .article-content div,
.dark .article-content span,
.dark .article-content li,
.dark .article-content ul,
.dark .article-content ol,
.dark .article-content td,
.dark .article-content th,
.dark .article-content font {
    color: #e2e8f0 !important;
}
.dark .article-content strong,
.dark .article-content b {
    color: #ffffff !important;
}
.dark .article-content h1,
.dark .article-content h2,
.dark .article-content h3,
.dark .article-content h4,
.dark .article-content h5,
.dark .article-content h6 {
    color: #ffffff !important;
}
.dark .article-content a,
.dark .article-content a span,
.dark .article-content a strong {
    color: #ef4444 !important;
}
.dark .article-content a:hover,
.dark .article-content a:hover span,
.dark .article-content a:hover strong {
    color: #f87171 !important;
}
.dark .article-content blockquote {
    background: #18181b !important;
    border-left: 4px solid #ef4444 !important;
    color: #cbd5e1 !important;
}
.dark .article-content hr {
    border-color: rgba(255, 255, 255, 0.1) !important;
}
/* Neutralize inline white backgrounds on dark mode */
.dark .article-content [style*="background-color: rgb(255, 255, 255)"],
.dark .article-content [style*="background-color: #fff"],
.dark .article-content [style*="background-color: #ffffff"],
.dark .article-content [style*="background-color: white"],
.dark .article-content [style*="background: rgb(255, 255, 255)"],
.dark .article-content [style*="background: #fff"],
.dark .article-content [style*="background: #ffffff"],
.dark .article-content [style*="background: white"] {
    background-color: transparent !important;
    background: transparent !important;
}

/* Video embed player */
.video-embed-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 */
    border-radius: 1.5rem;
    overflow: hidden;
    margin-bottom: 3rem;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
    background: #000;
}
.video-embed-wrapper iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: none;
}
.video-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: #c41e3a;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding: 0.3rem 0.75rem;
    border-radius: 0.5rem;
}

/* Skeleton loader */
@keyframes shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } }
.skeleton {
    background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 0.5rem;
}
.dark .skeleton {
    background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
    background-size: 200% 100%;
}