/* ================================================================
   JBH Theme Toggle — Full-Site Dark / Light / Auto Mode Engine
   ================================================================
   FRONTEND ONLY — never loaded in WP admin.

   FULL-SITE ARCHITECTURE: The toggle affects the entire page body,
   WordPress content, WooCommerce pages, and all JBH blocks/modal.
   Matches the original prototype design:
     • Header: always-dark glass (never themed)
     • Footer: always-dark (never themed)
     • Body + main content: fully themed
     • JBH blocks + modal: fully themed
     • WooCommerce pages: fully themed
     • Gutenberg core blocks: fully themed

   3-State Toggle: Dark (default) / Light / Auto (OS preference)

   Coverage:
     1.  Smooth page-wide transition
     2.  Toggle button UI (sun/moon/auto icon swap)
     3.  JBH token variables (dark)
     4.  JBH token variables (light)
     5.  Body + page theming
     6.  WooCommerce page theming
     7.  Gutenberg core block theming
     8.  Forms + inputs theming
     9.  Blocksy header — always-dark glass (exempt)
     10. Blocksy footer — always-dark (exempt)
     11. JBH slide-over modal light overrides
     12. Image brightness control
     13. Custom scrollbar
     14. Text selection
     15. Print styles
     16. Reduced motion
   ================================================================ */


/* ================================================================
   1.  SMOOTH PAGE-WIDE TRANSITION
   ================================================================ */

html.jbh-theme-transitioning,
html.jbh-theme-transitioning *,
html.jbh-theme-transitioning *::before,
html.jbh-theme-transitioning *::after {
	transition: background-color 0.35s ease,
	            color 0.35s ease,
	            border-color 0.35s ease,
	            box-shadow 0.35s ease,
	            fill 0.35s ease,
	            stroke 0.35s ease !important;
}


/* ================================================================
   2.  TOGGLE BUTTON UI
   ================================================================ */

.jbh-theme-toggle-wrap {
	display: inline-flex;
	align-items: center;
}

.jbh-theme-toggle-auto {
	position: fixed;
	z-index: 99999;
	transition: opacity 0.3s ease;
}

/* Position variants — 10-position grid + offset support */
.jbh-theme-toggle-auto.jbh-toggle-pos-top-left       { top: 18px;  left: 18px;  bottom: auto; right: auto; }
.jbh-theme-toggle-auto.jbh-toggle-pos-top-center     { top: 18px;  left: 50%;   transform: translateX(-50%); bottom: auto; right: auto; }
.jbh-theme-toggle-auto.jbh-toggle-pos-top-right      { top: 18px;  right: 18px; bottom: auto; left: auto; }
.jbh-theme-toggle-auto.jbh-toggle-pos-center-left    { top: 50%;   left: 18px;  transform: translateY(-50%); bottom: auto; right: auto; }
.jbh-theme-toggle-auto.jbh-toggle-pos-center-right   { top: 50%;   right: 18px; transform: translateY(-50%); bottom: auto; left: auto; }
.jbh-theme-toggle-auto.jbh-toggle-pos-bottom-left    { bottom: 24px; left: 24px;  top: auto; right: auto; }
.jbh-theme-toggle-auto.jbh-toggle-pos-bottom-center  { bottom: 24px; left: 50%;   transform: translateX(-50%); top: auto; right: auto; }
.jbh-theme-toggle-auto.jbh-toggle-pos-bottom-right   { bottom: 24px; right: 24px; top: auto; left: auto; }
.jbh-theme-toggle-auto.jbh-toggle-pos-header-inline {
	position: static;
	display: inline-flex;
	align-items: center;
	z-index: auto;
	margin-left: 8px;
}

.jbh-theme-toggle-in-nav {
	position: static;
	display: inline-flex;
	align-items: center;
	z-index: auto;
	margin-left: 8px;
}

/* Size variants */
.jbh-theme-toggle-auto.jbh-toggle-size-small  .jbh-theme-btn { width: 32px; height: 32px; border-radius: 8px; }
.jbh-theme-toggle-auto.jbh-toggle-size-small  .jbh-theme-btn svg { width: 16px; height: 16px; }
.jbh-theme-toggle-auto.jbh-toggle-size-medium .jbh-theme-btn { width: 40px; height: 40px; border-radius: 10px; }
.jbh-theme-toggle-auto.jbh-toggle-size-medium .jbh-theme-btn svg { width: 20px; height: 20px; }
.jbh-theme-toggle-auto.jbh-toggle-size-large  .jbh-theme-btn { width: 52px; height: 52px; border-radius: 14px; }
.jbh-theme-toggle-auto.jbh-toggle-size-large  .jbh-theme-btn svg { width: 26px; height: 26px; }

/* Shape variants */
.jbh-toggle-shape-square .jbh-theme-btn  { border-radius: 10px; }
.jbh-toggle-shape-circle .jbh-theme-btn  { border-radius: 50%; }
.jbh-toggle-shape-pill .jbh-theme-btn    { border-radius: 999px; }
/* pill shape widens the button for a capsule look */
.jbh-toggle-shape-pill.jbh-toggle-size-small  .jbh-theme-btn { width: 48px; }
.jbh-toggle-shape-pill.jbh-toggle-size-medium .jbh-theme-btn { width: 58px; }
.jbh-toggle-shape-pill.jbh-toggle-size-large  .jbh-theme-btn { width: 72px; }

/* Custom toggle colors (applied via inline CSS vars) */
.jbh-theme-toggle-auto[style*="--jbh-toggle-bg"] .jbh-theme-btn {
	background: var(--jbh-toggle-bg);
}
.jbh-theme-toggle-auto[style*="--jbh-toggle-icon"] .jbh-theme-btn {
	color: var(--jbh-toggle-icon);
}
.jbh-theme-toggle-auto[style*="--jbh-toggle-border"] .jbh-theme-btn {
	border-color: var(--jbh-toggle-border);
}
.jbh-theme-toggle-auto[style*="--jbh-toggle-hover-bg"] .jbh-theme-btn:hover {
	background: var(--jbh-toggle-hover-bg);
}
.jbh-theme-toggle-auto[style*="--jbh-toggle-hover-icon"] .jbh-theme-btn:hover {
	color: var(--jbh-toggle-hover-icon);
}

/* ── SWITCH style (iOS-style slider) ──────────────────────── */
.jbh-toggle-style-switch .jbh-theme-btn--switch {
	width: auto;
	height: auto;
	padding: 0;
	border: none;
	background: transparent;
	display: inline-flex;
	align-items: center;
}
.jbh-switch-track {
	position: relative;
	width: 52px;
	height: 28px;
	background: var(--jbh-toggle-bg, var(--jbh-dm-border, rgba(156,163,175,0.30)));
	border-radius: 999px;
	border: 1px solid var(--jbh-toggle-border, var(--jbh-dm-border, rgba(156,163,175,0.20)));
	transition: background 0.3s ease, border-color 0.3s ease;
	cursor: pointer;
}
.jbh-switch-thumb {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--jbh-toggle-icon, var(--jbh-dm-accent, #2A9D8F));
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease;
	box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.jbh-switch-thumb svg { width: 14px; height: 14px; color: #fff; }
/* Dark → thumb on left, light → thumb center, auto → thumb right */
html[data-theme="dark"]  .jbh-switch-thumb { transform: translateX(0); }
html[data-theme="light"] .jbh-switch-thumb { transform: translateX(12px); }
html[data-theme="auto"]  .jbh-switch-thumb { transform: translateX(24px); }
html:not([data-theme])   .jbh-switch-thumb { transform: translateX(0); }
/* Icon visibility inside switch thumb */
.jbh-switch-thumb .jbh-icon-sun,
.jbh-switch-thumb .jbh-icon-moon,
.jbh-switch-thumb .jbh-icon-auto { position: absolute; }
html[data-theme="dark"]  .jbh-switch-thumb .jbh-icon-sun  { opacity: 1; }
html[data-theme="dark"]  .jbh-switch-thumb .jbh-icon-moon { opacity: 0; }
html[data-theme="light"] .jbh-switch-thumb .jbh-icon-sun  { opacity: 0; }
html[data-theme="light"] .jbh-switch-thumb .jbh-icon-moon { opacity: 1; }
html[data-theme="auto"]  .jbh-switch-thumb .jbh-icon-sun  { opacity: 0; }
html[data-theme="auto"]  .jbh-switch-thumb .jbh-icon-moon { opacity: 0; }
html:not([data-theme])   .jbh-switch-thumb .jbh-icon-sun  { opacity: 1; }
html:not([data-theme])   .jbh-switch-thumb .jbh-icon-moon { opacity: 0; }
/* Auto icon inside switch thumb */
html[data-theme="dark"]  .jbh-switch-thumb .jbh-icon-auto { opacity: 0; }
html[data-theme="light"] .jbh-switch-thumb .jbh-icon-auto { opacity: 0; }
html[data-theme="auto"]  .jbh-switch-thumb .jbh-icon-auto { opacity: 1; }
html:not([data-theme])   .jbh-switch-thumb .jbh-icon-auto { opacity: 0; }
/* Auto mode track tint */
html[data-theme="auto"] .jbh-switch-track {
	background: rgba(42, 157, 143, 0.18);
	border-color: var(--jbh-dm-accent, #2A9D8F);
}
/* Switch hover */
.jbh-theme-btn--switch:hover .jbh-switch-track {
	background: var(--jbh-toggle-hover-bg, rgba(42, 157, 143, 0.15));
	border-color: var(--jbh-dm-accent, #2A9D8F);
}
/* Switch size scaling */
.jbh-toggle-size-small  .jbh-switch-track { width: 42px; height: 22px; }
.jbh-toggle-size-small  .jbh-switch-thumb { width: 16px; height: 16px; }
.jbh-toggle-size-small  .jbh-switch-thumb svg { width: 10px; height: 10px; }
html[data-theme="light"] .jbh-toggle-size-small .jbh-switch-thumb { transform: translateX(10px); }
html[data-theme="auto"]  .jbh-toggle-size-small .jbh-switch-thumb { transform: translateX(20px); }
.jbh-toggle-size-large  .jbh-switch-track { width: 64px; height: 34px; }
.jbh-toggle-size-large  .jbh-switch-thumb { width: 28px; height: 28px; }
.jbh-toggle-size-large  .jbh-switch-thumb svg { width: 18px; height: 18px; }
html[data-theme="light"] .jbh-toggle-size-large .jbh-switch-thumb { transform: translateX(15px); }
html[data-theme="auto"]  .jbh-toggle-size-large .jbh-switch-thumb { transform: translateX(30px); }

/* ── LABEL style (icon + visible text label) ─────────────── */
.jbh-theme-btn--label {
	width: auto !important;
	padding: 6px 14px !important;
	gap: 6px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	font-family: inherit;
}
html[data-theme="dark"]  .jbh-toggle-label-text::after { content: attr(data-dark); }
html[data-theme="light"] .jbh-toggle-label-text::after { content: attr(data-light); }
html[data-theme="auto"]  .jbh-toggle-label-text::after { content: attr(data-auto); }
html:not([data-theme])   .jbh-toggle-label-text::after { content: attr(data-dark); }
/* Label style: show active icon inline beside text instead of absolute stacking */
.jbh-theme-btn.jbh-theme-btn--label svg {
	position: static;
	display: none;
	opacity: 1 !important;
	transform: none !important;
}
html[data-theme="dark"]  .jbh-theme-btn--label .jbh-icon-sun  { display: inline-flex; }
html[data-theme="light"] .jbh-theme-btn--label .jbh-icon-moon { display: inline-flex; }
html[data-theme="auto"]  .jbh-theme-btn--label .jbh-icon-auto { display: inline-flex; }
html:not([data-theme])   .jbh-theme-btn--label .jbh-icon-sun  { display: inline-flex; }

/* Opacity — idle state (hover always 100%) */
.jbh-theme-toggle-auto[style*="--jbh-toggle-opacity"] {
	opacity: var(--jbh-toggle-opacity, 1);
}
.jbh-theme-toggle-auto[style*="--jbh-toggle-opacity"]:hover {
	opacity: 1;
}

.jbh-theme-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--jbh-dm-border, rgba(156,163,175,0.20));
	border-radius: 10px;
	background: transparent;
	color: var(--jbh-dm-muted, #9CA3AF);
	cursor: pointer;
	transition: background 0.25s ease, border-color 0.25s ease,
	            color 0.25s ease, transform 0.25s ease;
	-webkit-tap-highlight-color: transparent;
	padding: 0;
}

.jbh-theme-btn:hover {
	background: rgba(42, 157, 143, 0.12);
	border-color: var(--jbh-dm-accent, #2A9D8F);
	color: var(--jbh-dm-accent, #2A9D8F);
	transform: scale(1.08);
}

.jbh-theme-btn:focus-visible {
	outline: 2px solid var(--jbh-dm-accent, #2A9D8F);
	outline-offset: 2px;
}

.jbh-theme-btn:active { transform: scale(0.95); }

.jbh-theme-btn svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	position: absolute;
	transition: opacity 0.35s ease, transform 0.35s ease;
}

/* Sun visible in dark mode, moon visible in light mode, monitor visible in auto */
html[data-theme="dark"]  .jbh-icon-sun    { opacity: 1; transform: rotate(0deg) scale(1); }
html[data-theme="dark"]  .jbh-icon-moon   { opacity: 0; transform: rotate(90deg) scale(0.5); }
html[data-theme="dark"]  .jbh-icon-auto   { opacity: 0; transform: scale(0.5); }
html[data-theme="light"] .jbh-icon-sun    { opacity: 0; transform: rotate(-90deg) scale(0.5); }
html[data-theme="light"] .jbh-icon-moon   { opacity: 1; transform: rotate(0deg) scale(1); }
html[data-theme="light"] .jbh-icon-auto   { opacity: 0; transform: scale(0.5); }
html[data-theme="auto"]  .jbh-icon-sun    { opacity: 0; transform: scale(0.5); }
html[data-theme="auto"]  .jbh-icon-moon   { opacity: 0; transform: scale(0.5); }
html[data-theme="auto"]  .jbh-icon-auto   { opacity: 1; transform: rotate(0deg) scale(1); }
html:not([data-theme])   .jbh-icon-sun    { opacity: 1; transform: scale(1); }
html:not([data-theme])   .jbh-icon-moon   { opacity: 0; transform: scale(0.5); }
html:not([data-theme])   .jbh-icon-auto   { opacity: 0; transform: scale(0.5); }


/* ================================================================
   3.  JBH TOKEN VARIABLES — DARK MODE
   ================================================================ */

html[data-theme="dark"] {
	--jbh-bg: var(--jbh-dm-bg, #121212);
	--jbh-card: var(--jbh-dm-card, #1A1A1A);
	--jbh-heading-color: var(--jbh-dm-heading, #FFFFFF);
	--jbh-text-color: var(--jbh-dm-muted, #9CA3AF);
	--jbh-card-heading: var(--jbh-dm-heading, #FFFFFF);
	--jbh-border: var(--jbh-dm-border, rgba(31,95,91,0.20));
	--jbh-creme: var(--jbh-dm-text, #F0EAD6);
	--jbh-slate: var(--jbh-dm-muted, #9CA3AF);
	--jbh-teal: var(--jbh-dm-accent, #2A9D8F);
	--jbh-teal-dark: var(--jbh-dm-accent-dark, #1F5F5B);
	--jbh-coral: var(--jbh-dm-coral, #D64F42);
	--jbh-accent-hover: var(--jbh-dm-accent-hover, #E76F51);
}


/* ================================================================
   4.  JBH TOKEN VARIABLES — LIGHT MODE
   ================================================================ */

html[data-theme="light"] {
	--jbh-bg: var(--jbh-dm-bg, #F9F8F6);
	--jbh-card: var(--jbh-dm-card, #FFFFFF);
	--jbh-heading-color: var(--jbh-dm-heading, #121212);
	--jbh-text-color: var(--jbh-dm-muted, #4B5563);
	--jbh-card-heading: var(--jbh-dm-heading, #121212);
	--jbh-border: var(--jbh-dm-border, rgba(0,0,0,0.08));
	--jbh-creme: var(--jbh-dm-text, #121212);
	--jbh-slate: var(--jbh-dm-muted, #4B5563);
	--jbh-teal: var(--jbh-dm-accent, #2A9D8F);
	--jbh-teal-dark: var(--jbh-dm-accent-dark, #1F5F5B);
	--jbh-coral: var(--jbh-dm-coral, #D64F42);
	--jbh-accent-hover: var(--jbh-dm-accent-hover, #E76F51);
}


/* ================================================================
   4b. AUTO MODE — CSS uses html.dark / html.light class selectors
   ================================================================
   When mode is 'auto', data-theme="auto" — so html[data-theme="dark"]
   selectors don't fire. Instead, JS sets html.dark or html.light class.
   We duplicate the token variables for the class-based selectors.
   ================================================================ */

html.dark {
	--jbh-bg: var(--jbh-dm-bg, #121212);
	--jbh-card: var(--jbh-dm-card, #1A1A1A);
	--jbh-heading-color: var(--jbh-dm-heading, #FFFFFF);
	--jbh-text-color: var(--jbh-dm-muted, #9CA3AF);
	--jbh-card-heading: var(--jbh-dm-heading, #FFFFFF);
	--jbh-border: var(--jbh-dm-border, rgba(31,95,91,0.20));
	--jbh-creme: var(--jbh-dm-text, #F0EAD6);
	--jbh-slate: var(--jbh-dm-muted, #9CA3AF);
	--jbh-teal: var(--jbh-dm-accent, #2A9D8F);
	--jbh-teal-dark: var(--jbh-dm-accent-dark, #1F5F5B);
	--jbh-coral: var(--jbh-dm-coral, #D64F42);
	--jbh-accent-hover: var(--jbh-dm-accent-hover, #E76F51);
}

html.light {
	--jbh-bg: var(--jbh-dm-bg, #F9F8F6);
	--jbh-card: var(--jbh-dm-card, #FFFFFF);
	--jbh-heading-color: var(--jbh-dm-heading, #121212);
	--jbh-text-color: var(--jbh-dm-muted, #4B5563);
	--jbh-card-heading: var(--jbh-dm-heading, #121212);
	--jbh-border: var(--jbh-dm-border, rgba(0,0,0,0.08));
	--jbh-creme: var(--jbh-dm-text, #121212);
	--jbh-slate: var(--jbh-dm-muted, #4B5563);
	--jbh-teal: var(--jbh-dm-accent, #2A9D8F);
	--jbh-teal-dark: var(--jbh-dm-accent-dark, #1F5F5B);
	--jbh-coral: var(--jbh-dm-coral, #D64F42);
	--jbh-accent-hover: var(--jbh-dm-accent-hover, #E76F51);
}


/* ================================================================
   5.  BODY + PAGE THEMING (full-site coverage)
   ================================================================
   Matches prototype: body gets bg-brand-bgLight / bg-brand-bgDark.
   ================================================================ */

html[data-theme="dark"] body, html.dark body {
	background-color: var(--jbh-dm-bg, #121212) !important;
	color: var(--jbh-dm-text, #F0EAD6);
}

html[data-theme="light"] body, html.light body {
	background-color: var(--jbh-dm-bg, #F9F8F6) !important;
	color: var(--jbh-dm-text, #121212);
}

/* Main content area */
html[data-theme="dark"] .site-content, html.dark .site-content,
html[data-theme="dark"] .entry-content, html.dark .entry-content,
html[data-theme="dark"] main, html.dark main,
html[data-theme="dark"] article, html.dark article,
html[data-theme="dark"] .page-content, html.dark .page-content,
html[data-theme="dark"] .ct-container-full, html.dark .ct-container-full {
	color: var(--jbh-dm-text, #F0EAD6);
}

html[data-theme="light"] .site-content, html.light .site-content,
html[data-theme="light"] .entry-content, html.light .entry-content,
html[data-theme="light"] main, html.light main,
html[data-theme="light"] article, html.light article,
html[data-theme="light"] .page-content, html.light .page-content,
html[data-theme="light"] .ct-container-full, html.light .ct-container-full {
	color: var(--jbh-dm-text, #121212);
}

/* Blocksy hero / page-title section */
html[data-theme="light"] .hero-section, html.light .hero-section,
html[data-theme="light"] .entry-header, html.light .entry-header {
	background-color: var(--jbh-dm-bg, #F9F8F6);
	color: var(--jbh-dm-text, #121212);
}

html[data-theme="light"] .page-title, html.light .page-title {
	color: var(--jbh-dm-heading, #121212) !important;
}

/* Headings — exclude JBH block wrappers (they have their own .jbh-dark/.jbh-light cascade) */
html[data-theme="dark"] h1:not([class*="jbh-"]):not(.has-text-color),
html[data-theme="dark"] h2:not([class*="jbh-"]):not(.has-text-color),
html[data-theme="dark"] h3:not([class*="jbh-"]):not(.has-text-color),
html[data-theme="dark"] h4:not([class*="jbh-"]):not(.has-text-color),
html[data-theme="dark"] h5:not([class*="jbh-"]):not(.has-text-color),
html[data-theme="dark"] h6:not([class*="jbh-"]):not(.has-text-color),
html.dark h1:not([class*="jbh-"]):not(.has-text-color),
html.dark h2:not([class*="jbh-"]):not(.has-text-color),
html.dark h3:not([class*="jbh-"]):not(.has-text-color),
html.dark h4:not([class*="jbh-"]):not(.has-text-color),
html.dark h5:not([class*="jbh-"]):not(.has-text-color),
html.dark h6:not([class*="jbh-"]):not(.has-text-color) {
	color: var(--jbh-dm-heading, #FFFFFF);
}

html[data-theme="light"] h1:not([class*="jbh-"]):not(.has-text-color),
html[data-theme="light"] h2:not([class*="jbh-"]):not(.has-text-color),
html[data-theme="light"] h3:not([class*="jbh-"]):not(.has-text-color),
html[data-theme="light"] h4:not([class*="jbh-"]):not(.has-text-color),
html[data-theme="light"] h5:not([class*="jbh-"]):not(.has-text-color),
html[data-theme="light"] h6:not([class*="jbh-"]):not(.has-text-color),
html.light h1:not([class*="jbh-"]):not(.has-text-color),
html.light h2:not([class*="jbh-"]):not(.has-text-color),
html.light h3:not([class*="jbh-"]):not(.has-text-color),
html.light h4:not([class*="jbh-"]):not(.has-text-color),
html.light h5:not([class*="jbh-"]):not(.has-text-color),
html.light h6:not([class*="jbh-"]):not(.has-text-color) {
	color: var(--jbh-dm-heading, #121212);
}

/* Paragraphs — exclude JBH blocks and user-set text colors */
html[data-theme="dark"] p:not([class*="jbh-"]):not(.has-text-color), html.dark p:not([class*="jbh-"]):not(.has-text-color) { color: var(--jbh-dm-muted, #9CA3AF); }
html[data-theme="light"] p:not([class*="jbh-"]):not(.has-text-color), html.light p:not([class*="jbh-"]):not(.has-text-color) { color: var(--jbh-dm-muted, #4B5563); }

/* ── Override Theme Lock ──────────────────────────────────────
   Blocks with .jbh-override-theme keep their chosen mode regardless
   of the site-wide toggle. Re-assert their vars with higher specificity. */
html[data-theme="light"] .jbh-override-theme.jbh-dark,
html.light .jbh-override-theme.jbh-dark {
	--jbh-bg: #121212;
	--jbh-card: #1A1A1A;
	--jbh-creme: #F0EAD6;
	--jbh-slate: #9CA3AF;
	--jbh-heading-color: #F0EAD6;
	--jbh-text-color: #9CA3AF;
	--jbh-card-heading: #ffffff;
	--jbh-border: rgba(31, 95, 91, 0.20);
}
html[data-theme="dark"] .jbh-override-theme.jbh-light,
html.dark .jbh-override-theme.jbh-light {
	--jbh-bg: #F9F8F6;
	--jbh-card: #FFFFFF;
	--jbh-creme: #121212;
	--jbh-slate: #4B5563;
	--jbh-heading-color: #121212;
	--jbh-text-color: #4B5563;
	--jbh-card-heading: #121212;
	--jbh-border: rgba(0, 0, 0, 0.08);
}

/* Links — standard, hover, active */
html[data-theme="dark"] a:not([class]), html.dark a:not([class]) { color: var(--jbh-dm-link, #2A9D8F); }
html[data-theme="dark"] a:not([class]):hover, html.dark a:not([class]):hover { color: var(--jbh-dm-link-hover, #E76F51); }
html[data-theme="dark"] a:not([class]):active, html.dark a:not([class]):active { color: var(--jbh-dm-link-active, #D64F42); }
html[data-theme="light"] a:not([class]), html.light a:not([class]) { color: var(--jbh-dm-link, #2A9D8F); }
html[data-theme="light"] a:not([class]):hover, html.light a:not([class]):hover { color: var(--jbh-dm-link-hover, #E76F51); }
html[data-theme="light"] a:not([class]):active, html.light a:not([class]):active { color: var(--jbh-dm-link-active, #D64F42); }

/* Buttons — standard, hover, active/click (excludes JBH block buttons) */
html[data-theme="dark"] button:not(.jbh-theme-btn):not([class*="wp-"]):not([class*="jbh-"]),
html.dark button:not(.jbh-theme-btn):not([class*="wp-"]):not([class*="jbh-"]),
html[data-theme="dark"] input[type="submit"], html.dark input[type="submit"],
html[data-theme="dark"] input[type="button"], html.dark input[type="button"],
html[data-theme="dark"] .button, html.dark .button,
html[data-theme="dark"] .wp-element-button, html.dark .wp-element-button,
html[data-theme="dark"] .wc-block-components-button, html.dark .wc-block-components-button {
	background-color: var(--jbh-dm-btn-bg, #2A9D8F);
	color: var(--jbh-dm-btn-text, #FFFFFF);
	transition: background-color var(--jbh-anim-hover-dur, 300ms) ease, color var(--jbh-anim-hover-dur, 300ms) ease, transform var(--jbh-anim-click-dur, 150ms) ease;
}
html[data-theme="dark"] button:not(.jbh-theme-btn):not([class*="wp-"]):not([class*="jbh-"]):hover,
html.dark button:not(.jbh-theme-btn):not([class*="wp-"]):not([class*="jbh-"]):hover,
html[data-theme="dark"] input[type="submit"]:hover, html.dark input[type="submit"]:hover,
html[data-theme="dark"] input[type="button"]:hover, html.dark input[type="button"]:hover,
html[data-theme="dark"] .button:hover, html.dark .button:hover,
html[data-theme="dark"] .wp-element-button:hover, html.dark .wp-element-button:hover,
html[data-theme="dark"] .wc-block-components-button:hover, html.dark .wc-block-components-button:hover {
	background-color: var(--jbh-dm-btn-hover-bg, #E76F51);
	color: var(--jbh-dm-btn-hover-text, #FFFFFF);
}
html[data-theme="dark"] button:not(.jbh-theme-btn):not([class*="wp-"]):not([class*="jbh-"]):active,
html.dark button:not(.jbh-theme-btn):not([class*="wp-"]):not([class*="jbh-"]):active,
html[data-theme="dark"] input[type="submit"]:active, html.dark input[type="submit"]:active,
html[data-theme="dark"] input[type="button"]:active, html.dark input[type="button"]:active,
html[data-theme="dark"] .button:active, html.dark .button:active,
html[data-theme="dark"] .wp-element-button:active, html.dark .wp-element-button:active,
html[data-theme="dark"] .wc-block-components-button:active, html.dark .wc-block-components-button:active {
	background-color: var(--jbh-dm-btn-active-bg, #D64F42);
	color: var(--jbh-dm-btn-active-text, #FFFFFF);
}

/* Light mode buttons */
html[data-theme="light"] button:not(.jbh-theme-btn):not([class*="wp-"]):not([class*="jbh-"]),
html.light button:not(.jbh-theme-btn):not([class*="wp-"]):not([class*="jbh-"]),
html[data-theme="light"] input[type="submit"], html.light input[type="submit"],
html[data-theme="light"] input[type="button"], html.light input[type="button"],
html[data-theme="light"] .button, html.light .button,
html[data-theme="light"] .wp-element-button, html.light .wp-element-button,
html[data-theme="light"] .wc-block-components-button, html.light .wc-block-components-button {
	background-color: var(--jbh-dm-btn-bg, #2A9D8F);
	color: var(--jbh-dm-btn-text, #FFFFFF);
	transition: background-color var(--jbh-anim-hover-dur, 300ms) ease, color var(--jbh-anim-hover-dur, 300ms) ease, transform var(--jbh-anim-click-dur, 150ms) ease;
}
html[data-theme="light"] button:not(.jbh-theme-btn):not([class*="wp-"]):not([class*="jbh-"]):hover,
html.light button:not(.jbh-theme-btn):not([class*="wp-"]):not([class*="jbh-"]):hover,
html[data-theme="light"] input[type="submit"]:hover, html.light input[type="submit"]:hover,
html[data-theme="light"] input[type="button"]:hover, html.light input[type="button"]:hover,
html[data-theme="light"] .button:hover, html.light .button:hover,
html[data-theme="light"] .wp-element-button:hover, html.light .wp-element-button:hover,
html[data-theme="light"] .wc-block-components-button:hover, html.light .wc-block-components-button:hover {
	background-color: var(--jbh-dm-btn-hover-bg, #E76F51);
	color: var(--jbh-dm-btn-hover-text, #FFFFFF);
}
html[data-theme="light"] button:not(.jbh-theme-btn):not([class*="wp-"]):not([class*="jbh-"]):active,
html.light button:not(.jbh-theme-btn):not([class*="wp-"]):not([class*="jbh-"]):active,
html[data-theme="light"] input[type="submit"]:active, html.light input[type="submit"]:active,
html[data-theme="light"] input[type="button"]:active, html.light input[type="button"]:active,
html[data-theme="light"] .button:active, html.light .button:active,
html[data-theme="light"] .wp-element-button:active, html.light .wp-element-button:active,
html[data-theme="light"] .wc-block-components-button:active, html.light .wc-block-components-button:active {
	background-color: var(--jbh-dm-btn-active-bg, #D64F42);
	color: var(--jbh-dm-btn-active-text, #FFFFFF);
}

/* Card hover states — WooCommerce product cards only.
   Group blocks are containers, not cards — they should NOT get hover bg. */
html[data-theme="dark"] .products .product:hover, html.dark .products .product:hover {
	background-color: var(--jbh-dm-card-hover-bg, #222222);
	border-color: var(--jbh-dm-card-hover-border, rgba(42,157,143,0.30));
}
html[data-theme="light"] .products .product:hover, html.light .products .product:hover {
	background-color: var(--jbh-dm-card-hover-bg, #F0F0EC);
	border-color: var(--jbh-dm-card-hover-border, rgba(42,157,143,0.20));
}


/* ================================================================
   6.  WOOCOMMERCE PAGE THEMING
   ================================================================ */

html[data-theme="dark"] .woocommerce, html.dark .woocommerce,
html[data-theme="dark"] .woocommerce-page, html.dark .woocommerce-page {
	background-color: var(--jbh-dm-bg, #121212);
	color: var(--jbh-dm-text, #F0EAD6);
}

html[data-theme="light"] .woocommerce, html.light .woocommerce,
html[data-theme="light"] .woocommerce-page, html.light .woocommerce-page {
	color: var(--jbh-dm-text, #121212);
}

/* WC product cards + content */
html[data-theme="dark"] .products .product, html.dark .products .product,
html[data-theme="dark"] .woocommerce-tabs, html.dark .woocommerce-tabs,
html[data-theme="dark"] .related.products, html.dark .related.products,
html[data-theme="dark"] .cart-collaterals, html.dark .cart-collaterals,
html[data-theme="dark"] .woocommerce-cart-form, html.dark .woocommerce-cart-form,
html[data-theme="dark"] .woocommerce-checkout, html.dark .woocommerce-checkout,
html[data-theme="dark"] .woocommerce-MyAccount-content, html.dark .woocommerce-MyAccount-content {
	color: var(--jbh-dm-text, #F0EAD6);
}
html[data-theme="light"] .products .product, html.light .products .product,
html[data-theme="light"] .woocommerce-tabs, html.light .woocommerce-tabs,
html[data-theme="light"] .related.products, html.light .related.products,
html[data-theme="light"] .cart-collaterals, html.light .cart-collaterals,
html[data-theme="light"] .woocommerce-cart-form, html.light .woocommerce-cart-form,
html[data-theme="light"] .woocommerce-checkout, html.light .woocommerce-checkout,
html[data-theme="light"] .woocommerce-MyAccount-content, html.light .woocommerce-MyAccount-content {
	color: var(--jbh-dm-text, #121212);
}

html[data-theme="dark"] .woocommerce table, html.dark .woocommerce table,
html[data-theme="dark"] .woocommerce th, html.dark .woocommerce th,
html[data-theme="dark"] .woocommerce td, html.dark .woocommerce td {
	border-color: var(--jbh-dm-border, rgba(31,95,91,0.20));
	color: var(--jbh-dm-text, #F0EAD6);
}
html[data-theme="light"] .woocommerce table, html.light .woocommerce table,
html[data-theme="light"] .woocommerce th, html.light .woocommerce th,
html[data-theme="light"] .woocommerce td, html.light .woocommerce td {
	border-color: var(--jbh-dm-border, rgba(0,0,0,0.08));
	color: var(--jbh-dm-text, #121212);
}

html[data-theme="dark"] .woocommerce table th, html.dark .woocommerce table th {
	background: var(--jbh-dm-card, #1A1A1A);
	color: var(--jbh-dm-heading, #FFFFFF);
}
html[data-theme="light"] .woocommerce table th, html.light .woocommerce table th {
	background: var(--jbh-dm-card, #F0F0EE);
	color: var(--jbh-dm-heading, #121212);
}

html[data-theme="dark"] .woocommerce .product_title, html.dark .woocommerce .product_title,
html[data-theme="dark"] .woocommerce .woocommerce-loop-product__title, html.dark .woocommerce .woocommerce-loop-product__title {
	color: var(--jbh-dm-heading, #FFFFFF);
}
html[data-theme="light"] .woocommerce .product_title, html.light .woocommerce .product_title,
html[data-theme="light"] .woocommerce .woocommerce-loop-product__title, html.light .woocommerce .woocommerce-loop-product__title {
	color: var(--jbh-dm-heading, #121212);
}

html[data-theme="dark"] .woocommerce .price, html.dark .woocommerce .price,
html[data-theme="dark"] .woocommerce .amount, html.dark .woocommerce .amount {
	color: var(--jbh-dm-accent, #2A9D8F);
}

html[data-theme="dark"] .woocommerce .button, html.dark .woocommerce .button,
html[data-theme="dark"] .woocommerce button.button, html.dark .woocommerce button.button {
	background: var(--jbh-dm-accent, #2A9D8F);
	color: #fff;
	border-color: var(--jbh-dm-accent, #2A9D8F);
}
html[data-theme="light"] .woocommerce .button, html.light .woocommerce .button,
html[data-theme="light"] .woocommerce button.button, html.light .woocommerce button.button {
	background: var(--jbh-dm-accent, #2A9D8F);
	color: #fff;
	border-color: var(--jbh-dm-accent, #2A9D8F);
}

html[data-theme="dark"] .woocommerce .button:hover, html.dark .woocommerce .button:hover,
html[data-theme="dark"] .woocommerce button.button:hover, html.dark .woocommerce button.button:hover {
	background: var(--jbh-dm-accent-hover, #E76F51);
	border-color: var(--jbh-dm-accent-hover, #E76F51);
}
html[data-theme="light"] .woocommerce .button:hover, html.light .woocommerce .button:hover,
html[data-theme="light"] .woocommerce button.button:hover, html.light .woocommerce button.button:hover {
	background: var(--jbh-dm-accent-hover, #E76F51);
	border-color: var(--jbh-dm-accent-hover, #E76F51);
}

/* WC onsale badge */
html[data-theme="dark"] .woocommerce .onsale, html.dark .woocommerce .onsale {
	background: var(--jbh-dm-coral, #D64F42);
	color: #fff;
}

/* WC star rating */
html[data-theme="dark"] .woocommerce .star-rating span::before, html.dark .woocommerce .star-rating span::before { color: var(--jbh-dm-accent, #2A9D8F); }

/* WC pagination */
html[data-theme="dark"] .woocommerce-pagination a, html.dark .woocommerce-pagination a,
html[data-theme="dark"] .woocommerce-pagination span, html.dark .woocommerce-pagination span {
	background: var(--jbh-dm-card, #1A1A1A);
	color: var(--jbh-dm-text, #F0EAD6);
	border-color: var(--jbh-dm-border, rgba(31,95,91,0.20));
}
html[data-theme="light"] .woocommerce-pagination a, html.light .woocommerce-pagination a,
html[data-theme="light"] .woocommerce-pagination span, html.light .woocommerce-pagination span {
	background: var(--jbh-dm-card, #FFFFFF);
	color: var(--jbh-dm-text, #121212);
	border-color: var(--jbh-dm-border, rgba(0,0,0,0.08));
}

html[data-theme="dark"] .woocommerce-pagination span.current, html.dark .woocommerce-pagination span.current {
	background: var(--jbh-dm-accent, #2A9D8F);
	color: #fff;
	border-color: var(--jbh-dm-accent, #2A9D8F);
}
html[data-theme="light"] .woocommerce-pagination span.current, html.light .woocommerce-pagination span.current {
	background: var(--jbh-dm-accent, #2A9D8F);
	color: #fff;
	border-color: var(--jbh-dm-accent, #2A9D8F);
}

/* WC mini-cart */
html[data-theme="dark"] .widget_shopping_cart, html.dark .widget_shopping_cart,
html[data-theme="dark"] .woocommerce-mini-cart, html.dark .woocommerce-mini-cart {
	background: var(--jbh-dm-card, #1A1A1A);
	color: var(--jbh-dm-text, #F0EAD6);
	border-color: var(--jbh-dm-border, rgba(31,95,91,0.20));
}
html[data-theme="light"] .widget_shopping_cart, html.light .widget_shopping_cart,
html[data-theme="light"] .woocommerce-mini-cart, html.light .woocommerce-mini-cart {
	background: var(--jbh-dm-card, #FFFFFF);
	color: var(--jbh-dm-text, #121212);
	border-color: var(--jbh-dm-border, rgba(0,0,0,0.08));
}

/* WC Select2 dropdowns */
html[data-theme="dark"] .select2-container--default .select2-selection--single,
html.dark .select2-container--default .select2-selection--single {
	background: var(--jbh-dm-card, #1A1A1A);
	color: var(--jbh-dm-text, #F0EAD6);
	border-color: var(--jbh-dm-border, rgba(31,95,91,0.20));
}
html[data-theme="light"] .select2-container--default .select2-selection--single,
html.light .select2-container--default .select2-selection--single {
	background: var(--jbh-dm-card, #FFFFFF);
	color: var(--jbh-dm-text, #121212);
	border-color: var(--jbh-dm-border, rgba(0,0,0,0.08));
}

html[data-theme="dark"] .select2-dropdown, html.dark .select2-dropdown {
	background: var(--jbh-dm-card, #1A1A1A);
	color: var(--jbh-dm-text, #F0EAD6);
	border-color: var(--jbh-dm-border, rgba(31,95,91,0.20));
}
html[data-theme="light"] .select2-dropdown, html.light .select2-dropdown {
	background: var(--jbh-dm-card, #FFFFFF);
	color: var(--jbh-dm-text, #121212);
	border-color: var(--jbh-dm-border, rgba(0,0,0,0.08));
}

html[data-theme="dark"] .select2-results__option--highlighted,
html.dark .select2-results__option--highlighted {
	background: var(--jbh-dm-accent, #2A9D8F) !important;
	color: #fff !important;
}


/* ================================================================
   7.  GUTENBERG CORE BLOCK THEMING
   ================================================================ */

html[data-theme="dark"] .wp-block-group:not(.has-background):not(.has-text-color), html.dark .wp-block-group:not(.has-background):not(.has-text-color),
html[data-theme="dark"] .wp-block-columns:not(.has-background):not(.has-text-color), html.dark .wp-block-columns:not(.has-background):not(.has-text-color),
html[data-theme="dark"] .wp-block-column:not(.has-background):not(.has-text-color), html.dark .wp-block-column:not(.has-background):not(.has-text-color) {
	color: var(--jbh-dm-text, #F0EAD6);
}
html[data-theme="light"] .wp-block-group:not(.has-background):not(.has-text-color), html.light .wp-block-group:not(.has-background):not(.has-text-color),
html[data-theme="light"] .wp-block-columns:not(.has-background):not(.has-text-color), html.light .wp-block-columns:not(.has-background):not(.has-text-color),
html[data-theme="light"] .wp-block-column:not(.has-background):not(.has-text-color), html.light .wp-block-column:not(.has-background):not(.has-text-color) {
	color: var(--jbh-dm-text, #121212);
}

/* Blocks WITH has-background — swap inline dark bg in light mode.
   Uses !important to override the inline style="background-color:#121212".
   JS marks adapted blocks with [data-jbh-adapted-bg] to be precise;
   CSS provides a fallback for any inline-dark bg the JS didn't yet reach. */
html[data-theme="light"] .entry-content .wp-block-group.has-background,
html[data-theme="light"] .entry-content .wp-block-columns.has-background,
html[data-theme="light"] .entry-content .wp-block-column.has-background,
html.light .entry-content .wp-block-group.has-background,
html.light .entry-content .wp-block-columns.has-background,
html.light .entry-content .wp-block-column.has-background {
	background-color: var(--jbh-dm-bg, #F9F8F6) !important;
	color: var(--jbh-dm-text, #121212);
}
html[data-theme="dark"] .entry-content .wp-block-group.has-background,
html[data-theme="dark"] .entry-content .wp-block-columns.has-background,
html[data-theme="dark"] .entry-content .wp-block-column.has-background,
html.dark .entry-content .wp-block-group.has-background,
html.dark .entry-content .wp-block-columns.has-background,
html.dark .entry-content .wp-block-column.has-background {
	color: var(--jbh-dm-text, #F0EAD6);
}

/* Headings inside Group blocks with dark backgrounds — prevent white-on-light
   flash. Uses !important to override inline style="color:#ffffff".
   Targets .has-text-color (Gutenberg adds this when user sets custom text color)
   so we only override user-set colors, not default-inherited headings. */
html[data-theme="light"] .entry-content .wp-block-group.has-background h1.has-text-color,
html[data-theme="light"] .entry-content .wp-block-group.has-background h2.has-text-color,
html[data-theme="light"] .entry-content .wp-block-group.has-background h3.has-text-color,
html[data-theme="light"] .entry-content .wp-block-group.has-background h4.has-text-color,
html[data-theme="light"] .entry-content .wp-block-columns.has-background h1.has-text-color,
html[data-theme="light"] .entry-content .wp-block-columns.has-background h2.has-text-color,
html.light .entry-content .wp-block-group.has-background h1.has-text-color,
html.light .entry-content .wp-block-group.has-background h2.has-text-color,
html.light .entry-content .wp-block-group.has-background h3.has-text-color,
html.light .entry-content .wp-block-group.has-background h4.has-text-color,
html.light .entry-content .wp-block-columns.has-background h1.has-text-color,
html.light .entry-content .wp-block-columns.has-background h2.has-text-color {
	color: var(--jbh-dm-heading, #121212) !important;
}

/* Muted paragraph text inside Group blocks with dark backgrounds */
html[data-theme="light"] .entry-content .wp-block-group.has-background > .has-text-color,
html[data-theme="light"] .entry-content .wp-block-columns.has-background > .has-text-color,
html.light .entry-content .wp-block-group.has-background > .has-text-color,
html.light .entry-content .wp-block-columns.has-background > .has-text-color {
	color: var(--jbh-dm-text, #121212) !important;
}

html[data-theme="dark"] .wp-block-cover:not(.has-background-dim),
html.dark .wp-block-cover:not(.has-background-dim) {
	color: var(--jbh-dm-text, #F0EAD6);
}
html[data-theme="light"] .wp-block-cover:not(.has-background-dim),
html.light .wp-block-cover:not(.has-background-dim) {
	color: var(--jbh-dm-text, #121212);
}

html[data-theme="dark"] .wp-block-quote, html.dark .wp-block-quote,
html[data-theme="dark"] .wp-block-pullquote, html.dark .wp-block-pullquote {
	border-color: var(--jbh-dm-accent, #2A9D8F);
	color: var(--jbh-dm-text, #F0EAD6);
}
html[data-theme="light"] .wp-block-quote, html.light .wp-block-quote,
html[data-theme="light"] .wp-block-pullquote, html.light .wp-block-pullquote {
	border-color: var(--jbh-dm-accent, #2A9D8F);
	color: var(--jbh-dm-text, #121212);
}

html[data-theme="dark"] .wp-block-separator:not(.has-background),
html.dark .wp-block-separator:not(.has-background) {
	border-color: var(--jbh-dm-border, rgba(31,95,91,0.20));
}
html[data-theme="light"] .wp-block-separator:not(.has-background),
html.light .wp-block-separator:not(.has-background) {
	border-color: var(--jbh-dm-border, #e0e0e0);
}

html[data-theme="dark"] .wp-block-table:not(.has-background) table,
html.dark .wp-block-table:not(.has-background) table {
	border-color: var(--jbh-dm-border, rgba(31,95,91,0.20));
	color: var(--jbh-dm-text, #F0EAD6);
}
html[data-theme="light"] .wp-block-table:not(.has-background) table,
html.light .wp-block-table:not(.has-background) table {
	border-color: var(--jbh-dm-border, #e0e0e0);
	color: var(--jbh-dm-text, #121212);
}

html[data-theme="dark"] .wp-block-table:not(.has-background) th,
html.dark .wp-block-table:not(.has-background) th {
	background: var(--jbh-dm-card, #1A1A1A);
}
html[data-theme="light"] .wp-block-table:not(.has-background) th,
html.light .wp-block-table:not(.has-background) th {
	background: var(--jbh-dm-card, #F0F0EE);
}

html[data-theme="dark"] .wp-block-code, html.dark .wp-block-code,
html[data-theme="dark"] .wp-block-preformatted, html.dark .wp-block-preformatted {
	background: var(--jbh-dm-card, #1A1A1A);
	color: var(--jbh-dm-text, #F0EAD6);
	border-color: var(--jbh-dm-border, rgba(31,95,91,0.20));
}
html[data-theme="light"] .wp-block-code, html.light .wp-block-code,
html[data-theme="light"] .wp-block-preformatted, html.light .wp-block-preformatted {
	background: var(--jbh-dm-card, #F9F8F6);
	color: var(--jbh-dm-text, #121212);
	border-color: var(--jbh-dm-border, #e0e0e0);
}

html[data-theme="dark"] .wp-block-search .wp-block-search__input,
html.dark .wp-block-search .wp-block-search__input {
	background: var(--jbh-dm-card, #1A1A1A);
	color: var(--jbh-dm-text, #F0EAD6);
	border-color: var(--jbh-dm-border, rgba(31,95,91,0.20));
}
html[data-theme="light"] .wp-block-search .wp-block-search__input,
html.light .wp-block-search .wp-block-search__input {
	background: var(--jbh-dm-card, #FFFFFF);
	color: var(--jbh-dm-text, #121212);
	border-color: var(--jbh-dm-border, #e0e0e0);
}


/* ================================================================
   7b. BLOCKSY CONTENT CARDS — Blog, Archives, Categories
   ================================================================
   Blocksy theme elements that need full-site dark/light support.
   ================================================================ */

/* Blog cards (archive/index) */
html[data-theme="dark"] .entries .entry-card, html.dark .entries .entry-card,
html[data-theme="dark"] .entries[data-cards="boxed"] .entry-card, html.dark .entries[data-cards="boxed"] .entry-card {
	background: var(--jbh-dm-card, #1A1A1A);
	color: var(--jbh-dm-text, #F0EAD6);
	border-color: var(--jbh-dm-border, rgba(31,95,91,0.20));
}
html[data-theme="light"] .entries .entry-card, html.light .entries .entry-card,
html[data-theme="light"] .entries[data-cards="boxed"] .entry-card, html.light .entries[data-cards="boxed"] .entry-card {
	background: var(--jbh-dm-card, #FFFFFF);
	color: var(--jbh-dm-text, #121212);
	border-color: var(--jbh-dm-border, rgba(0,0,0,0.08));
}

/* Entry titles */
html[data-theme="dark"] .entry-title a, html.dark .entry-title a {
	color: var(--jbh-dm-heading, #FFFFFF);
}
html[data-theme="light"] .entry-title a, html.light .entry-title a {
	color: var(--jbh-dm-heading, #121212);
}

/* Entry meta */
html[data-theme="dark"] .entry-meta, html.dark .entry-meta,
html[data-theme="dark"] .entry-meta a, html.dark .entry-meta a {
	color: var(--jbh-dm-muted, #9CA3AF);
}
html[data-theme="light"] .entry-meta, html.light .entry-meta,
html[data-theme="light"] .entry-meta a, html.light .entry-meta a {
	color: var(--jbh-dm-muted, #4B5563);
}

/* Blocksy category badges */
html[data-theme="dark"] .ct-term-1, html.dark .ct-term-1,
html[data-theme="dark"] .ct-term-2, html.dark .ct-term-2,
html[data-theme="dark"] .ct-term-3, html.dark .ct-term-3 {
	color: var(--jbh-dm-accent, #2A9D8F);
}

/* Entry excerpt text */
html[data-theme="dark"] .entry-excerpt, html.dark .entry-excerpt { color: var(--jbh-dm-muted, #9CA3AF); }
html[data-theme="light"] .entry-excerpt, html.light .entry-excerpt { color: var(--jbh-dm-muted, #4B5563); }

/* Blocksy sidebar widgets */
html[data-theme="dark"] .ct-widget, html.dark .ct-widget { color: var(--jbh-dm-text, #F0EAD6); }
html[data-theme="light"] .ct-widget, html.light .ct-widget { color: var(--jbh-dm-text, #121212); }

/* Comments */
html[data-theme="dark"] .comment-body, html.dark .comment-body,
html[data-theme="dark"] .comment-content, html.dark .comment-content {
	background: var(--jbh-dm-card, #1A1A1A);
	color: var(--jbh-dm-text, #F0EAD6);
}
html[data-theme="light"] .comment-body, html.light .comment-body,
html[data-theme="light"] .comment-content, html.light .comment-content {
	background: var(--jbh-dm-card, #FFFFFF);
	color: var(--jbh-dm-text, #121212);
}

/* Pagination */
html[data-theme="dark"] .ct-pagination a, html.dark .ct-pagination a {
	background: var(--jbh-dm-card, #1A1A1A);
	color: var(--jbh-dm-text, #F0EAD6);
	border-color: var(--jbh-dm-border, rgba(31,95,91,0.20));
}
html[data-theme="dark"] .ct-pagination span[aria-current], html.dark .ct-pagination span[aria-current] {
	background: var(--jbh-dm-accent, #2A9D8F);
	color: #fff;
}
html[data-theme="light"] .ct-pagination a, html.light .ct-pagination a {
	background: var(--jbh-dm-card, #FFFFFF);
	color: var(--jbh-dm-text, #121212);
	border-color: var(--jbh-dm-border, rgba(0,0,0,0.08));
}
html[data-theme="light"] .ct-pagination span[aria-current], html.light .ct-pagination span[aria-current] {
	background: var(--jbh-dm-accent, #2A9D8F);
	color: #fff;
}


/* ================================================================
   8.  FORMS + INPUTS THEMING
   ================================================================ */

html[data-theme="dark"] input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
html.dark input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
html[data-theme="dark"] textarea, html.dark textarea,
html[data-theme="dark"] select, html.dark select {
	background: var(--jbh-dm-input-bg, var(--jbh-dm-card, #1A1A1A));
	color: var(--jbh-dm-text, #F0EAD6);
	border-color: var(--jbh-dm-border, rgba(31,95,91,0.20));
	transition: border-color var(--jbh-anim-hover-dur, 300ms) ease, background-color var(--jbh-anim-hover-dur, 300ms) ease;
}

html[data-theme="light"] input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
html.light input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
html[data-theme="light"] textarea, html.light textarea,
html[data-theme="light"] select, html.light select {
	background: var(--jbh-dm-input-bg, var(--jbh-dm-card, #FFFFFF));
	color: var(--jbh-dm-text, #121212);
	border-color: var(--jbh-dm-border, rgba(0,0,0,0.08));
	transition: border-color var(--jbh-anim-hover-dur, 300ms) ease, background-color var(--jbh-anim-hover-dur, 300ms) ease;
}

html[data-theme="dark"] input::placeholder, html.dark input::placeholder,
html[data-theme="dark"] textarea::placeholder, html.dark textarea::placeholder {
	color: var(--jbh-dm-muted, #9CA3AF);
}

html[data-theme="dark"] input:focus, html.dark input:focus,
html[data-theme="dark"] textarea:focus, html.dark textarea:focus,
html[data-theme="dark"] select:focus, html.dark select:focus,
html[data-theme="light"] input:focus, html.light input:focus,
html[data-theme="light"] textarea:focus, html.light textarea:focus,
html[data-theme="light"] select:focus, html.light select:focus {
	border-color: var(--jbh-dm-input-focus-border, var(--jbh-dm-accent, #2A9D8F));
	outline-color: var(--jbh-dm-input-focus-border, var(--jbh-dm-accent, #2A9D8F));
}

html[data-theme="light"] input::placeholder, html.light input::placeholder,
html[data-theme="light"] textarea::placeholder, html.light textarea::placeholder {
	color: var(--jbh-dm-muted, #9CA3AF);
}

html[data-theme="dark"] label, html.dark label { color: var(--jbh-dm-text, #F0EAD6); }
html[data-theme="light"] label, html.light label { color: var(--jbh-dm-text, #121212); }
html[data-theme="dark"] fieldset, html.dark fieldset { border-color: var(--jbh-dm-border, rgba(31,95,91,0.20)); }
html[data-theme="light"] fieldset, html.light fieldset { border-color: var(--jbh-dm-border, rgba(0,0,0,0.08)); }
html[data-theme="dark"] legend, html.dark legend { color: var(--jbh-dm-heading, #FFFFFF); }
html[data-theme="light"] legend, html.light legend { color: var(--jbh-dm-heading, #121212); }


/* ================================================================
   9.  BLOCKSY HEADER — ALWAYS-DARK GLASS (exempt from toggle)
   ================================================================
   The header is NEVER themed. It stays always-dark with glass
   effect, matching the prototype nav-glass design.
   ================================================================ */

header[data-id],
.ct-header,
[data-row="top"],
[data-row="middle"],
[data-row="bottom"],
html[data-jbh-dark-chrome] .site-header,
html[data-jbh-dark-chrome] .header-container {
	background-color: rgba(18, 18, 18, 0.88) !important;
	backdrop-filter: blur(14px) !important;
	-webkit-backdrop-filter: blur(14px) !important;
	color: #F0EAD6 !important;
	border-bottom: 1px solid rgba(42, 157, 143, 0.15) !important;
}

header[data-id] a,
.ct-header a,
html[data-jbh-dark-chrome] .site-header a { color: #9CA3AF !important; }

header[data-id] a:hover,
.ct-header a:hover,
html[data-jbh-dark-chrome] .site-header a:hover { color: #2A9D8F !important; }

header[data-id] [aria-current="page"],
.ct-header [aria-current="page"] { color: #F0EAD6 !important; }

/* Blocksy transparent header override */
header[data-id="type-1"][data-transparent-row],
header[data-id="type-2"][data-transparent-row] {
	background-color: transparent !important;
	border-bottom-color: transparent !important;
}

header[data-id][data-sticky="yes"] {
	background-color: rgba(18, 18, 18, 0.95) !important;
}


/* ================================================================
   10. BLOCKSY FOOTER — ALWAYS-DARK (exempt from toggle)
   ================================================================
   Footer stays dark regardless of theme state, per prototype.
   ================================================================ */

footer[data-id],
.ct-footer,
html[data-jbh-dark-chrome] .site-footer,
html[data-jbh-dark-chrome] .footer-container {
	background-color: #1A1A1A !important;
	color: #9CA3AF !important;
	border-top: 1px solid rgba(42, 157, 143, 0.15) !important;
}

footer[data-id] h1, footer[data-id] h2, footer[data-id] h3,
footer[data-id] h4, footer[data-id] h5, footer[data-id] h6,
.ct-footer h1, .ct-footer h2, .ct-footer h3,
.ct-footer h4, .ct-footer h5, .ct-footer h6,
html[data-jbh-dark-chrome] .site-footer h1, html[data-jbh-dark-chrome] .site-footer h2,
html[data-jbh-dark-chrome] .site-footer h3, html[data-jbh-dark-chrome] .site-footer h4,
html[data-jbh-dark-chrome] .site-footer h5, html[data-jbh-dark-chrome] .site-footer h6 {
	color: #F0EAD6 !important;
}

footer[data-id] a,
.ct-footer a,
html[data-jbh-dark-chrome] .site-footer a { color: #9CA3AF !important; }

footer[data-id] a:hover,
.ct-footer a:hover,
html[data-jbh-dark-chrome] .site-footer a:hover { color: #2A9D8F !important; }

footer[data-id] p,
.ct-footer p,
html[data-jbh-dark-chrome] .site-footer p { color: #9CA3AF !important; }


/* ================================================================
   11. JBH SLIDE-OVER MODAL — LIGHT MODE OVERRIDES
   ================================================================ */

html[data-theme="light"] .jbh-panel,
html.light .jbh-panel {
	background: var(--jbh-dm-card, #FFFFFF);
	border-left-color: var(--jbh-dm-border);
	box-shadow: -8px 0 48px rgba(0, 0, 0, 0.12);
}

html[data-theme="light"] .jbh-panel-header,
html.light .jbh-panel-header {
	background: var(--jbh-dm-card, #FFFFFF);
	border-bottom-color: var(--jbh-dm-border);
}

html[data-theme="light"] .jbh-panel-title,
html[data-theme="light"] .jbh-success-heading,
html.light .jbh-panel-title,
html.light .jbh-success-heading { color: var(--jbh-dm-heading, #121212); }

html[data-theme="light"] .jbh-tier-price,
html[data-theme="light"] .jbh-total-amount,
html.light .jbh-tier-price,
html.light .jbh-total-amount { color: var(--jbh-dm-heading, #121212); }

html[data-theme="light"] .jbh-tier-btn,
html.light .jbh-tier-btn {
	background: var(--jbh-dm-bg, #F9F8F6);
	border-color: var(--jbh-dm-border);
}
html[data-theme="light"] .jbh-tier-btn[aria-checked="true"],
html.light .jbh-tier-btn[aria-checked="true"] {
	background: rgba(42, 157, 143, 0.08);
	border-color: var(--jbh-dm-accent, #2A9D8F);
}

html[data-theme="light"] .jbh-includes-box,
html[data-theme="light"] .jbh-order-summary,
html.light .jbh-includes-box,
html.light .jbh-order-summary {
	background: var(--jbh-dm-bg, #F9F8F6);
	border-color: var(--jbh-dm-border);
}

html[data-theme="light"] .jbh-includes-list li,
html.light .jbh-includes-list li { color: var(--jbh-dm-text, #121212); }

html[data-theme="light"] .jbh-upgrade-item,
html.light .jbh-upgrade-item {
	background: var(--jbh-dm-bg, #F9F8F6);
	border-color: var(--jbh-dm-border);
}

html[data-theme="light"] .jbh-upgrade-name,
html[data-theme="light"] .jbh-label,
html.light .jbh-upgrade-name,
html.light .jbh-label { color: var(--jbh-dm-text, #121212); }

html[data-theme="light"] .jbh-textarea,
html[data-theme="light"] .jbh-input,
html.light .jbh-textarea,
html.light .jbh-input {
	background: var(--jbh-dm-bg, #F9F8F6);
	border-color: var(--jbh-dm-border);
	color: var(--jbh-dm-text, #121212);
}

html[data-theme="light"] .jbh-tone-btn,
html.light .jbh-tone-btn {
	background: var(--jbh-dm-bg, #F9F8F6);
	border-color: var(--jbh-dm-border);
	color: var(--jbh-dm-muted, #4B5563);
}

html[data-theme="light"] .jbh-dropzone,
html.light .jbh-dropzone {
	background: var(--jbh-dm-bg, #F9F8F6);
	border-color: var(--jbh-dm-border);
}

html[data-theme="light"] .jbh-submit-btn[disabled],
html.light .jbh-submit-btn[disabled] {
	background: #F0F0EE;
	color: #9CA3AF;
	border-color: var(--jbh-dm-border);
}

html[data-theme="light"] .jbh-overlay-backdrop, html.light .jbh-overlay-backdrop { background: rgba(0, 0, 0, 0.45); }
html[data-theme="light"] .jbh-success, html.light .jbh-success { color: var(--jbh-dm-text, #121212); }

html[data-theme="light"] .jbh-panel::-webkit-scrollbar-track, html.light .jbh-panel::-webkit-scrollbar-track { background: var(--jbh-dm-bg, #F9F8F6); }
html[data-theme="light"] .jbh-panel::-webkit-scrollbar-thumb, html.light .jbh-panel::-webkit-scrollbar-thumb { background: var(--jbh-dm-accent, #2A9D8F); }


/* ================================================================
   12. IMAGE BRIGHTNESS CONTROL
   ================================================================ */

html[data-theme="dark"] img, html.dark img,
html[data-theme="dark"] video, html.dark video {
	filter: brightness(var(--jbh-dm-img-brightness, 100%));
	transition: filter 0.35s ease;
}

/* Never dim SVGs, theme toggle, or header/footer images */
html[data-theme="dark"] .jbh-theme-btn svg, html.dark .jbh-theme-btn svg,
html[data-theme="dark"] header[data-id] img, html.dark header[data-id] img,
html[data-theme="dark"] .ct-header img, html.dark .ct-header img,
html[data-theme="dark"] footer[data-id] img, html.dark footer[data-id] img,
html[data-theme="dark"] .ct-footer img, html.dark .ct-footer img { filter: none; }


/* ================================================================
   13. CUSTOM SCROLLBAR
   ================================================================ */

html[data-theme="dark"] ::-webkit-scrollbar, html.dark ::-webkit-scrollbar { width: 8px; }
html[data-theme="dark"] ::-webkit-scrollbar-track, html.dark ::-webkit-scrollbar-track { background: var(--jbh-dm-scrollbar-track, var(--jbh-dm-bg, #121212)); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb, html.dark ::-webkit-scrollbar-thumb { background: var(--jbh-dm-scrollbar-thumb, #1F5F5B); border-radius: 4px; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover, html.dark ::-webkit-scrollbar-thumb:hover { background: var(--jbh-dm-scrollbar-thumb-hover, #2A9D8F); }

html[data-theme="light"] ::-webkit-scrollbar, html.light ::-webkit-scrollbar { width: 8px; }
html[data-theme="light"] ::-webkit-scrollbar-track, html.light ::-webkit-scrollbar-track { background: var(--jbh-dm-scrollbar-track, #F0F0EC); }
html[data-theme="light"] ::-webkit-scrollbar-thumb, html.light ::-webkit-scrollbar-thumb { background: var(--jbh-dm-scrollbar-thumb, #B8C5C3); border-radius: 4px; }
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover, html.light ::-webkit-scrollbar-thumb:hover { background: var(--jbh-dm-scrollbar-thumb-hover, #2A9D8F); }

/* Firefox */
html[data-theme="dark"], html.dark  { scrollbar-color: var(--jbh-dm-scrollbar-thumb, #1F5F5B) var(--jbh-dm-scrollbar-track, #121212); scrollbar-width: thin; }
html[data-theme="light"], html.light { scrollbar-color: var(--jbh-dm-scrollbar-thumb, #B8C5C3) var(--jbh-dm-scrollbar-track, #F0F0EC); scrollbar-width: thin; }


/* ================================================================
   14. TEXT SELECTION
   ================================================================ */

html[data-theme="dark"] ::selection, html.dark ::selection { background: var(--jbh-dm-selection-bg, var(--jbh-dm-accent, #2A9D8F)); color: var(--jbh-dm-selection-text, var(--jbh-dm-bg, #121212)); }
html[data-theme="light"] ::selection, html.light ::selection { background: var(--jbh-dm-selection-bg, var(--jbh-dm-accent, #2A9D8F)); color: var(--jbh-dm-selection-text, #FFFFFF); }


/* ================================================================
   15. PRINT STYLES
   ================================================================ */

@media print {
	html { color-scheme: light !important; }
	body { background: #fff !important; color: #000 !important; }
	.jbh-theme-toggle-wrap,
	.jbh-theme-toggle-auto { display: none !important; }
}


/* ================================================================
   16. REDUCED MOTION
   ================================================================ */

@media (prefers-reduced-motion: reduce) {
	.jbh-theme-btn svg { transition: none !important; }
	html.jbh-theme-transitioning,
	html.jbh-theme-transitioning *,
	html.jbh-theme-transitioning *::before,
	html.jbh-theme-transitioning *::after { transition: none !important; }
	html[data-theme="dark"] img { transition: none !important; }
}