/**
 * SDC Theme Icon Utilities
 *
 * Icon-related CSS primitives including emphasized heading
 *
 * @package SDC_Theme
 * @since 0.1.0
 */

/* ========================================
   EMPHASIZED HEADING
   H2 with sound wave icon
   ======================================== */

.heading-emphasized {
	display: flex;
	align-items: center;
	gap: var(--heading-icon-gap);
	font-family: var(--font-primary);
	font-size: var(--text-h2);
	font-weight: var(--font-weight-bold);
	font-style: var(--font-style-normal);
	line-height: var(--leading-normal);
	letter-spacing: var(--tracking-normal);
	color: var(--color-accent);
}

.heading-emphasized::before {
	content: "";
	display: inline-block;
	width: 56px;
	height: 44px;
	background-color: var(--color-accent);
	mask-image: url("../images/sound-wave-icon.svg");
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
	-webkit-mask-image: url("../images/sound-wave-icon.svg");
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	flex-shrink: 0;
}

/* Responsive emphasized heading */
@media (max-width: 1024px) {
	.heading-emphasized {
		font-size: clamp(32px, 5vw, var(--text-h2));
	}
}

@media (max-width: 768px) {
	.heading-emphasized {
		font-size: clamp(28px, 8vw, 32px);
		gap: var(--space-md);
	}

	.heading-emphasized::before {
		width: 40px;
		height: 32px;
	}
}

@media (max-width: 480px) {
	.heading-emphasized {
		font-size: clamp(24px, 7vw, 28px);
	}

	.heading-emphasized::before {
		width: 32px;
		height: 25px;
	}
}

/* ========================================
   ICON UTILITY CLASSES
   ======================================== */

.icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	background-color: currentColor;
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

.icon-sm {
	width: 16px;
	height: 16px;
}

.icon-md {
	width: 24px;
	height: 24px;
}

.icon-lg {
	width: 32px;
	height: 32px;
}

/* Icon color utilities */
.icon-primary {
	background-color: var(--color-primary);
}

.icon-secondary {
	background-color: var(--color-secondary);
}

.icon-accent {
	background-color: var(--color-accent);
}

.icon-white {
	background-color: var(--color-white);
}

.icon-black {
	background-color: var(--color-black);
}