/*
 * CarFaultIQ — Premium Visual Experience v1
 * ------------------------------------------------------------------
 * Additive-only enhancement layer, loaded after main.css/responsive.css/
 * insights.css. Nothing here overrides component structure — it adds
 * category identity, restrained motion, and hover/elevation polish on top
 * of the existing design tokens defined in main.css (--cfiq-*). Reuses the
 * existing .cfiq-motion-reveal/.cfiq-motion-stagger JS system (motion.js)
 * rather than introducing a second one.
 *
 * ROLLBACK: dequeue 'cfiq-premium-v1' in functions.php, or delete this file.
 * No other file depends on it loading.
 * ------------------------------------------------------------------
 */

/* ---------- 1. Category identity accent tokens ---------- */

:root {
	--cfiq-cat-fault: var(--cfiq-red, #e5484d);
	--cfiq-cat-symptom: var(--cfiq-cyan, #3dd6f5);
	--cfiq-cat-warning: var(--cfiq-amber, #f5a623);
	--cfiq-cat-used: var(--cfiq-orange, #f76808);
	--cfiq-cat-guide: var(--cfiq-green, #30a46c);
	--cfiq-cat-comparison: #6d5ef5;
	--cfiq-cat-obd: var(--cfiq-slate, #24324a);
	--cfiq-cat-insight: var(--cfiq-green, #30a46c);
	--cfiq-cat-vehicle: var(--cfiq-slate, #24324a);
	--cfiq-cat-evidence: var(--cfiq-cyan, #3dd6f5);
	--cfiq-cat-default: var(--cfiq-slate, #24324a);
}

/* ---------- 2. Category identity badge (archive/section headers) ---------- */

.cfiq-cat-identity {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.65rem;
	padding: 0;
	isolation: isolate;
}

.cfiq-cat-identity__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: color-mix(in srgb, var(--cfiq-cat-accent, var(--cfiq-cat-default)) 12%, transparent);
	color: var(--cfiq-cat-accent, var(--cfiq-cat-default));
	flex: 0 0 auto;
}

.cfiq-cat-identity__badge svg,
.cfiq-cat-identity__badge img {
	width: 18px;
	height: 18px;
	display: block;
}

.cfiq-cat-identity__badge svg * {
	fill: currentColor;
	stroke: currentColor;
}

.cfiq-cat-identity__eyebrow {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cfiq-cat-accent, var(--cfiq-cat-default));
}

/* Bind the accent variable per modifier — keeps the badge/motif/eyebrow rules
   accent-agnostic above, so a new type only needs one line added here. */
.cfiq-cat-identity--fault      { --cfiq-cat-accent: var(--cfiq-cat-fault); }
.cfiq-cat-identity--symptom    { --cfiq-cat-accent: var(--cfiq-cat-symptom); }
.cfiq-cat-identity--warning    { --cfiq-cat-accent: var(--cfiq-cat-warning); }
.cfiq-cat-identity--used       { --cfiq-cat-accent: var(--cfiq-cat-used); }
.cfiq-cat-identity--guide      { --cfiq-cat-accent: var(--cfiq-cat-guide); }
.cfiq-cat-identity--comparison { --cfiq-cat-accent: var(--cfiq-cat-comparison); }
.cfiq-cat-identity--obd        { --cfiq-cat-accent: var(--cfiq-cat-obd); }
.cfiq-cat-identity--insight    { --cfiq-cat-accent: var(--cfiq-cat-insight); }
.cfiq-cat-identity--vehicle    { --cfiq-cat-accent: var(--cfiq-cat-vehicle); }
.cfiq-cat-identity--evidence   { --cfiq-cat-accent: var(--cfiq-cat-evidence); }

/* Generic signal-path motif: a small reusable technical line-art shape,
   masked so it always renders in the current accent colour at low opacity.
   Clearly abstract/generic — three nodes on a bent connector, not a
   representation of any real component. */
.cfiq-cat-identity__motif {
	position: absolute;
	top: -14px;
	right: -6px;
	width: 148px;
	height: 64px;
	background-color: var(--cfiq-cat-accent, var(--cfiq-cat-default));
	opacity: 0.07;
	pointer-events: none;
	z-index: -1;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 148 64'%3E%3Cpath d='M4 46 L40 46 L58 14 L96 14 L114 40 L144 40' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='4' cy='46' r='4'/%3E%3Ccircle cx='58' cy='14' r='4'/%3E%3Ccircle cx='114' cy='40' r='4'/%3E%3Ccircle cx='144' cy='40' r='4'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 148 64'%3E%3Cpath d='M4 46 L40 46 L58 14 L96 14 L114 40 L144 40' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='4' cy='46' r='4'/%3E%3Ccircle cx='58' cy='14' r='4'/%3E%3Ccircle cx='114' cy='40' r='4'/%3E%3Ccircle cx='144' cy='40' r='4'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

@media (max-width: 480px) {
	.cfiq-cat-identity__motif { width: 100px; height: 44px; top: -8px; right: -4px; }
}

/* ---------- 3. Restrained node pulse on category badges (decorative only) ---------- */

@media (prefers-reduced-motion: no-preference) {
	.cfiq-cat-identity__badge {
		animation: cfiq-premium-badge-breathe 4.5s ease-in-out infinite;
	}
	@keyframes cfiq-premium-badge-breathe {
		0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cfiq-cat-accent, var(--cfiq-cat-default)) 0%, transparent); }
		50%      { box-shadow: 0 0 0 5px color-mix(in srgb, var(--cfiq-cat-accent, var(--cfiq-cat-default)) 14%, transparent); }
	}
}

/* ---------- 4. Card hover/elevation polish ---------- */

@media (prefers-reduced-motion: no-preference) {
	.cfiq-card,
	.cfiq-fault-card,
	.cfiq-insight-card,
	.cfiq-lookup-tile,
	.cfiq-uw-card,
	article[class*="-card"] {
		transition: transform 220ms var(--cfiq-ease, ease), box-shadow 220ms var(--cfiq-ease, ease);
	}
	.cfiq-card:hover,
	.cfiq-fault-card:hover,
	.cfiq-insight-card:hover,
	.cfiq-lookup-tile:hover,
	.cfiq-uw-card:hover,
	article[class*="-card"]:hover {
		transform: translateY(-3px);
		box-shadow: var(--cfiq-shadow-up, 0 14px 34px rgba(16, 24, 40, 0.1));
	}
}

/* Focus-visible parity for keyboard users — no motion, just clarity. */
.cfiq-card:focus-within,
.cfiq-fault-card:focus-within,
article[class*="-card"]:focus-within {
	outline: 2px solid var(--cfiq-cyan, #3dd6f5);
	outline-offset: 2px;
}

/* ---------- 5. Section heading rhythm ---------- */

.cfiq-premium-heading {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 1.1rem;
}

.cfiq-premium-heading__see-all {
	font-size: 0.875rem;
	font-weight: 600;
	white-space: nowrap;
}

/* ---------- 6. Homepage hero lead emphasis ---------- */

.cfiq-product-hero__sub {
	max-width: 58ch;
}

@media (min-width: 900px) {
	.cfiq-product-hero__sub {
		font-size: 1.1rem;
		line-height: 1.55;
	}
}

/* ---------- 7. Reduced-motion belt-and-braces ---------- */

@media (prefers-reduced-motion: reduce) {
	.cfiq-cat-identity__badge { animation: none !important; }
	.cfiq-card, .cfiq-fault-card, .cfiq-insight-card, .cfiq-lookup-tile, .cfiq-uw-card, article[class*="-card"] {
		transition: none !important;
	}
}