.site-header {
  position: fixed;
  top: 0;
  z-index: 10;
  width: 100%;
  height: 6rem;
  background-color: rgba(0, 0, 0, 0.75);
}

.site-logo a {
  position: absolute;
  top: -12px;
  left: 50%;
  /* only show MMC seal for mobile (full logo is 840px wide) */
  width: 116px;
  height: 116px;
  background-image: url('../img/mmc_icons.svg');
  background-position: -10px -10px;
  background-size: 860px 268px;
  -webkit-transform: translateX(-50%) scale(0.5);
          transform: translateX(-50%) scale(0.5);
}

/* "MENU" visible for mobile (hidden on desktop) */
.menu-toggle {
  float: right;
  margin: 1rem 0.5rem;
  padding: 1.375rem;
  font-size: 1.25rem;
  font-weight: 900;
  color: white;
  cursor: pointer;
}
.menu-toggle::after { content: ' ☰'; }

/* when "MENU" is clicked, slide site-nav into view */
#nav-toggle:checked + .site-header .site-nav { right: 0; }


.site-nav {
  position: fixed;
  top: 6rem;
  /* initially offscreen */
  right: -18rem;
  width: 18rem;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  -webkit-transition: right 0.3s ease;
  transition: right 0.3s ease;
}

/* all site-nav unordered lists */
.site-nav ul { list-style: none; }

/* mobile nav only (reset for desktop nav) */
.site-nav li:hover { background-color: rgba(61, 159, 193, 0.5); }

/* all site-nav anchors */
.site-nav a {
  display: block;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  padding: 0.75rem;
  width: 100%;
  font-size: 0.9375rem;
  line-height: 1.125;
  text-decoration: none;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
  color: white;
  background-color: transparent;
}
.site-nav a:hover { background-color: rgb(61, 159, 193); }

/* list items containing a subnav menu (unordered list) */
.site-nav .menu { position: relative; }

/* show menu's subnav menu on hover (subnav menu initially hidden) */
.site-nav .menu:hover > ul { display: block; }

/* secondary and tertiary menus */
.site-nav .primary ul {
  /* subnav menu initially hidden */
  display: none;
}

/* arrow icon indicating menu */
.site-nav .menu::after {
  content: '';
  position: absolute;
  top: 17px;
  right: 5px;
  width: 7px;
  height: 8px;
  background-image: url('../img/mmc_icons.svg');
  background-position: -61px -201px;
  background-size: 860px 268px;
  /* rotated to down arrow for mobile nav */
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
  /* initially semi-transparent */
  opacity: 0.25;
}
/* fully opaque on hover */
.site-nav .menu:hover::after { opacity: 1.0; }
/* add extra right padding to menu links to allow for arrow icon */
.site-nav .menu > a {
  padding-right: 1.125rem;
}




@media (min-width: 30em) {
  .site-logo a {
    /* full width logo */
    width: 840px;
    /* positioned to the left edge of screen */
    left: -240px;
    -webkit-transform: scale(0.375);
            transform: scale(0.375);
  }
}
@media (min-width: 40em) {
  .site-logo a {
    /* re-center logo */
    left: 50%;
    -webkit-transform: translateX(-50%) scale(0.375);
            transform: translateX(-50%) scale(0.375);
  }
}
@media (min-width: 50em) {
  .site-header { height: 8.75rem; }

  .site-logo a {
    /* scale up logo */
    -webkit-transform: translateX(-50%) scale(0.5);
            transform: translateX(-50%) scale(0.5);
  }

  .menu-toggle { display: none; }

  .site-nav {
    position: relative;
    top: 5.375rem;
    right: 0;
    width: 100%;
    background-color: transparent;
  }

  /* undo mobile li hover color */
  .site-nav li:hover { background-color: transparent; }

  .site-nav a:hover { background-color: rgba(0, 0, 0, 0.25); }

  /* keep menu highlighted when hovering over subnav menu */
  .site-nav .menu:hover > a { background-color: rgba(0, 0, 0, 0.25); }

  /* top level list items */
  .site-nav .primary {
    float: left;
    width: 18.75%;
  }

  /* search nav item */
  .site-nav .primary:last-child {
    width: 6.25%;
    /* hide text */
    text-indent: 200%;
    white-space: nowrap;
    overflow: hidden;
  }
  /* search icon */
  .site-nav .primary:last-child a {
    background-image: url('../img/mmc_icons.svg');
    background-position: -64px -136px;
    background-size: 860px 268px;
  }

  /* remove arrow icon indicating menu from primary links */
  .site-nav .primary::after {
    display: none;
  }

  .site-nav .primary ul {
    background-color: rgba(0, 0, 0, 0.75);
  }

  /* primary list items */
  .site-nav .primary > a {
    border-top: none;
    height: 3.375rem;
    font-weight: 900;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.125rem;
  }

  /* primary active indicator */
  .site-nav .primary[data-state="active"] > a {
    border-bottom: 4px solid #48b5b5;
    background-color: rgba(0, 0, 0, 0.25);
  }

  /* arrow icon indicating tertiary menu */
  .site-nav .primary .menu::after {
    /* clear previously set rotation (right arrow) */
    -webkit-transform: none;
            transform: none;
  }

  /* tertiary menu displayed to the right */
  .site-nav .primary .menu > ul {
    position: absolute;
    top: 0;
    right: -100%;
    width: 100%;
  }
}

/* WP specific: if logged-in, push header and nav down to accomidate admin bar (32px) */
.logged-in .site-header { top: 2rem; }
@media (max-width: 50em) {
  .logged-in .site-nav { top: 8rem; }
}
/* WP defined media query for triggering admin bar height change (46px) */
@media (max-width: 782px) {
  .logged-in .site-header { top: 2.875rem; }
  .logged-in .site-nav { top: 8.875rem; }
}
@media screen and (max-width: 600px) {
  #wpadminbar { position: fixed; }
}