/* ==========================================================================
   Taber Builders - layout fixes, 2026-08-24
   Loaded AFTER responsive.css so these rules win the cascade.

   Two problems, one cause: the logo <img> is hard-coded width="501".

   1. On phones that forced 186px of horizontal page scroll and pushed the
      hamburger button off the right edge of the screen entirely.
   2. On desktop the 501px logo cell starved the main nav, which needed
      859px but had only 669px - so it wrapped onto two lines at EVERY
      screen width, not just small ones.

   Letting the image scale inside its cell fixes both. Verified at 1600,
   1440, 1366, 1280, 1189, 1100, 1024, 900, 768, 767, 414, 390 and 360px:
   nav on one row down to 768px, hamburger below that, no sideways scroll.
   ========================================================================== */

/* --- 1. Logo: let it scale inside its cell ----------------------------- */
.logo img
{
	max-width: 100%;
	height: auto;
}
.header .logo
{
	max-width: 460px;
}

/* --- 2. Top-level nav: tighten so all seven items sit on one row ------- */
.sf-menu > li > a,
.sf-menu > li > a:visited
{
	padding-left: 12px;
	padding-right: 0;
}

@media screen and (max-width: 1189px)
{
	.sf-menu > li > a,
	.sf-menu > li > a:visited
	{
		padding-left: 11px;
		font-size: 13px;
	}
}

/* --- 3. Phone: logo shares the bar with the hamburger ------------------ */
@media screen and (max-width: 767px)
{
	.header .logo
	{
		max-width: calc(100% - 62px);
	}
}

@media screen and (max-width: 479px)
{
	.header .logo
	{
		max-width: calc(100% - 54px);
	}
}

/* --- 4. Belt and braces against sideways scroll ------------------------ */
html, body
{
	max-width: 100%;
	overflow-x: hidden;
}