/* =========================
   CCMA SVG block
========================= */

.ccma-svg-block {
	position: relative;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 0;

	max-width: 100%;
	vertical-align: top;
	box-sizing: border-box;

	color: inherit;
	text-align: center;
	text-decoration: none;

	overflow: visible;
}

.ccma-svg-block,
.ccma-svg-block * {
	box-sizing: border-box;
}

.ccma-svg-block.ccma-svg-clickable-block {
	cursor: pointer;
}

.ccma-svg-block.ccma-svg-clickable-block:focus {
	outline: none;
}

.ccma-svg-block.ccma-svg-clickable-block:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

/* =========================
   Label arc
========================= */

.ccma-svg-block.ccma-svg-has-label {
	padding-top: 0;
}

.ccma-svg-block .ccma-svg-link-label {
	z-index: 5;

	display: block;
	width: var(--ccma-svg-label-width, 180px);
	height: 100%;

	margin: 0 0 -2.4em 0;

	color: var(--ccma-svg-link-label-color, var(--ccma-svg-bg-color, currentColor));

	pointer-events: none;
	overflow: visible;

	transform-origin: center bottom;
	will-change: transform;
}

.ccma-svg-block .ccma-svg-link-label-arc {
	display: block;
	width: 100%;
	height: 120%;
	overflow: visible;
}

.ccma-svg-block .ccma-svg-link-label-text {
	fill: currentColor;

	font-family: var(--wp--preset--font-family--sagace, inherit);
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	letter-spacing: -0.125em;

	white-space: nowrap;
}

.ccma-svg-block .ccma-svg-link-label-text textPath {
	dominant-baseline: auto;
}

/* =========================
   Geometry
========================= */

.ccma-svg-block .ccma-svg-inner {
	position: relative;
	z-index: 1;

	display: grid;
	place-items: center;

	width: var(--ccma-svg-bg-width, calc(var(--ccma-svg-icon-width, 96px) * 1.32));
	height: var(--ccma-svg-bg-height, calc(var(--ccma-svg-icon-height, var(--ccma-svg-icon-width, 96px)) * 1.32));

	min-width: var(--ccma-svg-bg-width, calc(var(--ccma-svg-icon-width, 96px) * 1.32));
	min-height: var(--ccma-svg-bg-height, calc(var(--ccma-svg-icon-height, var(--ccma-svg-icon-width, 96px)) * 1.32));

	padding: 0;
	line-height: 0;

	overflow: visible;
}

/* Without background, the wrapper equals the icon size */
.ccma-svg-block:not(.ccma-svg-has-bg) .ccma-svg-inner {
	width: var(--ccma-svg-icon-width, 96px);
	height: var(--ccma-svg-icon-height, var(--ccma-svg-icon-width, 96px));

	min-width: 0;
	min-height: 0;
}

/* =========================
   Background blob
========================= */

.ccma-svg-block .ccma-svg-bg-shape {
	position: absolute;
	inset: 0;
	z-index: 1;

	display: grid;
	place-items: center;

	width: 100%;
	height: 100%;

	color: var(--ccma-svg-bg-color, transparent);

	pointer-events: none;
	overflow: visible;

	transform-origin: center center;
	will-change: transform;
}

.ccma-svg-block .ccma-svg-bg-shape svg {
	display: block;

	width: 95%;
	height: 100%;

	max-width: none;
	max-height: none;

	color: inherit;
	fill: currentColor;

	overflow: visible;

	transform-origin: center center;
	will-change: transform;
}

.ccma-svg-block .ccma-svg-bg-shape svg [fill]:not([fill="none"]) {
	fill: currentColor;
}

/* =========================
   Inner pictogram stage
========================= */

.ccma-svg-block .ccma-svg-stage {
	position: relative;
	z-index: 2;

	display: grid;
	place-items: center;

	width: var(--ccma-svg-stage-width, 78%);
	height: var(--ccma-svg-stage-height, 78%);

	line-height: 0;
	color: var(--ccma-svg-line-color, currentColor);
	overflow: visible;

	transform: scale(1);
	transform-origin: center;
	will-change: transform;

	transition: transform 720ms cubic-bezier(0.16, 1.45, 0.32, 1);
}

.ccma-svg-block .ccma-svg-bg-shape svg {
	transition: color 720ms cubic-bezier(0.16, 1.45, 0.32, 1);
}

.ccma-svg-block .ccma-svg-link-label-text {
	transition: color 720ms cubic-bezier(0.16, 1.45, 0.32, 1);
}

.ccma-svg-block:hover .ccma-svg-bg-shape svg {
	color: var(--wp--preset--color--vert-900, #1b3c1a);
}
.ccma-svg-block:hover .ccma-svg-link-label-text {
	color: var(--wp--preset--color--vert-900, #1b3c1a);
}

/* Without background, the SVG stage takes the full icon size */
.ccma-svg-block:not(.ccma-svg-has-bg) .ccma-svg-stage {
	width: 100%;
	height: 100%;
}

/* The actual SVG asset */
.ccma-svg-block .ccma-svg-asset,
.ccma-svg-block .ccma-svg-stage > svg {
	display: block;

	width: 100%;
	height: 100%;

	max-width: 100%;
	max-height: 100%;

	color: inherit;
	fill: currentColor;

	overflow: visible !important;
}

/* Prevent browser default baseline / whitespace issues */
.ccma-svg-block svg {
	vertical-align: middle;
}

/* =========================
   Theme color forcing
========================= */

.ccma-svg-block.ccma-svg-theme-colors .ccma-svg-stage .ccma-svg-asset,
.ccma-svg-block.ccma-svg-theme-colors .ccma-svg-stage .ccma-svg-asset * {
	color: inherit;
}

.ccma-svg-block.ccma-svg-theme-colors .ccma-svg-stage .ccma-svg-asset [fill]:not([fill="none"]) {
	fill: currentColor !important;
}

.ccma-svg-block.ccma-svg-theme-colors .ccma-svg-stage .ccma-svg-asset [stroke]:not([stroke="none"]) {
	stroke: currentColor !important;
}

.ccma-svg-block.ccma-svg-theme-colors .ccma-svg-stage .ccma-svg-asset path:not([fill="none"]) {
	fill: currentColor !important;
}

.ccma-svg-block.ccma-svg-theme-colors .ccma-svg-stage .ccma-svg-asset path[stroke]:not([stroke="none"]) {
	stroke: currentColor !important;
}

/* =========================
   Hover state transitions
========================= */

/* Only the background blob transitions */
.ccma-svg-block .ccma-svg-bg-shape svg {
	transform: scale(1) rotate(0deg) skew(0deg, 0deg);
	transform-origin: 54% 48%;
	transition: transform 720ms cubic-bezier(0.16, 1.45, 0.32, 1);
	will-change: transform;
}

/* Hover/focus state: only the blob is deformed */
.ccma-svg-block.ccma-svg-clickable-block:hover .ccma-svg-bg-shape svg,
.ccma-svg-block.ccma-svg-clickable-block:focus-visible .ccma-svg-bg-shape svg {
	transform: scale(1) rotate(-7deg) skew(-14deg, 12deg);
}

/* =========================
   Reduced motion
========================= */

/* =========================
   Reduced motion
========================= */

@media (prefers-reduced-motion: reduce) {
	.ccma-svg-block .ccma-svg-bg-shape svg {
		transition: none;
	}
}

.ccma-svg-block,
.ccma-svg-inner {
	position: relative;
	overflow: visible;
}

.ccma-svg-inner {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.ccma-svg-link-label {
	position: absolute;
	z-index: 3;

	top: 35%;
	left: 50%;

	width: var(--ccma-svg-label-width);
	height: var(--ccma-svg-label-height);

	transform: translate(-50%, -50%);

	display: block;

	overflow: visible;
	pointer-events: none;
}

.ccma-page-children-block .ccma-svg-link-label {
	top: 40%;

}

.ccma-svg-link-label-arc {
	display: block;

	width: 100%;
	height: 100%;

	overflow: visible;
}

.ccma-svg-link-label-text {
	fill: var(--ccma-svg-link-label-color);

	font-family: var(--wp--preset--font-family--sagace);
	font-size: 16px;
	font-weight: 400;

	letter-spacing: 0.2em;
}

.ccma-svg-bg-shape {
	position: relative;
	z-index: 1;
}

.ccma-svg-stage {
	position: relative;
	z-index: 2;
}