/* -----------------------------------------------------------------
   Phone / tablet layer for the Suburban Lanes site.

   The base theme (files/main_style.css) is a fixed 960px desktop
   layout built on HTML tables. Nothing here applies at or above
   1000px, so the desktop rendering is left exactly as it was.
   ----------------------------------------------------------------- */

/* Images and embeds must never push a column wider than the screen. */
img { max-width: 100%; height: auto; }
iframe { max-width: 100%; }

/* --- Tablet and below: release the fixed 960px shells ------------ */
@media screen and (max-width: 1000px) {
	.container,
	#nav-wrap .container,
	#nav-wrap .container table {
		width: auto !important;
		max-width: 960px;
	}
	.container {
		padding: 0 18px;
		box-sizing: border-box;
	}
	/* The desktop min-heights leave a tall empty gap once stacked. */
	#main-wrap .container { min-height: 0; }
}

/* --- Below 860px: stack the header, wrap the nav ----------------- */
@media screen and (max-width: 860px) {
	/* Phone number, social icons and search centre up instead of
	   hugging the right edge. */
	#header { height: auto; }
	#header-right { padding-top: 14px; }
	#header-right table { float: none; margin: 0 auto; width: auto; }
	#header-right .phone-number .wsite-text {
		text-align: center;
		margin: 0 8px 0 0;
	}

	/* Logo on its own line, above a centred nav that wraps. */
	#nav-wrap .container { margin-bottom: 24px; }
	#nav-wrap .container table,
	#nav-wrap .container tbody,
	#nav-wrap .container tr { display: block; }
	#nav-wrap .container td {
		display: block;
		width: 100%;
		text-align: center;
	}
	td#logo { padding-bottom: 4px; }
	#logo .wsite-logo img { max-height: 74px; width: auto; }

	td#nav,
	#navigation,
	#navigation ul { float: none !important; }
	#navigation { line-height: normal; }
	#navigation ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		max-width: none;
		margin-bottom: 0;
	}
	#navigation li {
		display: block;
		float: none;
		margin: 0;
	}
	#navigation ul li a { float: none; padding: 12px 11px 10px; }
	#navigation ul li#active a,
	#navigation ul li a:hover { padding: 12px 11px 6px; }

	/* Weebly's two-column tables become one full-width column.
	   This is what stacks the refreshments slideshow above its text
	   and unstacks the four footer columns. */
	.wsite-multicol-table-wrap { margin: 0 !important; }
	.wsite-multicol-table,
	.wsite-multicol-tbody,
	.wsite-multicol-tr,
	.wsite-multicol-col {
		display: block !important;
		width: 100% !important;
	}
	.wsite-multicol-col { padding: 0 0 12px !important; }

	/* Landing banner: headline above the photo, both full width. */
	#banner { padding-bottom: 24px; }
	#bannerleft,
	#bannerright {
		float: none !important;
		width: 100% !important;
		height: auto !important;
		padding: 0 !important;
	}
	.landing-banner-outer,
	.landing-banner-mid,
	.landing-banner-inner { display: block; }
	#banner-image-wrap,
	.tall-header-page #banner-image-wrap,
	.short-header-page #banner-image-wrap { height: auto !important; }
	.landing-page .wsite-header,
	.tall-header-page .wsite-header,
	.short-header-page .wsite-header {
		width: 100% !important;
		height: 230px;
		background-repeat: no-repeat !important;
		background-size: cover !important;
		background-position: center center !important;
	}

	#footer-wrap .container { text-align: left; }
}

/* --- Phones: unfloat the content images, tighten the spacers ----- */
@media screen and (max-width: 640px) {
	body { line-height: 22px; }
	.container { padding: 0 14px; }

	/* Page content floats its images inline via style attributes,
	   which strands narrow text columns beside them on a phone. */
	#wsite-content .wsite-image,
	#wsite-content span[style*="float"] {
		float: none !important;
		display: block !important;
		width: auto !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		text-align: left !important;
	}
	#wsite-content img {
		float: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	/* Clearance hack for the desktop float; pointless once unfloated. */
	.imgPusher { display: none !important; }

	/* Desktop spacers are tuned for a 960px page. */
	.wsite-spacer { height: 26px !important; }

	h2,
	#main-wrap .container h2 {
		font-size: 20px;
		letter-spacing: -.5px;
	}

	/* Search field uses the width it is given rather than 182px. */
	#header-right .search { width: auto !important; }
	#header-right .wsite-search {
		display: inline-block;
		width: 182px !important;
		margin-left: 0;
	}

	.wsite-map iframe { height: 220px !important; }

	#footer-wrap .container { padding: 24px 0 28px; }
	#footer-wrap h2 { font-size: 19px; }
}