/* Noir — light editorial theme with red and black identity */
html[data-theme="noir"] {
    --noir-red: var(--vr-theme-color, #e11d2e);
    --noir-black: #111111;
    --noir-ink: #191919;
    --noir-muted: #6d6d72;
    --noir-paper: #ffffff;
    --noir-canvas: #f4f4f2;
    --noir-line: #dededb;
}

html[data-theme="noir"] body,
html[data-theme="noir"][data-bs-theme="dark"] body {
    --vr-body-bg: var(--noir-canvas);
    --vr-body-secondary-bg: #fff;
    --vr-text-main: var(--noir-ink);
    --vr-text-main-secondary: #333;
    --vr-text-muted: var(--noir-muted);
    --vr-border-color: var(--noir-line);
    color: var(--noir-ink) !important;
    background: var(--noir-canvas) !important;
}

html[data-theme="noir"] .topbar {
    color: #d4d4d4;
    background: var(--noir-black);
    border-bottom: 3px solid var(--noir-red);
}

html[data-theme="noir"] #sticky-menu-wrapper {
    top: 0;
    background: rgba(255, 255, 255, .96);
    border-bottom: 1px solid #d9d9d6;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .065);
    backdrop-filter: blur(18px);
}

html[data-theme="noir"] .mega-menu-wrapper {
    --mn-bg-nav: #fff;
    --mn-text-main: #161616;
    --mn-text-sub: #454545;
    --mn-border: #dededb;
    --mn-min-height: 72px;
    --mn-padding-nav-link: .65rem .9rem;
    background: transparent;
    border: 0;
}

html[data-theme="noir"] .mega-menu-wrapper .navbar { min-height: 72px; }
html[data-theme="noir"] .mega-menu-wrapper .navbar-nav { align-items: center; gap: 2px; }
html[data-theme="noir"] .mega-menu-wrapper .navbar-nav .nav-item { display: flex; align-items: center; }
html[data-theme="noir"] .mega-menu-wrapper .navbar-nav .nav-link {
    min-height: 40px;
    color: #191919;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: .025em;
    border: 1px solid transparent;
    border-radius: 8px;
    transition: color .2s ease, background-color .2s ease;
}

html[data-theme="noir"] .mega-menu-wrapper .navbar-nav .nav-item.active > .nav-link,
html[data-theme="noir"] .mega-menu-wrapper .navbar-nav .nav-link:hover,
html[data-theme="noir"] .mega-menu-wrapper .navbar-nav .nav-item.dropdown:hover > .nav-link {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background: var(--noir-red);
    border-color: var(--noir-red);
    opacity: 1 !important;
}

html[data-theme="noir"] .mega-menu-wrapper .navbar-nav .nav-item.active > .nav-link *,
html[data-theme="noir"] .mega-menu-wrapper .navbar-nav .nav-link:hover *,
html[data-theme="noir"] .mega-menu-wrapper .navbar-nav .nav-item.dropdown:hover > .nav-link * {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    opacity: 1 !important;
}

html[data-theme="noir"] .mega-menu-wrapper .navbar-nav .nav-item.active > .nav-link .mn-icon,
html[data-theme="noir"] .mega-menu-wrapper .navbar-nav .nav-link:hover .mn-icon,
html[data-theme="noir"] .mega-menu-wrapper .navbar-nav .nav-item.dropdown:hover > .nav-link .mn-icon,
html[data-theme="noir"] .mega-menu-wrapper .navbar-nav .nav-item.active > .nav-link .mn-icon path,
html[data-theme="noir"] .mega-menu-wrapper .navbar-nav .nav-link:hover .mn-icon path,
html[data-theme="noir"] .mega-menu-wrapper .navbar-nav .nav-item.dropdown:hover > .nav-link .mn-icon path {
    color: #fff !important;
    fill: #fff !important;
    opacity: 1 !important;
}

html[data-theme="noir"] .mega-menu-wrapper .search-icon-btn { color: var(--noir-black); }
html[data-theme="noir"] .featured-section { padding-top: 32px; }
html[data-theme="noir"] .fs-grid-wrapper { gap: 14px; }
html[data-theme="noir"] .fs-card,
html[data-theme="noir"] .main-slider-wrapper {
    overflow: hidden;
    background: #181818;
    border: 0;
    border-radius: 12px;
    box-shadow: 0 20px 48px rgba(0, 0, 0, .18);
}

html[data-theme="noir"] .fs-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 18%, rgba(0, 0, 0, .9));
}

html[data-theme="noir"] .fs-content { z-index: 2; padding: 27px; }
html[data-theme="noir"] .fs-title,
html[data-theme="noir"] .post-title,
html[data-theme="noir"] .section .section-title .title { letter-spacing: -.035em; }
html[data-theme="noir"] .fs-title { font-size: clamp(23px, 2.4vw, 40px); font-weight: 850; }

html[data-theme="noir"] .badge-category {
    padding: 6px 11px;
    color: #fff !important;
    background: var(--noir-red) !important;
    border: 0;
    border-radius: 5px;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
}

html[data-theme="noir"] .section { margin-top: 50px; }
html[data-theme="noir"] .section .section-title {
    padding-bottom: 13px;
    border-bottom: 2px solid var(--noir-black);
}

html[data-theme="noir"] .section .section-title::after {
    bottom: -2px;
    width: 82px;
    height: 4px;
    background: var(--noir-red);
}

html[data-theme="noir"] .section .section-title .title {
    color: var(--noir-black);
    font-size: 28px;
    font-weight: 900;
}

html[data-theme="noir"] .section .section-title .view-all { color: var(--noir-red); font-weight: 800; }
html[data-theme="noir"] .post-item:not(.post-item-small):not(.post-item-vr) {
    height: calc(100% - 25px);
    margin-bottom: 25px;
    padding: 10px 10px 18px;
    background: var(--noir-paper);
    border: 1px solid #dfdfdc;
    border-top: 4px solid var(--noir-black);
    border-radius: 11px;
    box-shadow: 0 9px 28px rgba(0, 0, 0, .055);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

html[data-theme="noir"] .post-item:not(.post-item-small):not(.post-item-vr):hover {
    transform: translateY(-5px);
    border-top-color: var(--noir-red);
    box-shadow: 0 17px 38px rgba(0, 0, 0, .11);
}

html[data-theme="noir"] .post-item .image { overflow: hidden; border-radius: 7px; }
html[data-theme="noir"] .post-item .image img { filter: contrast(1.04); transition: transform .45s ease, filter .3s ease; }
html[data-theme="noir"] .post-item:hover .image img { filter: contrast(1.08) saturate(1.08); transform: scale(1.04); }
html[data-theme="noir"] .post-item .title { margin-top: 15px; font-size: 19px; font-weight: 850; line-height: 1.28; }
html[data-theme="noir"] .post-item .title a,
html[data-theme="noir"] .post-item-small .title a { color: var(--noir-black); }
html[data-theme="noir"] .post-item .title a:hover { color: var(--noir-red); }
html[data-theme="noir"] .post-item .description,
html[data-theme="noir"] .post-meta,
html[data-theme="noir"] .post-meta a,
html[data-theme="noir"] .post-meta span { color: var(--noir-muted); }

html[data-theme="noir"] #postDetailsPage .post-content {
    padding: clamp(23px, 4vw, 55px);
    background: var(--noir-paper);
    border: 1px solid #dfdfdc;
    border-top: 6px solid var(--noir-red);
    border-radius: 12px;
    box-shadow: 0 22px 60px rgba(0, 0, 0, .09);
}

html[data-theme="noir"] #postDetailsPage .post-title {
    color: var(--noir-black);
    font-size: clamp(34px, 4.25vw, 54px);
    line-height: 1.08;
    font-weight: 900;
}

@media (min-width: 1200px) {
    html[data-theme="noir"] #postDetailsPage > .container-xl {
        max-width: 1440px;
        padding-right: 28px;
        padding-left: 28px;
    }

    html[data-theme="noir"] #postDetailsPage > .container-xl > .row > .col-xl-9 {
        flex: 0 0 auto;
        width: 96%;
        max-width: none;
    }
}

html[data-theme="noir"] #postDetailsPage .post-summary,
html[data-theme="noir"] #postDetailsPage .post-details-meta { color: var(--noir-muted); }
html[data-theme="noir"] #postDetailsPage .post-image-preview img { border-radius: 8px; }
html[data-theme="noir"] #postDetailsPage .entry-content { color: #292929; font-size: 18px; line-height: 1.84; }
html[data-theme="noir"] #postDetailsPage .entry-content h2,
html[data-theme="noir"] #postDetailsPage .entry-content h3 { color: var(--noir-black); }
html[data-theme="noir"] .btn-custom,
html[data-theme="noir"] .btn-nav-subscribe { color: #fff; background: var(--noir-red); border: 0; border-radius: 7px; }
html[data-theme="noir"] #footer { margin-top: 75px; color: #ccc; background: var(--noir-black); border-top: 5px solid var(--noir-red); }

@media (max-width: 991px) {
    html[data-theme="noir"] .mobile-header { background: #fff; border-bottom: 3px solid var(--noir-red); }
    html[data-theme="noir"] #postDetailsPage .post-content { padding: 20px; border-radius: 9px; }
}

@media (max-width: 767px) {
    html[data-theme="noir"] #postDetailsPage .post-title {
        font-size: clamp(29px, 8.5vw, 40px);
        line-height: 1.1;
    }
}