/*
Theme Name: Newspaper Press
Description: Newspaper Press is a powerful WordPress theme built on the Di Magazine parent theme, designed for news websites, online magazines, and content-driven blogs. It adds a suite of presentation-layer features — all individually toggled from the WordPress Customizer — without modifying the parent theme: Breaking News Ticker — Display the latest headlines from any category in an eye-catching animated ticker strip at the top of every page. Customize the label, accent color, and number of posts. Reading Progress Bar — Keep readers engaged with a sleek progress bar that tracks scroll position on single posts. Adjustable color and height. Related Posts — Automatically surface relevant content below each post using category matching. Increase time-on-site and reduce bounce rate. Author Bio Box — Build trust and authority by displaying the post author's avatar, display name, and biography after each article. Dark Mode Toggle — Give readers a comfortable reading experience in low-light environments. The chosen mode persists across sessions via localStorage — no cookies, no server requests. Custom 404 Page — Replace the default error page with a branded 404 template that includes a search form and a grid of recent posts, keeping lost visitors on your site. All features are independently enable/disable-able under Appearance → Customize → Newspaper Press Options.
Author: dithemes
Author URI: https://dithemes.com
Version: 1.0
Requires at least: 5.5
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: one-column, two-columns, left-sidebar, right-sidebar, grid-layout, custom-background, custom-colors, custom-header, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, flexible-header, full-width-template, microformats, post-formats, sticky-post, theme-options, threaded-comments, translation-ready, wide-blocks, blog, news
Text Domain: newspaper-press
Template: di-magazine
*/


/* ==========================================================================
   Newspaper Press Child Theme — Main Stylesheet
   All child theme feature styles live here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. CSS Custom Properties (Design Tokens)
   -------------------------------------------------------------------------- */
:root {
	--newspaper-press-accent:        #e03131;
	--newspaper-press-accent-dark:   #b91c1c;
	--newspaper-press-text:          #1a1a2e;
	--newspaper-press-text-muted:    #6b7280;
	--newspaper-press-bg:            #ffffff;
	--newspaper-press-bg-alt:        #f8f9fa;
	--newspaper-press-border:        #e5e7eb;
	--newspaper-press-card-shadow:   0 2px 12px rgba(0, 0, 0, 0.08);
	--newspaper-press-radius:        6px;
	--newspaper-press-font:          'Raleway', sans-serif;
	--newspaper-press-transition:    0.25s ease;
}

/* --------------------------------------------------------------------------
   1. Breaking News Ticker
   -------------------------------------------------------------------------- */
.newspaper-press-ticker-wrap {
	display:         flex;
	align-items:     center;
	background:      #1a1a2e;
	color:           #ffffff;
	overflow:        hidden;
	height:          38px;
	font-family:     var(--newspaper-press-font);
	font-size:       13px;
	position:        relative;
	z-index:         1000;
}

.newspaper-press-ticker-label {
	flex-shrink:     0;
	background:      var(--newspaper-press-accent);
	color:           #fff;
	padding:         0 18px;
	height:          100%;
	display:         flex;
	align-items:     center;
	gap:             7px;
	font-weight:     700;
	font-size:       12px;
	text-transform:  uppercase;
	letter-spacing:  0.08em;
	white-space:     nowrap;
}

.newspaper-press-ticker-track-outer {
	flex:            1;
	overflow:        hidden;
	height:          100%;
	display:         flex;
	align-items:     center;
	-webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
	mask-image:         linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

.newspaper-press-ticker-track {
	display:         flex;
	align-items:     center;
	list-style:      none;
	margin:          0;
	padding:         0;
	white-space:     nowrap;
	animation:       newspaper-press-ticker-scroll 30s linear infinite;
}

.newspaper-press-ticker-track:hover {
	animation-play-state: paused;
}

.newspaper-press-ticker-item {
	padding:         0 40px 0 0;
}

.newspaper-press-ticker-item a {
	color:           #e2e8f0;
	text-decoration: none;
	font-weight:     500;
	transition:      color var(--newspaper-press-transition);
}

.newspaper-press-ticker-item a::before {
	content:         '●';
	color:           var(--newspaper-press-accent);
	margin-right:    10px;
	font-size:       8px;
}

.newspaper-press-ticker-item a:hover {
	color:           #ffffff;
}

@keyframes newspaper-press-ticker-scroll {
	0%   { transform: translateX(100vw); }
	100% { transform: translateX(-100%); }
}

/* --------------------------------------------------------------------------
   2. Reading Progress Bar
   (dynamic height/color set via inline CSS from PHP)
   -------------------------------------------------------------------------- */
#newspaper-press-reading-progress {
	position:        fixed;
	top:             0;
	left:            0;
	width:           0%;
	z-index:         99999;
	transition:      width 0.1s linear;
}

/* --------------------------------------------------------------------------
   3. Related Posts
   -------------------------------------------------------------------------- */
.newspaper-press-related-posts {
	margin:          48px 0 32px;
	padding-top:     32px;
	border-top:      2px solid var(--newspaper-press-border);
	clear:           both;
}

.newspaper-press-related-posts__title {
	font-size:       18px;
	font-weight:     700;
	margin-bottom:   24px;
	display:         flex;
	align-items:     center;
	gap:             12px;
	color:           var(--newspaper-press-text);
}

.newspaper-press-related-posts__title::before,
.newspaper-press-related-posts__title::after {
	content:         '';
	flex:            1;
	height:          1px;
	background:      var(--newspaper-press-border);
}

.newspaper-press-related-posts__title::before {
	max-width:       40px;
}

.newspaper-press-related-posts__grid {
	display:         grid;
	grid-template-columns: repeat(3, 1fr);
	gap:             20px;
}

@media (max-width: 767px) {
	.newspaper-press-related-posts__grid {
		grid-template-columns: 1fr;
	}
}

@media (min-width: 768px) and (max-width: 991px) {
	.newspaper-press-related-posts__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.newspaper-press-related-posts__item {
	background:      var(--newspaper-press-bg);
	border:          1px solid var(--newspaper-press-border);
	border-radius:   var(--newspaper-press-radius);
	overflow:        hidden;
	box-shadow:      var(--newspaper-press-card-shadow);
	transition:      transform var(--newspaper-press-transition), box-shadow var(--newspaper-press-transition);
}

.newspaper-press-related-posts__item:hover {
	transform:       translateY(-4px);
	box-shadow:      0 8px 24px rgba(0, 0, 0, 0.12);
}

.newspaper-press-related-posts__thumb {
	display:         block;
	overflow:        hidden;
	aspect-ratio:    16 / 9;
}

.newspaper-press-related-posts__thumb img {
	width:           100%;
	height:          100%;
	object-fit:      cover;
	transition:      transform 0.4s ease;
}

.newspaper-press-related-posts__item:hover .newspaper-press-related-posts__thumb img {
	transform:       scale(1.05);
}

.newspaper-press-related-posts__body {
	padding:         14px 16px 16px;
}

.newspaper-press-related-posts__item-title {
	font-size:       14px;
	font-weight:     700;
	line-height:     1.45;
	margin:          8px 0 6px;
}

.newspaper-press-related-posts__item-title a {
	color:           var(--newspaper-press-text);
	text-decoration: none;
}

.newspaper-press-related-posts__item-title a:hover {
	color:           var(--newspaper-press-accent);
}

.newspaper-press-related-posts__meta {
	font-size:       12px;
	color:           var(--newspaper-press-text-muted);
	margin:          0;
}

.newspaper-press-related-posts__meta .fa {
	margin-right:    4px;
}

/* --------------------------------------------------------------------------
   4. Author Bio Box
   -------------------------------------------------------------------------- */
.newspaper-press-author-box {
	display:         flex;
	align-items:     flex-start;
	gap:             24px;
	margin:          36px 0 32px;
	padding:         28px;
	background:      var(--newspaper-press-bg-alt);
	border:          1px solid var(--newspaper-press-border);
	border-left:     4px solid var(--newspaper-press-accent);
	border-radius:   var(--newspaper-press-radius);
	clear:           both;
}

@media (max-width: 575px) {
	.newspaper-press-author-box {
		flex-direction:  column;
		align-items:     center;
		text-align:      center;
	}
}

.newspaper-press-author-box__avatar {
	flex-shrink:     0;
}

.newspaper-press-author-box__avatar img {
	width:           90px;
	height:          90px;
	border-radius:   50%;
	object-fit:      cover;
	border:          3px solid var(--newspaper-press-accent);
}

.newspaper-press-author-box__label {
	font-size:       11px;
	font-weight:     600;
	text-transform:  uppercase;
	letter-spacing:  0.1em;
	color:           var(--newspaper-press-accent);
	margin-bottom:   4px;
}

.newspaper-press-author-box__name {
	font-size:       18px;
	font-weight:     700;
	margin:          0 0 10px;
}

.newspaper-press-author-box__name a {
	color:           var(--newspaper-press-text);
	text-decoration: none;
}

.newspaper-press-author-box__name a:hover {
	color:           var(--newspaper-press-accent);
}

.newspaper-press-author-box__bio {
	font-size:       14px;
	color:           var(--newspaper-press-text-muted);
	line-height:     1.65;
	margin-bottom:   14px;
}

.newspaper-press-author-box__links {
	display:         flex;
	gap:             12px;
	flex-wrap:       wrap;
}

.newspaper-press-author-box__more,
.newspaper-press-author-box__website {
	display:         inline-flex;
	align-items:     center;
	gap:             6px;
	font-size:       13px;
	font-weight:     600;
	padding:         6px 14px;
	border-radius:   4px;
	text-decoration: none;
	transition:      background var(--newspaper-press-transition), color var(--newspaper-press-transition);
}

.newspaper-press-author-box__more {
	background:      var(--newspaper-press-accent);
	color:           #fff;
}

.newspaper-press-author-box__more:hover {
	background:      var(--newspaper-press-accent-dark);
	color:           #fff;
}

.newspaper-press-author-box__website {
	background:      transparent;
	color:           var(--newspaper-press-text-muted);
	border:          1px solid var(--newspaper-press-border);
}

.newspaper-press-author-box__website:hover {
	background:      var(--newspaper-press-bg);
	color:           var(--newspaper-press-text);
}


/* --------------------------------------------------------------------------
   5. Dark Mode Toggle Button
   -------------------------------------------------------------------------- */
.newspaper-press-dark-toggle {
	position:        fixed;
	bottom:          80px;
	right:           20px;
	width:           44px;
	height:          44px;
	border-radius:   50%;
	background:      #1a1a2e;
	color:           #fff;
	border:          none;
	cursor:          pointer;
	display:         flex;
	align-items:     center;
	justify-content: center;
	font-size:       20px;
	z-index:         9999;
	box-shadow:      0 4px 14px rgba(0, 0, 0, 0.25);
	transition:      background var(--newspaper-press-transition), transform var(--newspaper-press-transition);
}

.newspaper-press-dark-toggle:hover {
	background:      var(--newspaper-press-accent);
	transform:       scale(1.1);
}

.newspaper-press-dark-icon {
	line-height:     1;
}

/* Show sun in dark mode, moon in light mode */
html:not(.newspaper-press-dark-mode) .newspaper-press-icon-sun   { display: none; }
html.newspaper-press-dark-mode      .newspaper-press-icon-moon    { display: none; }

/* --------------------------------------------------------------------------
   6. Dark Mode — Full Palette Overrides
   -------------------------------------------------------------------------- */
html.newspaper-press-dark-mode {
	--newspaper-press-text:        #e2e8f0;
	--newspaper-press-text-muted:  #94a3b8;
	--newspaper-press-bg:          #0f172a;
	--newspaper-press-bg-alt:      #1e293b;
	--newspaper-press-border:      #334155;
}

html.newspaper-press-dark-mode body {
	background-color: #0f172a !important;
	color:            #e2e8f0 !important;
}

/* Header */
html.newspaper-press-dark-mode .headermain,
html.newspaper-press-dark-mode .container-fluid.headermain {
	background-color: #1e293b !important;
}

/* Top bar */
html.newspaper-press-dark-mode .bgtoph,
html.newspaper-press-dark-mode .container-fluid.bgtoph {
	background-color: #0f172a !important;
	border-bottom:    1px solid #334155 !important;
}

/* Navigation */
html.newspaper-press-dark-mode .navbar,
html.newspaper-press-dark-mode .masthead-nav,
html.newspaper-press-dark-mode #main-nav {
	background-color: #1e293b !important;
}

html.newspaper-press-dark-mode .navbar .nav-link,
html.newspaper-press-dark-mode #main-nav .nav-link {
	color:            #e2e8f0 !important;
}

html.newspaper-press-dark-mode .dropdown-menu {
	background-color: #1e293b !important;
	border-color:     #334155 !important;
}

html.newspaper-press-dark-mode .dropdown-item {
	color:            #e2e8f0 !important;
}

html.newspaper-press-dark-mode .dropdown-item:hover {
	background-color: #334155 !important;
}

/* Front Page Blocks */
html.newspaper-press-dark-mode .front-page-top-otr {
	background-color: #0f172a !important;
}

/* Content area */
html.newspaper-press-dark-mode .left-content,
html.newspaper-press-dark-mode .left-content p,
html.newspaper-press-dark-mode .left-content li,
html.newspaper-press-dark-mode .left-content span,
html.newspaper-press-dark-mode .dflt-anews-pst,
html.newspaper-press-dark-mode .entry-content,
html.newspaper-press-dark-mode .entry-content p,
html.newspaper-press-dark-mode .entry-content li,
html.newspaper-press-dark-mode .entry-content span,
html.newspaper-press-dark-mode article,
html.newspaper-press-dark-mode article p,
html.newspaper-press-dark-mode article li,
html.newspaper-press-dark-mode article span {
	color:            #e2e8f0 !important;
}

html.newspaper-press-dark-mode h1, html.newspaper-press-dark-mode h2,
html.newspaper-press-dark-mode h3, html.newspaper-press-dark-mode h4,
html.newspaper-press-dark-mode h5, html.newspaper-press-dark-mode h6 {
	color:            #f1f5f9 !important;
}

html.newspaper-press-dark-mode .content-first .content-second h1.the-title {
	color:      #f1f5f9 !important;
	box-shadow: none !important;
}

/* Disable light box-shadows that look out of place on dark backgrounds */
html.newspaper-press-dark-mode .content-third {
	box-shadow: none !important;
}

html.newspaper-press-dark-mode a {
	color:            #93c5fd !important;
}

/* Preserve original owl-carousel category badge colours in dark mode */
html.newspaper-press-dark-mode .owl-carousel.dim-owl-top .item .diowl-overlay .diowl-cat a,
html.newspaper-press-dark-mode .dim-front-left .diowl-overlay .diowl-cat a {
	color:            #ffffff !important;
	background-color: #00cc66 !important;
}

/* Preserve original front-categories headline link colours in dark mode */
html.newspaper-press-dark-mode .maincontainer .front-categories .front-single-category .front-single-category-headline h1 a,
html.newspaper-press-dark-mode .maincontainer .front-categories .front-single-category .front-single-category-headline p a {
	color:            #ffffff !important;
}

/* Keep single-post tag links white in dark mode. */
html.newspaper-press-dark-mode .singletags a,
html.newspaper-press-dark-mode .tagcloud a,
html.newspaper-press-dark-mode .post-navigation .nav-next a,
html.newspaper-press-dark-mode .post-navigation .nav-previous a {
	color: #ffffff !important;
}

html.newspaper-press-dark-mode a:hover {
	color:            #bfdbfe !important;
}

/* Sidebar & Layout Blocks */
html.newspaper-press-dark-mode .single-posst,
html.newspaper-press-dark-mode .postsloop,
html.newspaper-press-dark-mode .widget_sidebar_main,
html.newspaper-press-dark-mode aside .widget {
	background-color: #1e293b !important;
	border-color:     #334155 !important;
	color:            #e2e8f0 !important;
}

html.newspaper-press-dark-mode .right-widget-title {
	color:            #f1f5f9 !important;
	border-color:     var(--newspaper-press-accent) !important;
}

/* Footer */
html.newspaper-press-dark-mode .footer,
html.newspaper-press-dark-mode .container-fluid.footer {
	background-color: #0f172a !important;
	border-top:       1px solid #334155 !important;
}

html.newspaper-press-dark-mode .footer-copyright,
html.newspaper-press-dark-mode .container-fluid.footer-copyright {
	background-color: #020617 !important;
}

/* Cards */
html.newspaper-press-dark-mode .newspaper-press-related-posts__item,
html.newspaper-press-dark-mode .newspaper-press-author-box,
html.newspaper-press-dark-mode .newspaper-press-404-post-card {
	background-color: #1e293b !important;
	border-color:     #334155 !important;
}

html.newspaper-press-dark-mode .newspaper-press-related-posts__item-title a,
html.newspaper-press-dark-mode .newspaper-press-author-box__name a {
	color:            #f1f5f9 !important;
}

/* Preserve the "All Posts" button — it is a solid-color button, not a text link.
   The global dark-mode 'a' rule (#93c5fd) would otherwise turn its text blue. */
html.newspaper-press-dark-mode .newspaper-press-author-box__more,
html.newspaper-press-dark-mode .newspaper-press-author-box__more:hover {
	color:            #ffffff !important;
}

/* Forms */
html.newspaper-press-dark-mode input,
html.newspaper-press-dark-mode textarea,
html.newspaper-press-dark-mode select {
	background-color: #1e293b !important;
	color:            #e2e8f0 !important;
	border-color:     #334155 !important;
}


/* Now lives inside content-third (col-md-8 column), not a standalone full-width page.
   Reduced padding and centering to suit the narrower context. */
.newspaper-press-404-wrap {
	padding:         32px 0 24px;
	text-align:      center;
}

.newspaper-press-404-number {
	font-size:       clamp(60px, 12vw, 100px);
	font-weight:     900;
	line-height:     1;
	color:           var(--newspaper-press-accent);
	background:      linear-gradient(135deg, var(--newspaper-press-accent), #f97316);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	margin-bottom:   8px;
	user-select:     none;
}

.newspaper-press-404-heading {
	font-size:       clamp(24px, 5vw, 38px);
	font-weight:     800;
	margin-bottom:   14px;
	color:           var(--newspaper-press-text);
}

.newspaper-press-404-sub {
	font-size:       16px;
	color:           var(--newspaper-press-text-muted);
	margin-bottom:   32px;
}

.newspaper-press-404-search {
	max-width:       480px;
	margin:          0 auto 28px;
}

.newspaper-press-404-home-btn {
	display:         inline-flex;
	align-items:     center;
	gap:             8px;
	background:      var(--newspaper-press-accent);
	color:           #fff;
	padding:         12px 28px;
	border-radius:   6px;
	font-size:       15px;
	font-weight:     700;
	text-decoration: none;
	transition:      background var(--newspaper-press-transition);
	margin-bottom:   32px;
}

.newspaper-press-404-home-btn:hover {
	background:      var(--newspaper-press-accent-dark);
	color:           #fff;
}

.newspaper-press-404-posts-section {
	text-align:      left;
}

.newspaper-press-404-posts-heading {
	font-size:       20px;
	font-weight:     700;
	margin-bottom:   24px;
	padding-bottom:  12px;
	border-bottom:   2px solid var(--newspaper-press-accent);
	display:         inline-block;
}

.newspaper-press-404-post-card {
	background:      var(--newspaper-press-bg);
	border:          1px solid var(--newspaper-press-border);
	border-radius:   var(--newspaper-press-radius);
	overflow:        hidden;
	box-shadow:      var(--newspaper-press-card-shadow);
	margin-bottom:   24px;
	transition:      transform var(--newspaper-press-transition), box-shadow var(--newspaper-press-transition);
}

.newspaper-press-404-post-card:hover {
	transform:       translateY(-4px);
	box-shadow:      0 8px 24px rgba(0,0,0,0.12);
}

.newspaper-press-404-post-thumb img {
	width:           100%;
	aspect-ratio:    16 / 9;
	object-fit:      cover;
	display:         block;
	transition:      transform 0.4s ease;
}

.newspaper-press-404-post-card:hover .newspaper-press-404-post-thumb img {
	transform:       scale(1.05);
}

.newspaper-press-404-post-body {
	padding:         14px 16px 18px;
}

.newspaper-press-404-post-title {
	font-size:       15px;
	font-weight:     700;
	margin:          8px 0 6px;
	line-height:     1.4;
}

.newspaper-press-404-post-title a {
	color:           var(--newspaper-press-text);
	text-decoration: none;
}

.newspaper-press-404-post-title a:hover {
	color:           var(--newspaper-press-accent);
}

.newspaper-press-404-post-meta {
	font-size:       12px;
	color:           var(--newspaper-press-text-muted);
	margin:          0;
}

/* --------------------------------------------------------------------------
   8. Sticky Sidebar
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
	.right-content.dflt-sidebar {
		position:        sticky;
		top:             calc( var(--wp-admin--admin-bar--height, 0px) + 8px );
	}
}

/* --------------------------------------------------------------------------
   9. General Utility / Refinements
   -------------------------------------------------------------------------- */

/* Smooth scroll */
html {
	scroll-behavior: smooth;
}