/**
 * Heuro Button — SuperQ vertical link list styles.
 * Reproduced verbatim from the original [superq_links] snippet so output is identical.
 */

.sq-links-container {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 20px 0;
	max-width: 400px;
}

.sq-link-item {
	display: flex;
	align-items: center;
	gap: 15px;
}

/* Icon Styling */
.sq-icon-wrapper {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.sq-icon-wrapper img {
	width: 100%;
	height: auto;
	display: block;
}

.sq-icon-wrapper svg {
	width: 32px;
	height: 32px;
	fill: #000000;
	transition: fill 0.3s ease;
}

/* Text & Hover Styling */
.sq-action-link {
	font-family: inherit;
	font-size: 22px;
	font-weight: 700;
	color: #000000;
	text-decoration: none;
	padding: 6px 18px;
	border-radius: 50px;
	border: 2px solid transparent;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
	display: inline-block;
}

/* The Red Q Styling */
.sq-action-link .red-q {
	color: #e02b20;
	transition: color 0.3s ease;
}

/* Hover States */
.sq-link-item:hover .sq-action-link {
	background-color: #e02b20;
	color: #ffffff !important;
	border-color: #ffffff;
}

.sq-link-item:hover .red-q {
	color: #ffffff; /* Turn Q white so it's readable on red background */
}

.sq-link-item:hover .sq-icon-wrapper svg {
	fill: #e02b20; /* Subtle icon color change on hover */
}

@media screen and (max-width: 600px) {
	.sq-action-link {
		font-size: 18px;
	}
}