/*
 * Color mode + touch targets (inc/color-mode.php).
 *
 * Loaded only when a site turns on Color mode or the 44px touch target
 * option. Every color rule is scoped to html[data-color-mode], which exists
 * only while Color mode is on, and reads the --dash-mode-* palette printed in
 * <head> (id revdash-color-mode-palette). The touch target rules are scoped
 * to body.touch-target-44.
 *
 * Content built in Revolutionary Blocks keeps its own colors: those rules use
 * zero-specificity :where() selectors, so any color or background set on a
 * section or widget in the builder wins over the mode default.
 */

/* ── Theme tokens follow the mode ─────────────────────────────────────── */
html[data-color-mode] {
	--dash-text:       var(--dash-mode-text);
	--dash-gray:       var(--dash-mode-muted);
	--dash-muted:      var(--dash-mode-muted);
	--dash-gray-light: var(--dash-mode-surface-alt);
	--dash-light:      var(--dash-mode-surface-alt);
	--dash-border:     var(--dash-mode-border);

	/* Suite-wide button contract: every theme, Revolutionary Blocks and
	   plugin button that reads the --rev-btn-* tokens takes the accent. */
	--rev-btn-bg:          var(--dash-mode-accent);
	--rev-btn-bg-hover:    var(--dash-mode-accent-hover);
	--rev-btn-color:       var(--dash-mode-accent-text);
	--rev-btn-color-hover: var(--dash-mode-accent-text);
	--rev-btn-shadow:      none;
	--dash-btn-hover:      var(--dash-mode-accent-hover);

	/* Header foreground, solid state. */
	--dash-header-bg:             var(--dash-mode-surface);
	--dash-header-fg-solid:       var(--dash-mode-text);
	--dash-header-fg-solid-hover: var(--dash-mode-text);
	--dash-header-link-hover-bg:  var(--dash-mode-surface-alt);
}

html[data-color-mode] body {
	background: var(--dash-mode-bg);
	color: var(--dash-mode-text);
}

/* Headings follow the text around them, so a heading inside a section the
   builder colored keeps that section's color. The html part sits in :where()
   so these match the specificity of style.css's own element rules (and win by
   load order) while any class rule, such as a builder widget color, still
   wins over them. */
:where(html[data-color-mode]) :is(h1, h2, h3, h4, h5, h6) { color: inherit; }

/* Links: color from the palette. Links in running text are underlined in the
   accent so they read as links even when the link color matches the text. */
:where(html[data-color-mode]) a,
:where(html[data-color-mode]) a:hover { color: var(--dash-mode-link); }
:where(html[data-color-mode]) :where(#dash-main) :where(p, li, dd, td, blockquote, figcaption) > a:where(:not(.btn):not([class*="button"])) {
	text-decoration: underline;
	text-decoration-color: var(--dash-mode-link-underline);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}
:where(html[data-color-mode]) :is(code, blockquote) { background: var(--dash-mode-surface-alt); color: inherit; }

/* ── Header ───────────────────────────────────────────────────────────── */
html[data-color-mode] #dash-header.header-light,
html[data-color-mode] #dash-header.scrolled,
html[data-color-mode] #dash-header.header-light.scrolled,
html[data-color-mode] #dash-header.header-transparent.scrolled {
	background: var(--dash-mode-surface);
	border-bottom: 1px solid var(--dash-mode-border);
	box-shadow: none;
	--dash-hdr-fg: var(--dash-mode-text);
	/* Not --dash-mode-text: --dash-hdr-fg-hover also feeds --hdr-accent (style.css),
	   the color every "Menu link style" indicator (underline, dot, overline, ...)
	   draws itself in. Set to the text color, every indicator rendered in the
	   same color as the surrounding text, a static near-invisible hairline
	   next to text of the same shade instead of the brand accent sweeping in. */
	--dash-hdr-fg-hover: var(--dash-mode-accent);
}
/* The Floating pill and Frosted glass surfaces draw their own background:
   the solid mode surface + full-width border above hid the glass blur and
   put a colored bar and a line behind the pill. Only the background and
   border are handed back; the text colors above still follow the mode. */
html[data-color-mode] #dash-header.hdr-surface-pill:is(.header-light, .scrolled, .header-transparent.scrolled) {
	background: var(--dash-header-pill-backdrop-bg, transparent);
	border-bottom: 0;
	box-shadow: none;
}
html[data-color-mode] #dash-header.hdr-surface-pill:is(.scrolled, .header-transparent.scrolled) {
	background: var(--dash-header-pill-backdrop-bg, transparent);
}
html[data-color-mode] #dash-header.hdr-surface-pill > .container {
	box-shadow: 0 12px 32px -14px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--dash-mode-border);
}
html[data-color-mode] #dash-header.hdr-surface-glass:is(.header-light, .scrolled, .header-transparent.scrolled) {
	background: transparent;
	border-bottom: 1px solid color-mix(in srgb, var(--dash-mode-border) 60%, transparent);
	box-shadow: 0 10px 34px -18px rgba(0, 0, 0, 0.45);
}
html[data-color-mode] #dash-header .logo-name { color: var(--dash-hdr-fg); }
html[data-color-mode] #dash-header .logo-tagline { color: var(--dash-mode-muted); }
html[data-color-mode] #dash-header:not(.header-transparent) .primary-nav > li > a,
html[data-color-mode] #dash-header:not(.header-transparent) .header-right-nav > li > a,
html[data-color-mode] #dash-header.scrolled .primary-nav > li > a,
html[data-color-mode] #dash-header.scrolled .header-right-nav > li > a { color: var(--dash-hdr-fg); }
html[data-color-mode] #dash-header .primary-nav > li.current-menu-item > a,
html[data-color-mode] #dash-header .primary-nav > li > a:hover,
html[data-color-mode] #dash-header .header-right-nav > li > a:hover {
	text-decoration-color: var(--dash-mode-accent);
}
html[data-color-mode] #dash-header .menu-toggle span { background: var(--dash-hdr-fg); }
html[data-color-mode] body.nav-open #dash-header .menu-toggle span { background: var(--dash-mode-text); }
html[data-color-mode] #dash-header .header-cta .btn-outline {
	color: var(--dash-mode-text);
	border-color: var(--dash-mode-border);
}

/* Dropdowns */
html[data-color-mode] #dash-header .sub-menu {
	background: var(--dash-mode-surface);
	border-color: var(--dash-mode-border);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}
html[data-color-mode] #dash-header .sub-menu a { color: var(--dash-mode-text); }
html[data-color-mode] #dash-header .sub-menu a:hover,
html[data-color-mode] #dash-header .sub-menu a:focus-visible {
	background: var(--dash-mode-surface-alt);
	color: var(--dash-mode-text);
}
html[data-color-mode] #dash-header :is(.menu-item-desc, .sub-menu .description) { color: var(--dash-mode-muted); }

/* Top bar (two-tier header) keeps its own colors when set; otherwise it
   takes the alternate surface. */
html[data-color-mode] #dash-header .hdr-topbar {
	background: var(--hdr-topbar-bg, var(--dash-mode-surface-alt));
	color: var(--hdr-topbar-fg, var(--dash-mode-muted));
}
html[data-color-mode] #dash-header .hdr-topbar a { color: inherit; }

/* Mobile menu, every style (fullscreen, drawers, sheet, tab bar). */
html[data-color-mode] #mobile-nav.mobile-nav {
	background: var(--dash-mode-bg);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	color: var(--dash-mode-text);
	border-color: var(--dash-mode-border);
}
html[data-color-mode] #mobile-nav a {
	color: var(--dash-mode-text);
	border-color: var(--dash-mode-border);
}
html[data-color-mode] #mobile-nav .sub-menu a,
html[data-color-mode] #mobile-nav .mobile-right-nav a { color: var(--dash-mode-muted); }
html[data-color-mode] #mobile-nav a:hover,
html[data-color-mode] #mobile-nav a:focus-visible { color: var(--dash-mode-text); text-decoration: underline; text-decoration-color: var(--dash-mode-accent); }
html[data-color-mode] #mobile-nav .mobile-nav-close { color: var(--dash-mode-text); }
html[data-color-mode] .hdr-tabbar {
	background: var(--dash-mode-surface);
	border-color: var(--dash-mode-border);
	color: var(--dash-mode-text);
}
html[data-color-mode] .hdr-tabbar .hdr-tab { color: var(--dash-mode-muted); }
html[data-color-mode] .hdr-tabbar .hdr-tab.is-current { color: var(--dash-mode-text); }

/* ── Footer ───────────────────────────────────────────────────────────── */
html[data-color-mode] #dash-footer {
	background: var(--dash-mode-surface-alt);
	color: var(--dash-mode-muted);
	border-top: 1px solid var(--dash-mode-border);
}
html[data-color-mode] #dash-footer :is(h2, h3, h4, .logo-name) { color: var(--dash-mode-text); }
html[data-color-mode] #dash-footer :is(p, li, .logo-tagline, .footer-credit, .dash-ci-row) { color: var(--dash-mode-muted); }
html[data-color-mode] #dash-footer a { color: var(--dash-mode-text); }
html[data-color-mode] #dash-footer :is(.footer-col ul li a, .footer-bottom-links a, .footer-credit a, .dash-ci-text a) { color: var(--dash-mode-muted); }
html[data-color-mode] #dash-footer a:hover,
html[data-color-mode] #dash-footer a:focus-visible {
	color: var(--dash-mode-text);
	text-decoration: underline;
	text-decoration-color: var(--dash-mode-accent);
}
html[data-color-mode] #dash-footer :is(.footer-grid, .footer-bottom) { border-color: var(--dash-mode-border); }
html[data-color-mode] #dash-footer .social-link {
	border-color: var(--dash-mode-border);
	color: var(--dash-mode-muted);
}
html[data-color-mode] #dash-footer .social-link:hover {
	background: var(--dash-mode-accent);
	border-color: var(--dash-mode-accent);
	color: var(--dash-mode-accent-text);
	text-decoration: none;
}
html[data-color-mode] #dash-footer .dash-ci-icon {
	background: var(--dash-mode-surface);
	color: var(--dash-mode-text);
}

/* ── Logos per mode (revdash_color_mode_logo_imgs) ────────────────────── */
html[data-color-mode="dark"] .cm-logo--light,
html[data-color-mode="light"] .cm-logo--dark { display: none !important; }

/* ── Surfaces: theme sections and cards ───────────────────────────────── */
html[data-color-mode] :is(.services-section, .tech-stack-section, .contact-section, .features-section) { background: var(--dash-mode-bg); }
html[data-color-mode] :is(.process-section, .testimonials-section) { background: var(--dash-mode-surface-alt); }
/* Scoped to the blog sidebar specifically, not the bare .widget class: the
   same class wraps header and footer widgets too, which already get their own
   background from their own surface (header_bg) or surface_alt (footer), so
   giving every .widget this "surface" card color put a white/near-black box
   in the footer that didn't match its (deliberately different) surface_alt. */
html[data-color-mode] :is(.service-card, .testimonial-card, .blog-card, .card, .post-nav-link, .comment-body),
html[data-color-mode] #dash-sidebar .widget {
	background: var(--dash-mode-surface);
	border-color: var(--dash-mode-border);
	color: var(--dash-mode-text);
}
html[data-color-mode] :is(.service-card, .testimonial-card, .blog-card) :is(p, .blog-excerpt, .blog-meta) { color: var(--dash-mode-muted); }

/* ── Forms ────────────────────────────────────────────────────────────── */
/* Fields inside a surface that is always light by design (the license
   server's checkout, account and success cards) keep their own white fill and
   dark text; painting them with the mode surface left black boxes on a white
   card. */
html[data-color-mode] :is(input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea):not(:is(.rls-pricing, .rls-account, .rls-success) *) {
	background-color: var(--dash-mode-surface);
	color: var(--dash-mode-text);
	border-color: var(--dash-mode-border);
}
html[data-color-mode] :not(:is(.rls-pricing, .rls-account, .rls-success) *)::placeholder { color: var(--dash-mode-muted); opacity: 1; }
html[data-color-mode] :is(input, select, textarea):not(:is(.rls-pricing, .rls-account, .rls-success) *):focus-visible {
	border-color: var(--dash-mode-text);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--dash-mode-accent) 45%, transparent);
}
html[data-color-mode] :is(label, .form-group label) { color: inherit; }

/* ── Buttons (the --rev-btn-* tokens above do the fill) ───────────────── */
html[data-color-mode] .btn-primary,
html[data-color-mode] .btn-primary:hover {
	color: var(--dash-mode-accent-text);
}
html[data-color-mode] .btn-primary:hover { background: var(--dash-mode-accent-hover); border-color: var(--dash-mode-accent-hover); }
html[data-color-mode] .btn-outline {
	color: var(--dash-mode-text);
	border-color: var(--dash-mode-text);
}
html[data-color-mode] .btn-outline:hover {
	background: var(--dash-mode-accent);
	border-color: var(--dash-mode-accent);
	color: var(--dash-mode-accent-text);
}
html[data-color-mode] :is(.btn, button, a, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--dash-mode-accent);
	outline-offset: 2px;
}
html[data-color-mode="light"] :is(.btn, button, a, input, select, textarea, summary, [tabindex]):focus-visible {
	/* The default accent is pale; an accent ring alone would disappear on
	   white, so light mode adds a dark inner ring. */
	outline-color: var(--dash-mode-text);
	box-shadow: 0 0 0 5px var(--dash-mode-accent);
}

/* ── Revolutionary Blocks ─────────────────────────────────────────────── */
/* Zero specificity: anything set in the builder wins. */
:where(html[data-color-mode]) :where(.rb-document) {
	background-color: var(--dash-mode-bg);
	color: var(--dash-mode-text);
}
:where(html[data-color-mode]) :where(.rb-section) { border-color: var(--dash-mode-border); }
/* Opt-in bands: add the CSS class color-mode-surface or color-mode-alt to a
   section in the builder to give it the mode's surface colors. */
html[data-color-mode] .rb-section.color-mode-surface { background-color: var(--dash-mode-surface); color: var(--dash-mode-text); }
html[data-color-mode] .rb-section.color-mode-alt { background-color: var(--dash-mode-surface-alt); color: var(--dash-mode-text); }
html[data-color-mode] :where(.color-mode-muted) { color: var(--dash-mode-muted); }
html[data-color-mode] #dash-header .rb-document,
html[data-color-mode] #dash-footer .rb-document { background-color: transparent; color: inherit; }

/* ── Toggle button ────────────────────────────────────────────────────── */
.cm-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-width: 44px;
	min-height: 44px;
	padding: 0 10px;
	margin: 0;
	border: 1px solid var(--dash-mode-border, currentColor);
	background: transparent;
	color: var(--dash-hdr-fg, var(--dash-mode-text, currentColor));
	font: inherit;
	font-size: 0.95rem;
	line-height: 1;
	cursor: pointer;
	flex-shrink: 0;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}
.cm-toggle:hover { background: var(--dash-mode-surface-alt, rgba(127, 127, 127, 0.12)); }
.cm-toggle:focus-visible {
	outline: 3px solid var(--dash-mode-accent, currentColor);
	outline-offset: 2px;
}
.cm-toggle__icon { display: block; width: 20px; height: 20px; }
/* The icon shows the mode the button switches TO, matching its label. */
html[data-color-mode="dark"] .cm-toggle__icon--moon,
html[data-color-mode="light"] .cm-toggle__icon--sun { display: none; }
#dash-header.header-transparent:not(.scrolled) .cm-toggle { border-color: rgba(255, 255, 255, 0.45); }

/* Shape (Colors tab > Color mode > Toggle appearance): applies to every
   style, icon or CTA alike. */
.cm-toggle--shape-pill    { border-radius: 999px; }
.cm-toggle--shape-rounded { border-radius: var(--dash-radius, 10px); }
.cm-toggle--shape-square  { border-radius: 4px; }

/* Size: the icon variants resize the box and the icon together; the CTA
   variant instead reuses the site's own .btn-sm / .btn-lg padding+font scale
   so it always matches the header CTA button next to it. */
.cm-toggle--size-sm { min-width: 36px; min-height: 36px; }
.cm-toggle--size-sm .cm-toggle__icon { width: 16px; height: 16px; }
.cm-toggle--size-lg { min-width: 52px; min-height: 52px; }
.cm-toggle--size-lg .cm-toggle__icon { width: 24px; height: 24px; }

/* Style: CTA button. Consumes the same --rev-btn-* tokens as .btn-primary
   (the suite-wide button-token contract) so it always matches the header CTA
   button's color and hover without duplicating or hardcoding either. */
.cm-toggle--style-cta {
	min-width: 0;
	min-height: 0;
	padding: var(--rev-btn-padding, 0.65em 1.5em);
	border-color: var(--rev-btn-bg, var(--dash-primary));
	background: var(--rev-btn-bg, var(--dash-primary));
	color: var(--rev-btn-color, var(--dash-white));
	font-weight: var(--rev-btn-font-weight, 600);
	font-size: var(--rev-btn-font-size, 0.95rem);
}
.cm-toggle--style-cta:hover {
	border-color: var(--rev-btn-bg-hover, var(--dash-btn-hover, var(--dash-primary-dark)));
	background: var(--rev-btn-bg-hover, var(--dash-btn-hover, var(--dash-primary-dark)));
	color: var(--rev-btn-color, var(--dash-white));
}
.cm-toggle--style-cta.cm-toggle--size-sm { padding: 0.5em 1.2em; font-size: 0.85rem; }
.cm-toggle--style-cta.cm-toggle--size-lg { padding: 0.8em 1.85em; font-size: 1.05rem; }
/* Desktop: the toggle sits first inside .header-cta, so it follows the CTA
   in every header layout. Phones and tablets hide .header-cta, so a compact
   copy sits beside the hamburger instead. */
.hdr-color-mode-compact { display: none; align-items: center; margin-left: auto; margin-right: -1rem; }
@media (max-width: 1024px) {
	.hdr-color-mode-compact { display: flex; }
}
body:is(.hdr-layout-side, .hdr-layout-side-right) #dash-header .header-cta .cm-toggle { align-self: flex-start; }
/* Icon rail: the header button fades in with the opened rail, but the
   toggle stays visible on the collapsed rail so it is always one click away. */
@media (min-width: 1025px) {
	body.hdr-layout-rail #dash-header .header-cta { opacity: 1; }
	body.hdr-layout-rail #dash-header .header-cta > :not(.cm-toggle) { opacity: 0; transition: opacity 0.3s ease; }
	body.hdr-layout-rail #dash-header:is(:hover, :focus-within) .header-cta > :not(.cm-toggle) { opacity: 1; }
}
.mobile-nav .cm-toggle--mobile {
	margin-top: 1.5rem;
	padding: 0 16px;
	color: var(--dash-mode-text, #fff);
}
.cm-toggle--inline { color: inherit; }
/* CTA style always keeps its own button text color (needs contrast against
   its solid background), even in contexts above that set .cm-toggle's color
   to match surrounding text. Two classes here so it wins over those on
   specificity, not source order. */
.mobile-nav .cm-toggle--style-cta,
.cm-toggle--style-cta.cm-toggle--inline {
	color: var(--rev-btn-color, var(--dash-white));
}
@media (prefers-reduced-motion: reduce) {
	.cm-toggle { transition: none; }
}

/* ── Accessibility: minimum 44px touch targets on phones ──────────────── */
@media (max-width: 768px) {
	body.touch-target-44 :is(#dash-header, #mobile-nav, #dash-footer, .hdr-tabbar, .hdr-topbar) :is(a, button, [role="button"], input[type="submit"]) {
		min-height: 44px;
		min-width: 44px;
	}
	body.touch-target-44 :is(#dash-header, #mobile-nav, #dash-footer, .hdr-topbar) :is(nav a, .menu-item > a, .footer-col a, .footer-bottom-links a, .footer-contact a, .hdr-topbar-link) {
		display: inline-flex;
		align-items: center;
	}
	body.touch-target-44 #mobile-nav .menu-item > a { display: flex; }
	body.touch-target-44 :is(#dash-footer .footer-col ul li, #dash-footer .footer-contact li) { margin-bottom: 0.25rem; }
	body.touch-target-44 #dash-footer .footer-bottom-links { flex-wrap: wrap; column-gap: 1rem; row-gap: 0; }
	body.touch-target-44 #dash-footer .social-link { width: 44px; height: 44px; }
	body.touch-target-44 #dash-header .menu-toggle { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
	body.touch-target-44 #scroll-top { min-width: 44px; min-height: 44px; }

	/* Revolutionary Blocks content: icon-list / text-list links and FAQ
	   (details/summary) toggles, same 44px floor as the header/footer above. */
	body.touch-target-44 .rb-document :is(.rb-iconlist__item a, .rb-text li a) {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		min-width: 44px;
	}
	body.touch-target-44 .rb-document summary {
		display: flex;
		align-items: center;
		min-height: 44px;
	}
}