/*----------------------------------------------*\
    HEADER
	======

	@package theorder

\*----------------------------------------------*/
/*----------------------------------------------*\
    COMPONENTS
	==========

	@package theorder

\*----------------------------------------------*/
/*
 *
 * / Variables
------------------------------------------------*/
/* Breakpoints */
/* Responsive type multipliers */
/* Type sizes (Minor third) */
/* Max-widths */
/* is used for calculation for extend width. Each side is extended by x ems */
/*
 *
 * ANCHOR 1./ Header
------------------------------------------------*/
.site-header {
  color: var(--color-header-nav-text);
  background-color: var(--color-header-bg); }
  .site-header__nav {
    position: relative;
    padding: var(--size-400);
    display: grid;
    grid-template-columns: auto 4em;
    -ms-flex-align: center;
        align-items: center;
    max-width: var(--max-width-span);
    margin: 0 auto; }
    @media screen and (min-width: 36rem) {
      .site-header__nav {
        padding: var(--size-400) var(--size-800); } }
    @media screen and (min-width: 48rem) {
      .site-header__nav {
        grid-template-columns: auto auto; } }
    @media print {
      .site-header__nav {
        display: block; } }

.news-banner {
  background-color: var(--color-header-news-bg);
  color: var(--color-header-news-text);
  border-top: 1px solid var(--color-bg);
  padding: var(--size-400);
  text-align: center;
  font-family: var(--font-sans);
  text-transform: uppercase; }
  .news-banner__inner {
    max-width: var(--max-width-span);
    margin: 0 auto; }
  .news-banner__header {
    font-size: var(--size-300);
    display: inline;
    margin-right: .5em; }
  .news-banner__list {
    font-size: var(--size-300);
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -ms-flex-pack: center;
        justify-content: center; }
    .news-banner__list li {
      margin: 0 .5em; }
    .news-banner__list a:hover, .news-banner__list a:focus {
      outline: 0;
      -webkit-text-decoration: underline 1px var(--color-header-news-text);
              text-decoration: underline 1px var(--color-header-news-text);
      text-underline-offset: .125em; }

.site-logo {
  padding-right: var(--size-200); }
  .site-logo a {
    display: inline-block; }
  .site-logo img {
    max-width: 60vw; }
  @media print {
    .site-logo {
      position: relative;
      padding: var(--size-100);
      max-width: 15em;
      margin: 0 auto;
      /* dark background for logo when printed */ }
      .site-logo a {
        display: block; }
      .site-logo > * {
        position: relative;
        z-index: 2; }
      .site-logo:before {
        position: absolute;
        z-index: 1;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        overflow: hidden;
        content: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' style='background:%2322261F' />"); } }

/*
 *
 * ANCHOR 2./ Navigation
------------------------------------------------*/
.primary-nav {
  display: none;
  grid-row: 2;
  grid-column: 1/3;
  margin-top: var(--size-600); }
  .menu-is-open .primary-nav {
    display: block; }
  @media screen and (min-width: 36rem) {
    .primary-nav {
      display: block; } }
  @media screen and (min-width: 48rem) {
    .primary-nav {
      grid-row: 1;
      grid-column: 2;
      justify-self: end;
      margin-top: 0; } }
  @media screen and (min-width: 36rem) {
    .primary-nav > ul {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: justify;
          justify-content: space-between; } }
  @media screen and (min-width: 36rem) {
    .primary-nav > ul > li {
      margin-right: var(--size-400); } }
  @media screen and (min-width: 64rem) {
    .primary-nav > ul > li {
      margin-right: var(--size-800); } }
  .primary-nav > ul > li:last-child {
    margin-right: 0; }

.primary-link {
  font-size: var(--size-500);
  color: var(--color-header-nav-text);
  font-family: var(--font-serif);
  padding: var(--size-100) 0;
  text-align: left;
  width: 100%;
  position: relative;
  text-decoration: none;
  display: block; }
  @media screen and (min-width: 36rem) {
    .primary-link {
      font-size: var(--size-400);
      margin-bottom: 0; } }
  .primary-link.is-active {
    color: white;
    margin-bottom: 0; }
    @media screen and (min-width: 36rem) {
      .primary-link.is-active:after {
        content: '';
        display: block;
        width: 20px;
        height: 20px;
        background-color: white;
        -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
                transform: rotate(45deg);
        position: absolute;
        bottom: calc(-33px);
        left: calc(50% - 10px); } }
    .primary-link.is-active:hover {
      text-decoration: none !important; }
  .primary-link svg {
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px; }
  .primary-link--search svg {
    margin-left: 0px; }
  .primary-link:hover, .primary-link:focus {
    outline: 0;
    -webkit-text-decoration: underline 1px var(--color-tertiary);
            text-decoration: underline 1px var(--color-tertiary);
    text-underline-offset: 5px; }
  .primary-link:focus {
    color: white; }

.submenu {
  display: none;
  color: var(--color-header-submenu-text);
  background-color: white;
  margin-left: calc(-1 * var(--size-400));
  margin-right: calc(-1 * var(--size-400));
  margin-bottom: var(--size-600); }
  @media screen and (min-width: 36rem) {
    .submenu {
      position: absolute;
      left: 0;
      right: 0;
      top: 100%;
      z-index: 999;
      margin-left: 0;
      margin-right: 0;
      margin-bottom: 0;
      -webkit-box-shadow: 0 1.25em 1.75em rgba(0, 0, 0, 0.15);
              box-shadow: 0 1.25em 1.75em rgba(0, 0, 0, 0.15); } }
  .submenu.submenu-is-open {
    display: block; }
  .submenu__grid {
    display: grid;
    grid-template-columns: 1fr; }
    @media screen and (min-width: 36rem) {
      .submenu__grid--learn-grid {
        grid-template-columns: 1fr 1fr 2fr; } }
    @media screen and (min-width: 64rem) {
      .submenu__grid--learn-grid {
        grid-template-columns: 1.5fr 1fr 2fr; } }
    @media screen and (min-width: 36rem) {
      .submenu__grid--get-involved-grid {
        grid-template-columns: 1fr 1fr 1.25fr; } }
    @media screen and (min-width: 64rem) {
      .submenu__grid--get-involved-grid {
        grid-template-columns: 1fr 1fr 1fr; } }
    @media screen and (min-width: 36rem) {
      .submenu__grid--resources-grid {
        grid-template-columns: 1fr 1.5fr 1fr; } }
    @media screen and (min-width: 64rem) {
      .submenu__grid--resources-grid {
        grid-template-columns: 1fr 1.25fr 1fr; } }
    @media screen and (min-width: 48rem) {
      .submenu__grid--about-grid {
        grid-template-columns: 1fr 2fr; } }
    @media screen and (min-width: 64rem) {
      .submenu__grid--about-grid {
        grid-template-columns: 1fr 2fr; } }
  .submenu__section {
    border-bottom: 1px solid var(--color-header-lines);
    padding: var(--size-100); }
    @media screen and (min-width: 36rem) {
      .submenu__section {
        padding-left: var(--size-200);
        padding-right: var(--size-200);
        border-bottom: 0;
        border-right: 1px solid var(--color-header-lines); } }
  @media screen and (min-width: 36rem) and (min-width: 48rem) {
    .submenu__section {
      padding-left: var(--size-500);
      padding-right: var(--size-500); } }
  @media screen and (min-width: 36rem) and (min-width: 64rem) {
    .submenu__section {
      padding-left: var(--size-800);
      padding-right: var(--size-800); } }

    .submenu__section:last-child {
      border-bottom: 0; }
      @media screen and (min-width: 36rem) {
        .submenu__section:last-child {
          border-right: 0; } }
    .submenu__section li {
      padding: var(--size-100); }
    .submenu__section ul li a {
      font-size: var(--size-500); }
      @media screen and (min-width: 36rem) {
        .submenu__section ul li a {
          font-size: var(--size-400); } }
    .submenu__section ul li.submenu__latest a {
      font-size: var(--size-400); }
      @media screen and (min-width: 36rem) {
        .submenu__section ul li.submenu__latest a {
          font-size: var(--size-300); } }
    .submenu__section--about-section {
      border-right: 0;
      display: none; }
      @media screen and (min-width: 48rem) {
        .submenu__section--about-section {
          display: initial; } }
    .submenu__section--about-links {
      display: grid;
      grid-template-columns: 1fr; }
      @media screen and (min-width: 36rem) {
        .submenu__section--about-links {
          grid-template-columns: 1fr 1fr;
          grid-auto-rows: 1fr 3fr; } }
  .submenu__icon {
    color: var(--color-header-icons);
    margin-right: 1em; }
  .submenu__section-heading {
    color: var(--color-header-submenu-heading);
    font-family: var(--font-sans);
    font-size: var(--size-300);
    text-transform: uppercase;
    line-height: 1.5;
    padding: var(--size-100); }
    .submenu__section-heading a {
      color: inherit;
      text-decoration: none; }
    @media screen and (min-width: 36rem) {
      .submenu__section-heading--about-head {
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row-start: 1;
        grid-row-end: 2; } }
  .submenu__image {
    display: none; }
    @media screen and (min-width: 48rem) {
      .submenu__image--learn-image {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: right;
            justify-content: right;
        padding-top: var(--size-100); } }
    .submenu__image--learn-image img {
      width: 9em; }
    @media screen and (min-width: 48rem) {
      .submenu__image--get-involved-image {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: left;
            justify-content: left;
        padding-top: var(--size-100); } }
    .submenu__image--get-involved-image img {
      width: 10em; }
    @media screen and (min-width: 48rem) {
      .submenu__image--resources-image {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: right;
            justify-content: right;
        padding-top: var(--size-100); } }
    .submenu__image--resources-image img {
      width: 9em; }
    @media screen and (min-width: 48rem) {
      .submenu__image--about-image {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: center;
            justify-content: center;
        padding-top: var(--size-100); } }
    .submenu__image--about-image img {
      width: 12em; }
  .submenu a {
    text-decoration: none; }
    .submenu a:hover, .submenu a:focus {
      outline: 0;
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: .125em; }
    .submenu a:focus {
      -webkit-text-decoration-color: var(--color-header-links-focus);
              text-decoration-color: var(--color-header-links-focus); }
  .submenu__latest {
    font-family: var(--font-sans);
    line-height: 1.3; }
    .submenu__latest:hover .submenu__latest__image img, .submenu__latest:focus .submenu__latest__image img {
      opacity: 1; }
    .submenu__latest:hover .submenu__latest__icon, .submenu__latest:focus .submenu__latest__icon {
      opacity: 0; }
    .submenu__latest__date {
      font-size: .9em;
      margin-top: var(--size-50); }
    .submenu__latest--has-image a {
      display: grid;
      grid-template-columns: 5em 2fr;
      grid-gap: var(--size-200); }
    .submenu__latest--has-image .submenu__latest__image {
      position: relative;
      height: 3.5em;
      overflow: hidden;
      background-color: black; }
      .submenu__latest--has-image .submenu__latest__image img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover;
        opacity: .7;
        -webkit-transition: opacity .5s;
        -o-transition: opacity .5s;
        transition: opacity .5s; }
    .submenu__latest--has-image .submenu__latest__icon {
      position: absolute;
      z-index: 100;
      color: white;
      display: block;
      opacity: .9;
      -webkit-transition: opacity .5s;
      -o-transition: opacity .5s;
      transition: opacity .5s; }
      .submenu__latest--has-image .submenu__latest__icon--video {
        top: calc(50% - (25px / 2));
        left: calc(50% - (25px / 2)); }
      .submenu__latest--has-image .submenu__latest__icon--article {
        top: calc(50% - (21px / 2));
        left: calc(50% - (18px / 2)); }
    .submenu__latest--has-image .submenu__latest__text {
      grid-column-start: 2;
      grid-column-end: 3;
      align-self: center; }

.menu-trigger {
  justify-self: end; }
  @media print {
    .menu-trigger {
      display: none; } }
  .menu-trigger__button {
    color: var(--color-header-menu-trigger); }
    @media screen and (min-width: 36rem) {
      .menu-trigger__button {
        display: none; } }
    .menu-is-open .menu-trigger__button {
      color: var(--color-header-menu-trigger-active); }

.primary-link--search:after {
  content: 'Search';
  padding-left: var(--size-50); }
  @media screen and (min-width: 36rem) {
    .primary-link--search:after {
      content: none; } }
.primary-link--search svg {
  width: 18px; }
  @media screen and (min-width: 36rem) {
    .primary-link--search svg {
      width: 20px; } }

.search-form {
  padding: var(--size-100); }
  @media screen and (min-width: 36rem) {
    .search-form {
      padding-left: var(--size-800);
      padding-right: var(--size-800); } }
  .search-form__heading {
    color: var(--color-header-submenu-heading);
    font-family: var(--font-sans);
    font-size: var(--size-300);
    text-transform: uppercase;
    display: none; }
    @media screen and (min-width: 36rem) {
      .search-form__heading {
        display: initial;
        padding: var(--size-100); } }
  .search-form__wrapper {
    padding: var(--size-100); }

.search-field {
  width: 80%;
  padding: var(--size-100);
  font-family: var(--font-serif);
  font-size: var(--size-400);
  border: 1px solid var(--color-header-search-border); }
  @media screen and (min-width: 36rem) {
    .search-field {
      width: 90%; } }
  .search-field:focus {
    outline: 2px solid var(--color-button-border-primary); }

.search-submit {
  font-family: var(--font-serif);
  font-size: var(--size-400);
  padding: var(--size-100);
  background-color: var(--color-primary-glare);
  border: 0;
  border-top: 1px solid var(--color-primary-glare);
  /* border to compensate for border on search field */
  border-bottom: 1px solid var(--color-primary-glare);
  color: var(--color-tertiary);
  cursor: pointer; }
  .search-submit:focus {
    outline: 2px solid var(--color-button-border-primary); }

/*
 *
 * ANCHOR 3./ Site Alert Bar
------------------------------------------------*/
.site-alert {
  font-size: var(--size-400);
  background-color: var(--color-site-alert-bg);
  color: var(--color-site-alert-text);
  padding: var(--size-100) var(--size-300);
  text-align: center;
  text-transform: uppercase;
  font-family: var(--font-sans); }
  .site-alert__text {
    margin-right: var(--size-50); }
  .site-alert__button:hover {
    color: var(--color-site-alert-text-hover); }