/**
 * Light Mode ("ghost blog") overrides for admin News/blog posts.
 *
 * All rules are scoped under `body.news-light-mode`, which is added by
 * media.html.twig only when a News post has Light Mode enabled. The higher
 * specificity (body + class) lets these rules win over the base news.css /
 * comments.css rules regardless of stylesheet load order.
 *
 * The bottom "preview blogs" (.featured-widget.news) are intentionally left
 * untouched per spec, so they remain overlaid on the white background.
 *
 * Palette:
 *   Pearl background  #FBFCF8
 *   Copy / UI         #000000
 *   Hyperlinks        #1b55ad
 *   Comment rules     #474646 (dark gray)
 */

/* ---- Page background: drop the wallpaper for a pearl white page ---- */
body.news-light-mode {
    background: #FBFCF8 !important;
    background-image: none !important;
}

/* ---- Nav bar: keep the "scrolled" dark background at all times so the
        white nav text/logo stays visible over the pearl background ---- */
body.news-light-mode .navbar-main {
    background-color: #323232 !important;
}

/* ---- Remove the dark content container behind the copy ---- */
body.news-light-mode .news-landing-container {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* ---- Article copy -> black ---- */
body.news-light-mode .news-title,
body.news-light-mode .news-meta,
body.news-light-mode .news-header,
body.news-light-mode .news-description,
body.news-light-mode .news-description p,
body.news-light-mode .news-content,
body.news-light-mode .news-content p,
body.news-light-mode .news-content table,
body.news-light-mode .news-content li,
body.news-light-mode .news-content span {
    color: #000000 !important;
}

body.news-light-mode .news-title {
    border-bottom-color: #000000 !important;
}

/* ---- Hyperlinks -> darker blue ---- */
body.news-light-mode .news-description a,
body.news-light-mode .news-content a {
    color: #1b55ad !important;
}

body.news-light-mode .news-description a:hover,
body.news-light-mode .news-content a:hover {
    color: #143f80 !important;
}

/* ---- Tables, rules, grid lines -> black ---- */
body.news-light-mode .news-content table,
body.news-light-mode .news-content table th,
body.news-light-mode .news-content table td,
body.news-light-mode .news-content table tr,
body.news-light-mode .news-content table thead,
body.news-light-mode .news-content table tbody,
body.news-light-mode .news-content table tfoot {
    border-color: #000000 !important;
    color: #000000 !important;
}

body.news-light-mode .news__divider {
    background-color: #000000 !important;
}

body.news-light-mode hr {
    border-color: #000000 !important;
    color: #000000 !important;
}

/* ---- UI / page buttons + social icons -> black ---- */
body.news-light-mode .news-actions .btn,
body.news-light-mode .news-actions .btn-group .btn,
body.news-light-mode .news-actions .btn i,
body.news-light-mode .news-social .btn,
body.news-light-mode .news-social .btn i {
    color: #000000 !important;
}

body.news-light-mode .news-actions .btn:hover,
body.news-light-mode .news-social .btn:hover {
    color: #1b55ad !important;
    background: transparent !important;
}

/* ================= Comment section ================= */

/* Drop the dark containers */
body.news-light-mode .comments-section .common__landing-comments,
body.news-light-mode .comments-section .common__landing-comments__meta,
body.news-light-mode .comments-section .common__landing-comments__pagination,
body.news-light-mode .comments-section .common__landing-comments__post,
body.news-light-mode .comments-section .common__landing-comments__post .mx-3,
body.news-light-mode .comments-section .container-comment-form,
body.news-light-mode .comments-section .container-comment-form .comment-form-content,
body.news-light-mode .container-comment-form .comment-form .form-actions {
    background: transparent !important;
}

/* Border lines / hrules -> dark gray */
body.news-light-mode .comments-section .common__landing-comments__meta,
body.news-light-mode .comments-section .common__landing-comments__post,
body.news-light-mode .comments-section .common__landing-comments__post .col-lg-9,
body.news-light-mode .comments-section .common__landing-comments__post .col-md-9,
body.news-light-mode .comments-section .common__landing-comments__post-options,
body.news-light-mode .comments-section .contentBorder,
body.news-light-mode .contentBorder,
body.news-light-mode .container-comment-form .comment-form .form-actions {
    border-color: #474646 !important;
}

/* Comments, usernames, timestamps, UI buttons -> black */
body.news-light-mode .comments-section .common__landing-comments__post .mx-3,
body.news-light-mode .comments-section .common__landing-comments__post .mx-3 p,
body.news-light-mode .comments-section .common__landing-comments__post .mx-3 div,
body.news-light-mode .comments-section .common__landing-comments__post .profile-username a,
body.news-light-mode .comments-section .common__landing-comments__post .profile-subtitle,
body.news-light-mode .comments-section .common__landing-comments__post .timeago,
body.news-light-mode .comments-section .common__landing-comments__post .common__landing-comments__post-edited,
body.news-light-mode .comments-section .common__landing-comments__meta .pull-left,
body.news-light-mode .comments-section .common__landing-comments__post-option,
body.news-light-mode .comments-section .common__landing-comments__post-option i,
body.news-light-mode .comments-section .pagination li a,
body.news-light-mode .comments-section .pagination li span {
    color: #000000 !important;
}

body.news-light-mode .comments-section .common__landing-comments__post-option:hover,
body.news-light-mode .comments-section .pagination li a:hover {
    color: #1b55ad !important;
}

/* Comment content links -> darker blue */
body.news-light-mode .comments-section .card-body a,
body.news-light-mode .comments-section .common__landing-comments__post .mx-3 a {
    color: #1b55ad !important;
}

/* Reply / action button group -> black */
body.news-light-mode .comments-section .btn-group .btn,
body.news-light-mode .comments-section .btn-group a,
body.news-light-mode .comments-section .btn-group button,
body.news-light-mode .comments-section .btn-group .btn i,
body.news-light-mode .comments-section .btn-group a i,
body.news-light-mode .comments-section .btn-group button i,
body.news-light-mode .comments-section .btn-group .hidden-xs {
    color: #000000 !important;
    border-color: #474646 !important;
}

/* Comment form (WYSIWYG) -> light version */
body.news-light-mode .comments-section .container-comment-form .comment-form-content,
body.news-light-mode .comments-section .card.bg-dark {
    background: #ffffff !important;
    color: #000000 !important;
}

body.news-light-mode .comments-section .card.bg-dark {
    border: 1px solid #474646 !important;
}

body.news-light-mode .container-comment-form .comment-form .form-actions button,
body.news-light-mode .container-comment-form .comment-form .form-actions a,
body.news-light-mode .comments-section .form-actions .btn,
body.news-light-mode .comments-section .form-actions .btn-primary,
body.news-light-mode .comments-section .form-actions .btn-post-comment {
    color: #000000 !important;
    border-color: #474646 !important;
    background: transparent !important;
}

body.news-light-mode .container-comment-form .comment-form .form-actions button:hover,
body.news-light-mode .container-comment-form .comment-form .form-actions a:hover {
    color: #1b55ad !important;
    border-color: #1b55ad !important;
}

/* CKEditor editable area (comment WYSIWYG) -> white/black.
   The dark theme keeps --ck-content-font-color light, so typed text is
   invisible on the white editor; override the variable and the color. */
body.news-light-mode .comments-section .ck-content,
body.news-light-mode .comments-section .ck-editor__editable,
body.news-light-mode .comments-section .cke_editable,
body.news-light-mode .comments-section textarea.ckeditor {
    --ck-content-font-color: #000000;
    background: #ffffff !important;
    color: #000000 !important;
}

/* ================= Footer ================= */
body.news-light-mode .footer a,
body.news-light-mode .footer .text-muted,
body.news-light-mode .footer span {
    color: #000000 !important;
}

body.news-light-mode .footer .ai {
    fill: #000000 !important;
}