/**
 * PW Dark Mode — hand-tuned dark palette for the Minimum Pro theme.
 *
 * Design notes:
 *  - No inversion. Every rule maps one of the theme's own colors to a
 *    deliberate dark equivalent.
 *  - Background is warm charcoal (#1b1e22), never pure black.
 *  - Text is soft off-white (#cfd2d6); headlines slightly brighter.
 *  - The signature #0ebfe9 accent is kept — it excels on dark.
 *  - The primary nav and footer are already dark in the theme, so they
 *    change only enough to blend (continuity preserves the PW look).
 */

:root {
	--pw-bg:        #1b1e22; /* page background */
	--pw-bg-raise:  #22262b; /* header */
	--pw-panel:     #24282d; /* tagline, author box, comments, after-entry */
	--pw-panel-2:   #2a2f35; /* deeper panels, code */
	--pw-border:    #2e3238;
	--pw-border-2:  #3a3f46;
	--pw-text:      #cfd2d6;
	--pw-text-bright:#e8eaec; /* headlines */
	--pw-text-dim:  #9aa0a6;  /* meta, blockquotes */
	--pw-accent:    #0ebfe9;  /* Political Wire blue, unchanged */
}

/* Smooth switch (class added briefly by JS on toggle) */
.pw-theme-transition,
.pw-theme-transition *,
.pw-theme-transition *::before,
.pw-theme-transition *::after {
	transition: background-color .3s ease, color .3s ease,
	            border-color .3s ease !important;
}

/* ---------------------------------------------------------------
   The toggle button
   --------------------------------------------------------------- */

.pw-dark-mode-toggle {
	background: none !important;
	border: 0;
	border-radius: 50%;
	box-shadow: none;
	color: inherit;
	cursor: pointer;
	line-height: 1;
	margin: 0;
	padding: 6px 8px !important;
	text-transform: none;
	vertical-align: middle;
	width: auto;
}

.pw-dark-mode-toggle:hover {
	background: none !important;
	color: #0ebfe9 !important;
}

/* In the (dark) primary nav the icon inherits white */
.nav-primary .pw-dark-mode-item {
	float: right;
	padding: 14px 0;
}

.nav-primary .pw-dark-mode-toggle {
	color: #fff;
}

/* Show moon in light mode ("take me to dark"), sun in dark mode */
.pw-dark-mode-toggle .pw-icon-sun { display: none; }
.pw-dark-mode-toggle .pw-icon-moon { display: inline-block; }

html[data-pw-theme="dark"] .pw-dark-mode-toggle .pw-icon-sun { display: inline-block; }
html[data-pw-theme="dark"] .pw-dark-mode-toggle .pw-icon-moon { display: none; }

/* Text label — hidden on desktop (icon only), shown in the mobile menu */
.pw-toggle-label { display: none; }

/* Responsive menu: left-align the toggle like the other menu items */
@media only screen and (max-width: 768px) {
	.nav-primary .pw-dark-mode-item {
		float: none;
		padding: 0;
	}

	.nav-primary .pw-dark-mode-toggle {
		border-radius: 0;
		display: block;
		padding: 16px 20px !important;
		text-align: left;
		width: 100%;
	}

	.pw-toggle-label {
		display: inline;
		font-family: 'Roboto', sans-serif;
		font-size: 14px;
		letter-spacing: 1px;
		margin-left: 10px;
		text-transform: uppercase;
		vertical-align: middle;
	}

	.pw-toggle-label::after { content: "Dark Mode"; }
	html[data-pw-theme="dark"] .pw-toggle-label::after { content: "Light Mode"; }
}

/* Floating fallback (only appears if the nav toggle can't render) */
.pw-dark-mode-floating {
	background-color: #333 !important;
	border-radius: 50%;
	bottom: 20px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
	color: #fff;
	height: 42px;
	padding: 0 !important;
	position: fixed;
	right: 20px;
	width: 42px;
	z-index: 9999;
}

html[data-pw-theme="dark"] .pw-dark-mode-floating {
	background-color: var(--pw-panel-2) !important;
}

/* ---------------------------------------------------------------
   Everything below applies only in dark mode
   --------------------------------------------------------------- */

html[data-pw-theme="dark"],
html[data-pw-theme="dark"] body {
	background-color: var(--pw-bg);
	color: var(--pw-text);
}

html[data-pw-theme="dark"] .site-inner {
	background-color: var(--pw-bg);
}

html[data-pw-theme="dark"] ::selection {
	background-color: var(--pw-accent);
	color: #10222a;
}

/* Links: soft off-white with the theme's dotted underline; accent on hover */
html[data-pw-theme="dark"] a {
	border-bottom-color: var(--pw-text-dim);
	color: var(--pw-text-bright);
}

html[data-pw-theme="dark"] a:hover {
	border-bottom-color: var(--pw-accent);
	color: var(--pw-accent);
}

html[data-pw-theme="dark"] h1,
html[data-pw-theme="dark"] h2,
html[data-pw-theme="dark"] h3,
html[data-pw-theme="dark"] h4,
html[data-pw-theme="dark"] h5,
html[data-pw-theme="dark"] h6 {
	color: var(--pw-text-bright);
}

html[data-pw-theme="dark"] .entry-title a,
html[data-pw-theme="dark"] .sidebar .widget-title a {
	color: var(--pw-text-bright);
}

html[data-pw-theme="dark"] .entry-title a:hover {
	color: var(--pw-accent);
}

html[data-pw-theme="dark"] .entry-meta {
	color: var(--pw-text-dim);
}

html[data-pw-theme="dark"] blockquote,
html[data-pw-theme="dark"] blockquote::before {
	color: var(--pw-text-dim);
}

html[data-pw-theme="dark"] hr {
	border-top-color: var(--pw-border);
}

/* ---------------------------------------------------------------
   Site header + logo
   --------------------------------------------------------------- */

html[data-pw-theme="dark"] .site-header {
	background-color: var(--pw-bg-raise);
	border-bottom-color: var(--pw-border);
}

html[data-pw-theme="dark"] .site-title a,
html[data-pw-theme="dark"] .site-title a:hover {
	color: var(--pw-text-bright);
}

/* Dark logo: the masthead logo is an <img>; JS swaps its src for the
   dark variant (same dimensions, so sizing is identical). Until the
   swap runs, keep the white-background logo invisible in dark mode
   so it never flashes; JS adds .pw-logo-swapped after switching. */
html[data-pw-theme="dark"] .site-header .title-area img {
	opacity: 0;
	transition: opacity .2s ease;
}

html[data-pw-theme="dark"] .site-header .title-area img.pw-logo-swapped {
	opacity: 1;
}

html[data-pw-theme="dark"] .genesis-nav-menu a {
	color: var(--pw-text);
}

html[data-pw-theme="dark"] .genesis-nav-menu a:hover,
html[data-pw-theme="dark"] .genesis-nav-menu .current-menu-item > a {
	color: var(--pw-accent);
}

html[data-pw-theme="dark"] .genesis-nav-menu .sub-menu a {
	background-color: var(--pw-bg-raise);
	border-color: var(--pw-border);
}

html[data-pw-theme="dark"] .site-header .sub-menu {
	border-top-color: var(--pw-border);
}

/* Primary nav: already dark — deepen a touch so it sits into the page */
html[data-pw-theme="dark"] .nav-primary {
	background-color: #26292e;
}

html[data-pw-theme="dark"] .nav-primary .genesis-nav-menu .sub-menu a {
	background-color: #26292e;
	border-color: var(--pw-border-2);
	color: #fff;
}

/* ---------------------------------------------------------------
   Panels: tagline, archive, author box, after-entry, comments
   --------------------------------------------------------------- */

html[data-pw-theme="dark"] .site-tagline {
	background-color: var(--pw-panel);
	border-bottom-color: var(--pw-border);
}

html[data-pw-theme="dark"] .archive-description,
html[data-pw-theme="dark"] .author-box,
html[data-pw-theme="dark"] .after-entry {
	background-color: var(--pw-panel);
}

html[data-pw-theme="dark"] .author-box-title {
	color: var(--pw-text-bright);
}

html[data-pw-theme="dark"] li.comment {
	background-color: var(--pw-panel);
	border-color: var(--pw-bg);
}

html[data-pw-theme="dark"] .home-featured,
html[data-pw-theme="dark"] .featured-content .entry,
html[data-pw-theme="dark"] .genesis-grid-even,
html[data-pw-theme="dark"] .genesis-grid-odd {
	border-bottom-color: var(--pw-border);
}

/* ---------------------------------------------------------------
   Forms, buttons, tables, code
   --------------------------------------------------------------- */

html[data-pw-theme="dark"] input,
html[data-pw-theme="dark"] select,
html[data-pw-theme="dark"] textarea {
	background-color: var(--pw-panel);
	border-color: var(--pw-border-2);
	color: var(--pw-text);
}

html[data-pw-theme="dark"] input:focus,
html[data-pw-theme="dark"] textarea:focus {
	border-color: var(--pw-text-dim);
}

html[data-pw-theme="dark"] ::-webkit-input-placeholder { color: var(--pw-text-dim); }
html[data-pw-theme="dark"] ::-moz-placeholder { color: var(--pw-text-dim); }

html[data-pw-theme="dark"] button:not(.pw-dark-mode-toggle),
html[data-pw-theme="dark"] input[type="button"],
html[data-pw-theme="dark"] input[type="reset"],
html[data-pw-theme="dark"] input[type="submit"],
html[data-pw-theme="dark"] .button,
html[data-pw-theme="dark"] .entry-content .button,
html[data-pw-theme="dark"] a.cta-button,
html[data-pw-theme="dark"] .pagination li a,
html[data-pw-theme="dark"] .sidebar .tagcloud a {
	background-color: var(--pw-panel-2);
	color: var(--pw-text-bright);
}

html[data-pw-theme="dark"] button:not(.pw-dark-mode-toggle):hover,
html[data-pw-theme="dark"] input:hover[type="button"],
html[data-pw-theme="dark"] input:hover[type="reset"],
html[data-pw-theme="dark"] input:hover[type="submit"],
html[data-pw-theme="dark"] .button:hover,
html[data-pw-theme="dark"] a.cta-button:hover,
html[data-pw-theme="dark"] .pagination li a:hover,
html[data-pw-theme="dark"] .pagination li.active a,
html[data-pw-theme="dark"] .sidebar .tagcloud a:hover {
	background-color: var(--pw-accent);
	color: #10222a;
}

html[data-pw-theme="dark"] tbody { border-bottom-color: var(--pw-border-2); }
html[data-pw-theme="dark"] td { border-top-color: var(--pw-border-2); }

html[data-pw-theme="dark"] .entry-content code {
	background-color: var(--pw-panel-2);
	color: var(--pw-text);
}

/* Newsletter widget (already dark in theme) — blend borders */
html[data-pw-theme="dark"] .sidebar .enews-widget {
	background-color: var(--pw-panel);
}

/* ---------------------------------------------------------------
   Footer: already #333 — just deepen to blend with the page
   --------------------------------------------------------------- */

html[data-pw-theme="dark"] .footer-widgets,
html[data-pw-theme="dark"] .site-footer {
	background-color: #17191d;
}

html[data-pw-theme="dark"] .footer-widgets .wrap {
	border-bottom-color: var(--pw-border);
}

/* ---------------------------------------------------------------
   Images, media, embeds, ads
   --------------------------------------------------------------- */

/* Dim slightly so photos don't glare at night; full brightness on hover */
html[data-pw-theme="dark"] .entry-content img,
html[data-pw-theme="dark"] .sidebar img:not([src*="logo"]),
html[data-pw-theme="dark"] .avatar {
	filter: brightness(.87) contrast(1.02);
}

html[data-pw-theme="dark"] .entry-content img:hover {
	filter: none;
}

/* Ad/embed iframes can't be restyled — soften them instead */
html[data-pw-theme="dark"] iframe {
	filter: brightness(.9);
	opacity: .95;
}