/*
 * Responsive layer for the Baby Academy theme.
 *
 * This file is loaded after style.css (see functions.php) and progressively
 * makes the legacy fixed-width (840px), table-based layout adapt to tablet and
 * phone screens. It intentionally overrides only what is needed and leaves the
 * original desktop design intact at wide viewports.
 *
 * Breakpoints:
 *   <= 768px  tablet   (2-col home grid, content tables stack)
 *   <= 600px  mobile   (hamburger navigation)
 *   <= 480px  phone    (1-col home grid)
 */

/* ---------- Global fluid primitives ---------- */
*, *::before, *::after {
	box-sizing: border-box;
}

img {
	max-width: 100%;
	height: auto;
}

iframe, video, embed, object {
	max-width: 100%;
}

/* Keep the gallery thumbnail-strip images at their natural size. The global
   img{max-width:100%} above would otherwise let this auto-width table shrink
   to fit the fixed 700px viewer window, cramming every thumbnail in at once;
   instead we want the window to clip the strip to ~7 thumbnails (the original
   desktop behaviour). On mobile the strip images are given an explicit smaller
   size in the media query below. */
#thumbString img {
	max-width: none;
}

/* Make the core fixed-width wrappers fluid while preserving the 840px cap. */
.head,
.menu,
.inner-main-wrap {
	width: 100% !important;
	max-width: 840px;
	margin-left: auto;
	margin-right: auto;
}

.headWrap,
.main-wrap {
	width: 100%;
	max-width: 100%;
}

/* ---------- Hamburger toggle (hidden on desktop) ---------- */
.menu-toggle {
	display: none;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 10px;
	margin: 0 auto;
	width: 46px;
	height: 42px;
}
.menu-toggle span {
	display: block;
	width: 24px;
	height: 3px;
	margin: 4px auto;
	background: #d22c70;
	border-radius: 2px;
}

/* =========================================================
   TABLET  (<= 768px)
   ========================================================= */
@media screen and (max-width: 768px) {

	/* Add breathing room so content never touches the screen edge. */
	.inner-main-wrap {
		padding-left: 12px;
		padding-right: 12px;
	}

	/* Mobile header: keep it a single row — logo on the left, hamburger on the
	   right — instead of stacking the two columns. */
	.head {
		height: auto !important;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 5px 12px;
	}
	.head > div {
		float: none !important;
		width: auto !important;
		padding-top: 0 !important;
		margin: 0 !important;
	}
	.head-logo {
		text-align: left !important;
		flex: 0 1 auto;
		line-height: 0;
	}
	.head-actions {
		text-align: right !important;
		flex: 0 0 auto;
	}
	.head img {
		max-width: 220px;
	}

	/* ----- Home 3x3 tile grid -> 2 columns ----- */
	.homeTable {
		display: block;
		width: 100% !important;
		max-width: 840px;
		margin: 0 auto;
	}
	.homeTable tbody {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 3px;
	}
	.homeTable tr {
		display: contents;
	}
	.homeTable td {
		display: block;
		width: auto !important;
		height: auto !important;
		aspect-ratio: 278 / 180;
		background-size: cover !important;
		background-position: center !important;
		background-repeat: no-repeat !important;
	}
	.homeTable td a {
		display: block;
		width: 100%;
		height: 100%;
	}

	/* ----- Content templates: stack 2-column tables -----
	   .galNav (the gallery thumbnail navigation) is excluded so it keeps its
	   horizontal [arrow | strip | arrow] layout; it is handled separately below. */
	.inner-main-wrap table:not(.homeTable):not(.menu-table):not(.galNav),
	.inner-main-wrap table:not(.homeTable):not(.menu-table):not(.galNav) tbody,
	.inner-main-wrap table:not(.homeTable):not(.menu-table):not(.galNav) tr,
	.inner-main-wrap table:not(.homeTable):not(.menu-table):not(.galNav) td,
	.gallery-wrap table:not(.menu-table):not(.galNav),
	.gallery-wrap table:not(.menu-table):not(.galNav) tbody,
	.gallery-wrap table:not(.menu-table):not(.galNav) tr,
	.gallery-wrap table:not(.menu-table):not(.galNav) td {
		display: block;
		width: 100% !important;
		height: auto !important;
	}
	.inner-main-wrap table:not(.homeTable):not(.menu-table):not(.galNav) td {
		padding-bottom: 12px;
	}

	/* Fluid form fields. */
	.inp,
	.inp2 {
		width: 100% !important;
		max-width: 100%;
	}
	#sendBtCnt {
		float: none;
	}

	/* ----- Photo gallery album grid ----- */
	.albums-wrap {
		width: auto !important;
		max-width: 840px;
		height: auto !important;
		display: flex;
		flex-wrap: wrap;
		gap: 16px;
		justify-content: center;
	}
	.album {
		float: none !important;
	}
	.albDiv {
		display: none !important;
	}

	/* ----- Gallery viewer thumbnail slider -----
	   Keep the [left arrow | thumbnail window | right arrow] row horizontal.
	   table-layout:fixed + width:100% pins the two arrow columns to a small size
	   and lets the center window take the remaining space; the window clips its
	   (wider) thumbnail strip via overflow:hidden, and the existing slider JS
	   still scrolls it. The strip was previously a fixed 700px, which overflowed
	   the screen. */
	.galNav {
		display: table !important;
		width: 100% !important;
		max-width: 100%;
		table-layout: fixed;
	}
	.galNav tbody {
		display: table-row-group !important;
	}
	.galNav tr {
		display: table-row !important;
	}
	.galNav td {
		display: table-cell !important;
		width: auto !important;
		padding-bottom: 0 !important;
	}
	.galNav td.galThumbArrow {
		width: 44px !important;
	}
	.galThumbArrow img {
		max-width: 100%;
		height: auto;
	}
	.galThumbWindow {
		width: 100% !important;
		max-width: 100%;
	}

	/* The strip itself must stay a horizontal row of thumbnails. */
	#thumbString {
		display: table !important;
		width: auto !important;
	}
	#thumbString tbody {
		display: table-row-group !important;
	}
	#thumbString tr {
		display: table-row !important;
	}
	/* Tablet: keep thumbnails at natural size so the fluid window clips the
	   strip to ~7 (same as desktop). The base #thumbString img{max-width:none}
	   rule keeps them from shrinking; phones shrink them in the <=600px block. */
	#thumbString td {
		display: table-cell !important;
		width: auto !important;
		height: auto !important;
	}

	/* Stacked viewer (prev / main image / next): keep the main image fluid. */
	#imgFull img {
		max-width: 100%;
		height: auto;
	}
}

/* =========================================================
   MOBILE  (<= 600px) — hamburger navigation
   ========================================================= */
@media screen and (max-width: 600px) {

	.menu-toggle {
		display: block;
		margin: 0 !important;
	}

	/* Side-by-side header: logo on the left, hamburger on the right. */
	.head {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		height: auto !important;
	}
	.head .head-logo {
		width: auto !important;
		float: none !important;
		text-align: left !important;
	}
	.head .head-logo img {
		max-width: 200px;
	}
	.head .head-actions {
		width: auto !important;
		float: none !important;
		padding-top: 0 !important;
		text-align: right !important;
	}

	/* Collapse the menu by default; reveal it when toggled open. */
	#baMenu .menu-table {
		display: none;
	}
	#baMenu.menu-open .menu-table,
	#baMenu.menu-open .menu-table tbody,
	#baMenu.menu-open .menu-table tr,
	#baMenu.menu-open .menu-table td {
		display: block;
		width: 100% !important;
	}
	#baMenu.menu-open .menu-table td {
		padding: 12px 0;
		border-bottom: 1px solid #f0f0f0;
	}
	#baMenu .menu-item,
	#baMenu .menu-selected {
		display: block;
		font-size: 16px;
	}

	/* Phone: shrink the thumbnail strip so ~5 show between the arrows at a
	   time (the narrow window would otherwise fit only a couple at full size). */
	#thumbString td {
		width: 56px !important;
	}
	#thumbString img {
		width: 48px !important;
		height: auto !important;
	}
}

/* =========================================================
   PHONE  (<= 480px) — single-column home grid
   ========================================================= */
@media screen and (max-width: 480px) {
	.homeTable tbody {
		grid-template-columns: 1fr;
	}
}