/* ==========================================================================
   The site's one content shell.

   The header, the footer and every page's main content are laid out inside the
   same box, so the logo's left edge and the "Enquire Now" button's right edge
   line up with the headings, filter cards, tables, listing cards and maps
   below them — at every width, on every page.

   Three shells had drifted apart: the header and the two mockup-built pages
   sat at 1320 with a 28px gutter, Bootstrap's own `.container` stepped through
   540/720/960/1140/1320 with a 12px gutter, and the listing pages ran wider
   still at 1440. The header's values win because most of the site already
   agrees with them, so only the listing pages change width.

   `.container` is folded in rather than replaced: nearly every page already
   uses it, so no page markup has to change. `.site-container` is the name to
   reach for in new markup. A section that needs a full-bleed background still
   stretches edge to edge — only its inner wrapper carries one of these.

   This sheet loads last so it settles the disagreement; the page sheets no
   longer set these values themselves.
   ========================================================================== */

:root {
  --site-container-max: 1320px;
  --site-container-gutter: 28px;
}

/* Below the lg breakpoint the nav collapses to its toggle and the gutter
   narrows; page content narrows with it so the edges stay together. */
@media (max-width: 991.98px) {
  :root {
    --site-container-gutter: 16px;
  }
}

.site-container,
.container,
.listing-shell,
.lys-shell,
.oi-shell {
  width: 100%;
  max-width: var(--site-container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--site-container-gutter);
  padding-right: var(--site-container-gutter);
}