/**
 * Elcogen Highlight Widget Styles
 *
 * Styles for the Highlight widget with Facts and Slogan content types.
 * Supports three color themes (Light Blue, Dark Blue, White) via CSS variables.
 *
 * @package Elcogen_Elementor_Widgets
 * @since 1.0.0
 */

/* CSS Variables for Theme Colors */
.elcogen-highlight {
	--highlight-bg: var(--color-light-purple-100);
	--highlight-heading: var(--color-text-primary);
	--highlight-card-bg: var(--color-white);
	--highlight-text: var(--color-text-primary);
}

.elcogen-highlight--light-blue {
	--highlight-bg: var(--color-light-purple-100);
	--highlight-heading: var(--color-text-primary);
	--highlight-card-bg: var(--color-white);
	--highlight-text: var(--color-text-primary);
}

.elcogen-highlight--dark-blue {
	--highlight-bg: var(--color-cobalt-blue-400);
	--highlight-heading: var(--color-white);
	--highlight-card-bg: #3d53d0;
	--highlight-text: var(--color-white);
}

.elcogen-highlight--white {
	--highlight-bg: var(--color-white);
	--highlight-heading: var(--color-text-primary);
	--highlight-card-bg: var(--color-white);
	--highlight-text: var(--color-text-primary);
}

/* Base Container Styles */
.elcogen-highlight {
	width: 100%;
	background-color: var(--highlight-bg);
	padding: var(--spacing-section-vertical) 0;
}

.elcogen-highlight__container {
	max-width: var(--container-wide);
	margin: 0 auto;
	padding: 0 var(--spacing-baseline-24);
}

.elcogen-highlight__content {
	max-width: var(--container-default);
	margin: 0 auto;
}

/* Heading Styles */
.elcogen-highlight__heading {
	/* Typography now controlled by universal .elcogen-widget-title class in global CSS */
	font-weight: var(--font-weight-light); /* Override: Highlight uses light weight */
	color: var(--highlight-heading);
	margin: 0;
}

/* Facts Layout - Desktop */
.elcogen-highlight--facts {
	position: relative; /* Establish positioning context for absolute icon */
	overflow: hidden;
}

.elcogen-highlight--facts .elcogen-highlight__content {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--spacing-baseline-40);
	align-items: start;
	position: relative;
}

.elcogen-highlight--facts .elcogen-highlight__heading {
	max-width: 28.5rem;
}

/* Decorative lightbulb icon as ::after pseudo-element on content wrapper */
.elcogen-highlight--facts .elcogen-highlight__content::after {
	content: '';
	position: absolute;
	width: 30.1875rem; /* 483px */
	height: 30.1875rem; /* 483px - square aspect ratio */
	bottom: calc(-120px - 6rem);
	/* left: calc(50% - 29.96875rem); /* Centered offset to left (479.5px) */ */
	opacity: 0.5;
	pointer-events: none; /* Non-interactive decorative element */
	z-index: 0; /* Behind content */
	background-image: url('data:image/svg+xml,%3Csvg width="483" height="483" viewBox="0 0 483 483" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M60.375 241.5H80.5M241.5 60.375V80.5M402.5 241.5H422.625M112.7 112.7L126.788 126.788M370.3 112.7L356.213 126.788M195.212 342.125H287.787M181.125 322C164.229 309.328 151.749 291.662 145.452 271.503C139.155 251.344 139.36 229.715 146.039 209.68C152.717 189.644 165.531 172.217 182.664 159.869C199.796 147.52 220.381 140.875 241.5 140.875C262.619 140.875 283.204 147.52 300.336 159.869C317.469 172.217 330.283 189.644 336.961 209.68C343.64 229.715 343.845 251.344 337.548 271.503C331.251 291.662 318.771 309.328 301.875 322C294.018 329.778 288.101 339.296 284.605 349.785C281.109 360.274 280.131 371.438 281.75 382.375C281.75 393.05 277.509 403.288 269.961 410.836C262.413 418.384 252.175 422.625 241.5 422.625C230.825 422.625 220.587 418.384 213.039 410.836C205.491 403.288 201.25 393.05 201.25 382.375C202.869 371.438 201.891 360.274 198.395 349.785C194.899 339.296 188.982 329.778 181.125 322Z" stroke="black" stroke-opacity="0.1" stroke-width="15" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E');
}

@media (max-width: 64rem) {
	.elcogen-highlight--facts .elcogen-highlight__content::after {
		content: none;
	}
}

.elcogen-highlight__cards {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-baseline-24);
}

.elcogen-highlight__card {
	flex: 1 1 calc(50% - var(--spacing-baseline-24) / 2);
	min-width: 0;
	background-color: var(--highlight-card-bg);
	color: var(--highlight-text);
	padding: var(--spacing-baseline-24);
	border-radius: var(--radius-large);
	font-family: var(--font-family-body), sans-serif;
	font-weight: var(--font-weight-regular);
	font-size: var(--font-size-body-large);
	line-height: var(--line-height-body-large);
}

.elcogen-highlight__card strong {
	font-family: var(--font-family-body), sans-serif;
	font-weight: var(--font-weight-bold);
	font-size: var(--font-size-body-large);
	line-height: var(--line-height-body-large);
}

/* Slogan Layout */
.elcogen-highlight--slogan .elcogen-highlight__slogan {
	max-width: 58.5rem;
	margin: 0 auto;
	text-align: center;
	font-family: var(--font-family-headings), sans-serif;
	font-weight: var(--font-weight-light);
	font-size: var(--font-size-h2);
	line-height: var(--line-height-h2);
	color: var(--highlight-heading);
}

/* Mobile Responsive Styles */
@media (max-width: 64rem) {
	.elcogen-highlight {
		padding: var(--spacing-section-vertical-mobile) 0;
	}

	.elcogen-highlight__heading {
		/* Typography now controlled by universal .elcogen-widget-title class in global CSS */
	}

	/* Facts Layout - Mobile */
	.elcogen-highlight--facts .elcogen-highlight__content {
		display: flex;
		flex-direction: column;
		gap: var(--spacing-baseline-24);
	}

	.elcogen-highlight--facts .elcogen-highlight__heading {
		max-width: 100%;
	}

	.elcogen-highlight__cards {
		gap: var(--spacing-baseline-24);
	}

	.elcogen-highlight__card {
		flex: 1 1 100%;
	}

	.elcogen-highlight__card {
		font-size: var(--font-size-body-large);
		line-height: var(--line-height-body-large);
	}

	.elcogen-highlight__card strong {
		font-size: var(--font-size-body-large);
		line-height: var(--line-height-body-large);
	}

	/* Slogan Layout - Mobile */
	.elcogen-highlight--slogan .elcogen-highlight__slogan {
		font-size: 2.75rem;
		line-height: 3.5rem;
		padding: 0 var(--spacing-baseline-04);
	}
}