/* =============================================================================
   Newsify — Dark Mode component overrides. Base color tokens are swapped
   via CSS variables in the :root/.newsify-dark-mode block generated by
   Newsify_Customizer::generate_css(); this file handles the handful of
   things that need more than a variable swap (shadows, borders, images).
   ========================================================================== */

body.newsify-dark-mode {
	--nf-shadow: 0 2px 14px rgba(0,0,0,.4);
	--nf-shadow-lg: 0 10px 34px rgba(0,0,0,.55);
}

body.newsify-dark-mode .newsify-card,
body.newsify-dark-mode .widget,
body.newsify-dark-mode .newsify-modal-panel,
body.newsify-dark-mode .live-search-results,
body.newsify-dark-mode .mega-menu-panel,
body.newsify-dark-mode .nav-menu .sub-menu {
	background: var(--nf-bg-alt);
}

body.newsify-dark-mode .site-header,
body.newsify-dark-mode .newsify-search-panel,
body.newsify-dark-mode .mobile-bottom-nav {
	background: var(--nf-bg);
	border-color: var(--nf-border);
}

body.newsify-dark-mode img { filter: brightness(.92); }

body.newsify-dark-mode .search-field,
body.newsify-dark-mode .comment-form input,
body.newsify-dark-mode .comment-form textarea,
body.newsify-dark-mode .newsletter-form input {
	background: var(--nf-bg-alt);
	color: var(--nf-text);
	border-color: var(--nf-border);
}

body.newsify-dark-mode .icon-btn:hover { background: var(--nf-bg-alt); }

body.newsify-dark-mode .dark-mode-toggle .dashicons::before { content: "\f158"; } /* sun icon when dark is active */