/* ============================================================================
   LAYOUT — centred measure, full-bleed bands   proofing preview, 2026-09-09
   ----------------------------------------------------------------------------
   Linked from inc/header-nav.php, which header.php includes on every page, so
   this applies site-wide without touching inc/topscripts.php (CIPA-preserved)
   or custom.css (which would need a cache-buster bump in that same file).

   Loaded after custom.css in document order, so equal-specificity rules win
   without !important.

   The pattern is the one boyersfood.com uses: content sits on a centred,
   capped measure; individual sections break out to full width when they want
   a band. Going full-width everywhere made the Top 10 cards ~500px each on a
   wide monitor and ran body text to unreadable line lengths.
   ========================================================================== */

:root { --page-max: 1320px; }

/* 1. Drop the wood ground. custom.css sets body{background-image:url(bkg.jpg);
      background-size:cover; background-attachment:fixed} — all reset here. */
body {
    background-image: none;
    background-color: #fff;
    background-attachment: scroll;
    /* lets sections break out with negative margins without the scrollbar
       causing a horizontal scroll. `clip` rather than `hidden` so it does not
       become a scroll container. */
    overflow-x: clip;
}

/* 2. Centred measure, wider than Bootstrap 3's 1170 but not unbounded.
      Bootstrap pins .container to 750/970/1170px; those rules are also (0,1,0)
      specificity, so being later in the cascade wins. */
.container {
    width: 100%;
    max-width: var(--page-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: 22px;
    padding-right: 22px;
}
@media (min-width: 768px)  { .container { width: 100%; max-width: var(--page-max); } }
@media (min-width: 992px)  { .container { width: 100%; max-width: var(--page-max); } }
@media (min-width: 1200px) { .container { width: 100%; max-width: var(--page-max); padding-left: 30px; padding-right: 30px; } }

.container.white-bkg { background-color: #fff; }

@media (max-width: 767px) {
    .container { padding-left: 14px; padding-right: 14px; }
}