.content-header {
  background-color: var(--va-blue-darkest);
  color: var(--va-white);

  // only re-color primary tab links when not in menu layout.
  @include breakpoint("tabs") {
    .is-horizontal .tabs {
      .tabs__link {
        color: var(--va-gray-lightest);
      }

      .tabs__link:hover {
        color: var(--va-blue-dark);
      }

      .tabs__link.is-active {
        color: var(--va-gold-med);
      }

      .tabs__link.is-active::before {
        border-bottom: var(--tabs--active-height) solid var(--va-gold-med);
      }

      .tabs__link.is-active:hover {
        color: var(--color-text);
      }
    }
  }
}

// editorial fields above form footer
#edit-group-e,
#edit-group-editorial-workflow {
  margin-bottom: 0;

  .form-item {
    margin-bottom: var(--spacing-xs);
  }
}

.page-content {
  margin-top: 0;
}

.node-columns {
  margin-top: var(--space-l);
}

.region-sidebar-first h2 {
  margin-top: 0;
}

.region-help {
  margin-bottom: var(--spacing-m);
}

// !important here to beat some nonsense core is doing that we inherit as claro subtheme
.vagovclaro .layout-container {
  margin-left: 2rem !important;
  margin-right: 2rem !important;

  @include breakpoint("lg") {
    margin-left: 3rem !important;
    margin-right: 3rem !important;
  }
}

// see node-edit-form.html.twig
.layout--edit {
  display: grid;
  grid-auto-rows: minmax(min-content, max-content);
  grid-gap: 1rem;
  grid-template-columns: 1fr;

  @include breakpoint("sm") {
    grid-template-columns: 1fr 300px;
  }
  @include breakpoint("md") {
    grid-gap: 2rem;
  }
  @include breakpoint("lg") {
    grid-template-columns: 1fr 360px;
  }
}

.layout--node-main {
  min-width: 0;

  @include breakpoint("sm") {
    grid-area: 1 / 1 / 1 / 2;
  }

  .layout-region__content {
    margin: 0 auto;
    max-width: 52rem;
  }
}

.layout--node-secondary {
  min-width: 0;

  @include breakpoint("sm") {
    grid-area: 1 / 2 / 1 / 3;
    max-width: 100%;

    .layout-region__content {
      position: sticky;
      top: 50px; // height from top of viewport to start sticky
    }
  }
}

.toolbar-tray-open .layout--node-secondary .layout-region__content {
  top: 90px; // slighter lower sticky position if toolbar open
}

.layout--node-footer {
  .layout-region__content {
    margin: 0 auto;
    max-width: 52rem;
  }

  @include breakpoint("sm") {
    grid-area: 2 / 1 / 2 / 2;
  }
}

// Fix to align elements in Editorial Workflow current state on all pages
.js-form-item-moderation-state-0-current {
  span {
    display: inline;

    &:first-child {
      &::after {
        content: ":";
      }
    }
  }
}
