/* =============================================================
   WCAG 1.4.10 Reflow — Responsive overrides for Jensen Beach index.htm
   Adapted from hobesound_current/css/style_responsive.css
   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) {

	#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;
	}

	#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 {
		float: none;
		width: 100%;
	}

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

	#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;
	}

	.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;
	}

	.home {
		width: 100%;
		float: none;
		margin: 0;
		box-sizing: border-box;
	}

	.home_chart {
		display: block;
		width: 100%;
		height: auto;
		min-height: 0;
		margin-bottom: 16px;
		box-sizing: border-box;
	}

	.home_chart canvas {
		max-width: 100%;
		height: auto !important;
		display: block;
		margin: 0 auto;
	}

	/* Camera still images: fluid, left-aligned block */
	.subcontent9 img,
	.subcontent9 img[width],
	img[width="1000"],
	img[width="778"] {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		display: block;
	}

	/* Live stream iframe: fluid 16:9, left-aligned block */
	.subcontent9 iframe,
	iframe[width="1000"] {
		width: 100% !important;
		max-width: 100% !important;
		aspect-ratio: 1000 / 563;
		height: auto !important;
		display: block;
	}

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

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

	.menu1,
	.menu3 {
		width: 90%;
		max-width: 500px;
	}

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

	.menumini {
		font-size: 9pt;
	}
}

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

/* ── 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;
	}
}

/* ── 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;
	}

	.logo1 {
		display: none;
	}

	.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;
	}

	.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;
	}

	#footer {
		font-size: 9pt;
		padding: 12px 8px 16px;
		height: auto;
	}

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

	.weather_pause_div {
		padding: 0 8px;
	}

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

	.subcontent7 {
		overflow-x: auto;
	}
}