/* ============================================================
   .ssd-align — content column, matched to the site header
   Enqueued on every child-theme template (blog, state, city, hub)
   so every page shares exactly one definition instead of each
   template re-inventing its own max-width convention.

   The parent header (.wraper_header_main > .container) uses
   Bootstrap's plain .container class. These pages also load
   Bootstrap 5 (for accordion components' JS) globally alongside the
   parent's Bootstrap 3, and since BS5 loads after BS3 with equal CSS
   specificity, BS5's .container values are what actually render
   everywhere on these pages — including the header — regardless of
   the parent theme being written for BS3.

   Rather than depend on winning that cascade (fragile — a plugin or
   later stylesheet could reorder it), this class hard-codes
   Bootstrap 5's own .container numbers directly: 100% width capped
   at 540/720/960/1140/1320px, 12px side padding, centered. Put this
   on the actual content wrapper inside a section (not the section
   itself) so the section can stay full-bleed for its background.
   ============================================================ */
.ssd-align {
  width: 100%;
  max-width: 100%;
  /* !important: style.css has ".ssd-wrap * { margin: unset !important; }"
     (countering the parent theme's own "* { margin: 0 auto }"), and
     only re-grants margin:auto back to .container — not this class —
     so without !important here this sits flush left instead of
     centered. */
  margin-left: auto !important;
  margin-right: auto !important;
  /* !important on padding too: this class sometimes lands on an
     element that also happens to be a real Bootstrap component class
     (e.g. .breadcrumb, which both BS3 and BS5 style with their own
     padding). Bootstrap 5 loads after this stylesheet, and neither
     its component styles nor this class used !important before, so
     BS5's own padding silently won on load order alone — collapsing
     this class's inset back to whatever BS5 sets, on that one
     element, while everywhere else (no colliding component class)
     was unaffected. */
  padding-left: 12px !important;
  padding-right: 12px !important;
  box-sizing: border-box;
}
@media (min-width: 576px)  { .ssd-align { max-width: 540px; } }
@media (min-width: 768px)  { .ssd-align { max-width: 720px; } }
@media (min-width: 992px)  { .ssd-align { max-width: 960px; } }
@media (min-width: 1200px) { .ssd-align { max-width: 1140px; } }
@media (min-width: 1400px) { .ssd-align { max-width: 1320px; } }