/*
 * The final layout reserved before the scripts that make it have run, so
 * nothing moves when they do (layout shift). Each rule applies only until
 * the script's own marker appears; from then on the script's inline styles
 * are the layout, exactly as before. Not on live.
 */

/* WPBakery's full-width rows: vc_rowBehaviour() stretches each row to the
   window (left, width and, unless it stretches the content too, padding
   that keeps the content in the container), then sets
   data-vc-full-width-init="true". The same box in CSS until then; the
   theme's rows have WPBakery's -15px side margins and a centred container
   (src/full-width-rows.ts covers rows with other margins). Not a row with
   hover boxes: their script sizes them once, from the row as it stands
   then, and they come out taller in a row already stretched. */
.vc_row[data-vc-full-width="true"][data-vc-full-width-init="false"]:not(:has(.vc-hoverbox)) {
  position: relative;
  left: calc(50% - 50vw + 15px);
  box-sizing: border-box;
  width: 100vw;
  padding-left: calc(50vw - 50% - 15px);
  padding-right: calc(50vw - 50% - 15px);
}
.vc_row[data-vc-full-width="true"][data-vc-stretch-content="true"][data-vc-full-width-init="false"]:not(:has(.vc-hoverbox)) {
  padding-left: 0;
  padding-right: 0;
}

/* The7 builds the phone header bar (80px) with its script; until it is
   there, the header keeps its height so the page under it does not drop. */
@media screen and (max-width: 992px) {
  .masthead:not(:has(.mobile-header-bar)) {
    min-height: 80px;
  }
}