/*
Theme Name: SigWeaver News
Theme URI: https://demonwire.com
Description: One dark editorial chassis for every SigWeaver site. All palette, font, and texture tokens come from theme mods (swn_tokens) printed as a :root override — the CSS below is site-agnostic. Child of Newsup by Themeansar.
Author: SigWeaver
Template: newsup
Version: 2.0.0
Text Domain: sigweaver-news
*/
/* =========================================================================
   DemonWire override stylesheet
   -------------------------------------------------------------------------
   Loads AFTER newsup/style.css AND after Newsup's customizer inline CSS
   (which is attached to the parent handle), so equal-specificity rules here
   win by cascade order — no !important is needed anywhere in this sheet.

   Selector targets verified against Newsup 5.5 style.css served from
   wp-themes.com (5.4.9 was not downloadable from this environment; the two
   versions share the same class architecture — see DESIGN.md notes).
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Design tokens
   ---------------------------------------------------------------------- */
/* :root tokens are printed from theme mods — see functions.php */

/* -------------------------------------------------------------------------
   2. Base — page canvas, text, links, selection
   ---------------------------------------------------------------------- */
body {
	background-color: var(--dw-bg);
	color: var(--dw-ink);
}

#content {
	background: transparent;
}

/* Generic links: readable red on dark. Component links are re-tuned below. */
a {
	color: var(--dw-red-bright);
}

a:hover {
	color: var(--dw-red);
}

a:focus {
	outline-color: var(--dw-red-bright);
}

::selection {
	background: var(--dw-red);
	color: #fff;
}

/* Headings inherit the chunky display face via --headFont where the parent
   already uses it; Alfa Slab One ships one weight, so relax faux-bolding
   and the parent's tight -0.05em tracking (too tight for a slab). */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: var(--headFont);
	font-weight: 400;
	letter-spacing: 0.005em;
	color: var(--dw-ink);
}

/* Title links across cards/lists: ink by default, red on hover */
:is(h1, h2, h3, h4, h5, h6, .title) a {
	color: var(--dw-ink);
}

:is(h1, h2, h3, h4, h5, h6, .title) a:hover {
	color: var(--dw-red-bright);
}

/* -------------------------------------------------------------------------
   3. Header — top bar, masthead, primary menu, search
   ---------------------------------------------------------------------- */
/* 3.1 Top info bar (date / social row) */
.mg-head-detail {
	background-color: var(--dw-bg-deep);
	color: var(--dw-ink-muted);
	border-color: var(--dw-border);
}

.mg-head-detail .info-left li,
.mg-head-detail .info-left li span.time,
.mg-head-detail .info-left li a,
.mg-head-detail .info-right li a {
	color: var(--dw-ink-muted);
}

.mg-head-detail .info-left li a:hover,
.mg-head-detail .info-right li a:hover {
	color: var(--dw-red-bright);
}

.mg-headwidget.light .mg-head-detail {
	border-color: var(--dw-border);
}

/* 3.2 Masthead / branding band. NOTE: if a custom header image is set in the
   Customizer it is applied as an inline background-image on
   .mg-nav-widget-area-back and will paint over this flat base color — the
   generated masthead art (DESIGN.md prompt a) is designed to blend with it. */
.mg-headwidget,
.mg-nav-widget-area,
.mg-nav-widget-area-back {
	background-color: var(--dw-bg-deep);
}

.mg-nav-widget-area-back .inner {
	/* One of the few sanctioned halftone moments: a faint dot screen behind
	   the site title, like ink on cheap 1940s pulp stock. */
	background-image: var(--dw-halftone);
	background-size: 9px 9px;
}

.site-title,
.site-title a,
.navbar-brand,
.navbar-brand a {
	font-family: var(--headFont);
	font-weight: 400;
	letter-spacing: 0.01em;
	color: var(--dw-ink);
	/* Vintage misregistered-ink drop shadow in devil red */
	text-shadow: 3px 3px 0 rgba(232, 56, 47, 0.55);
}

.site-title a:hover,
.navbar-brand a:hover {
	color: #fff;
}

.site-description,
.navbar-header .site-description,
.navbar-brand span.site-description {
	color: var(--dw-ink-muted);
	font-style: italic;
	text-shadow: none;
}

/* 3.3 Primary menu — the red wire */
.mg-headwidget .navbar-wp,
.navbar-wp {
	background-color: var(--dw-red-deep);
	border-top: 1px solid rgba(0, 0, 0, 0.35);
	box-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
}

.mg-headwidget .navbar-wp .navbar-nav > li > a,
.navbar-wp .navbar-nav > li > a {
	color: #fdf6ec;
}

.navbar-wp .navbar-nav > li > a:hover,
.navbar-wp .navbar-nav > li > a:focus,
.navbar-wp .navbar-nav > .active > a,
.navbar-wp .navbar-nav > .active > a:hover,
.navbar-wp .navbar-nav > .active > a:focus {
	color: #fff;
	background-color: rgba(10, 7, 9, 0.35);
}

.navbar-toggler,
.navbar-toggle {
	background-color: transparent;
	border-color: rgba(253, 246, 236, 0.4);
}

.burger-line {
	background-color: #fdf6ec;
}

/* Dropdowns */
.navbar-wp .dropdown-menu {
	background-color: var(--dw-surface-2);
	border: 1px solid var(--dw-border);
	border-top: 2px solid var(--dw-red);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55);
}

.navbar-wp .dropdown-menu > li > a {
	color: var(--dw-ink-muted);
}

.navbar-wp .dropdown-menu > li > a:hover,
.navbar-wp .dropdown-menu > li > a:focus {
	color: #fff;
	background-color: var(--dw-red-deep);
}

/* Header search dropdown */
.navbar-wp .dropdown-menu.searchinner {
	background-color: var(--dw-surface-2);
}

.navbar-wp .dropdown-menu.searchinner .btn {
	background-color: var(--dw-red);
	color: #fff;
	border-color: var(--dw-red);
}

/* 3.4 Breaking-news ticker */
.mg-latest-news-sec {
	background: var(--dw-bg-deep);
	box-shadow: 0 1px 0 rgba(232, 56, 47, 0.35);
}

.mg-latest-news {
	background-color: var(--dw-bg-deep);
}

.mg-latest-news .bn_title .title {
	background-color: var(--dw-red);
	color: #fff;
	font-family: var(--headFont);
	font-weight: 400;
	font-size: 16px;
	letter-spacing: 0.03em;
}

.mg-latest-news .bn_title .effect-ripple,
div.mg-latest-news .bn_title .effect-ripple {
	border-color: transparent transparent transparent var(--dw-red);
}

.mg-latest-news .mg-latest-news-slider a {
	color: var(--dw-ink);
}

.mg-latest-news .mg-latest-news-slider a:hover {
	color: var(--dw-red-bright);
}

.mg-latest-news .mg-latest-news-slider a::before {
	color: var(--dw-red);
}

/* -------------------------------------------------------------------------
   4. Section titles (front-page module headers, "You may have missed" etc.)
   ---------------------------------------------------------------------- */
.mg-sec-title {
	border-color: var(--dw-red);
}

.mg-sec-title h4 {
	background-color: var(--dw-red);
	/* Halftone moment #2: a dark dot screen over the red bar — vintage
	   printed-label feel. Kept to section bars only. */
	background-image: var(--dw-halftone-dark);
	background-size: 6px 6px;
	color: #fff;
	font-family: var(--headFont);
	font-weight: 400;
	letter-spacing: 0.03em;
	font-size: 17px;
}

.mg-sec-title h4::before {
	border-color: var(--dw-red) transparent transparent transparent;
}

/* -------------------------------------------------------------------------
   5. Cards, grids and post lists (front page + archives)
   ---------------------------------------------------------------------- */
.mg-card-box {
	background: var(--dw-surface);
	border: 1px solid var(--dw-border);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

.mg-posts-sec,
.mg-posts-sec-post,
.mg-blog-post-box {
	background-color: transparent;
	color: var(--dw-ink);
}

.mg-posts-sec-post-content p,
.mg-blog-post-box .small > p,
.mg-posts-modul-6 .mg-sec-top-post .mg-content p,
.mg-post-box .latest-content p {
	color: var(--dw-ink-muted);
}

/* Card titles */
.mg-blog-post-box h4.title,
.mg-blog-post-box h4.title a,
.small-post .title,
.small-post .title a,
.mg-posts-modul-6 .mg-sec-top-post .title,
.mg-posts-modul-6 .mg-sec-top-post .title a,
.mg-post-box .title a,
.mg-inner-txt h3 a,
.mg-blog-post-3 .mg-blog-inner h1 a {
	color: var(--dw-ink);
}

.mg-blog-post-box h4.title a:hover,
.small-post .title a:hover,
.mg-posts-modul-6 .mg-sec-top-post .title a:hover,
.mg-post-box .title a:hover,
.mg-inner-txt h3 a:hover,
.mg-blog-post-3 .mg-blog-inner h1 a:hover {
	color: var(--dw-red-bright);
}

/* Featured overlay posts (image with gradient) keep white text */
.mg-blog-post .bottom h4,
.mg-blog-post .bottom h4 a,
.mg-blog-post .bottom h1,
.mg-blog-post .bottom h1 a {
	color: #fff;
}

.mg-blog-post .bottom h4 a:hover,
.mg-blog-post .bottom h1 a:hover {
	color: var(--dw-red-bright);
}

/* Deepen the parent's overlay gradient slightly for contrast on busy images */
.mg-blog-post .bottom {
	background-image: linear-gradient(to bottom, rgba(10, 7, 9, 0) 0, rgba(10, 7, 9, 0.55) 50%, rgba(10, 7, 9, 0.88) 100%);
}

.mg-fea-area .overlay,
.mg-post-box .mg-inner-overlay {
	background-color: rgba(10, 7, 9, 0.55);
}

/* -------------------------------------------------------------------------
   6. Category badges — red dominant, per-desk hues
   ---------------------------------------------------------------------- */
.mg-blog-category a {
	background-color: var(--dw-red-badge);
	color: #fdf6ec;
	border-radius: 2px;
	letter-spacing: 0.08em;
	transition: transform 0.15s ease, background-color 0.15s ease;
}

.mg-blog-category a:hover {
	background-color: var(--dw-red);
	color: #fff;
	/* A tiny gremlin tilt — playful, layout-safe */
	transform: rotate(-2deg);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

/* Per-category inks, keyed off the category permalink so they work in every
   card variant without template changes. Slugs assumed: weird, celebrity,
   financial, crypto, news (news keeps default red). Light fills get dark
   ink for contrast. */
.mg-blog-category a[href*="/category/weird"] {
	background-color: var(--dw-cat-weird);
	color: #14090f;
}

.mg-blog-category a[href*="/category/celebrity"] {
	background-color: var(--dw-cat-celebrity);
	color: #1a1014;
}

.mg-blog-category a[href*="/category/financial"] {
	background-color: var(--dw-cat-financial);
	color: #08140c;
}

.mg-blog-category a[href*="/category/crypto"] {
	background-color: var(--dw-cat-crypto);
	color: #180d05;
}

/* Defensive: the double-category widget restyles badges at high specificity */
.double-category-widget .mg-posts-sec-inner .small-list-post .mg-blog-category a {
	background-color: var(--dw-red-badge);
	color: #fdf6ec;
}

/* -------------------------------------------------------------------------
   7. Bylines & meta — the fictional-author show
   ---------------------------------------------------------------------- */
.mg-blog-meta,
.mg-blog-meta a,
.mg-blog-date,
.mg-post-box .latest-meta span,
.mg-post-box .latest-meta .latest-date {
	color: var(--dw-ink-faint);
}

.mg-blog-meta a:hover {
	color: var(--dw-red-bright);
}

/* Author name gets top billing */
.mg-blog-meta .auth,
.mg-blog-meta .auth a {
	color: var(--dw-ink-muted);
	font-weight: 700;
}

.mg-blog-meta .auth a:hover {
	color: var(--dw-red-bright);
}

/* Byline avatar headshots: red ink ring, like a stamped press pass */
.mg-blog-meta a img,
.avatar {
	border: 2px solid var(--dw-red);
	background-color: var(--dw-bg-deep);
	box-shadow: 0 0 0 2px var(--dw-bg-deep);
}

/* Circular author badge on large featured cards */
.mg-blog-author {
	background-color: var(--dw-red);
	color: #fff;
	border-radius: 50%;
	box-shadow: 0 0 0 3px var(--dw-bg-deep);
}

/* Single-post author card — halftone moment #3 */
.mg-info-author-block {
	background-color: var(--dw-surface-2);
	background-image: var(--dw-halftone);
	background-size: 8px 8px;
	border: 1px solid var(--dw-border);
	border-left: 4px solid var(--dw-red);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
	color: var(--dw-ink-muted);
}

.mg-info-author-block h4 {
	font-family: var(--headFont);
	font-weight: 400;
	color: var(--dw-ink);
}

.mg-info-author-block h4 span {
	font-family: var(--bodyFont);
	color: var(--dw-red-bright);
	font-style: italic;
}

.mg-info-author-block a {
	color: var(--dw-red-bright);
}

.mg-info-author-block .mg-author-pic img {
	border: 3px solid var(--dw-red);
	background-color: var(--dw-bg-deep);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.mg-info-author-block .mg-info-author-social li {
	background-color: var(--dw-bg-deep);
}

.mg-info-author-block .mg-info-author-social li a {
	color: var(--dw-ink-muted);
}

.mg-info-author-block .mg-info-author-social li a:hover {
	color: var(--dw-red-bright);
}

/* -------------------------------------------------------------------------
   8. Single post — title, content, blockquotes, tags, comments
   ---------------------------------------------------------------------- */
.mg-blog-post-box .mg-header h1,
.mg-blog-post-box h1.title.single,
.mg-blog-inner h1 {
	font-family: var(--headFont);
	font-weight: 400;
	line-height: 1.18;
	letter-spacing: 0.005em;
	color: var(--dw-ink);
}

.mg-blog-post-box .mg-header h4 {
	border-bottom-color: var(--dw-border);
	color: var(--dw-ink-muted);
}

.mg-blog-inner,
.mg-posts-sec-post .small.single {
	color: var(--dw-ink);
}

blockquote {
	background-color: var(--dw-surface-2);
	border-left: 4px solid var(--dw-red);
	color: var(--dw-ink-muted);
}

blockquote::before {
	color: var(--dw-red);
	opacity: 0.85;
}

.more-link,
.btn-more {
	border-color: var(--dw-red);
	color: var(--dw-red-bright);
}

.more-link:hover,
.btn-more:hover {
	background-color: var(--dw-red);
	color: #fff;
}

/* Tag chips under posts */
.mg-tpt-txnlst strong {
	color: var(--dw-ink);
}

.mg-tpt-txnlst ul li a,
.wp-block-tag-cloud a {
	background-color: var(--dw-surface-2);
	border: 1px solid var(--dw-border);
	color: var(--dw-ink-muted);
}

.mg-tpt-txnlst ul li a:hover,
.wp-block-tag-cloud a:hover {
	background-color: var(--dw-red);
	border-color: var(--dw-red);
	color: #fff;
}

/* Tables inside articles */
.single table,
table {
	border-color: var(--dw-border);
}

th {
	background-color: var(--dw-surface-2);
	color: var(--dw-ink);
	border-color: var(--dw-border);
}

td {
	border-color: var(--dw-border);
	color: var(--dw-ink-muted);
}

/* Comments */
.comments-area .comment-body,
.mg-comments .media {
	background-color: var(--dw-surface);
	border: 1px solid var(--dw-border);
}

.comments-area .comment-meta,
.comment-meta .comment-metadata,
.comment-content p {
	color: var(--dw-ink-muted);
}

.comments-area .comment-meta .comment-author img {
	border: 2px solid var(--dw-red);
}

.comment_section .comment-reply-link,
.comment-body .reply a,
.mg-comments a.mg-reply {
	color: var(--dw-red-bright);
}

.comment_section .comment-reply-link:hover,
.comment-body .reply a:hover {
	color: var(--dw-red);
}

/* -------------------------------------------------------------------------
   9. Breadcrumb / archive header strip
   ---------------------------------------------------------------------- */
.mg-breadcrumb-section {
	background-color: var(--dw-surface);
	box-shadow: 0 1px 0 var(--dw-border);
}

.mg-breadcrumb-section .overlay {
	background-color: transparent;
}

.mg-breadcrumb-title h1,
.mg-breadcrumb-title .title {
	font-family: var(--headFont);
	font-weight: 400;
	color: var(--dw-ink);
}

.mg-page-breadcrumb > li,
.mg-page-breadcrumb > li a {
	color: var(--dw-ink-faint);
}

.mg-page-breadcrumb > li a:hover {
	color: var(--dw-red-bright);
}

/* -------------------------------------------------------------------------
   10. Sidebar widgets
   ---------------------------------------------------------------------- */
.mg-sidebar .mg-widget {
	background-color: var(--dw-surface);
	border: 1px solid var(--dw-border);
	color: var(--dw-ink-muted);
}

.mg-wid-title {
	border-color: var(--dw-red);
}

.mg-sidebar .mg-widget .wtitle,
.mg-widget .wp-block-group h2 {
	background-color: var(--dw-red);
	background-image: var(--dw-halftone-dark);
	background-size: 6px 6px;
	color: #fff;
	font-family: var(--headFont);
	font-weight: 400;
	letter-spacing: 0.02em;
}

.mg-widget .wp-block-group h2::before,
.mg-widget .wp-block-group h2::after {
	border-color: var(--dw-red) transparent transparent transparent;
	background-color: var(--dw-red);
}

.mg-sidebar a,
.mg-sidebar .mg-widget ul li a {
	color: var(--dw-ink-muted);
}

.mg-sidebar .mg-widget ul li a:hover,
.mg-sidebar .mg-category-widget ul li a:hover {
	color: var(--dw-red-bright);
}

.mg-sidebar .mg-widget ul li {
	border-color: var(--dw-border);
}

.mg-sidebar .mg-widget .tagcloud a {
	background-color: var(--dw-surface-2);
	border: 1px solid var(--dw-border);
	color: var(--dw-ink-muted);
}

.mg-sidebar .mg-widget .tagcloud a:hover {
	background-color: var(--dw-red);
	border-color: var(--dw-red);
	color: #fff;
}

/* Widget calendar */
.mg-sidebar .mg-widget .calendar_wrap table caption,
.calendar_wrap caption {
	background-color: var(--dw-red);
	color: #fff;
}

.mg-sidebar .calendar_wrap table thead th,
.calendar_wrap table#wp-calendar thead th {
	background-color: var(--dw-surface-2);
	color: var(--dw-ink);
}

.mg-sidebar .mg-widget .calendar_wrap table tbody td {
	color: var(--dw-ink-muted);
	border-color: var(--dw-border);
}

/* -------------------------------------------------------------------------
   11. Footer — halftone moment #4
   ---------------------------------------------------------------------- */
footer {
	background-color: var(--dw-bg-deep);
	color: var(--dw-ink-muted);
}

footer .overlay {
	background-color: rgba(10, 7, 9, 0.92);
	background-image: var(--dw-halftone);
	background-size: 10px 10px;
	border-top: 3px solid var(--dw-red);
}

footer .mg-widget h6,
footer .site-title-footer {
	font-family: var(--headFont);
	font-weight: 400;
	color: var(--dw-ink);
}

footer .mg-widget h6::after {
	background-color: var(--dw-red);
}

footer .mg-widget h6::before {
	border-color: var(--dw-red) transparent transparent transparent;
}

footer .mg-widget ul li {
	border-color: var(--dw-border);
}

footer .mg-widget ul li a,
footer .mg-widget a {
	color: var(--dw-ink-muted);
}

footer .mg-widget ul li a:hover,
footer .mg-widget a:hover {
	color: var(--dw-red-bright);
}

footer .mg-widget .tagcloud a {
	background-color: var(--dw-surface-2);
	border: 1px solid var(--dw-border);
	color: var(--dw-ink-muted);
}

footer .mg-widget .tagcloud a:hover {
	background-color: var(--dw-red);
	color: #fff;
}

footer .mg-footer-bottom-area .divide-line {
	border-color: var(--dw-border);
}

footer .mg-footer-copyright {
	background-color: #070507;
	color: var(--dw-ink-faint);
}

footer .mg-footer-copyright a {
	color: var(--dw-red-bright);
}

footer .mg-footer-copyright a:hover {
	color: var(--dw-red);
}

.mg-social li span.icon-soci {
	background-color: var(--dw-surface-2);
	color: var(--dw-ink-muted);
}

.mg-social li span.icon-soci:hover {
	background-color: var(--dw-red);
	color: #fff;
}

/* -------------------------------------------------------------------------
   12. Forms, buttons, pagination
   ---------------------------------------------------------------------- */
select,
textarea,
.form-control,
input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="password"],
.wp-block-search .wp-block-search__input {
	background-color: var(--dw-surface-2);
	color: var(--dw-ink);
	border: 1px solid var(--dw-border);
}

.form-control:focus,
textarea:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
.wp-block-search .wp-block-search__input:focus-visible {
	border-color: var(--dw-red);
	box-shadow: 0 0 0 2px rgba(232, 56, 47, 0.25);
	outline: none;
}

::placeholder {
	color: var(--dw-ink-faint);
	opacity: 1;
}

.btn,
button[type="submit"],
input[type="submit"],
.wp-block-search .wp-block-search__button,
.wp-block-button .wp-block-button__link {
	background-color: var(--dw-red);
	color: #fff;
	border-color: var(--dw-red);
}

.btn:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
.wp-block-search .wp-block-search__button:hover {
	background-color: var(--dw-red-deep);
	border-color: var(--dw-red-deep);
	color: #fff;
}

.mg-sidebar .mg-widget.widget_search .btn,
footer .mg-widget.widget_search .btn {
	background-color: var(--dw-red);
	border-color: var(--dw-red);
	color: #fff;
}

/* Pagination */
.pagination > li > a,
.pagination > li > span {
	background-color: var(--dw-surface);
	border-color: var(--dw-border);
	color: var(--dw-ink-muted);
}

.pagination > li > a:hover {
	background-color: var(--dw-surface-2);
	color: var(--dw-ink);
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:focus {
	background-color: var(--dw-red);
	border-color: var(--dw-red);
	color: #fff;
}

/* -------------------------------------------------------------------------
   13. 404 — the gremlin's favorite page (halftone moment #5)
   ---------------------------------------------------------------------- */
.mg-section-404 {
	background-color: var(--dw-bg-deep);
	background-image: var(--dw-halftone);
	background-size: 9px 9px;
}

.mg-error-404 h1 {
	font-family: var(--headFont);
	font-weight: 400;
	color: var(--dw-red);
	text-shadow: 4px 4px 0 rgba(10, 7, 9, 0.9), 6px 6px 0 rgba(232, 56, 47, 0.35);
}

.mg-error-404 h4,
.mg-error-404 p {
	color: var(--dw-ink-muted);
}

/* -------------------------------------------------------------------------
   14. Odds & ends — captions, galleries, misc contrast fixes
   ---------------------------------------------------------------------- */
.wp-caption-text,
.gallery-caption,
figcaption {
	color: var(--dw-ink-faint);
}

.wp-caption-text a:hover {
	color: var(--dw-red-bright);
}

.mark,
mark {
	background-color: var(--dw-red);
	color: #fff;
}

pre,
code {
	background-color: var(--dw-surface-2);
	color: var(--dw-ink);
	border: 1px solid var(--dw-border);
}

hr {
	border-color: var(--dw-border);
}

/* Tabbed "Popular/Recent" widget in the hero area */
.top-right-area .nav-tabs {
	border-color: var(--dw-border);
}

.top-right-area .nav-tabs > li > a {
	color: var(--dw-ink-muted);
	background-color: transparent;
}

.top-right-area .nav-tabs > li > a:hover,
.top-right-area .nav-tabs .nav-link.active,
.top-right-area .nav-tabs .nav-link.active:focus {
	color: #fff;
	background-color: var(--dw-red);
}

/* Search results count / archive helper text */
.search-results-count,
.menu-link-description {
	color: var(--dw-ink-faint);
}

/* Owl carousel controls */
.owl-carousel .owl-controls .owl-buttons div {
	background-color: rgba(10, 7, 9, 0.7);
	color: var(--dw-ink);
}

.owl-controls .owl-page.active span,
.owl-controls .owl-page span:hover {
	background-color: var(--dw-red);
}

/* Back-to-top / misc theme buttons */
.newsup-button .newsup-button-inner-left {
	background-color: var(--dw-red);
	color: #fff;
}

/* Reduced motion: disarm the playful tilt for users who opt out */
@media (prefers-reduced-motion: reduce) {
	.mg-blog-category a,
	.mg-blog-category a:hover {
		transform: none;
		transition: none;
	}
}

/* =====================================================================
   15. INTEGRATION FIXES — observed live against Newsup 5.4.9
   (ported from demonwire-child v1.0.1–1.0.5, sports palette)
   ===================================================================== */

/* Kill the top info strip entirely (date + live clock + blue band). */
.mg-head-detail { display: none !important; }

/* Page background: parent injects an inline `background:#ddd`. */
body { background: var(--dw-bg, #0b0e0a) !important; }

/* Let the masthead art breathe. The header image is an inline
   background-image on .mg-nav-widget-area-back — override only the
   color layer, never the shorthand, and give the band real height. */
.mg-nav-widget-area-back {
	background-color: transparent !important;
	background-size: cover !important;
	background-position: center 30% !important;
	background-repeat: no-repeat !important;
	min-height: 240px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}
.mg-nav-widget-area { background: var(--dw-nav-tint, rgba(6, 8, 4, 0.35)) !important; }
.site-branding-text .site-logo,
.site-branding-text .site-logo a,
.site-branding-text h1 a {
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9), 0 0 30px rgba(0, 0, 0, 0.6);
}

/* Sidebar tab panels + misc sections that stayed white. */
.mg-tabs .tab-content, .mg-tab-post,
.nav-tabs, .mg-posts-sec, .mg-sec-top-post {
	background: transparent !important;
}
/* Tabs widget matches the other sidebar widgets (Recent Posts etc.). */
.mg-tabs {
	background: var(--dw-surface, #141a12) !important;
	border: 1px solid var(--dw-border, #2b3527);
}
.mg-tabs .nav-tabs .nav-link { background: var(--dw-surface, #141a12); color: var(--dw-ink, #f1f3e8); }
.mg-tabs .nav-tabs .nav-link.active { background: var(--dw-red, #2e9e44); color: #fff; }

/* Newsup's hardcoded accent blue (#1151d3) → turf green, everywhere. */
.navbar-nav .nav-item.active > .nav-link,
.navbar-nav .nav-link:hover,
a.btn-bell.btn-theme,
.bn_title,
span.post-form,
a.newsup-categories.category-color-1,
.page-numbers.current,
a.ta_upscr.bounceInup {
	background-color: var(--dw-red, #2e9e44) !important;
	border-color: var(--dw-red, #2e9e44) !important;
}

/* Last white holdouts: Top Tags strip and the "You missed" band. */
section.mg-tpt-tag-area,
div.small-post,
div.missed-inner {
	background: var(--dw-bg, #0b0e0a) !important;
}
.mg-tpt-tag-area .top-tag-title,
.mg-tpt-tag-area a { color: var(--dw-ink, #f1f3e8); }

/* Sidebar tab cards lost their white bg — lift the text back to ink. */
.mg-tabs .tab-content a,
.mg-tabs .tab-content .mg-blog-title,
.mg-tabs .tab-content .mg-blog-title a,
.mg-tabs .tab-content h4 a,
.small-post a, .small-post h4, .small-post h4 a {
	color: var(--dw-ink, #f1f3e8) !important;
}
.mg-tabs .tab-content a:hover,
.small-post a:hover { color: var(--dw-gold, #f7c948) !important; }

/* ---- Single post page ---- */

/* Title text lives in a bare <a> that Newsup paints black. */
h1.title.single,
h1.title.single a {
	color: var(--dw-ink, #f1f3e8) !important;
}
/* Rein in the huge header block: tighter title, less dead air. */
h1.title.single {
	font-size: 30px;
	line-height: 1.18;
	margin-bottom: 0.5rem;
}
.single .mg-blog-post-box { padding-top: 1rem; }

/* "Related Post" wrapper is a white card in the parent theme. */
.mg-featured-slider {
	background: var(--dw-surface, #141a12) !important;
	border: 1px solid var(--dw-border, #2b3527);
}

/* In-article interstitial images */
.sw-interstitial { margin: 1.6rem 0; }
.sw-interstitial img {
	width: 100%;
	height: auto;
	border: 1px solid var(--dw-border, #2b3527);
	border-radius: 4px;
}
.sw-interstitial figcaption {
	color: var(--dw-ink-faint, #798272);
	font-size: 0.78rem;
	margin-top: 0.35rem;
	text-align: right;
}

/* Post gallery slideshow */
.sw-slideshow { margin: 2rem 0 1rem; }
.sw-slideshow .sw-slides {
	position: relative;
	border: 1px solid var(--dw-border, #2b3527);
	border-radius: 4px;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: var(--dw-bg-deep, #060804);
}
.sw-slideshow .sw-slide { display: none; }
.sw-slideshow .sw-slide.active { display: block; }
.sw-slideshow .sw-slide img { width: 100%; height: 100%; object-fit: cover; }
.sw-slide-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-top: 0.5rem;
}
/* The Desk — [sw_desk] author grid */
.sw-desk {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1.2rem;
	margin: 1.5rem 0;
}
.sw-desk-card {
	background: var(--dw-surface);
	border: 1px solid var(--dw-border);
	border-radius: 6px;
	padding: 1.2rem;
}
.sw-desk-card img {
	border-radius: 50%;
	border: 2px solid var(--dw-red);
}
.sw-desk-card h3 { margin: 0.7rem 0 0.2rem; }
.sw-desk-card h3 a { color: var(--dw-ink); }
.sw-desk-count {
	color: var(--dw-red-bright);
	font-size: 0.8rem;
	margin: 0 0 0.4rem;
}
.sw-desk-card p { color: var(--dw-ink-muted); font-size: 0.92rem; }

/* Listicles are house pieces — no byline block (author is unset anyway). */
.single-sw_listicle .mg-info-author-block {
	display: none;
}

/* Getty's widget adds a courtesy "Embed from Getty Images" header link
   outside the iframe; the required attribution (logo + credit bar) lives
   inside the iframe and is untouched. */
.sw-getty-embed .getty.embed.image > div:first-child,
.sw-getty-embed div:has(> a[href*="gettyimages"]) {
	display: none;
}
.sw-full .sw-slide h2 {
	margin: 0 0 0.75rem;
}
.sw-slide-nav button {
	background: var(--dw-red, #2e9e44);
	color: #fff;
	border: 0;
	border-radius: 4px;
	padding: 0.75rem 1rem;
	cursor: pointer;
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	flex: 1 1 0;          /* PREVIOUS and NEXT always the same size */
	max-width: 240px;
}
/* Last-slide "next article" card takes NEXT's slot — its own compact size
   (deliberately NOT matched to PREVIOUS), centered on the button row. */
.sw-slide-nav .sw-nextpost {
	flex: 0 1 auto;
	width: auto;
	max-width: 380px;
	min-height: 0;
	margin: 0;
	align-self: center;
	padding: 0.45rem 0.9rem;
	font-size: 0.95rem;
	line-height: 1.25;
}
.sw-slide-nav .sw-nextpost .sw-nav-text > span {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.sw-slide-nav .sw-nextpost .sw-nav-thumb {
	width: 48px;
	height: 48px;
}
.sw-slide-nav button:hover { background: var(--dw-red-deep, #1f6b2e); }
.sw-count { color: var(--dw-ink-muted, #a8b3a0); font-size: 0.85rem; }
.sw-slideshow h3 .sw-open {
	font-size: 0.65em;
	margin-left: 0.8rem;
	color: var(--dw-gold, #f7c948);
}
.sw-slideshow.sw-full .sw-slides { aspect-ratio: auto; min-height: 0; }
.sw-slideshow.sw-full .sw-slide-text {
	padding: 1rem 0.5rem 0.5rem;
	color: var(--dw-ink-muted, #a8b3a0);
	border-top: 1px solid var(--dw-border, #2b3527);
	margin-top: 0.6rem;
}
.sw-slideshow.sw-full .sw-slides { overflow: visible; }

.sw-slideshow.sw-full .sw-slide img {
	/* Natural height, capped — a fixed 70vh letterboxed landscape images
	   into a huge black box on portrait/mobile viewports. */
	width: 100%;
	height: auto;
	max-height: 70vh;
	object-fit: contain;
	background: var(--dw-bg-deep, #060804);
}

/* Archive/category/author header strip: Newsup tiles the header image
   behind it (background-repeat!) which buries the text. Solid ink band
   with a brand rule instead. */
.mg-breadcrumb-section {
	background: var(--dw-bg-deep, #060804) !important;
	border-bottom: 2px solid var(--dw-red, #2e9e44);
}
.mg-breadcrumb-section,
.mg-breadcrumb-section h1,
.mg-breadcrumb-section a,
.mg-breadcrumb-section p {
	color: var(--dw-ink, #f1f3e8) !important;
	text-shadow: none;
}

/* Breaking-news ticker links: chalk ink, gold on hover (not link blue).
   :visited included — Newsup styles visited ticker links separately. */
.mg-breaking-news a, .bn_content a,
.mg-latest-news-sec a, .mg-latest-news a,
.mg-breaking-news a:visited, .bn_content a:visited,
.mg-latest-news-sec a:visited, .mg-latest-news a:visited {
	color: var(--dw-ink, #f1f3e8) !important;
}
.mg-breaking-news a:hover, .bn_content a:hover,
.mg-latest-news-sec a:hover,
.mg-latest-news a:hover { color: var(--dw-gold, #f7c948) !important; }
/* Prev/next article buttons (plugin rebuilds the links; we style them) */
.sw-nav-btn {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	width: 100%;
	min-height: 84px;
	padding: 0.7rem 0.9rem;
	border: 2px solid var(--dw-red, #2e9e44);
	border-radius: 6px;
	background: transparent;
	color: var(--dw-ink, #f1f3e8) !important;
	text-decoration: none;
	transition: background 0.15s ease;
}
.sw-nav-btn:hover { background: var(--dw-surface, #141a12); color: var(--dw-ink, #f1f3e8) !important; }
.sw-nav-next { text-align: right; justify-content: flex-end; }
.sw-nav-text { display: flex; flex-direction: column; gap: 0.15rem; }
.sw-nav-text small {
	color: var(--dw-red-bright, #f7c948);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.7rem;
}
.sw-nav-thumb {
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 4px;
	flex: none;
}
/* the theme wrapper: two half-width columns side by side */
.post-navigation .nav-links,
.navigation.post-navigation { display: flex; flex-direction: row !important; gap: 4%; align-items: stretch; }
.post-navigation .nav-links > div,
.post-navigation .nav-previous,
.post-navigation .nav-next { width: 48%; float: none; max-width: 48%; }

/* Keep reading order: previous left, next right (theme markup varies) */
.post-navigation .nav-previous, .sw-nav-prev { order: 1; }
.post-navigation .nav-next, .sw-nav-next { order: 2; }

/* Newsup renders next-first: reorder the per-button wrappers */
.nav-links:has(.sw-nav-prev) { order: 1; }
.nav-links:has(.sw-nav-next) { order: 2; }

/* Comments (when re-enabled): readable headings on dark */
.comments-title, .comment-reply-title, #comments h2, #comments h3 {
	color: var(--dw-ink);
}

/* Listicle: prominent slideshow CTA + Getty-embed slides */
.sw-ss-cta { margin: 0 0 1.2rem; }
.sw-ss-btn {
	display: inline-block;
	padding: 0.6rem 1.4rem;
	border: 2px solid var(--dw-red);
	border-radius: 6px;
	color: var(--dw-ink) !important;
	font-weight: 700;
	text-decoration: none;
}
.sw-ss-btn:hover { background: var(--dw-red); color: #fff !important; }
.sw-slide .sw-getty-embed { display: flex; justify-content: center; padding: 0.5rem 0; }
.sw-getty-embed { text-align: center; margin: 1rem 0; }