/* Apartment Turnover Checklist — 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-atc-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 frame — constrains max width and centres the SVG */
.sld-atc-frame {
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
}

/* SVG fills frame width and scales height proportionally via viewBox */
.sld-atc-infographic {
	width: 100%;
	height: auto;
	display: block;
	overflow: visible;
}

/* ---- Timeline elements ---- */
.sld-atc-infographic .baseline {
	stroke: #323232;
	stroke-width: 2;
}

.sld-atc-infographic .ring {
	fill: #ffffff;
	stroke: #323232;
	stroke-width: 2.5;
	transition: fill 0.18s ease, stroke 0.18s ease;
}

.sld-atc-infographic .icon {
	color: #323232;
	transition: color 0.18s ease;
}

.sld-atc-infographic .icon path,
.sld-atc-infographic .icon line {
	fill: none;
	stroke: currentColor;
	stroke-width: 3.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.sld-atc-infographic .icon circle.ic-stroke {
	fill: none;
	stroke: currentColor;
	stroke-width: 3.4;
}

.sld-atc-infographic .icon circle.ic-fill {
	fill: currentColor;
	stroke: none;
}

.sld-atc-infographic .dot {
	fill: #323232;
	transition: r 0.18s ease, fill 0.18s ease;
}

.sld-atc-infographic .steplabel {
	font-family: 'AkkuratProLight', system-ui, sans-serif;
	font-weight: 300;
	font-size: 20px;
	fill: #323232;
	transition: font-weight 0.18s ease;
}

/* ---- Tooltip ---- */
.sld-atc-infographic .tip {
	opacity: 0;
	transition: opacity 0.18s ease;
	pointer-events: none;
}

.sld-atc-infographic .tip-box {
	fill: #eb146e;
}

.sld-atc-infographic .tip-text {
	font-family: 'AkkuratProBold', system-ui, sans-serif;
	font-weight: 700;
	font-size: 17px;
	fill: #ffffff;
	text-anchor: middle;
}

/* ---- Hover state ---- */
.sld-atc-infographic .hit {
	fill: transparent;
	cursor: pointer;
}

.sld-atc-infographic .step:hover .ring {
	fill: #eb146e;
	stroke: #eb146e;
}

.sld-atc-infographic .step:hover .icon {
	color: #ffffff;
}

.sld-atc-infographic .step:hover .dot {
	r: 11px;
	fill: #eb146e;
}

.sld-atc-infographic .step:hover .steplabel {
	font-family: 'AkkuratProBold', system-ui, sans-serif;
	font-weight: 700;
}

.sld-atc-infographic .step:hover .tip {
	opacity: 1;
}