/* =====================================================================
   Mobile & tablet layout
   Loaded after styles438.css. Desktop (over 1000px wide) is unchanged;
   everything here only applies to smaller screens.
   ===================================================================== */

/* Menu button is only used on phones */
.menu-toggle { display: none; }

/* ---------- Tablets and small laptops: make the fixed 980px layout fluid ---------- */
@media (max-width: 1000px) {
	#wrapper,
	#header,
	#content {
		width: auto;
		max-width: 980px;
	}
	#wrapper { padding: 0 12px; }

	img,
	iframe,
	video,
	table {
		max-width: 100% !important;
	}
	img { height: auto !important; }

	/* Home slideshow keeps its 980 x 300 shape */
	.slideshow {
		height: 0;
		padding-top: 30.6%;
		overflow: hidden;
	}
	.slideshow .slide { width: 100%; }
	.slideshow .info {
		top: 50%;
		right: 5%;
		height: auto;
		transform: translateY(-50%);
	}
	.slideshow .info a {
		position: static;
		width: auto;
		padding: 6px 0 0;
		margin: 0;
	}

	/* Main menu spreads evenly across the width */
	#nav {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		height: auto;
		padding: 0 16px;
	}
	#nav li { margin: 0; padding: 10px 0; }

	/* Main text column and sidebar share the width */
	#content-right { width: 68%; }
	#content-left { width: 25%; margin: 0 2% 0 0; }
	.left { margin: 0 4%; float: none; }
	.left blockquote { width: auto; }

	/* Home page blocks: two per row */
	.blocks-home {
		width: 44%;
		margin: 20px 3%;
	}
	.blocks-home:nth-of-type(2n+1) { clear: left; }
	.col-2 { width: 45%; padding: 0 5% 0 0; }

	#footer .copyright,
	#footer .privacy { width: auto; }

	/* Wide embeds (maps, video) scale to fit */
	iframe[src*="youtube"],
	iframe[src*="google.com/maps"] {
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 4 / 3;
	}
	iframe[src*="youtube"] { aspect-ratio: 16 / 9; }

	/* Price table */
	table[style*="width"] { width: 100% !important; }
}

/* ---------- Phones ---------- */
@media (max-width: 700px) {
	html { background-image: none; }
	body {
		background-image: none;
		-webkit-text-size-adjust: 100%;
	}
	#wrapper { padding: 0; }

	/* Slightly larger text for reading on a phone */
	p,
	.left ul,
	.left ol { font-size: 1.5em; }
	li p,
	.left li ul,
	.left li ol { font-size: 1em; }
	.left li { margin-bottom: 6px; }
	td h3 { font-size: 1.8em; margin: 10px 0; }
	h1,
	.pastel h1 { font-size: 2.2em; line-height: 1.25em; }
	h2,
	.grey h2 { font-size: 2.1em; line-height: 1.3em; }
	h5 { font-size: 1.8em; }
	a { word-wrap: break-word; overflow-wrap: anywhere; }

	/* ----- Header ----- */
	#header {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		padding: 12px 16px 0;
	}
	#header > img { display: none; } /* spacer image */
	#logo {
		float: none;
		width: 62%;
		height: auto;
		aspect-ratio: 400 / 75;
		background-size: contain;
		margin: 0;
		order: 1;
	}
	#bacc-logo {
		float: none;
		width: 34%;
		height: auto;
		aspect-ratio: 230 / 80;
		background-size: contain;
		background-position: right center;
		margin: 0 0 0 auto;
		order: 2;
	}
	#header > a[href*="twitter"],
	#header > a[href*="facebook"] { display: none; }
	.aside { display: none; }

	/* ----- Menu: collapses behind a button ----- */
	.menu-toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		order: 3;
		width: 100%;
		margin: 12px -16px 0;
		width: calc(100% + 32px);
		padding: 0 16px;
		height: 48px;
		border: 0;
		background: #5ED2B4;
		color: #fff;
		font: 700 16px/1 'Open Sans', Tahoma, Geneva, sans-serif;
		text-align: left;
		cursor: pointer;
	}
	.menu-toggle .bars,
	.menu-toggle .bars::before,
	.menu-toggle .bars::after {
		display: block;
		width: 22px;
		height: 2px;
		background: #fff;
		position: relative;
		transition: transform .2s, background .2s;
	}
	.menu-toggle .bars::before,
	.menu-toggle .bars::after { content: ""; position: absolute; left: 0; }
	.menu-toggle .bars::before { top: -7px; }
	.menu-toggle .bars::after { top: 7px; }
	.menu-open .menu-toggle .bars { background: transparent; }
	.menu-open .menu-toggle .bars::before { transform: translateY(7px) rotate(45deg); }
	.menu-open .menu-toggle .bars::after { transform: translateY(-7px) rotate(-45deg); }

	#nav {
		display: none;
		order: 4;
		width: calc(100% + 32px);
		margin: 0 -16px;
		height: auto;
		padding: 0 0 8px;
		font-size: 1.6em;
		font-family: 'Open Sans', Tahoma, Geneva, sans-serif;
	}
	.menu-open #nav { display: block; }
	#nav li {
		float: none;
		margin: 0;
		padding: 0;
		border-top: 1px solid rgba(255,255,255,.35);
	}
	#nav li a {
		padding: 13px 16px;
	}

	/* ----- Page content ----- */
	#content {
		display: flex;
		flex-direction: column;
		padding-bottom: 30px;
	}
	#content > * { order: 5; }
	#content > .pink,
	#content > .slideshow { order: 1; }
	#content-right { order: 2; }
	#content-left { order: 3; }

	div.pink,
	div.pinksolid,
	div.pastel,
	div.grey { padding: 18px 16px; margin-bottom: 16px; }
	div.grey { margin-top: 16px; }

	#content-right,
	#content-left,
	.left,
	.col-2,
	.pinkcol-2,
	.col-3,
	.blocks-home,
	.widget,
	.widget-text,
	.widget-related-content,
	.block-quicklinks {
		float: none;
		width: auto;
		margin-left: 0;
		margin-right: 0;
		padding-right: 0;
	}
	.left { padding: 0 16px; }
	#content-left { padding: 0 16px; border-top: 1px solid #e3e3e3; }
	.widget-text { text-align: left; }

	/* Photos inside page text: full width, no side-wrapping */
	.left img[style*="float"] {
		float: none !important;
		display: block;
		margin: 0 auto 16px !important;
	}
	.left img[src*="parking"] {
		display: inline-block;
		margin: 0 6px 0 0 !important;
		vertical-align: middle;
	}

	/* Section sub-menu: bigger tap targets */
	.page-nav { font-size: 1.6em; margin: 16px 0; }
	.page-nav li { padding: 0; border-bottom: 1px solid #eee; }
	.page-nav li a { padding: 10px 24px 10px 2px; }

	/* Home slideshow: caption sits under the picture */
	.slideshow {
		height: auto;
		padding-top: 0;
		display: flex;
		flex-direction: column;
	}
	.slideshow::before {
		content: "";
		display: block;
		padding-top: 30.6%;
	}
	.slideshow .nav { display: none !important; }
	.slideshow .info {
		position: static;
		transform: none;
		width: auto;
		height: auto;
		padding: 14px 16px;
		background: #f7f7f7;
	}
	.slideshow .info h2 { font-size: 2.2em; }
	.slideshow .info p { font-size: 1.7em; margin: 0 0 6px; }
	.slideshow .info a {
		position: static;
		width: auto;
		margin: 0;
		padding: 4px 0;
		text-align: left;
	}

	/* Home page treatment blocks: one per row */
	.blocks-home { margin: 16px; }
	.blocks-home .mini-banner { width: 100%; }
	.blocks-home p,
	.blocks-home .link-text { font-size: 1.5em; }

	/* Buttons full width and easy to tap */
	.big-button,
	.quick-links {
		float: none;
		text-align: center;
		margin: 10px 0;
		font-size: 1.6em;
	}

	/* Tables scroll sideways if needed rather than squash */
	table { display: block; overflow-x: auto; }
	table[align] { float: none; }
	td { padding: 6px 8px 6px 0; }

	/* Forms */
	input[type="text"],
	select,
	textarea,
	textarea.wide,
	label,
	label.long,
	label.xlong,
	label.header,
	label.half {
		float: none;
		width: 100%;
		box-sizing: border-box;
	}

	/* ----- Footer ----- */
	#footer {
		padding: 20px 16px 90px; /* room for the cookie bar */
		text-align: center;
	}
	#footer .members,
	#footer .copyright,
	#footer .privacy {
		float: none;
		width: auto;
		text-align: center;
	}
	#footer ul {
		float: none !important;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 4px 16px;
		margin: 0 0 20px !important;
	}
	#footer li {
		float: none !important;
		margin: 0 !important;
		font-size: 1.1em;
		line-height: 2em;
	}
	#footer .members ul { flex-direction: column; align-items: center; }
}