/* PPM Infographic — custom typefaces */
@font-face {
	font-family: 'AkkuratProLight';
	src: url('assets/fonts/akkurat-light.woff') format('woff'),
	     url('assets/fonts/akkurat-light.ttf')  format('truetype');
	font-weight: 300 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'AkkuratProBold';
	src: url('assets/fonts/akkurat-bold.woff2') format('woff2');
	font-weight: 600 700;
	font-style: normal;
	font-display: swap;
}

/* Optional heading above diagram */
.sld-ppm-heading {
	font-family: 'AkkuratProBold', system-ui, sans-serif;
	font-size: 1.5rem;
	font-weight: 700;
	color: #323232;
	text-align: center;
	margin: 0 0 1.25rem;
	padding: 0;
	border: none;
	background: none;
}

/* Outer wrapper — full container width, height set by JS.
   aspect-ratio provides a reasonable no-JS placeholder height. */
.sld-ppm-infographic {
	width: 100%;
	position: relative;
	overflow: hidden;
	aspect-ratio: 1120 / 900;
	background: #ffffff;
}

/* Fixed-size canvas; scaled via transform by JS. */
.sld-ppm-stage {
	position: absolute;
	top: 0;
	left: 0;
	width: 1120px;
	height: 900px;
	transform-origin: top left;
}

/* SVG wire layer */
.sld-ppm-wires {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
}

.sld-ppm-wires line {
	transition: stroke 0.16s ease, stroke-width 0.16s ease;
}

.sld-ppm-wires line.hot {
	stroke: #eb146e;
	stroke-width: 2.2px;
}

/* Center question circle */
.sld-ppm-center {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 222px;
	height: 222px;
	border-radius: 50%;
	background: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.sld-ppm-center p {
	font-family: 'AkkuratProLight', system-ui, sans-serif;
	font-weight: 300;
	font-size: 21px;
	line-height: 1.34;
	color: #323232;
	max-width: 174px;
	margin: 0;
	padding: 0;
}

/* Individual PPM section nodes */
.sld-ppm-node {
	position: absolute;
	transform: translate(-50%, -50%);
	width: 172px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
	cursor: default;
}

.sld-ppm-node img {
	height: 52px;
	width: auto;
	display: block;
	transition: transform 0.16s ease;
	flex-shrink: 0;
}

.sld-ppm-node span {
	font-family: 'AkkuratProLight', system-ui, sans-serif;
	font-size: 18px;
	font-weight: 300;
	color: #323232;
	line-height: 1.3;
	margin: 0;
}

/* Hover state */
.sld-ppm-node.hot img {
	transform: scale(1.1);
}

.sld-ppm-node.hot span {
	font-family: 'AkkuratProBold', system-ui, sans-serif;
	font-weight: 600;
}

/* Responsive: swap diagram ↔ image at 767px */
.sld-ppm-mobile-image {
	display: none;
	width: 100%;
	height: auto;
}

div.sld-ppm-node {
    margin-top: -25px !important;
}
div#sld-ppm-node-3 {
    padding-left: 60px;
}
div#sld-ppm-node-14 {
    padding-right: 45px;
}
div#sld-ppm-node-4 {
    padding-left: 40px;
}
@media (max-width: 766px) {
	.sld-ppm-mobile-image {
		display: block;
		width: 100%;
	}
	.sld-infographic{
		padding-bottom: 40px;
	}
	.sld-ppm-infographic {
		display: none;
	}
}