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

   Mobile content order (per spec):
     1. Jupiter still shot (s2 camera)
     2. Wind widgets (speed + direction charts)
     3. Live stream link
     4. Weather info section (#nav)
     5. Rest of content
   ============================================================= */

/* ── Prevent horizontal overflow / black void on mobile (Samsung S25 etc) ──
   The desktop layout uses fixed 1050px widths. Without this, elements can
   burst past the viewport edge and create a horizontally scrollable black area.
   overflow-x: hidden on both html AND body is required — setting it on body
   alone is insufficient in some mobile browsers (Chromium/Samsung Internet).
   ─────────────────────────────────────────────────────────────────────────── */
html {
	overflow-x: hidden;
	max-width: 100%;
}

body {
	overflow-x: hidden;
	max-width: 100%;
}

/* ── wx-strip: hidden on desktop, shown only via mobile media query below ── */
#wx-strip {
	display: none;
}

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

	#header,
	#main,
	#content,
	#footer {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}

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

	.subcontent1,
	.subcontent2,
	.subcontent3,
	.subcontent4,
	.subcontent5,
	.subcontent6,
	.subcontent7,
	.subcontent8,
	.subcontent9 {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
		height: auto;
	}

	#header {
		height: auto;
		min-height: 80px;
		width: 100% !important;
		padding: 8px 10px;
		flex-wrap: wrap;
		gap: 8px;
		overflow: hidden;
	}

	.logo {
		padding-left: 0;
		flex-shrink: 0;
	}

	.logo img {
		height: 80px !important;
		width: auto !important;
		max-height: 80px !important;
		display: block;
	}

	.header-titles {
		min-width: 0;
		flex: 1 1 200px;
		padding: 0;
	}

	#header h1 {
		width: 100%;
		font-size: 18pt !important;
		margin: 4px 0 0;
		text-align: center;
		word-break: break-word;
		overflow-wrap: break-word;
	}

	#header h2 {
		width: 100%;
		font-size: 11pt !important;
		text-align: center;
		margin: 0 0 4px;
		word-break: break-word;
		overflow-wrap: break-word;
	}

	#content {
		float: none;
		width: 100%;
	}

	/* ── subcontent1 flex column with mobile ordering ──────────────────
	   HTML source order (for screen readers): nav, then .home
	   Visual order on mobile:
	     .home-camera (order:1) — still shot s2
	     .home-charts (order:2) — wind widgets
	     .home-live   (order:3) — live stream link
	     #nav         (order:4) — weather panel
	   ─────────────────────────────────────────────────────────────── */
	.subcontent1 {
		display: flex;
		flex-direction: column;
	}

	.subcontent1 > #nav          { order: 4; }
	.subcontent1 > .home         { order: 1; }

	/* Within .home, we use sub-flex to control inner ordering */
	.home {
		display: flex;
		flex-direction: column;
	}

	.home-camera  { order: 1; }
	.home-charts  { order: 2; }
	.home-live    { order: 3; }
	.home-links   { order: 5; }

	/* wx-strip: show compact glanceable strip on tablet/mobile */
	#wx-strip {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		gap: 6px 10px;
		background: #0050B3;
		color: #fff;
		font-size: 11pt;
		font-weight: bold;
		padding: 6px 10px;
		border-radius: 5px;
		margin: 8px 0 4px 0;
		text-align: center;
	}

	.wx-strip-item {
		white-space: nowrap;
	}

	.wx-strip-sep {
		color: rgba(255,255,255,0.45);
		font-weight: normal;
	}

	.wx-strip-link {
		color: #FFE87C;
		text-decoration: none;
		font-weight: bold;
		font-size: 10pt;
	}

	.wx-strip-link:hover,
	.wx-strip-link:focus {
		text-decoration: underline;
		color: #fff;
	}

	/* Filmstrip: 3 items max on mobile */
	#s2_filmstrip  .filmstrip li:nth-child(n+4),
	#s8_filmstrip  .filmstrip li:nth-child(n+4),
	#s11_filmstrip .filmstrip li:nth-child(n+4),
	#s16_filmstrip .filmstrip li:nth-child(n+4),
	#c20_filmstrip .filmstrip li:nth-child(n+4) {
		display: none;
	}

	#s2_filmstrip  .filmstrip li,
	#s8_filmstrip  .filmstrip li,
	#s11_filmstrip .filmstrip li,
	#s16_filmstrip .filmstrip li,
	#c20_filmstrip .filmstrip li {
		margin: 0 1px;
		width: calc(33.33% - 4px);
		box-sizing: border-box;
		vertical-align: top;
	}

	#s2_filmstrip  .filmstrip li img,
	#s8_filmstrip  .filmstrip li img,
	#s11_filmstrip .filmstrip li img,
	#s16_filmstrip .filmstrip li img,
	#c20_filmstrip .filmstrip li img {
		width: 100%;
		height: auto;
		display: block;
	}

	#s2_filmstrip  .filmstrip li p,
	#s8_filmstrip  .filmstrip li p,
	#s11_filmstrip .filmstrip li p,
	#s16_filmstrip .filmstrip li p,
	#c20_filmstrip .filmstrip li p {
		font-size: 7pt;
		margin: 1px 0 0 0;
		line-height: 1.2;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

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

	/* ── Elements with fixed widths not yet overridden ── */

	.note1 {
		width: 90% !important;
		max-width: 100% !important;
		margin-left: auto !important;
		margin-right: auto !important;
		box-sizing: border-box;
	}

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

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

	/* Webcam still images: fluid */
	img[width="1048"],
	img[width="778"],
	img[width="960"] {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		display: block;
	}

	.home-live {
		width: 100%;
		box-sizing: border-box;
		overflow: hidden;
	}
	.home-live iframe,
	iframe[width="1000"] {
		width: 100% !important;
		max-width: 100% !important;
		aspect-ratio: 1000 / 563;
		height: auto !important;
		display: block;
		box-sizing: border-box;
		padding: 0 !important;
		border: none !important;
		box-shadow: none !important;
		margin: 0 !important;
	}

	/* Cumulus iframe */
	#weather_div iframe {
		width: 100% !important;
		max-width: 100%;
		height: 750px;
	}

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

	/* Menus */
	.menu1,
	.menu3 {
		width: 90% !important;
		max-width: 500px;
		box-sizing: border-box;
	}

	.menu4 {
		width: 95% !important;
		max-width: 720px;
		box-sizing: border-box;
	}

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

/* ── Hide Cumulus weather iframe at narrow viewports ────────────────
   The Jupiter 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) {
	#weather_div {
		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: 4px;
		text-align: center;
	}

	.header-titles {
		flex: none;
		width: 100%;
	}

	.logo img {
		height: 60px !important;
		width: auto !important;
		max-height: 60px !important;
		margin: 0 auto;
	}

	#header h1 {
		font-size: 14pt !important;
		margin: 2px 0;
		text-shadow: none;
	}

	#header h2 {
		font-size: 9pt !important;
		margin: 0;
		text-shadow: 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;
	}
}