/**
 * Icon Link block — frontend styles
 * blocks/icon-link/style.css
 */

.wp-block-momentive-icon-link {
	--wp--custom--spacing--gap: 0;
	width: 100%;
/*	display: inline-block; /* Shrink-wrap by default; a grid/flex parent controls layout. */
}

.is-style-pill.wp-block-momentive-icon-link {
	display: inline-block;
	width: fit-content;
	background: #fff;
	padding: 0;
	overflow: hidden;
	vertical-align: top;
	margin-bottom: 1rem;
}

.is-style-pill.wp-block-momentive-icon-link + .is-style-pill.wp-block-momentive-icon-link {
	margin-left: .75rem !important;
}

.is-style-pill.wp-block-momentive-icon-link a {
	display: flex;
	align-items: center;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--text-color);
	padding: .375rem .75rem;
}

.is-style-pill.wp-block-momentive-icon-link a:hover {
	background: color-mix(in oklch, var(--page-accent-color) 12%, white);
}

.is-style-pill.wp-block-momentive-icon-link .icon-link__icon {
	color: var(--accent-color);
}

/* -----------------------------------------------------------------------
   Link element
   ----------------------------------------------------------------------- */
/*:root {
	--icon-link-accent: var(--wp--preset--color--dark-purple, currentColor);
}
*/

.icon-link {
	position: relative;
	overflow: hidden;
	display: inline-flex;
	align-items: flex-start;
	gap: var(--icon-link-gap, 0.5rem);
	text-decoration: none;
	color: inherit;
	transition: background-color 0.5s ease;
}

/* Size variants — controls the icon wrapper dimensions */
.icon-link__icon {
	width: 1.5rem;
	height: 1.5rem;
	flex: 0 0 1.5rem;
}

.icon-link--large {
	align-items: center;
}

.icon-link--large:has(.icon-link__tagline) {
	align-items: start;
}

.icon-link--large .icon-link__icon {
	width: 2.25rem;
	height: 2.25rem;
	flex: 0 0 2.25rem;
}

/* -----------------------------------------------------------------------
   Icon
   ----------------------------------------------------------------------- */

.icon-link__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color 0.2s ease;
	position: relative;
	z-index: 1;
}

.icon-link__icon svg {
	width: 100%;
	height: 100%;
	color: var(--icon-link-accent);

	/* Fill inherits from currentColor so we only need to change color. */
	fill: currentColor;
	transition: fill 0.2s ease;
/*	border-radius: .5rem;*/
}

.squircles .icon-link__icon {
	overflow: hidden;
	border-radius: .5rem;
}

@supports (corner-shape: squircle) {
	.squircles .icon-link__icon {
		overflow: hidden;
		border-radius: 1.5rem;
		corner-shape: squircle;
	}
}

/* -----------------------------------------------------------------------
   Text stack
   ----------------------------------------------------------------------- */

.icon-link__text {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	position: relative;
	z-index: 1;
}

.icon-link__title {
	font-weight: var(--wp--custom--font-weight--semibold, 600);
	transition: color 0.2s ease;
}

.icon-link__tagline {
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	color: var(--wp--preset--color--gray, #666);
	font-weight: normal;
	transition: color 0.2s ease;
}

.is-bold .icon-link__tagline {
	color: var(--text-color);
	font-weight: 600;
}

.icon-link.icon-link--small .icon-link__icon {
	top: -0.15rem;
}

/* -----------------------------------------------------------------------
   Hover / focus state
   ----------------------------------------------------------------------- */

.icon-link:hover,
.icon-link:focus-visible {
	background-color: color-mix(in oklab, var(--icon-link-accent) 20%, white);
}

.icon-link:hover .icon-link__icon svg,
.icon-link:focus-visible .icon-link__icon svg {
	color: var(--icon-link-accent);
}

/* don't use accent colors, because some of the colors are too light for accessibility */
.icon-link:hover .icon-link__title,
.icon-link:focus-visible .icon-link__title {
	color: var(--dark-color);
}

.iq.menu-sidebar {
	.icon-link:hover,
	.icon-link:focus-visible {
		background-color: var(--extralight-accent-color);
	}
}

/* -----------------------------------------------------------------------
   Hover corner arc
   ----------------------------------------------------------------------- */

.icon-link::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='80' viewBox='0 0 128 80' fill='none'%3E%3Ccircle cx='64' cy='16' r='64' fill='url(%23p)' fill-opacity='0.5'/%3E%3Cdefs%3E%3ClinearGradient id='p' x1='143.056' y1='-48' x2='9.059' y2='-34.58' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='white'/%3E%3Cstop offset='1' stop-color='white' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
	background-position: center right;
	background-repeat: no-repeat;
	background-size: contain;
	pointer-events: none;
}


@media (prefers-reduced-motion: reduce) {
	.icon-link::after {
		transition: none;
	}
}

/* Tagline stays muted on hover — only title and icon pick up the accent. */