.af-map { 
	width:100%;
	height:400px;
}

/* Container for the InfoWindow */
.map-info-window {
	font-family: "Jost", sans-serif;
	font-size: 14px;
	line-height: 1.5;
	width: 250px; /* prevent giant popups */
}

	/* Style the heading */
	.map-info-window h2 {
		font-size: 1.2em;
		font-weight: 400;
		margin-bottom:10px;
		margin-top:0px;
		color: #333;
		text-align: left;
	}

	/* Style the image inside the overlay */
	.map-info-window img {
		display: block;
		max-width: 100%;
		margin: 0 auto 0.5em auto;
		border-radius: 4px; /* optional, softens corners */
	}

	/* Style the text and links */
	.map-info-window a {
		color: #007BFF; /* match your site theme */
		text-decoration: none;
	}

		.map-info-window a:hover {
			text-decoration: underline;
		}

/*-----------------------
	SELECTABLE MAP
---------------------------*/

/* Container for the map */
.selectable-map-container {
	position: relative;
	width: 100%;
	max-width: 900px; /* you can adjust or remove */
	margin: 0 auto;
	touch-action: none; /* prevents accidental zooming on mobile */
	aspect-ratio: 1200 / 849;
}

/* Main canvas for the map */
.map-canvas {
	width: 100%;
	height: 100%;
	display: block;
	cursor: pointer;
	/* Prevents blurry rendering when scaled */
	image-rendering: optimizeQuality;
	image-rendering: -webkit-optimize-contrast;
	user-select: none;
}

/* Optional: subtle fade transition for the bulge highlight */
.map-canvas {
	transition: filter 0.15s ease-out;
}

	/* Optional: pointer cursor when hovering interactive areas */
	.map-canvas:hover {
		cursor: pointer;
	}

/* Optional: style for tooltip labels (if added later) */
.map-tooltip {
	position: absolute;
	background: rgba(0,0,0,0.75);
	padding: 6px 10px;
	color: #fff;
	border-radius: 4px;
	font-size: 13px;
	pointer-events: none;
	white-space: nowrap;
	transform: translate(-50%, -120%);
	z-index: 1000;
}

.programme-caption { 
	background: #f8f8f8;
	padding:20px;
	border-radius:10px;
	margin-bottom:20px;
}

.programme-caption h4 {
	margin-top:0px;
	margin-bottom:10px;
}