/* ==========================================================================
   Content builder.
   ========================================================================== */
.builder-row {
  position: relative;
  display: flex;
  margin-top: var(--space-m);
  margin-bottom: var(--space-m);
  margin-left: calc(var(--gutter-xs) * -1);
  margin-right: calc(var(--gutter-xs) * -1);

  > .builder-item {
    flex: 0 1 100%;
    position: relative;
    margin-left: var(--gutter-xs);
    margin-right: var(--gutter-xs);
    box-sizing: border-box;
  }

  &.l-background {
    margin-top: calc(var(--space-xl) * -1);
    margin-bottom: calc(var(--space-xl) * -1);
    margin-left: calc(var(--gutter-m) * -1);
    margin-right: calc(var(--gutter-m) * -1);

    > .builder-item {
      margin: 0;
    }

    .block--richtext {
      margin: 216px 216px 108px;
      padding: var(--space-xl) var(--gutter-xl) 1px;
      border-top: 4px solid var(--color-fg-primary);
      background: rgba(43, 41, 41, .72); /* --color-bg-tertiary */
      backdrop-filter: blur(5px);
      color: #fff;
      width: 422px;
      box-sizing: border-box;

      h2 {
        font-size: 45px;
        margin-bottom: var(--space-xs);

        &:before {
          content: none;
        }
      }

      p,
      a,
      h2 {
        color: inherit;
      }
    }
  }
}

.builder-row-background {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: no-repeat center var(--color-fg-primary);
  background-size: cover;
}

.layout--onecol {
  .dataviz {
    margin: var(--space-xl) auto;
  }

  &.layout--space {
    margin-top: 0;
  }

  &.theme-bg-tertiary,
  &.theme-bg-muted {
    margin-top: -18px;
    margin-left: calc(var(--gutter-m) * -1);
    margin-right: calc(var(--gutter-m) * -1);
    padding-left: var(--gutter-xs);
    padding-right: var(--gutter-xs);
  }

  &.theme-bg-muted {
    margin-top: var(--space-xxl);
    margin-bottom: calc(var(--space-xl) * -1);
  }
}

@media screen and (min-width: 80em) {
  .layout--twocol,
  .layout--threecol {
    > .builder-item {
      flex: 0 1 100%;
    }
  }

  .layout--twocol {
    &.l-33-67 {
      > .layout__region--first {
        flex: 0 1 33%;
      }

      > .layout__region--second {
        flex: 0 1 67%;
      }
    }

    &.l-67-33 {
      > .layout__region--first {
        flex: 0 1 67%;
      }

      > .layout__region--second {
        flex: 0 1 33%;
      }
    }
  }
}

@media screen and (max-width: 48em) {
  .builder-row {
    flex-wrap: wrap;
    margin-top: 0;

    > .builder-item {
      flex: 1 0 100%;
      margin-top: var(--space-l);
      margin-left: 0;
      margin-right: 0;
    }
  }
}

/* Builder with sidebar(s).
   ========================================================================== */
.content-builder.l-sidebar {
  display: flex;
  flex-direction: column;
}

.content-builder-main {
  flex: 1;
}

.content-builder-sidebar {
  width: 100%;
  margin-bottom: var(--space-l);
  padding: 0 var(--gutter-m);
  background: var(--color-bg-secondary);
  box-sizing: border-box;

  .l-breadcrumb-fixed & {
    padding-top: 70px;
  }

  .builder-item {
    margin-top: 0;
  }
}

.content-builder-sidebar--left {
  order: -1;
}

@media screen and (min-width: 48em) {
  .content-builder.l-sidebar {
    flex-direction: row;
  }

  .content-builder-sidebar {
    flex-shrink: 0;
    margin-top: calc(var(--space-xl) * -1);
    margin-bottom: 0;
    width: var(--layout-builder-sidebar-width);

    .is-front & {
      padding-top: calc(var(--space-xl) - var(--space-m));
    }
  }

  .content-builder-sidebar-inner {
    position: fixed;
    height: 66.67%;
    margin-top: var(--space-m);
    width: calc(var(--layout-builder-sidebar-width) - var(--gutter-xl));
    overflow-y: auto;
    overflow-x: hidden;

    .is-front & {
      top: 86px;
    }
    .toolbar-horizontal.toolbar-fixed.is-fixed & {
      top: calc(86px + 53px);
    }

    .is-reset.toolbar-horizontal.toolbar-fixed &,
    .is-front:not(.is-reset) &,
    .is-reset & {
      position: relative;
      top: 0;
    }
  }
}

/* ==========================================================================
   Fixer.
   ========================================================================== */
.fixer-header-container {
  &.is-fixed {
    .main-header-navigation {
      position: fixed;
      top: 0;
      z-index: 100;
      width: 100%;
    }
  }

  &.toolbar-horizontal.toolbar-fixed.is-fixed {
    .main-header-navigation {
      top: var(--drupal-displace-offset-top);
    }

    &.route--layout-builder-overrides-node-view {
      .main-header-navigation {
        top: calc(var(--drupal-displace-offset-top) + 60px);
      }
    }
  }
}