.header {
  padding-top: var(--spacing);
  padding-bottom: var(--spacing);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header__off-canvas-toggle,
.off-canvas__close {
  color: var(--color-primary-a);
  border: 0;
  background-color: var(--color-white);
}
.header__off-canvas-toggle:hover,
.off-canvas__close:hover,
.header__off-canvas-toggle:focus,
.off-canvas__close:focus {
  color: var(--color-white);
  background-color: var(--color-primary-a);
}
.header__off-canvas-toggle svg path,
.header__off-canvas-toggle svg path {
  fill: var(--color-primary-a);
}
.header__off-canvas-toggle:hover svg path,
.header__off-canvas-toggle:focus svg path {
  fill: var(--color-white);
}

.slimline-region__inner--header .block-menu,
.region-below-header .block-menu {
  display: none;
}

@media screen and (min-width: 960px) {
  .header__off-canvas {
    display: none;
  }
  .slimline-region__inner--header .block-menu,
  .region-below-header .block-menu {
    display: block;
  }
}

.branding__logo svg {
  width: auto;
}

.branding__logo svg path {
  fill: var(--color-primary-a);
}

.header__below-header {
  background-color: var(--color-primary-b);
}

/* Header Menus - General Styling */
.header .menu {
  padding-left: 0;
  list-style: none;
}

.header .menu .menu--sub-menu {
  display: none;
}
.header .menu .menu--sub-menu[data-disclosure-expanded="true"] {
  display: block;
}

.header .menu a {
  text-decoration: none;
}
.header .menu a:focus,
.header .menu a:hover {
  text-decoration: underline;
}

.region-below-header .navigation--main .menu-item {
  position: relative;
}

.region-below-header .navigation--main .menu--sub-menu {
  background-color: var(--color-primary-b);
}

.region-below-header .menu--main > .menu-item > .menu--sub-menu {
  position: absolute;
  z-index: 1;
  min-width: 350px;
}

.off-canvas .navigation--main .menu .menu .menu > .menu-item,
.region-below-header .navigation--main .menu .menu .menu > .menu-item {
  margin-left: var(--spacing-large);
  border-left: var(--border-large);
  border-left-color: var(--color-secondary-a);
}
.off-canvas .navigation--main .menu .menu .menu > .menu-item > a,
.region-below-header .navigation--main .menu .menu .menu > .menu-item > a {
  padding-left: 2rem;
}
.off-canvas .navigation--main .menu .menu .menu > .menu .menu-item > a,
.region-below-header .navigation--main .menu .menu .menu > .menu .menu-item > a {
  padding-left: 4rem;
}
