/**
 * Cyber Canvas Light & Dark — Base (merged)
 *
 * Combines variables.css + dark-base.css into a single request.
 * Dynamic colour overrides from the admin are injected via
 * wp_add_inline_style( 'cc-lightdark-base', ... ).
 *
 * @package CyberCanvas\LightDark
 */

/* ============================================================
   PART 1: CSS Custom Properties
   ============================================================
   ALL --cc-* colour variables are declared by
   Theme_Settings::output_custom_css() from DB values.
   This file MUST NOT declare any --cc-* variables.
   It only CONSUMES them via var(--cc-*).
   ============================================================ */


/* ============================================================
   PART 2: Dark Mode Base Overrides (dark-base.css)
   ============================================================ */

/* ── Transition (applied only after first user toggle) ──────── */
[data-theme-transition] *,
[data-theme-transition] *::before,
[data-theme-transition] *::after {
	transition:
		background-color var(--cc-transition-duration, 300ms) ease,
		color var(--cc-transition-duration, 300ms) ease,
		border-color var(--cc-transition-duration, 300ms) ease,
		box-shadow var(--cc-transition-duration, 300ms) ease,
		fill var(--cc-transition-duration, 300ms) ease;
}

/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
	[data-theme-transition] *,
	[data-theme-transition] *::before,
	[data-theme-transition] *::after {
		transition: none !important;
	}
}

/* ── Body & Root ─────────────────────────────────────────────── */
[data-theme="dark"] body,
[data-theme="dark"] {
	background-color: var(--cc-bg);
	color: var(--cc-text);
}

[data-theme="dark"] body,
[data-theme="dark"] .site,
[data-theme="dark"] .site-content-wrapper,
[data-theme="dark"] .site-main,
[data-theme="dark"] .elementor,
[data-theme="dark"] .elementor-section,
[data-theme="dark"] .elementor-widget-wrap {
	background-image: none !important;
}

/* ── Typography ──────────────────────────────────────────────── */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
	color: var(--cc-heading);
}

[data-theme="dark"] a {
	color: var(--cc-link);
}

[data-theme="dark"] a:hover {
	color: var(--cc-link-hover);
}

[data-theme="dark"] p,
[data-theme="dark"] li,
[data-theme="dark"] span,
[data-theme="dark"] td,
[data-theme="dark"] th,
[data-theme="dark"] label,
[data-theme="dark"] figcaption {
	color: var(--cc-text);
}

[data-theme="dark"] blockquote {
	border-left-color: var(--cc-primary);
	color: var(--cc-secondary);
	background-color: var(--cc-surface);
}

[data-theme="dark"] code,
[data-theme="dark"] pre,
[data-theme="dark"] kbd {
	background-color: var(--cc-code-bg);
	color: var(--cc-accent);
}

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

[data-theme="dark"] mark {
	background-color: rgba(142, 213, 240, 0.25);
	color: var(--cc-text);
}

/* ── Forms ───────────────────────────────────────────────────── */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="datetime-local"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] input[type="month"],
[data-theme="dark"] input[type="week"],
[data-theme="dark"] textarea,
[data-theme="dark"] select:not(.cc-ps-sort) {
	background-color: var(--cc-input-bg);
	border-color: var(--cc-input-border);
	color: var(--cc-text);
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
	color: var(--cc-placeholder);
}

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:not(.cc-ps-sort):focus {
	border-color: var(--cc-primary);
	outline-color: var(--cc-primary);
}

/* ── Buttons ─────────────────────────────────────────────────── */
[data-theme="dark"] button:not(.cc-ps-tab):not(.cc-ps-nav__arrow):not(.cc-toggle):not(.cc-social-bar__toggle),
[data-theme="dark"] .button,
[data-theme="dark"] input[type="submit"],
[data-theme="dark"] input[type="button"] {
	background-color: var(--cc-btn-bg);
	border-color: var(--cc-btn-bg);
	color: var(--cc-btn-text);
}

[data-theme="dark"] button:not(.cc-ps-tab):not(.cc-ps-nav__arrow):not(.cc-toggle):not(.cc-social-bar__toggle):hover,
[data-theme="dark"] .button:hover,
[data-theme="dark"] input[type="submit"]:hover,
[data-theme="dark"] input[type="button"]:hover {
	background-color: color-mix(in srgb, var(--cc-btn-bg) 82%, var(--cc-link-hover));
	border-color: color-mix(in srgb, var(--cc-btn-bg) 82%, var(--cc-link-hover));
}

[data-theme="dark"] .wp-block-details,
[data-theme="dark"] .wp-block-details summary {
	background-color: var(--cc-surface);
	border-color: var(--cc-border);
	color: var(--cc-heading);
}

/* ── Tables ──────────────────────────────────────────────────── */
[data-theme="dark"] table {
	border-color: var(--cc-border);
}

[data-theme="dark"] th {
	background-color: var(--cc-surface);
	border-color: var(--cc-border);
	color: var(--cc-heading);
}

[data-theme="dark"] td {
	border-color: var(--cc-border);
}

[data-theme="dark"] tr:nth-child(even) {
	background-color: var(--cc-surface);
}

/* ── Images & Media ──────────────────────────────────────────── */
[data-theme="dark"] img {
	/* Slight brightness reduction to prevent glare on very white images */
	filter: brightness(0.92);
}

[data-theme="dark"] img[src$=".svg"],
[data-theme="dark"] img.wp-image-svg {
	filter: none;
}

/* ── WordPress Core Blocks ───────────────────────────────────── */
[data-theme="dark"] .wp-block-group,
[data-theme="dark"] .wp-block-column {
	background-color: var(--cc-surface);
}

[data-theme="dark"] .wp-block-separator {
	border-color: var(--cc-border);
}

[data-theme="dark"] .wp-block-quote {
	border-left-color: var(--cc-primary);
}

[data-theme="dark"] .wp-block-pullquote {
	border-top-color: var(--cc-primary);
	border-bottom-color: var(--cc-primary);
}

[data-theme="dark"] .wp-block-table table {
	border-color: var(--cc-border);
}

[data-theme="dark"] .wp-block-search__input {
	background-color: var(--cc-input-bg);
	border-color: var(--cc-input-border);
	color: var(--cc-text);
}

/* ── Scrollbar (Webkit) ──────────────────────────────────────── */
[data-theme="dark"] ::-webkit-scrollbar {
	width: 10px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
	background: var(--cc-bg);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
	background-color: var(--cc-border);
	border-radius: 5px;
}

/* Firefox */
[data-theme="dark"] * {
	scrollbar-color: var(--cc-border) var(--cc-bg);
}

/* ── Selection ───────────────────────────────────────────────── */
[data-theme="dark"] ::selection {
	background-color: var(--cc-primary);
	color: var(--cc-btn-text);
}


/* ============================================================
   PART 3: Dark-Mode-Only Elementor Widget Overrides
   ============================================================
   IMPORTANT:  Never override backgrounds on sections, containers,
   columns or widget-wraps — the user designs those in Elementor,
   and forcing them to var(--cc-bg) destroys the layout.
   Only override text/icon colours inside dark mode so widgets
   that were designed for a light page still look correct when
   the user toggles to dark mode.
   ============================================================ */

/* ── Tabs ───────────────────────────────────────────────────── */
[data-theme="dark"] .elementor-tabs .elementor-tab-title {
	border-color: var(--cc-border);
}
[data-theme="dark"] .elementor-tabs .elementor-tab-content {
	border-color: var(--cc-border);
}

/* ── Counter / Stats ────────────────────────────────────────── */
html[data-theme="dark"] .elementor-counter-number-wrapper {
	color: var(--cc-accent);
}
html[data-theme="dark"] .elementor-counter-title {
	color: var(--cc-text);
}
html[data-theme="dark"] .elementor-counter-number-prefix,
html[data-theme="dark"] .elementor-counter-number-suffix {
	color: var(--cc-accent);
}

/* ── Testimonial Carousel ───────────────────────────────────── */
html[data-theme="dark"] .elementor-testimonial__text,
html[data-theme="dark"] .elementor-testimonial-content {
	color: var(--cc-text);
}
html[data-theme="dark"] .elementor-testimonial__name,
html[data-theme="dark"] .elementor-testimonial-name {
	color: var(--cc-heading);
}
html[data-theme="dark"] .elementor-testimonial__title,
html[data-theme="dark"] .elementor-testimonial-job {
	color: var(--cc-muted);
}
html[data-theme="dark"] .elementor-testimonial__header,
html[data-theme="dark"] .elementor-testimonial {
	border-color: var(--cc-border);
}
/* Testimonial card backgrounds (Elementor Pro slides) */
html[data-theme="dark"] .elementor-testimonial__content {
	background-color: var(--cc-surface);
}
/* Swiper navigation in testimonial carousels */
html[data-theme="dark"] .elementor-testimonial .swiper-pagination-bullet {
	background-color: var(--cc-muted);
}
html[data-theme="dark"] .elementor-testimonial .swiper-pagination-bullet-active {
	background-color: var(--cc-accent);
}

/* ── Posts / Archive Cards ──────────────────────────────────── */
/* html prefix for higher specificity to beat Elementor generated CSS */
html[data-theme="dark"] .elementor-post__card {
	background-color: var(--cc-surface);
	border-color: var(--cc-border);
}
html[data-theme="dark"] .elementor-post__title,
html[data-theme="dark"] .elementor-post__title a {
	color: var(--cc-heading);
}
html[data-theme="dark"] .elementor-post__excerpt,
html[data-theme="dark"] .elementor-post__excerpt p {
	color: var(--cc-text);
}
html[data-theme="dark"] .elementor-post__meta-data,
html[data-theme="dark"] .elementor-post__meta-data span,
html[data-theme="dark"] .elementor-post-date,
html[data-theme="dark"] .elementor-post-author {
	color: var(--cc-muted);
}
html[data-theme="dark"] .elementor-post__read-more {
	color: var(--cc-link);
}
html[data-theme="dark"] .elementor-post__read-more:hover {
	color: var(--cc-link-hover);
}
html[data-theme="dark"] .elementor-post__badge {
	background-color: var(--cc-accent);
	color: var(--cc-btn-text);
}
/* Posts widget text wrapper */
html[data-theme="dark"] .elementor-post__text {
	background-color: var(--cc-surface);
}
/* Pagination */
html[data-theme="dark"] .elementor-pagination .page-numbers {
	color: var(--cc-text);
	border-color: var(--cc-border);
}
html[data-theme="dark"] .elementor-pagination .page-numbers.current {
	background-color: var(--cc-accent);
	color: var(--cc-btn-text);
	border-color: var(--cc-accent);
}

/* ── Icon Box ───────────────────────────────────────────────── */
html[data-theme="dark"] .elementor-icon-box-title,
html[data-theme="dark"] .elementor-icon-box-title a {
	color: var(--cc-heading);
}
html[data-theme="dark"] .elementor-icon-box-description {
	color: var(--cc-text);
}
html[data-theme="dark"] .elementor-icon-box-icon .elementor-icon {
	color: var(--cc-accent);
	border-color: var(--cc-accent);
}

/* ── Icon List ──────────────────────────────────────────────── */
html[data-theme="dark"] .elementor-icon-list-text {
	color: var(--cc-text);
}
html[data-theme="dark"] .elementor-icon-list-icon svg {
	fill: var(--cc-accent);
}
html[data-theme="dark"] .elementor-icon-list-icon i {
	color: var(--cc-accent);
}

/* ── Progress Bar ───────────────────────────────────────────── */
html[data-theme="dark"] .elementor-progress-wrapper {
	background-color: var(--cc-surface);
}
html[data-theme="dark"] .elementor-progress-bar {
	background-color: var(--cc-accent);
}
html[data-theme="dark"] .elementor-title {
	color: var(--cc-heading);
}

/* ── Alert ──────────────────────────────────────────────────── */
html[data-theme="dark"] .elementor-alert {
	border-color: var(--cc-border);
}
html[data-theme="dark"] .elementor-alert-title {
	color: var(--cc-heading);
}
html[data-theme="dark"] .elementor-alert-description {
	color: var(--cc-text);
}

/* ── Divider ────────────────────────────────────────────────── */
[data-theme="dark"] .elementor-divider-separator {
	border-color: var(--cc-border);
}