/* === PAGES / SubNav ======================================================= */

article div.content--subnav {
  display: inline-block;
  width: 100%;
  position: relative;
}

article div.content--subnav section h2 {
  margin-top: 0;
  padding-top: 0;
  width: 100%;
  display: inline-flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}

article div.content--subnav section {
  margin-top: 0;
  padding-top: 0;
  width: calc(100% - 300px);
  display: inline-block;
}

article nav.subnav {
  width: 285px;
  vertical-align: top;
  display: inline-block;
}

article nav.subnav ul li {
  list-style: none;
  font-size: 1.65rem;
}

article nav.subnav ul li > ul li {
  font-size: 1.35rem;
}

article nav.subnav ul a,
article nav.subnav ul a:visited {
  color: var(--color-text-primary);
}
article nav.subnav ul a:hover {
  color: white;
}
nav.subnav ul li.active a {
  color: white;
}

@media (max-width: 768px) {
  article nav.subnav {
    display: block;
    position: absolute;
    background-color: var(--color-bg-secondary);
    width: calc(100% + 30px);
    left: -15px;
    top: 0;
    z-index: 99;
  }

  article div.content--subnav section {
    width: 100%;
    display: block;
  }

  article div.content--subnav section h2 {
    width: calc(100% + 30px);
  }

  article div.content--subnav section h2 .subnav-trigger {
    display: inherit;
  }
}

@media (min-width: 768px) {
  article div.content--subnav section h2 .subnav-trigger {
    display: none;
  }
  article div.content--subnav nav.subnav {
    display: inherit;
  }
}