/* =============================================================
   WCAG 1.4.10 Reflow — Responsive overrides for index.htm
   Breakpoints:
     ≥1080px  → desktop (original layout, no changes)
     600–1079px → tablet
     ≤599px   → single-column mobile reflow
   ============================================================= */

/* ── Shared fluid base (applied at all sizes below desktop) ── */
@media screen and (max-width: 1079px) {

	/* Remove all fixed pixel widths on layout containers */
	#header,
	#main,
	#content,
	#footer {
		width: 100%;
		max-width: 1050px;
		box-sizing: border-box;
	}

	#footer {
		width: 100%;
		max-width: none;
	}

	.subcontent1,
	.subcontent2,
	.subcontent3,
	.subcontent4,
	.subcontent5,
	.subcontent6,
	.subcontent7,
	.subcontent8,
	.subcontent9 {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		height: auto; /* remove fixed heights */
	}

	/* Header: stack logo + cam thumbs vertically */
	#header {
		height: auto;
		min-height: 80px;
		padding: 10px;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: 10px;
	}

	.logo {
		width: auto;
		float: none;
		margin: 0;
		flex-shrink: 0;
	}

	.logo img {
		height: 70px;
		width: auto;
	}

	.logo1 {
		width: auto;
		float: none;
		margin: 0;
		flex-shrink: 0;
	}

	.logo1 img.photo1 {
		height: 70px;
		width: auto;
	}

	#header h1 {
		width: 100%;
		font-size: 18pt;
		margin: 4px 0 0;
		text-align: center;
	}

	#header h2 {
		width: 100%;
		font-size: 11pt;
		text-align: center;
		margin: 0 0 4px;
	}

	/* Content area: remove floats, stack vertically */
	#content {
		float: none;
		width: 100%;
	}

	.subcontent1 {
		display: flex;
		flex-direction: column;
	}

	/* Nav sidebar: full-width across the top of content */
	#nav {
		width: 100%;
		height: auto;
		float: none;
		margin: 0;
		background-color: transparent;
		text-align: center;
	}

	.framed {
		border-width: 1px;
		border-radius: 0 0 10px 10px;
		margin: 0;
		padding: 8px 0 4px;
	}

	/* Weather counters: wrap horizontally */
	.nav-section-heading {
		font-size: 9pt;
	}

	.weather_counter_div {
		display: inline-block;
		width: auto;
		min-width: 70px;
		margin: 4px 6px;
		vertical-align: top;
	}

	.weather_counter {
		font-size: 16pt;
	}

	/* Main content area */
	.home {
		width: 100%;
		float: none;
		margin: 0;
		box-sizing: border-box;
	}

	/* Charts: stack vertically at all non-desktop widths to prevent overlap */
	.home_chart {
		display: block;
		width: 100%;
		height: auto;
		min-height: 0;
		margin-bottom: 16px;
		box-sizing: border-box;
	}

	/* Make canvases scale fluidly within their container */
	.home_chart canvas {
		max-width: 100%;
		height: auto !important;
		display: block;
		margin: 0 auto;
	}

	/* Camera images: fluid */
	.subcontent9 img.photograph,
	.subcontent9 img[width],
	img[width="1048"] {
		width: 100% !important;
		height: auto !important;
		max-width: 100%;
	}

	/* Video: fluid */
	.desktop-video {
		width: 100%;
		max-width: 100%;
	}

	/* Cumulus iframe: fluid */
	.subcontent4 iframe,
	iframe[width="1048"] {
		width: 100% !important;
		max-width: 100%;
		height: 750px;
	}

	/* Tide chart image: fluid */
	img.photograph[width="960"],
	.subcontent7 img {
		width: 100% !important;
		height: auto !important;
	}

	/* Menus: fluid */
	.menu1,
	.menu3 {
		width: 90%;
		max-width: 500px;
	}

	.menu4 {
		width: 95%;
		max-width: 720px;
	}

	/* Links bar */
	.menumini {
		font-size: 9pt;
	}
}

/* ── Tablet: 600–1079px ── */
@media screen and (min-width: 600px) and (max-width: 1079px) {

	#header h1 { font-size: 20pt; }

	.weather_counter_div {
		min-width: 80px;
	}

	.weather_counter {
		font-size: 18pt;
	}
}

/* ── Hide Cumulus weather iframe at narrow viewports ─────────────────────────
   The Jensen Beach weather iframe (cumulus/index.htm) is a legacy table-based
   page that cannot reflow at 320px. It is hidden below 1080px and replaced
   with a direct link for full access. WCAG 1.4.10 compliance maintained.
   ─────────────────────────────────────────────────────────────────────────── */
@media screen and (max-width: 1079px) {
	.subcontent4 {
		display: none;
	}
	.cumulus-fallback {
		display: block !important;
	}
}

/* ── Mobile reflow: ≤599px (WCAG 1.4.10 target: 320px) ── */
@media screen and (max-width: 599px) {

	body {
		font-size: 10pt;
	}

	#header {
		flex-direction: column;
		padding: 8px;
		gap: 6px;
	}

	#header h1 {
		font-size: 15pt;
	}

	#header h2 {
		font-size: 10pt;
	}

	/* Hide sidebar cam thumbnails on very small screens to save space */
	.logo1 {
		display: none;
	}

	/* Sidebar weather: compact single-column */
	.weather_counter_div {
		display: block;
		width: 100%;
		margin: 6px 0;
		border-bottom: 1px solid rgba(255,255,255,0.15);
		padding-bottom: 4px;
	}

	.weather_counter {
		font-size: 20pt;
	}

	.framed {
		border-radius: 0;
		padding: 10px 8px 6px;
	}

	/* Useful links: wrap */
	.menumini a {
		display: inline-block;
		margin: 3px 4px;
	}

	.menu1,
	.menu3 {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}

	.menu4 {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}

	/* Cumulus iframe: shorter on mobile */
	.subcontent4 iframe,
	iframe[width="1048"] {
		height: 500px;
	}

	/* Footer: larger tap targets */
	#footer {
		font-size: 9pt;
		padding: 12px 8px 16px;
		height: auto;
	}

	#footer a {
		display: inline-block;
		padding: 2px 0;
	}

	/* Pause button: full width on mobile */
	.weather_pause_div {
		padding: 0 8px;
	}

	.weather-pause-btn {
		width: 100%;
		font-size: 10pt;
		padding: 8px 12px;
	}

	/* Tide chart: add horizontal scroll if needed as last resort */
	.subcontent7 {
		overflow-x: auto;
	}
}