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

/* ── 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%;
		max-width: 1050px;
		box-sizing: border-box;
	}

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

	.subcontent1,
	.subcontent2,
	.subcontent3,
	.subcontent4,
	.subcontent5,
	.subcontent6,
	.subcontent7,
	.subcontent8 {
		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;
		padding: 0;
		margin: 0;
		flex-shrink: 0;
	}

	.logo img {
		height: 56px;
		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;
	}

	.header-titles {
		width: 100%;
		text-align: center;
	}

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

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

	/* ── IMAGES-FIRST reflow ──────────────────────────────────────────
	   On desktop #nav floats left and .home floats right inside
	   .subcontent1. On mobile both become flex children in a column.
	   order: 1 = camera section first, order: 2 = weather panel below.
	   Source order in HTML remains sidebar-first for screen readers
	   and assistive technology (logical reading order preserved).
	   ───────────────────────────────────────────────────────────────── */
	.subcontent1 > #nav   { order: 2; }
	.subcontent1 > .home  { order: 1; }

	/* wx-strip: show the compact glanceable strip on tablet/mobile */
	#wx-strip {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		gap: 6px 10px;
		background: #3a7a3a;
		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 ────────────────────────────────
	   index.v4.release.js already limits rendering to 3 items on mobile
	   via filmstripCount(). These CSS rules are a visual safety net in
	   case of a JS failure or slow load, and enforce the fluid widths.
	   ──────────────────────────────────────────────────────────────────── */
	#s4_filmstrip  .filmstrip li:nth-child(n+4),
	#s8_filmstrip  .filmstrip li:nth-child(n+4),
	#s12_filmstrip .filmstrip li:nth-child(n+4),
	#s16_filmstrip .filmstrip li:nth-child(n+4) {
		display: none;
	}

	/* Filmstrip thumbnails: stretch to fill 1/3 of available width */
	#s4_filmstrip  .filmstrip li,
	#s8_filmstrip  .filmstrip li,
	#s12_filmstrip .filmstrip li,
	#s16_filmstrip .filmstrip li {
		margin: 0 1px;
		width: calc(33.33% - 4px);
		box-sizing: border-box;
		vertical-align: top;
	}

	#s4_filmstrip  .filmstrip li img,
	#s8_filmstrip  .filmstrip li img,
	#s12_filmstrip .filmstrip li img,
	#s16_filmstrip .filmstrip li img {
		width: 100%;
		height: auto;
		display: block;
	}

	/* Compact timestamp caption rendered by v4 as <p class="center"> */
	#s4_filmstrip  .filmstrip li p,
	#s8_filmstrip  .filmstrip li p,
	#s12_filmstrip .filmstrip li p,
	#s16_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;
	}

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

	/* Webcam still images: fluid */
	img[width="1048"],
	img[width="778"] {
		width: 100% !important;
		max-width: 100% !important;
		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;
	}

	.disclaimer-text {
		padding: 0 16px 32px 16px;
	}
}

/* ── Hide Cumulus weather iframe at narrow viewports ────────────────
   The Boca Inlet 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;
	}

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

	.sidelinks {
		text-align: center;
		padding: 0;
	}
}