/* 2026-06-26 v1.3
 * - Added a hard dark-blue left shadow to the mobile sticky Y-axis mask.
 *
 * 2026-06-26 v1.2
 * - Shifted the mobile sticky Y-axis left to align with the chart edge.
 *
 * 2026-06-26 v1.1
 * - Added mobile sticky Y-axis overlay for horizontally scrollable charts.
 *
 * 2026-06-26 v1.0
 * - Added responsive layout rules for the watertemperatuur page.
 */

.content-wrapper {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.watertemp-page {
	padding: 120px 40px;
	margin: auto;
	max-width: 980px;
	width: 100vw;
	display: flex;
	flex-direction: column;
	gap: 10px;
	box-sizing: border-box;
}

.watertemp-current {
	align-items: center;
}

.watertemp-current-badge {
	font-size: 34px;
	font-weight: 700;
	line-height: 1;
	display: inline-block;
	padding: 6px 10px;
	border-radius: 10px;
	border: 1px solid #fc0;
	color: #fc0;
	white-space: nowrap;
}

.watertemp-chart-frame {
	min-height: 370px;
	overflow-x: visible;
	position: relative;
}

.watertemp-chart {
	width: 100%;
	height: 360px;
}

.watertemp-sticky-y-axis {
	display: none;
}

@media (max-width: 700px) {
	.watertemp-page {
		padding: 120px 20px 20px;
	}

	.watertemp-current-label {
		display: none;
	}

	.watertemp-chart-frame {
		width: 100vw;
		margin-left: -20px;
		padding-left: 20px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		box-sizing: border-box;
	}

	.watertemp-sticky-y-axis {
		display: block;
		position: sticky;
		left: -20px;
		top: 0;
		z-index: 2;
		width: 34px;
		height: 360px;
		margin-bottom: -360px;
		pointer-events: none;
		background: linear-gradient(90deg, var(--color_darkest, #00002e) 0%, rgba(0,0,46,0.75) 70%, rgba(0,0,46,0) 100%);
		box-shadow: -20px 0 0 0 var(--color_darkest, #00002e);
	}

	.watertemp-sticky-y-axis span {
		position: absolute;
		right: 4px;
		transform: translateY(-50%);
		font-size: 11px;
		line-height: 1;
		color: rgba(255,255,255,0.62);
	}

	.watertemp-chart {
		width: 200vw;
		max-width: none;
	}
}

@media (max-width: 379px) {
	.watertemp-current-unit {
		display: none;
	}
}