/* DailyFact light/dark theme.
   Loaded after design.css and article.css. The palette lives in CSS variables, so most of the
   site follows automatically; this file redefines them for dark and fixes the few places that
   need more than a variable. Dark applies only when <html data-df-theme="dark"> is set. */

html[data-df-theme="dark"] { color-scheme: dark; background: #0f141c; }
html[data-df-theme="light"] { color-scheme: light; }

html[data-df-theme="dark"] body.df-design {
	--df-ink: #f1f5f9;
	--df-text: #d3dae4;
	--df-muted: #9aa7b8;
	--df-accent: #fb923c;
	--df-accent-dark: #fdba74;
	--df-accent-soft: rgba(251, 146, 60, .14);
	--df-surface: #182030;
	--df-border: #2a3547;
	--df-bg: #0f141c;
	--df-card: #161d29;
	--df-header-bg: rgba(15, 20, 28, .92);
	--df-deep: #1d283a;
	--df-footer: #0a0e15;
	--df-stripe: #131a25;
	--df-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
	--df-shadow-hover: 0 2px 4px rgba(0, 0, 0, .5), 0 16px 40px rgba(0, 0, 0, .5);
}

/* ---------- Dark: component fixes ---------- */
html[data-df-theme="dark"] body.df-design .custom-logo { filter: invert(1) hue-rotate(180deg) brightness(1.08); }
html[data-df-theme="dark"] body.df-design .entry-content img,
html[data-df-theme="dark"] body.df-design .df-card img,
html[data-df-theme="dark"] body.df-design .df-mini img,
html[data-df-theme="dark"] body.df-design .df-article__img { filter: brightness(.93) contrast(1.02); }
html[data-df-theme="dark"] body.df-design .site-header { border-bottom-color: var(--df-border); }
html[data-df-theme="dark"] body.df-design .site-footer { border-top: 1px solid var(--df-border); }

html[data-df-theme="dark"] body.df-design .df-band .df-card { border-color: var(--df-border); box-shadow: none; }
html[data-df-theme="dark"] body.df-design .df-chip:hover { background: var(--df-accent-solid); border-color: var(--df-accent-solid); color: #fff; }
html[data-df-theme="dark"] body.df-design .df-trust { border: 1px solid var(--df-border); }
html[data-df-theme="dark"] body.df-design .df-top { border: 1px solid var(--df-border); }
html[data-df-theme="dark"] body.df-design .archive-pagination li a:hover,
html[data-df-theme="dark"] body.df-design .archive-pagination .active a { background: var(--df-accent-solid); border-color: var(--df-accent-solid); color: #fff; }
html[data-df-theme="dark"] body.df-article .df-share a:hover,
html[data-df-theme="dark"] body.df-article .df-share button:hover { background: var(--df-accent-solid); border-color: var(--df-accent-solid); color: #fff; }

html[data-df-theme="dark"] body.df-design .df-takeaways { border-color: rgba(251, 146, 60, .3); border-left-color: var(--df-accent); }
html[data-df-theme="dark"] body.df-design .df-inline-rec--latest { border-color: var(--df-border); }
html[data-df-theme="dark"] body.df-design .df-mini__ph,
html[data-df-theme="dark"] body.df-design .df-noimage,
html[data-df-theme="dark"] body.df-design .df-noimage-wrap,
html[data-df-theme="dark"] body.df-design .df-card .wp-block-post-featured-image.df-noimage { background: linear-gradient(135deg, #2b2420, #1b2230); }
html[data-df-theme="dark"] body.df-design .df-noimage a,
html[data-df-theme="dark"] body.df-design .df-noimage-wrap a,
html[data-df-theme="dark"] body.df-design .df-mini__ph { color: #fdba74; }
html[data-df-theme="dark"] body.df-design .df-crumbs span,
html[data-df-theme="dark"] body.df-article .df-article__meta span + span::before { color: #566377; }

/* Forms (including WPForms, which sets its own colors) */
html[data-df-theme="dark"] body.df-design input[type="text"],
html[data-df-theme="dark"] body.df-design input[type="email"],
html[data-df-theme="dark"] body.df-design input[type="url"],
html[data-df-theme="dark"] body.df-design input[type="search"],
html[data-df-theme="dark"] body.df-design textarea,
html[data-df-theme="dark"] body.df-design select { background: var(--df-card); border-color: #3a475c; color: var(--df-ink); }
html[data-df-theme="dark"] body.df-design .wpforms-container .wpforms-form input[type="text"],
html[data-df-theme="dark"] body.df-design .wpforms-container .wpforms-form input[type="email"],
html[data-df-theme="dark"] body.df-design .wpforms-container .wpforms-form textarea { background: var(--df-card) !important; border-color: #3a475c !important; color: var(--df-ink) !important; }
html[data-df-theme="dark"] body.df-design input::placeholder,
html[data-df-theme="dark"] body.df-design textarea::placeholder { color: #7d8b9e; opacity: 1; }
html[data-df-theme="dark"] body.df-design .wpforms-container .wpforms-field-label,
html[data-df-theme="dark"] body.df-design .wpforms-container .wpforms-field-sublabel { color: var(--df-ink) !important; }
html[data-df-theme="dark"] body.df-design .wpforms-container .wpforms-error,
html[data-df-theme="dark"] body.df-design .wpforms-container label.wpforms-error { color: #fca5a5 !important; }
html[data-df-theme="dark"] body.df-design .wpforms-confirmation-container-full,
html[data-df-theme="dark"] body.df-design div[class*="wpforms-confirmation-container"] { background: var(--df-surface) !important; border-color: var(--df-border) !important; color: var(--df-ink) !important; }

html[data-df-theme="dark"] body.df-design :where(.entry-content) code { background: var(--df-surface); color: #fdba74; }
html[data-df-theme="dark"] body.df-design :where(.entry-content) pre { background: var(--df-surface); color: var(--df-text); }
html[data-df-theme="dark"] body.df-design :where(.entry-content) hr { border-color: var(--df-border); background: var(--df-border); }

/* Parent-theme Customizer CSS forces the first paragraph to #111; follow the theme instead */
html[data-df-theme="dark"] body.df-design.df-article .entry-content > p:first-of-type { color: var(--df-text); }
html[data-df-theme="dark"] body.df-design .wpforms-container .wpforms-required-label { color: #fca5a5 !important; }

/* ---------- Cookie banner (separate plugin, own variables) ---------- */
html[data-df-theme="dark"] #df-consent-root { --df-ink: #f1f5f9; --df-muted: #b4c0cf; --df-accent: #fb923c; --df-surface: #1d283a; --df-border: #334155; --df-focus: #93c5fd; }
html[data-df-theme="dark"] #df-consent-root .df-banner,
html[data-df-theme="dark"] #df-consent-root .df-dialog,
html[data-df-theme="dark"] #df-consent-root .df-actions--dialog { background: #161d29; }
html[data-df-theme="dark"] #df-consent-root .df-banner { box-shadow: 0 12px 40px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .4); }
html[data-df-theme="dark"] #df-consent-root .df-btn--accept { background: #c2410c; border-color: #c2410c; color: #fff; }
html[data-df-theme="dark"] #df-consent-root .df-btn--accept:hover { background: #9a3412; border-color: #9a3412; }
html[data-df-theme="dark"] #df-consent-root .df-btn--reject { background: #e2e8f0; border-color: #e2e8f0; color: #0f172a; }
html[data-df-theme="dark"] #df-consent-root .df-btn--reject:hover { background: #fff; border-color: #fff; }
html[data-df-theme="dark"] #df-consent-root .df-btn--save { background: transparent; border-color: #64748b; color: #f1f5f9; }
html[data-df-theme="dark"] #df-consent-root .df-switch input:checked + .df-slider { background: #c2410c; }

/* ---------- Theme switch buttons (light and dark) ---------- */
.df-theme-toggle { display: none; }
html.df-js .df-theme-toggle { display: inline-flex; }
.df-theme-toggle .df-on-dark { display: none; }
html[data-df-theme="dark"] .df-theme-toggle .df-on-light { display: none; }
html[data-df-theme="dark"] .df-theme-toggle .df-on-dark { display: inline-flex; }

body.df-design .df-theme-toggle {
	position: relative;
	align-items: center;
	justify-content: center;
	gap: 7px;
	flex: 0 0 auto;
	height: 32px;
	min-height: 0;
	margin: 0;
	padding: 0 12px 0 10px;
	border: 1px solid rgba(255, 255, 255, .24);
	border-radius: 999px;
	background: transparent;
	color: #e2e8f0;
	font: 600 12.5px/1 var(--df-sans);
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
	box-shadow: none;
	cursor: pointer;
	transform: none;
	-webkit-tap-highlight-color: transparent;
	transition: background-color .15s, border-color .15s, color .15s;
}
/* Larger invisible tap area (44px) without growing the visible button */
body.df-design .df-theme-toggle::after { content: ""; position: absolute; inset: -6px -4px; }
body.df-design .df-theme-toggle:hover, body.df-design .df-theme-toggle:focus-visible { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .5); color: #fff; transform: none; }
body.df-design .df-theme-toggle:focus-visible { outline: 3px solid #fb923c; outline-offset: 2px; }
.df-theme-toggle svg { display: block; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.df-theme-toggle .df-on-light, .df-theme-toggle .df-on-dark { align-items: center; gap: 7px; }
.df-theme-toggle .df-on-light { display: inline-flex; }

/* Icon-only variant in the header */
body.df-design .df-theme-toggle--icon {
	order: 3;
	width: 36px;
	height: 36px;
	padding: 0;
	margin-left: 10px;
	border-color: var(--df-border);
	background: var(--df-card);
	color: var(--df-ink);
}
body.df-design .df-theme-toggle--icon:hover, body.df-design .df-theme-toggle--icon:focus-visible { background: var(--df-surface); border-color: var(--df-muted); color: var(--df-ink); }
body.df-design .df-theme-toggle--icon svg { width: 17px; height: 17px; }
.df-theme-toggle--icon .df-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.df-theme-toggle--icon .df-on-light, .df-theme-toggle--icon .df-on-dark { gap: 0; }

body.df-design .df-footer__bottom .df-theme-toggle { margin-left: auto; }
@media (max-width: 1075px) {
	body.df-design .df-theme-toggle--icon { margin-left: 0; }
	body.df-design .site-header > .wrap { justify-content: space-between; }
}
@media (max-width: 680px) {
	body.df-design .df-footer__bottom .df-theme-toggle { margin-left: 0; }
	body.df-design .df-theme-toggle--icon { width: 34px; height: 34px; }
}

/* Brief, calm cross-fade when switching (skipped for reduced motion) */
html.df-theme-anim body.df-design, html.df-theme-anim body.df-design * { transition: background-color .22s ease, border-color .22s ease, color .22s ease, fill .22s ease !important; }
@media (prefers-reduced-motion: reduce) { html.df-theme-anim body.df-design, html.df-theme-anim body.df-design * { transition: none !important; } }
@media print { .df-theme-toggle { display: none !important; } }


/* ---------- Floating theme button: always visible at the bottom-right ---------- */
body.df-design .df-theme-toggle--fab {
	position: fixed;
	right: 16px;
	bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	z-index: 65;
	width: 40px;
	height: 40px;
	padding: 0;
	gap: 0;
	border: 1px solid var(--df-border);
	border-radius: 50%;
	background: var(--df-card);
	color: var(--df-ink);
	box-shadow: 0 6px 18px rgba(15, 23, 42, .18), 0 1px 3px rgba(15, 23, 42, .12);
}
body.df-design .df-theme-toggle--fab::after { inset: -4px; }
body.df-design .df-theme-toggle--fab:hover, body.df-design .df-theme-toggle--fab:focus-visible { background: var(--df-surface); border-color: var(--df-muted); color: var(--df-ink); }
body.df-design .df-theme-toggle--fab svg { width: 19px; height: 19px; }
.df-theme-toggle--fab .df-on-light, .df-theme-toggle--fab .df-on-dark { gap: 0; }
.df-theme-toggle--fab .df-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
html[data-df-theme="dark"] body.df-design .df-theme-toggle--fab { box-shadow: 0 6px 18px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .4); }
/* Back-to-top sits just above it, same column */
body.df-design .df-top { right: 16px; bottom: calc(66px + env(safe-area-inset-bottom, 0px)); width: 40px; height: 40px; }
@media (max-width: 680px) {
	body.df-design .df-theme-toggle--fab { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); width: 38px; height: 38px; }
	body.df-design .df-top { right: 12px; bottom: calc(58px + env(safe-area-inset-bottom, 0px)); width: 38px; height: 38px; }
}
/* Keep the last footer line clear of the floating button */
body.df-design .df-footer__bottom { padding-bottom: 36px; }
@media print { .df-theme-toggle--fab { display: none !important; } }
