/* ==========================================================================
   WyoHS layout guarantees (site wide)

   Loaded on every page from /inc/mega-nav.php alongside home.css.

   ---------- mobile side gutters -------------------------------------------

   Beaver Builder leaves the side padding of every row at 0. On a wide window
   that is correct: a fixed-width row centres itself inside the viewport and
   the empty space is the margin. Below that width there is nothing left to
   centre, and whether a module clears the bezel comes down to the 20px side
   margin BB gives modules by default — which several rows here have had
   zeroed for a full-bleed desktop look. Copy was running into the screen edge
   on a phone.

   So the gutter moves up a level. The row's content box carries it, and module
   side margins step out of the way so the two cannot stack. Everything lands
   on the same line, whatever the module settings say.

   It sits on .fl-row-content rather than .fl-row-content-wrap on purpose: the
   wrap paints the row background, so putting padding on the inner box keeps
   colours and background photos running full bleed behind inset copy.

   A module that genuinely wants to reach the screen edge can say so with
   .wyohs-bleed (Beaver Builder > module > Advanced > Class).

   992px rather than 768px because that is the line the rest of the theme
   already uses (post.css, speakers.css, category.css), and because a row at
   900px is just as flush against the edge as one at 390px.
   ========================================================================== */

:root {
	--wyohs-gutter: 20px;
}

@media (max-width: 992px) {

	.fl-builder-content .fl-row > .fl-row-content-wrap > .fl-row-content {
		padding-left: var(--wyohs-gutter);
		padding-right: var(--wyohs-gutter);
	}

	.fl-builder-content .fl-row .fl-module {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.fl-builder-content .fl-row .fl-module.wyohs-bleed {
		margin-left: calc(-1 * var(--wyohs-gutter)) !important;
		margin-right: calc(-1 * var(--wyohs-gutter)) !important;
		width: auto;
		max-width: none;
	}

	/* Nothing should be able to push the page sideways. A stray wide table or
	   a long unbroken URL would otherwise give the whole document a horizontal
	   scrollbar and make the gutter look like it had failed. */
	html,
	body {
		overflow-x: hidden;
	}
}