/* Mobile First: ≤480px */
@media only screen and (max-width: 480px) {
	body > section#classes div#bc button.cal-select {
		font-size: 12px;
	}

	/* Home Page Carousel - Mobile */
	body > section#slides {
		height: 300px;
	}

	body > section#slides ul li section#content {
		font-size: 20pt;
	}

	body > section#slides ul li section#content a {
		padding: 10px 20px;
		font-size: 12pt;
	}
}

/* Non-desktop: ≤1024px */
@media only screen and (max-width: 1024px) {
	header section#container {
		padding: 0 15px;
	}

	.hamburger {
		display: block;
	}

	header section#container nav {
		position: absolute;
		top: var(--header-height);
		right: 0;
		width: 250px;
		background: #fff;
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.3s ease-out;
		padding: 0;
		box-shadow: 0 2px 5px rgba(0,0,0,0.1);
		z-index: 999;
	}

	header section#container nav.open {
		max-height: 500px; /* Adjust based on content height */
		padding: 15px;
	}

	header section#container nav ul {
		flex-direction: column;
		width: 100%;
	}

	header section#container nav ul li {
		float: none;
		margin: 0;
		width: 100%;
	}

	header section#container nav ul li a {
		display: block;
		width: 100%;
		min-height: 44px;
		padding: 15px;
		text-align: left;
		border-bottom: 1px solid #eee;
		box-sizing: border-box;
	}

	body > section#container {
		padding: 0 15px;
		box-sizing: border-box;
		width: 100%;
	}

	footer section#container {
		flex-direction: column;
		padding-top: 30px;
		padding-bottom: 30px;
	}

	footer section#container section#left,
	footer section#container section#right {
		flex: 1 1 100%;
		text-align: center;
		width: 100%;
	}

	footer section#container section#right ul {
		text-align: center;
		padding: 0;
	}

	footer section#container section#left {
		padding-bottom: 20px;
	}

	/* Info Hub Grid - 1 Column */
	body > section#info div#grid {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
	}

	body > section#info div#grid div.row1 {
		grid-column-end: auto;
	}

	/* Detail Pages */
	body > section#info-page table {
		display: block;
		overflow-x: auto;
		width: 100%;
	}

	img.float-left {
		float: none;
		display: block;
		margin: 10px auto;
	}

	/* Ensure images don't overflow */
	body > section#info-page img {
		max-width: 100%;
		height: auto;
	}

	/* Child Safeguarding Page */
	body > section#child {
		width: 100%;
		max-width: 100%;
		padding: 10px;
		box-sizing: border-box;
	}

	body > section#child table {
		width: 100%;
		display: block;
		overflow-x: auto;
	}

	.table-scroll {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		width: 100%;
	}

	body > section#classes table.schedule-table {
		min-width: 0;
		font-size: 12px;
	}

	body > section#classes table.schedule-table th,
	body > section#classes table.schedule-table td {
		padding: 4px 2px;
		word-wrap: break-word;
	}

	/* Home Page About Section - Stacking */
	body > section#about .fb-page,
	body > section#about .igwrapper,
	body > section#about iframe,
	body > section#about .leftFloat {
		float: none;
		width: 100%;
		max-width: 100%;
		margin: 15px 0;
		display: block;
	}
	
	body > section#about .igwrapper {
		height: auto;
		min-height: 500px;
	}
}

/* Tablet: 481px - 768px */
@media only screen and (min-width: 481px) and (max-width: 768px) {
	/* Home Page Carousel - Tablet */
	body > section#slides {
		height: 400px;
	}

	body > section#slides ul li section#content {
		font-size: 28pt;
	}
	
	body > section#slides ul li section#content a {
		padding: 15px 30px;
		font-size: 14pt;
	}
}

/* Tablet Landscape (769px - 1024px) - 2 Column Grid */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
	body > section#info div#grid {
		grid-template-columns: repeat(2, 1fr);
	}

	body > section#info div#grid div.row1 {
		grid-column-end: 3;
	}

	/* Home Page Carousel - Small Desktop/Tablet Landscape */
	body > section#slides {
		height: 500px;
	}

	body > section#slides ul li section#content {
		font-size: 40pt;
	}
}

/* Desktop: 769px - 1200px */
@media only screen and (min-width: 769px) and (max-width: 1200px) {
	/* Desktop-specific styles */
}

/* Large Desktop: >1200px */
@media only screen and (min-width: 1201px) {
	/* Large desktop-specific styles */
}