/*=====================================
  Riders Guide Responsive Enhancements
=====================================*/

/* Enhanced responsive for about-info section specifically for Riders Guide */
@media screen and (max-width: 991px) {
	.about-info {
		padding: 60px 0 80px 0;
	}

		.about-info .container {
			padding-left: 20px;
			padding-right: 20px;
		}
}

@media screen and (max-width: 767px) {
	.about-info {
		padding: 40px 0 60px 0;
	}

		.about-info .container {
			padding-left: 15px;
			padding-right: 15px;
		}
}

@media screen and (max-width: 599px) {
	.about-info {
		padding: 30px 0 50px 0;
	}

		.about-info .container {
			padding-left: 10px;
			padding-right: 10px;
		}
}

@media screen and (max-width: 479px) {
	.about-info {
		padding: 20px 0 40px 0;
	}

		.about-info .container {
			padding-left: 8px;
			padding-right: 8px;
		}
}

/* Ensure images are always responsive */
.responsive-img,
img.responsive-img {
	max-width: 100% !important;
	height: auto !important;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* Additional mobile touch improvements */
@media screen and (max-width: 767px) {
	/* Increase touch target size for mobile */
	a, button, .button {
		min-height: 44px;
		display: inline-block;
		padding: 10px 15px;
	}

	/* Improve readability on small screens */
	body {
		-webkit-text-size-adjust: 100%;
		-ms-text-size-adjust: 100%;
	}
}

/*=====================================
  Sub‑page Flex Layout & Sizing
=====================================*/
.about-info .flex-page {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 15px; /* Add padding for mobile */
}

/* Header block: logo + title stacked & centered */
.header-block {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	margin-bottom: 32px;
}

/* Logo image */
.logo-img {
	max-width: 300px;
	height: auto;
	margin-bottom: 16px;
}

/* Main title */
.heading-main {
	font-size: 40px; /* fixed pixel size */
	line-height: 1.2;
	margin: 0 0 24px;
	text-align: center;
}

/* Content area (everything below header) */
.content-block {
	width: 100%;
	max-width: 900px;
}

/* Lead paragraph */
.lead {
	display: block;
	width: 100%;
	font-size: 24px;
	line-height: 1.6;
	margin-bottom: 24px;
	text-align: left;
}

/* Section subtitles */
.heading-sub {
	font-size: 28px;
	line-height: 1.2;
	margin: 32px 0 12px;
	text-align: left;
}

/* Body text and lists */
.content-block p,
.content-block li {
	font-size: 16px;
	line-height: 1.6;
	margin-left: 30px;
}

/* Lists */
.content-block .list {
	padding-left: 24px;
	margin-bottom: 16px;
	list-style: disc
}

/* Responsive images */
.responsive-img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}

/* Base flag styling */
.flags .flag {
	list-style: none;
	margin-bottom: 12px;
	padding: 8px 12px;
	border-radius: 4px;
	font-size: 16px;
}

/* Green flag */
.flags .flag--green {
	background: #228B22; /* forest green */
	color: #ffffff !important; /* white text */
}

/* Yellow flags */
.flags .flag--yellow,
.flags .flag--yellow-waving {
	background: #FFD700; /* gold/yellow */
	color: #000000 !important; /* black text */
}

/* Black flag */
.flags .flag--black {
	background: #000000; /* black */
	color: #ffffff !important; /* white text */
}

/* Black & Yellow (invert) */
.flags .flag--black-yellow {
	background: #000000; /* black */
	color: #FFD700 !important; /* yellow text */
}

/* Red flag */
.flags .flag--red {
	background: #FF0000; /* red */
	color: #ffffff !important; /* white text */
}

/* Checkered flag – true checkerboard */
.flags .flag--checkered {
	background-color: #ffffff; /* white base */
	background-image: linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%, #000), linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%, #000);
	background-size: 20px 20px;
	background-position: 0 0, 10px 10px;
	color: #000000; /* black text */
	padding: 8px 12px;
	border-radius: 4px;
	font-size: 16px;
	margin-bottom: 12px;
	position: relative;
}

	.flags .flag--checkered .flag-text {
		position: relative; /* sit above the background */
		background: #fff; /* solid white for max contrast */
		border: 1px solid #000; /* thin black border */
		padding: 4px 8px; /* give it breathing room */
		border-radius: 2px; /* slight rounding to soften edges */
		display: inline-block; /* shrink‑wrap to text */
		font-size: 16px; /* match your other flags */
		line-height: 1.6;
	}

/*=====================================
  Mobile Responsive Design
=====================================*/

/* Tablet landscape and smaller */
@media screen and (max-width: 1024px) {
	.heading-main {
		font-size: 36px;
	}
	
	.lead {
		font-size: 22px;
	}
	
	.heading-sub {
		font-size: 26px;
	}
	
	.logo-img {
		max-width: 250px;
	}
}

/* Tablet portrait and smaller */
@media screen and (max-width: 768px) {
	.about-info .flex-page {
		padding: 0 20px;
	}
	
	.heading-main {
		font-size: 32px;
		margin-bottom: 20px;
	}
	
	.lead {
		font-size: 20px;
		margin-bottom: 20px;
	}
	
	.heading-sub {
		font-size: 24px;
		margin: 28px 0 10px;
	}
	
	.content-block p,
	.content-block li {
		font-size: 15px;
		margin-left: 20px;
	}
	
	.content-block .list {
		padding-left: 20px;
	}
	
	.logo-img {
		max-width: 200px;
		margin-bottom: 12px;
	}
	
	.header-block {
		margin-bottom: 24px;
	}
}

/* Mobile landscape */
@media screen and (max-width: 640px) {
	.about-info .flex-page {
		padding: 0 15px;
	}
	
	.heading-main {
		font-size: 28px;
		line-height: 1.1;
	}
	
	.lead {
		font-size: 18px;
		line-height: 1.5;
	}
	
	.heading-sub {
		font-size: 22px;
		margin: 24px 0 8px;
	}
	
	.content-block p,
	.content-block li {
		font-size: 14px;
		margin-left: 15px;
		line-height: 1.5;
	}
	
	.content-block .list {
		padding-left: 15px;
	}
	
	.logo-img {
		max-width: 180px;
	}
	
	.flags .flag {
		padding: 6px 10px;
		font-size: 14px;
		margin-bottom: 10px;
	}
	
	.flags .flag--checkered .flag-text {
		font-size: 14px;
		padding: 3px 6px;
	}
}

/* Mobile portrait */
@media screen and (max-width: 480px) {
	.about-info .flex-page {
		padding: 0 10px;
	}
	
	.heading-main {
		font-size: 24px;
		line-height: 1.1;
		margin-bottom: 16px;
	}
	
	.lead {
		font-size: 16px;
		line-height: 1.4;
		margin-bottom: 16px;
	}
	
	.heading-sub {
		font-size: 20px;
		margin: 20px 0 6px;
		line-height: 1.1;
	}
	
	.content-block p,
	.content-block li {
		font-size: 13px;
		margin-left: 10px;
		line-height: 1.4;
	}
	
	.content-block .list {
		padding-left: 10px;
		margin-bottom: 12px;
	}
	
	.logo-img {
		max-width: 160px;
		margin-bottom: 10px;
	}
	
	.header-block {
		margin-bottom: 20px;
	}
	
	.flags .flag {
		padding: 5px 8px;
		font-size: 13px;
		margin-bottom: 8px;
	}
	
	.flags .flag--checkered .flag-text {
		font-size: 13px;
		padding: 2px 4px;
	}
	
	/* Make text center aligned on very small screens for better readability */
	.text-center {
		text-align: center !important;
	}
}

/* Very small mobile devices */
@media screen and (max-width: 360px) {
	.about-info .flex-page {
		padding: 0 8px;
	}
	
	.heading-main {
		font-size: 22px;
		word-wrap: break-word;
	}
	
	.lead {
		font-size: 15px;
	}
	
	.heading-sub {
		font-size: 18px;
		word-wrap: break-word;
	}
	
	.content-block p,
	.content-block li {
		font-size: 12px;
		margin-left: 5px;
	}
	
	.content-block .list {
		padding-left: 5px;
	}
	
	.logo-img {
		max-width: 140px;
	}
	
	.flags .flag {
		padding: 4px 6px;
		font-size: 12px;
	}
	
	.flags .flag--checkered .flag-text {
		font-size: 12px;
		padding: 2px 3px;
	}
}