/*
 * YBB brand tokens.
 *
 * Motova exposes its palette as CSS custom properties (inc/theme-config.php →
 * motova_inline_styles()). Overriding those variables re-skins the entire theme
 * WITHOUT touching a single parent file — the cleanest possible route under
 * DECISIONS.md D-003.
 *
 * Palette (D-014):
 *   Primary Orange  #FF8A00
 *   Black           #111111
 *   Dark Gray       #2B2B2B
 *   Gray            #A6A6A6
 *   Background      #F7F7F7
 *
 * Compiled and committed — no server-side build (D-019).
 */

:root {
	/* ── YBB source of truth ─────────────────────────────────────────────── */
	--ybb-orange: #FF8A00;
	--ybb-orange-dark: #E67B00;
	--ybb-orange-light: #FFA333;
	--ybb-black: #111111;
	--ybb-dark-gray: #2B2B2B;
	--ybb-gray: #A6A6A6;
	--ybb-bg: #F7F7F7;
	--ybb-white: #FFFFFF;

	--ybb-orange-rgb: 255, 138, 0;
	--ybb-black-rgb: 17, 17, 17;
	--ybb-dark-gray-rgb: 43, 43, 43;
	--ybb-gray-rgb: 166, 166, 166;

	/* Semantic tokens — status colours for workshop UI in later phases. */
	--ybb-success: #1E8E3E;
	--ybb-warning: #F5A623;
	--ybb-danger: #C5292A;
	--ybb-info: #2B6CB0;

	/* ── Motova variable overrides ───────────────────────────────────────── *
	 * Names must match Motova's generated custom properties exactly, or the
	 * override silently does nothing. Verified against inc/theme-config.php.
	 */
	--primary-color: #FF8A00;
	--secondary-color: #111111;
	--third-color: #2B2B2B;
	--four-color: #A6A6A6;
	--five-color: #F7F7F7;
	--six-color: #E9E9E9;
	--body_bg-color: #F7F7F7;

	--primary-color-rgb: 255, 138, 0;
	--secondary-color-rgb: 17, 17, 17;
	--third-color-rgb: 43, 43, 43;
	--four-color-rgb: 166, 166, 166;
	--five-color-rgb: 247, 247, 247;
	--six-color-rgb: 233, 233, 233;
	--body_bg-color-rgb: 247, 247, 247;

	--link-color: #111111;
	--link-color-hover: #FF8A00;
	--link-color-active: #FF8A00;

	/*
	 * Neutralise Motova's demo gradients.
	 * The parent ships purple/peach (#A493FF → #72BEF9, #8160C7 → #503687),
	 * which reads as consumer-tech, not automotive. Orange → graphite instead.
	 */
	--gradient-color-from: #FF8A00;
	--gradient-color-center: #FF9E2C;
	--gradient-color-to: #E67B00;

	--gradient-two-color-from: #2B2B2B;
	--gradient-two-color-center: #1E1E1E;
	--gradient-two-color-to: #111111;

	/* Layout tokens. */
	--ybb-radius: 6px;
	--ybb-radius-lg: 12px;
	--ybb-transition: 0.25s ease;
}

/* ── Base ───────────────────────────────────────────────────────────────── */

body {
	background-color: var(--ybb-bg);
	color: var(--ybb-dark-gray);
}

h1, h2, h3, h4, h5, h6 {
	color: var(--ybb-black);
}

a {
	transition: color var(--ybb-transition);
}

/* ── Focus visibility ───────────────────────────────────────────────────── *
 * Accessibility: a visible focus ring on an orange/dark palette. Themes of
 * this class routinely remove focus outlines; we put one back.
 */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 3px solid var(--ybb-orange);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ── Selection ──────────────────────────────────────────────────────────── */

::selection {
	background-color: var(--ybb-orange);
	color: var(--ybb-white);
}

/* ── Skip link ──────────────────────────────────────────────────────────── */

.skip-link:focus {
	background: var(--ybb-black);
	color: var(--ybb-white);
	padding: 0.75rem 1.25rem;
	z-index: 100000;
}

/* ── Reduced motion ─────────────────────────────────────────────────────── *
 * Motova leans on WOW.js, GSAP and parallax throughout. Honour the user's
 * system preference — the parent theme does not.
 */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.wow,
	.pxl-animate {
		visibility: visible !important;
		opacity: 1 !important;
		transform: none !important;
	}
}

/* ── Print ──────────────────────────────────────────────────────────────── */

@media print {
	.pxl-scroll-top,
	.pxl-cursor,
	.pxl-cookie-policy {
		display: none !important;
	}

	body {
		background: #FFF;
		color: #000;
	}
}

/* ═════════════════════════════════════════════════════════════════════════════
 * HARDCODED VENDOR RED — explicit overrides
 *
 * VERIFIED against the compiled parent stylesheet (assets/css/style.css):
 *
 *   var(--primary-color)   → 360 uses  ✅ handled by the variable override above
 *   var(--secondary-color) → 256 uses  ✅
 *   var(--third-color)     →  20 uses  ✅
 *   var(--body_bg-color)   →   8 uses  ✅
 *
 *   LITERAL #ee2628 / rgba(238,38,40,…) → 35 occurrences  ❌ NOT reachable
 *                                                            by any variable
 *
 * Those 35 are baked into the compiled CSS and would keep showing Motova red
 * regardless of the Redux palette. Each selector below was located by line
 * number in the parent stylesheet and is overridden here.
 *
 * D-014: Motova's red must not appear as a visible brand colour.
 * ═════════════════════════════════════════════════════════════════════════════ */

/* Forms — focus states (parent lines 5577, 5595) */
.contact-form5 input[type="text"]:focus,
.contact-form5 input[type="email"]:focus,
.contact-form5 input[type="url"]:focus,
.contact-form5 textarea:focus {
	border-color: var(--ybb-orange);
}

/* Links — gradient and style-4 (parent 6642, 6896) */
.pxl-link.style-gradient a:before {
	background: linear-gradient(147deg,
		rgba(var(--ybb-orange-rgb), 0.4) 0%,
		rgba(var(--ybb-orange-rgb), 0.6) 100%);
}

.pxl-link.style-4 a::before {
	background-color: var(--ybb-orange);
}

/* Highlight box + glow (parent 488-495, 8476, 8583) */
.pxl-title--highlight-box:before {
	background: radial-gradient(circle at 50% 50%,
		rgba(var(--ybb-orange-rgb), 0.55) 0%,
		rgba(var(--ybb-orange-rgb), 0) 60%);
}

/* Filters (parent 10823, 30530, 31685, 31852, 32243) */
.filter-about1 {
	background: rgba(var(--ybb-orange-rgb), 0.55);
}

.pxl-portfolio-carousel1 .swiper-filter .filter-item,
.pxl-portfolio-grid-layout1 .swiper-filter .filter-item {
	background-color: rgba(var(--ybb-orange-rgb), 0.15);
}

@media (max-width: 767px) {
	.pxl-grid-filter.style-3 .pxl--filter-inner .filter-item.active,
	.pxl-grid-filter.style-3 .pxl--filter-inner .filter-item:hover {
		background-color: var(--ybb-orange);
	}
}

/* Video button, testimonial thumbs, progress bar, swiper (35998, 37199, 39723, 40728) */
.pxl-btn-video.style1::before {
	background-color: var(--ybb-orange);
}

.pxl-testimonial-carousel4 .pxl-swiper-thumbs .swiper-slide-thumb-active .number {
	box-shadow: 0 0 0 8px rgba(var(--ybb-orange-rgb), 0.28),
		0 0 18px rgba(var(--ybb-orange-rgb), 0.35);
}

.pxl-progressbar-1.style-1 .pxl-progressbar--wrap .pxl--progressbar {
	background: linear-gradient(90deg, var(--ybb-orange) 0%, var(--ybb-bg) 100%);
}

.pxl-swiper-effect2 .pxl-pagination-wrap .pxl-swiper-thumbs
	.pxl-swiper-slide.swiper-slide-thumb-active .pxl-item--title::before {
	background-color: var(--ybb-orange);
}

/* Loader flash animation (parent 3113-3122) */
@keyframes pxl_loaderFlash {
	0% {
		background-color: rgba(var(--ybb-orange-rgb), 0.28);
		box-shadow: 32px 0 rgba(var(--ybb-orange-rgb), 0.28),
			-32px 0 var(--ybb-orange);
	}
	50% {
		box-shadow: 32px 0 rgba(var(--ybb-orange-rgb), 0.28),
			-32px 0 rgba(var(--ybb-orange-rgb), 0.28);
	}
	100% {
		background-color: rgba(var(--ybb-orange-rgb), 0.28);
		box-shadow: 32px 0 var(--ybb-orange),
			-32px 0 rgba(var(--ybb-orange-rgb), 0.28);
	}
}

/* Glow keyframe used by headline effects (parent 486-495) */
@keyframes glow {
	0%, 100% {
		-webkit-text-stroke: 1px rgba(var(--ybb-orange-rgb), 0.5);
		filter: drop-shadow(0 0 10px rgba(var(--ybb-orange-rgb), 0.3));
	}
	50% {
		-webkit-text-stroke: 1px rgba(var(--ybb-orange-rgb), 0.8);
		filter: drop-shadow(0 0 20px rgba(var(--ybb-orange-rgb), 0.5));
	}
}

/* ── Safety net ──────────────────────────────────────────────────────────────
 * Any vendor red we did not enumerate. Kept last and deliberately narrow: it
 * only catches the exact vendor red, so it cannot affect legitimate reds such
 * as error states (--ybb-danger).
 * Verify in DevTools after the first deploy and remove if it proves unnecessary.
 */
[style*="#ee2628"],
[style*="#EE2628"] {
	--fallback-brand: var(--ybb-orange);
}