/**
 * Header logo — room for the enlarged mark.
 *
 * The logo went from 337x70 to 400x83 so the client could have it bigger. That
 * pushes everything to its right along by 66px, and the desktop menu has no
 * 66px to give: it already runs past the edge of the window on live, where
 * `overflow-x: hidden` quietly swallows the evidence. At 1440 "Trade" is
 * already unreachable; at 1366 "Testimonials" has gone as well. The header's
 * call-to-action button sits at 1575px in a 1440px window.
 *
 * The room is there, it is just not being used. The column that holds the menu
 * carries `padding: 5%` on each side - about 82px a side at 1440 - while the
 * columns either side of it use the grid's usual 15px. Bringing it into line
 * gives back more than the logo took:
 *
 *                       menu starts   last item ends   CTA left
 *   before, 337px logo      475            1496          1575
 *   after,  400px logo      474            1496          1511
 *
 * So the menu lands within a pixel of where it has always been, with a logo
 * 63px wider and the button 64px closer to being visible. This does not fix the
 * overflow - that is a pre-existing fault and a separate decision about the
 * menu's own spacing - it only stops the bigger logo making it worse.
 *
 * Desktop only. Below 992px the column already computes to 15px, so the phone
 * header is untouched by this file.
 */

@media screen and ( min-width: 992px ) {

	/* Keyed off .mainbar-row, not the vc_custom_* class the column also
	   carries: WPBakery regenerates those on every save. !important is not
	   optional here - WPBakery writes its own vc_custom_ padding with
	   !important, so nothing without it can win however specific it is. */
	#header .mainbar-row > .col {
		padding-left: 15px !important;
		padding-right: 15px !important;
	}

}

/* ----------------------------------------------------------------------------
   The phone logo.

   None of the above reaches a phone - the mobile header draws its own image
   from the theme's `menu-logo` options, and the rule above is behind a 992px
   breakpoint. Two things were wrong on the phone independently of the desktop.

   Size: the mark was drawn at 169x35, small against a 390px screen.

   Sharpness: worse than the desktop case, not better. The phone header offered
   a 337px file as its 2x source, so a 3x screen - which is most phones - had
   336 real pixels to paint a box wanting 506. The options now point at the
   400/800 pair cut from the master, and the width below is what keeps the 800px
   file from setting the layout: without it the intrinsic size of a file
   declared `2x` would be 400px and the logo would render twice the size wanted.
   Pinning the width means the browser still downloads the 800px file and paints
   it into a 200px box - 800 real pixels where 600 are wanted, so it is sharp
   with room to spare rather than merely less soft.

   The width is fluid because a flat 200px overlaps the menu button on a 320px
   phone by 20px. Measured gap to the button, left edge to left edge:

       320 -> 166px wide, 14px clear      390 -> 200px wide, 27px clear
       360 -> 187px wide, 19px clear      414 -> 200px wide, 43px clear
       375 -> 195px wide, 22px clear      430 -> 200px wide, 53px clear
   ---------------------------------------------------------------------------- */

/* 1199, not 991: the theme keeps the phone header - burger and all - right up
   to 1199px, and without this the mobile mark rendered at the 800px file's own
   intrinsic 400px between 992 and 1199, a jump from 169px that nobody asked
   for. */
@media screen and ( max-width: 1199px ) {

	#header .navbar-brand img.mobile-logo-default,
	/* .logo-sticky as well, and it is not optional. On a phone the header
	   swaps to the DESKTOP sticky mark as soon as you scroll, so enlarging
	   that mark to 400px leaked straight onto the phone: measured on live at
	   320, 360, 390 and 414, the scrolled logo ran from x25 to x425 - past the
	   right edge of every one of them, and 20px over the menu button. At its
	   old 337px it had cleared the button by 43px, so this was ours. */
	#header .navbar-brand img.logo-sticky {
		width: min( 200px, 52vw );
		height: auto;
		max-width: none;
	}

}

/* ----------------------------------------------------------------------------
   The footer mark.

   The footer carried `logo-white-160px.png` at its own 160x33 - the same
   1x file the header used before this work, and just as soft on any modern
   screen. It now points at the 400px master-derived file.

   The width is pinned because the swap would otherwise resize it: the
   shortcode asked for `medium`, which on the old attachment was 160px wide and
   on the new one is 300px, and `full` is 400px. Holding it at 160px keeps the
   footer looking exactly as it did while giving the browser 400 real pixels to
   paint it with - comfortably sharp at 2x, where 320 are wanted.
   ---------------------------------------------------------------------------- */

.main-footer .vc_single_image-img,
footer .vc_single_image-img {
	width: 160px;
	height: auto;
	max-width: 100%;
}