@charset "utf-8";

/* Base Layout */
body {
	background-color: #06051e;
	font-family: Roboto, Helvetica, Tahoma, sans-serif;
	margin: 0;
	padding: 0;
}

/* Top bar logo */
.topcontentbar {
	display: block;
	padding: 20px;
}

#openlogo {
	width: 200px;
	padding-bottom: 20px;
}

/* Main container centered */
.container {
	margin: 0 auto;
	padding: 10px;
	box-sizing: border-box;
}

/* Wrapper that holds the image and text blocks */
.image-wrapper {
	position: relative;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}

/* Background image fills wrapper width */
#solargem {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0;
}

/* Overlay text blocks positioned absolutely on image */
.text-blocks {
	bottom: 10%;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	padding: 0 20px;
	box-sizing: border-box;
	pointer-events: none; /* let clicks pass through except on children */
}

/* Individual boxes */
.text-item {
	background: rgba(255, 255, 255, 1);
	color: #191b3b;
	margin: 10px;
	padding: 20px;
	border-radius: 8px;
	box-shadow: 0 0 10px rgba(0,0,0,0.2);
	width: 260px;
	flex: 0 0 auto;
	pointer-events: auto;
	box-sizing: border-box;
}

/* Bottom logos on blue background */
.bottomcontentbar {
	display: block;
	width: 100%;
	background: transparent;
}

#aggreko,
#emmisions {
	width: 200px;
	max-width: 80%;
	height: auto;
	display: block;
	margin: 0 20px 10px auto;
	float: right;
	clear: both;
}

#Chart1, #Chart2, #Chart3, #Chart4, #Chart5 {
  margin: 0 auto;
  display: block;
  max-width: 200px; /* or whatever width you set in options */
}

/* ------------------ Responsive Mobile Layout ------------------ */
@media (max-width: 768px) {
	.container {
		padding: 0 10px;
		max-width: 100vw;
	}

	.image-wrapper {
		position: static;
		max-width: 100%;
	}

	#solargem {
		width: 100%;
		max-width: 100vw;
		min-width: auto;
	}

	.text-blocks {
		position: static;
		flex-direction: column;
		align-items: stretch;
		padding: 10px 0;
	}

	.text-item {
		width: 100%;
		margin: 10px 0;
		padding: 15px;
		box-sizing: border-box;
	}

	#openlogo,
	#aggreko,
	#emmisions {
		width: auto;
		max-width: 50%;
		height: auto;
		display: block;
		margin: 10px auto;
		float: none;
	}

	#aggreko,
	#emmisions {
		background: none;
	}
}