/* =============================================================
   Binary Cipher — Dark / Light Mode
   Palette map (light → dark):
     color1 #e62e2d → #e62e2d  (red accent — unchanged)
     color2 #ff0000 → #ff4d4d  (hover red — softened for dark)
     color3 #5a5a5a → #a8a8a8  (body text)
     color4 #000000 → #e8e8e8  (headings / dark text)
     color5 #edeff2 → #2a2a2a  (borders)
     color6 #f9fafb → #1e1e1e  (card / widget bg)
     color7 #fdfdfd → #141414  (page / section bg)
     color8 #ffffff → #0f0f0f  (content bg)
   ============================================================= */

/* ── Smooth transitions on theme switch ─────────────────────── */
*,
*::before,
*::after {
	transition:
		background-color 0.25s ease,
		border-color     0.25s ease,
		color            0.25s ease,
		box-shadow       0.25s ease;
}

/* Keep transition off for elements where it causes jank */
img,
svg,
video,
canvas,
.elementor-widget-container *,
.ct-slider *,
input,
textarea {
	transition: none !important;
}

/* Restore only color/bg transitions on inputs */
input,
textarea,
select {
	transition:
		background-color 0.25s ease,
		border-color     0.25s ease,
		color            0.25s ease !important;
}

/* ── Dark Mode palette overrides ────────────────────────────── */
html[data-theme="dark"] {
	--theme-palette-color-1: #e62e2d;
	--theme-palette-color-2: #ff4d4d;
	--theme-palette-color-3: #a8a8a8;
	--theme-palette-color-4: #e8e8e8;
	--theme-palette-color-5: #2a2a2a;
	--theme-palette-color-6: #1e1e1e;
	--theme-palette-color-7: #141414;
	--theme-palette-color-8: #0f0f0f;

	color-scheme: dark;
}

/* ── Body background (Blocksy outputs this as inline style on body) */
html[data-theme="dark"] body {
	background-color: #141414 !important;
	color: #a8a8a8;
}

/* ── Header ─────────────────────────────────────────────────── */
html[data-theme="dark"] .ct-header,
html[data-theme="dark"] #header,
html[data-theme="dark"] .site-header {
	background-color: #0f0f0f !important;
	border-bottom-color: #2a2a2a !important;
}

html[data-theme="dark"] .ct-header .ct-container,
html[data-theme="dark"] header.site-header {
	background-color: #0f0f0f !important;
}

/* Header nav links */
html[data-theme="dark"] .ct-menu a,
html[data-theme="dark"] .ct-header nav a {
	color: #e8e8e8 !important;
}

html[data-theme="dark"] .ct-menu a:hover,
html[data-theme="dark"] .ct-header nav a:hover {
	color: #e62e2d !important;
}

/* Header sub-menus */
html[data-theme="dark"] .ct-menu .sub-menu {
	background-color: #1e1e1e !important;
	border-color: #2a2a2a !important;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6) !important;
}

html[data-theme="dark"] .ct-menu .sub-menu a {
	color: #e8e8e8 !important;
}

html[data-theme="dark"] .ct-menu .sub-menu a:hover {
	color: #e62e2d !important;
	background-color: #2a2a2a !important;
}

/* Header logo area */
html[data-theme="dark"] .site-branding a,
html[data-theme="dark"] .ct-logo a,
html[data-theme="dark"] .site-title a {
	color: #e8e8e8 !important;
}

/* ── Sticky header ───────────────────────────────────────────── */
html[data-theme="dark"] .ct-header.is-sticky,
html[data-theme="dark"] .ct-header[data-sticky] {
	background-color: rgba(15, 15, 15, 0.97) !important;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.6) !important;
}

/* ── Footer ─────────────────────────────────────────────────── */
html[data-theme="dark"] #footer,
html[data-theme="dark"] .site-footer,
html[data-theme="dark"] footer.site-footer,
html[data-theme="dark"] .ct-footer {
	background-color: #0f0f0f !important;
	border-top-color: #2a2a2a !important;
}

html[data-theme="dark"] .ct-footer-top,
html[data-theme="dark"] .ct-footer-middle,
html[data-theme="dark"] .ct-footer-bottom {
	background-color: #0f0f0f !important;
}

html[data-theme="dark"] .ct-footer a,
html[data-theme="dark"] .site-footer a {
	color: #a8a8a8;
}

html[data-theme="dark"] .ct-footer a:hover,
html[data-theme="dark"] .site-footer a:hover {
	color: #e62e2d;
}

/* Footer copyright bar */
html[data-theme="dark"] .ct-footer-bottom-row {
	background-color: #0a0a0a !important;
	border-top-color: #2a2a2a !important;
	color: #666 !important;
}

/* ── Content area ───────────────────────────────────────────── */
html[data-theme="dark"] #content,
html[data-theme="dark"] .site-content,
html[data-theme="dark"] main.site-main {
	background-color: #141414 !important;
}

html[data-theme="dark"] .entry-content,
html[data-theme="dark"] .entry-content p {
	color: #a8a8a8;
}

html[data-theme="dark"] .entry-content h1,
html[data-theme="dark"] .entry-content h2,
html[data-theme="dark"] .entry-content h3,
html[data-theme="dark"] .entry-content h4,
html[data-theme="dark"] .entry-content h5,
html[data-theme="dark"] .entry-content h6,
html[data-theme="dark"] .entry-title a,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 {
	color: #e8e8e8;
}

/* ── Cards / post cards ─────────────────────────────────────── */
html[data-theme="dark"] .ct-blog-card,
html[data-theme="dark"] article.ct-blog-card,
html[data-theme="dark"] .ct-post-card,
html[data-theme="dark"] .post-card {
	background-color: #1e1e1e !important;
	border-color: #2a2a2a !important;
}

html[data-theme="dark"] .ct-blog-card:hover,
html[data-theme="dark"] .ct-post-card:hover {
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
}

html[data-theme="dark"] .ct-blog-card .entry-meta,
html[data-theme="dark"] .ct-blog-card .ct-meta-box {
	color: #666 !important;
}

/* ── Sidebar ─────────────────────────────────────────────────── */
html[data-theme="dark"] .widget,
html[data-theme="dark"] aside.widget-area .widget {
	background-color: #1e1e1e !important;
	border-color: #2a2a2a !important;
}

html[data-theme="dark"] .widget-title,
html[data-theme="dark"] .widgettitle {
	color: #e8e8e8 !important;
	border-bottom-color: #2a2a2a !important;
}

html[data-theme="dark"] .widget ul li a {
	color: #a8a8a8 !important;
}

html[data-theme="dark"] .widget ul li a:hover {
	color: #e62e2d !important;
}

/* ── Horizontal rules / dividers ─────────────────────────────── */
html[data-theme="dark"] hr,
html[data-theme="dark"] .ct-divider {
	border-color: #2a2a2a !important;
	background-color: #2a2a2a !important;
}

/* ── Blockquotes ─────────────────────────────────────────────── */
html[data-theme="dark"] blockquote {
	background-color: #1e1e1e !important;
	border-left-color: #e62e2d !important;
	color: #a8a8a8 !important;
}

/* ── Code blocks ─────────────────────────────────────────────── */
html[data-theme="dark"] pre,
html[data-theme="dark"] code,
html[data-theme="dark"] kbd,
html[data-theme="dark"] samp {
	background-color: #1a1a1a !important;
	color: #d4d4d4 !important;
	border-color: #2a2a2a !important;
}

/* SyntaxHighlighter plugin */
html[data-theme="dark"] .syntaxhighlighter,
html[data-theme="dark"] .syntaxhighlighter .toolbar,
html[data-theme="dark"] .syntaxhighlighter table td {
	background-color: #1a1a1a !important;
}

html[data-theme="dark"] .syntaxhighlighter .code {
	background-color: #1a1a1a !important;
}

html[data-theme="dark"] .syntaxhighlighter a,
html[data-theme="dark"] .syntaxhighlighter .plain,
html[data-theme="dark"] .syntaxhighlighter .color3 {
	color: #d4d4d4 !important;
}

/* ── Forms / inputs ─────────────────────────────────────────── */
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="url"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
	background-color: #1e1e1e !important;
	border-color: #2a2a2a !important;
	color: #e8e8e8 !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
	color: #555 !important;
}

html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus {
	border-color: #e62e2d !important;
	box-shadow: 0 0 0 2px rgba(230, 46, 45, 0.2) !important;
}

/* Search form */
html[data-theme="dark"] .ct-search-form,
html[data-theme="dark"] .search-form {
	background-color: #1e1e1e !important;
	border-color: #2a2a2a !important;
}

/* ── Elementor elements ─────────────────────────────────────── */
/* Section / container backgrounds that use default white */
html[data-theme="dark"] .elementor-section.elementor-section-boxed > .elementor-container,
html[data-theme="dark"] .elementor-widget-wrap {
	background-color: transparent;
}

/* Elementor text widgets */
html[data-theme="dark"] .elementor-widget-text-editor p,
html[data-theme="dark"] .elementor-widget-text-editor {
	color: #a8a8a8;
}

/* Elementor headings */
html[data-theme="dark"] .elementor-widget-heading .elementor-heading-title {
	color: #e8e8e8;
}

/* Elementor icon boxes / info boxes */
html[data-theme="dark"] .elementor-icon-box-wrapper,
html[data-theme="dark"] .elementor-icon-box-content p {
	color: #a8a8a8;
}

/* Elementor dividers */
html[data-theme="dark"] .elementor-divider-separator {
	border-color: #2a2a2a !important;
}

/* Elementor buttons — keep existing brand style; only adjust if needed */
html[data-theme="dark"] .elementor-button.elementor-button-link {
	border-color: #2a2a2a;
}

/* ── Page title / breadcrumbs ───────────────────────────────── */
html[data-theme="dark"] .ct-page-title,
html[data-theme="dark"] .page-header {
	background-color: #1e1e1e !important;
	border-bottom-color: #2a2a2a !important;
}

html[data-theme="dark"] .ct-breadcrumbs,
html[data-theme="dark"] .breadcrumbs {
	color: #666 !important;
}

html[data-theme="dark"] .ct-breadcrumbs a,
html[data-theme="dark"] .breadcrumbs a {
	color: #a8a8a8 !important;
}

/* ── Pagination ─────────────────────────────────────────────── */
html[data-theme="dark"] .ct-pagination a,
html[data-theme="dark"] .page-numbers a {
	background-color: #1e1e1e !important;
	border-color: #2a2a2a !important;
	color: #a8a8a8 !important;
}

html[data-theme="dark"] .ct-pagination .current,
html[data-theme="dark"] .page-numbers .current {
	background-color: #e62e2d !important;
	border-color: #e62e2d !important;
	color: #fff !important;
}

/* ── Tables ─────────────────────────────────────────────────── */
html[data-theme="dark"] table {
	border-color: #2a2a2a !important;
}

html[data-theme="dark"] th {
	background-color: #1e1e1e !important;
	color: #e8e8e8 !important;
	border-color: #2a2a2a !important;
}

html[data-theme="dark"] td {
	border-color: #2a2a2a !important;
	color: #a8a8a8 !important;
}

html[data-theme="dark"] tr:nth-child(even) td {
	background-color: #1a1a1a !important;
}

/* ── Overlay / off-canvas / modals ──────────────────────────── */
html[data-theme="dark"] .ct-offcanvas,
html[data-theme="dark"] .ct-drawer,
html[data-theme="dark"] .ct-mobile-menu {
	background-color: #0f0f0f !important;
}

/* ── Substack embed iframe (hardcoded white in HTML) ─────────── */
html[data-theme="dark"] iframe[src*="substack.com"] {
	filter: invert(0.9) hue-rotate(180deg);
}

/* ── Elementor containers using palette-8 (now near-black) ──── */
/* Ensure text inside them stays light */
html[data-theme="dark"] [style*="background-color: var(--e-global-color-blocksy_palette_8)"] *,
html[data-theme="dark"] [style*="--background-color: var(--e-global-color-blocksy_palette_8)"] * {
	color: #e8e8e8;
}

/* ── Hardcoded white/light inline styles from Elementor ──────── */
/* Elementor outputs background-color as inline style — override per context */
html[data-theme="dark"] .elementor-widget-html iframe {
	border-color: #2a2a2a !important;
}

/* ── Box shadows ─────────────────────────────────────────────── */
html[data-theme="dark"] .elementor-element [style*="box-shadow"] {
	box-shadow: 0 20px 80px rgba(0, 0, 0, 0.5) !important;
}

/* ── Elementor global color palette elements ─────────────────── */
/* palette-4 is now #e8e8e8 (was #000 text) — ensure no near-invisible combos */
html[data-theme="dark"] .elementor-widget-text-editor [style*="color"],
html[data-theme="dark"] .elementor-widget-heading [style*="color"] {
	/* Let specific overrides win; fallback to inherited color */
	color: inherit;
}

/* ── Off-canvas mobile menu ──────────────────────────────────── */
html[data-theme="dark"] .ct-mobile-menu-container,
html[data-theme="dark"] .ct-header-mobile {
	background-color: #0f0f0f !important;
}

html[data-theme="dark"] .ct-mobile-menu li a {
	color: #e8e8e8 !important;
	border-bottom-color: #2a2a2a !important;
}

/* ── Meta / tag / category chips ────────────────────────────── */
html[data-theme="dark"] .ct-meta-box span,
html[data-theme="dark"] .ct-blog-card .cat-links a,
html[data-theme="dark"] .entry-meta .cat-links a {
	background-color: #1e1e1e !important;
	color: #a8a8a8 !important;
}

/* ── Read More / excerpt links ───────────────────────────────── */
html[data-theme="dark"] .more-link,
html[data-theme="dark"] a.ct-read-more {
	color: #e62e2d !important;
}

/* ── Comment area ────────────────────────────────────────────── */
html[data-theme="dark"] #comments,
html[data-theme="dark"] .comment-list li {
	border-color: #2a2a2a !important;
}

html[data-theme="dark"] .comment-body {
	background-color: #1e1e1e !important;
}

html[data-theme="dark"] .comment-author cite a {
	color: #e8e8e8 !important;
}

/* ── Dark mode toggle button ────────────────────────────────── */
.bc-dark-toggle {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 9999;

	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 2px solid #2a2a2a;
	cursor: pointer;
	outline: none;
	padding: 0;

	background-color: #1e1e1e;
	color: #e8e8e8;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);

	/* Override any transition resets from above */
	transition:
		background-color 0.2s ease,
		border-color     0.2s ease,
		box-shadow       0.2s ease,
		transform        0.15s ease !important;
}

.bc-dark-toggle:hover {
	background-color: #e62e2d;
	border-color: #e62e2d;
	box-shadow: 0 4px 16px rgba(230, 46, 45, 0.35);
	transform: scale(1.08);
}

.bc-dark-toggle:focus-visible {
	outline: 2px solid #e62e2d;
	outline-offset: 3px;
}

.bc-dark-toggle svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	pointer-events: none;
	transition: none !important;
}

/* Light mode: show moon (prompt to go dark) */
html:not([data-theme="dark"]) .bc-dark-toggle {
	background-color: #fff;
	border-color: #edeff2;
	color: #333;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}

html:not([data-theme="dark"]) .bc-dark-toggle:hover {
	background-color: #e62e2d;
	border-color: #e62e2d;
	color: #fff;
}

/* Icon visibility */
.bc-dark-toggle .bc-icon-moon   { display: block; }
.bc-dark-toggle .bc-icon-sun    { display: none; }

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

/* Mobile: slightly smaller + higher above any cookie banner */
@media (max-width: 768px) {
	.bc-dark-toggle {
		bottom: 80px;
		right: 16px;
		width: 40px;
		height: 40px;
	}

	.bc-dark-toggle svg {
		width: 18px;
		height: 18px;
	}
}