/* A 1200px page leaves 120px white gutters on a 1440px desktop viewport. */
@media screen {
  html {
    --olgong-site-width: 1200px;
    background: #fff !important;
  }

  /* Preserve each application's canvas when it previously lived on :root. */
  :where(body) {
    background-color: var(--olgong-page-background, var(--bg, var(--paper, #f6f8f7)));
  }

  body {
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0 !important;
    max-width: var(--olgong-site-width) !important;
    min-height: 100vh;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body > header,
  body > footer,
  body > .site-banner {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--olgong-site-width);
    margin-left: auto;
    margin-right: auto;
  }

  #app.wrap,
  #app.regional-page,
  body:not(:has(#auth)) > main,
  body > .wrap:has(> header) {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--olgong-site-width) !important;
  }

  .ol-header .ol-top-row,
  .ol-header .ol-primary,
  .sapiens-footer-inner {
    max-width: var(--olgong-site-width) !important;
  }

  @media (min-width: 901px) {
    body:has(> .wrap > header) {
      padding-left: 0;
      padding-right: 0;
    }
  }

  /* Fixed survey controls and mobile actions stay inside the same canvas. */
  body > .bar,
  body > .mobile-cta,
  body::before {
    box-sizing: border-box;
    max-width: var(--olgong-site-width);
    margin-left: auto;
    margin-right: auto;
  }

  body > .floating {
    right: max(22px, calc((100% - 1200px) / 2 + 22px));
  }

  body > .skip-link {
    left: max(12px, calc((100% - 1200px) / 2 + 12px));
  }

  /* This footer originally calculated its padding from the full viewport. */
  body:has(> .site-header) > footer {
    padding-left: 28px;
    padding-right: 28px;
  }

  @media (max-width: 600px) {
    body:has(> .site-header) > footer {
      padding-left: 16px;
      padding-right: 16px;
    }
  }
}