/* Responsive navigation for the Swim-crete template.  NEO, 2026-09-13.
 *
 * Loaded AFTER css/styles.css so it overrides by cascade order; the 2014 stylesheet is
 * left untouched. Two problems solved:
 *
 *  1. The original bar was a fixed 980px row of inline-blocks with 28px side margins on
 *     every link. Seven items fitted with ~30px to spare. Adding "Aluma-Trac" pushed the
 *     row past 980px, so "Links" and "Contact Us" wrapped onto a second line and fell out
 *     of the 60px-tall bar. It is now a flex row that distributes whatever it is given.
 *  2. There was no narrow-width behaviour at all. Below 900px the links now collapse into
 *     a tap-to-open list.
 *
 * The toggle is a hidden checkbox driven by its label - no JavaScript, so it cannot be
 * broken by a jQuery change and it works on a page where scripts fail to load.
 */

/* ---- wide: one row that fits, however many items there are ---------------------- */
#nav-bar ul {
	width: auto;
	max-width: 980px;
	margin: 0 auto;
	padding: 0 10px;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#nav-bar ul li a {
	margin: 0 8px;          /* was 0 28px; flex now supplies the breathing room */
}

/* the toggle is invisible until the layout narrows */
#nav-toggle {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

#nav-toggle-label {
	display: none;
}

/* ---- getting tight: shrink before collapsing ------------------------------------ */
@media screen and (max-width: 1040px) {
	#header {
		width: auto;
		max-width: 980px;
	}
	#nav-bar ul li a {
		margin: 0 5px;
		font-size: 1.5em;
	}
}

/* ---- narrow / mobile: fold into a dropdown -------------------------------------- */
@media screen and (max-width: 900px) {
	#nav-bar {
		height: auto;
	}

	#nav-toggle-label {
		display: flex;
		align-items: center;
		max-width: 980px;
		margin: 0 auto;
		padding: 0 15px;
		height: 52px;
		color: #fff;
		font-size: 1.6em;
		font-weight: bold;
		text-shadow: 1px 1px #333;
		cursor: pointer;
		-webkit-user-select: none;
		user-select: none;
	}

	/* one bar plus two shadows = a three-line hamburger, no image needed */
	#nav-toggle-label span {
		display: block;
		width: 22px;
		height: 3px;
		margin-right: 10px;
		background: #fff;
		border-radius: 2px;
		box-shadow: 0 6px 0 #fff, 0 12px 0 #fff;
		transform: translateY(-6px);
	}

	#nav-bar ul {
		display: none;
		flex-direction: column;
		align-items: stretch;
		padding: 0 0 8px;
	}

	#nav-toggle:checked ~ ul {
		display: flex;
	}

	#nav-bar ul li {
		display: block;
		width: 100%;
	}

	#nav-bar ul li a,
	#nav-bar ul li:first-child a,
	#nav-bar ul li:last-child a {
		display: block;
		margin: 0;
		padding: 0 15px;
		line-height: 46px;
		font-size: 1.6em;
		border-top: 1px solid rgba(255, 255, 255, 0.15);
	}

	/* the little arrow marker is a wide-layout affordance; a highlight reads better here */
	#nav-bar ul li a:hover,
	#nav-bar ul li .current {
		background-image: none;
		background-color: rgba(0, 0, 0, 0.25);
	}
}

/* ======================================================================================
 * LAYOUT — making a fixed 980px design usable on a phone.  NEO, 2026-09-13.
 *
 * Paired with <meta name="viewport" content="width=device-width, initial-scale=1">, added
 * to every page in the same change. Without the meta a phone renders at 980 CSS px and
 * zooms out, so none of these queries fire; without these rules the meta alone would make
 * a phone scroll sideways past the fixed containers. The two go together.
 *
 * The original stylesheet is untouched — everything here is an override.
 * ==================================================================================== */

/* Media never exceeds its column. The tile logos keep their fixed box (object-fit letterboxes
 * them) and .h100/.w100 keep their intent, just capped so they cannot overflow. */
img, video, iframe { max-width: 100%; }
img, video { height: auto; }
.h100 { max-width: 100%; }
.industry img { height: 100px; }

#logo, #logo img { max-width: 100%; }

/* The five fixed 980px containers become fluid, with a gutter so text never touches the edge. */
#header,
#banner,
#title,
#content,
#footer {
	width: auto;
	max-width: 980px;
	box-sizing: border-box;
}
#header, #title, #content, #footer {
	padding-left: 15px;
	padding-right: 15px;
}

/* The banner is a fixed-height background image; let it scale instead of cropping oddly. */
#banner {
	background-size: cover;
	background-position: center;
}

/* ---- tablet and below: the content/sidebar columns stack ------------------------- */
@media screen and (max-width: 900px) {
	#main,
	#sidebar {
		width: 100%;
		float: none;
	}
	#sidebar { margin-top: 25px; }

	/* the vertical rule sits at a fixed offset and is meaningless once stacked */
	.divider-vert { display: none; }

	#banner { height: 220px; }
	#title  { height: auto; padding-top: 20px; padding-bottom: 20px; }

	#footer-wrapper { height: auto; padding-bottom: 15px; }
	#footer { height: auto; overflow: hidden; }
	#footer p { float: none; margin-top: 12px; }

	/* the pool-builder directory is a two-up float */
	.builders { width: 100%; float: none; margin-right: 0; }

	/* galleriffic: fixed 550px stage and 688px caption strip */
	div.slideshow-container,
	div.loader,
	div.caption-container,
	div.slideshow {
		width: 100% !important;
	}
	div.caption-container { height: auto !important; }
	ul.thumbs { float: none; }
	div.ss-controls, div.nav-controls { float: none; }
}

/* ---- phone: single column, nothing side by side ---------------------------------- */
@media screen and (max-width: 600px) {
	#banner { height: 150px; }

	/* product rows: image above the text rather than floated beside it */
	.products img {
		float: none;
		margin: 0 0 12px 0;
		width: auto;
		max-width: 100%;
	}

	/* the send button sits right-floated against a full-width field */
	.contacts-btn { float: none; display: inline-block; margin-top: 10px; }

	/* industry tiles: let them centre rather than leaving a ragged gutter */
	.industry { float: none; display: inline-block; vertical-align: top; margin: 0 8px 15px; }
	#main { text-align: center; }
	#main p, #main h2, #main h1, #main ul, #main li, .contact-person { text-align: left; }
}