/* ============================================================
   Page width construct — page-width.css
   __CONSTRUCTS/__UI/page-width/  (SPEC.md in this folder)
   ============================================================
   GAP: Bootstrap's .container family stops at a fixed width (1320px for
   .container-xxl), which leaves up to half of a wide screen empty. This
   file makes every page 90% of the window with 5% margin each side, from
   Bootstrap's lg breakpoint (992px) up. It reaches every AnyCode.ca PHP
   page through the shared head, __UI/page-head/page_head.php, which loads
   it after Bootstrap so these rules win over Bootstrap's own caps.

   Bootstrap's fixed-width containers are widened as they are: a page needs
   no markup change. .container-fluid stays Bootstrap's full width, because
   a full-width frame (the API admin panel: top bar plus sidebar) already
   uses more than 90%; a page that starts from .container-fluid opts into
   the 90% width with .ac-page-wide.

   Under 992px Bootstrap's own containers stay as they are: on a phone or
   tablet their 12px gutter already leaves more room than 5% would.
   Pixels and percentages only.
*/

@media (min-width: 992px) {
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl,
    .container-fluid.ac-page-wide {
        width: 90%;
        max-width: none;              /* no fixed cap: a 3840px screen gets 3456px of content */
        margin-left: auto;
        margin-right: auto;
        padding-left: 0;              /* the 5% margin is the gutter; padding would add to it */
        padding-right: 0;
    }
}