:root {
  --hazdev-site-max-width: 100rem;
}

.site-primary-navigation {
  background: #fff;
  border-bottom: 1px solid #dfe1e2;
}

.site-primary-navigation--mobile {
  display: none;
}

.site-primary-navigation .grid-container {
  max-width: var(--hazdev-site-max-width);
}

.site-primary-navigation__list {
  align-items: stretch;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-primary-navigation li {
  margin: 0;
}

.site-primary-navigation__item {
  position: relative;
}

.site-primary-navigation__control {
  display: flex;
  height: 100%;
}

.site-primary-navigation__control > a {
  align-items: center;
  display: flex;
  padding-right: 0.35rem;
}

.site-primary-navigation__toggle {
  align-items: center;
  background: transparent;
  border: 0;
  color: #1a4480;
  cursor: pointer;
  display: flex;
  justify-content: center;
  padding: 0.5rem 0.5rem 0.5rem 0.15rem;
}

.site-primary-navigation__toggle:hover,
.site-primary-navigation__toggle:focus,
.site-primary-navigation__control:has(> a:hover)
  .site-primary-navigation__toggle,
.site-primary-navigation__control:has(> a:focus)
  .site-primary-navigation__toggle,
.site-primary-navigation__control:has(> a[aria-current='page'])
  .site-primary-navigation__toggle {
  background: #e7f6f8;
}

.site-primary-navigation__toggle img {
  height: 1.25rem;
  transition: transform 160ms ease;
  width: 1.25rem;
}

.site-primary-navigation__toggle[aria-expanded='true'] img {
  transform: rotate(180deg);
}

.site-primary-navigation__submenu {
  background: #fff;
  border: 1px solid #dfe1e2;
  box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 18%);
  left: 0;
  min-width: 20rem;
  position: absolute;
  top: 100%;
  z-index: 300;
}

.site-primary-navigation__item:nth-last-child(-n + 3)
  > .site-primary-navigation__submenu {
  left: auto;
  right: 0;
}

.site-primary-navigation__submenu-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-primary-navigation__submenu-list--depth-2 {
  border-left: 0.25rem solid #d9e8f6;
  margin: 0 1rem 0.75rem;
}

.site-primary-navigation .site-primary-navigation__submenu a {
  font-weight: 400;
  padding: 0.65rem 1rem;
}

.site-primary-navigation__submenu-list--depth-2 a {
  font-size: 0.95rem;
  padding: 0.5rem 0.75rem;
}

.site-primary-navigation__submenu a[aria-current='page'] {
  background: transparent;
  box-shadow: none;
  font-weight: 700;
  text-decoration: none;
}

.site-primary-navigation a {
  color: #1a4480;
  display: block;
  font-weight: 700;
  padding: 0.75rem 1rem;
  text-decoration: none;
}

.site-primary-navigation a:hover,
.site-primary-navigation a:focus {
  background: #e7f6f8;
  color: #162e51;
}

.site-primary-navigation__item > a[aria-current='page'],
.site-primary-navigation__control > a[aria-current='page'] {
  background: #e7f6f8;
  box-shadow: inset 0 -0.25rem #00bde3;
  color: #162e51;
  text-decoration: underline;
}

.site-primary-navigation__utility {
  margin-left: auto !important;
}

.site-primary-navigation__utility a {
  align-items: center;
  background: #005ea8;
  color: #fff;
  display: flex;
  gap: 0.4rem;
}

.site-primary-navigation__utility-icon {
  filter: brightness(0) invert(1);
  height: 1.25rem;
  width: 1.25rem;
}

.site-primary-navigation__utility a:hover,
.site-primary-navigation__utility a:focus {
  background: #1a4480;
  color: #fff;
}

.site-breadcrumb {
  font-size: 0.9rem;
  margin: 1rem 0 0;
}

.site-breadcrumb + h1 {
  margin-top: 1.5rem;
}

.site-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-breadcrumb li {
  margin: 0;
}

.site-breadcrumb li:not(:last-child)::after {
  color: #71767a;
  content: '/';
  padding-left: 0.25rem;
}

.site-breadcrumb [aria-current='page'] {
  color: #565c65;
}

.site-external-link__indicator {
  margin-left: 0.1em;
  vertical-align: -0.125em;
}

.section-landing__intro {
  font-size: 1.25rem;
  max-width: 60rem;
}

.section-landing__tasks ul,
.section-landing__related ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  list-style: none;
  padding: 0;
}

.section-landing__tasks li,
.section-landing__related li {
  margin: 0;
}

.section-landing__tasks .usa-button {
  align-items: center;
  display: inline-flex;
  gap: 0.5rem;
  margin: 0;
}

.section-landing__tasks .usa-button > .usa-icon {
  flex-shrink: 0;
}

.section-landing__cards {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.section-landing__card {
  border: 1px solid #ddd;
  border-radius: 0.25rem;
  border-top: 0.4rem solid #ddd;
  padding: 1rem;
}

.section-landing__card h3 {
  margin-top: 0;
}

.section-landing__card p {
  margin-bottom: 0;
}

.section-landing__popular,
.section-landing__related {
  margin-top: 2rem;
}

@media (max-width: 63.999rem) {
  .hazdev-navigation {
    overflow-x: hidden;
    padding-inline: 0;
  }

  .hazdev-navigation__close {
    margin-right: 1rem;
  }

  .hazdev-navigation__search {
    margin-inline: 1rem;
  }

  .site-navigation__section-navigation,
  .site-navigation__contextual-navigation {
    display: none;
  }

  .site-primary-navigation--desktop {
    display: none;
  }

  .site-primary-navigation--mobile {
    border-bottom: 0;
    display: block;
    margin-top: 1rem;
    max-width: 100%;
    min-width: 0;
    width: 100%;
  }

  .site-primary-navigation--mobile .grid-container {
    max-width: 100%;
    min-width: 0;
    padding: 0;
    width: 100%;
  }

  .site-primary-navigation--mobile .site-primary-navigation__list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    max-width: 100%;
    min-width: 0;
    width: 100%;
  }

  .site-primary-navigation--mobile .site-primary-navigation__item,
  .site-primary-navigation--mobile .site-primary-navigation__control,
  .site-primary-navigation--mobile .site-primary-navigation__submenu,
  .site-primary-navigation--mobile .site-primary-navigation__submenu-list,
  .site-primary-navigation--mobile .site-primary-navigation__submenu-item {
    max-width: 100%;
    min-width: 0;
    width: 100%;
  }

  .site-primary-navigation--mobile .site-primary-navigation__control > a {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .site-primary-navigation--mobile .site-primary-navigation__control {
    height: auto;
  }

  .site-primary-navigation--mobile
    .site-primary-navigation__control
    > a[aria-current='page'] {
    background: transparent;
    box-shadow: none;
    text-decoration: none;
  }

  .site-primary-navigation--mobile
    .site-primary-navigation__control:has(> a[aria-current='page'])
    .site-primary-navigation__toggle {
    background: transparent;
  }

  .site-primary-navigation--mobile .site-primary-navigation__toggle {
    padding-inline: 1rem;
  }

  .site-primary-navigation--mobile .site-primary-navigation__submenu {
    border: 0;
    box-shadow: none;
    left: auto;
    min-width: 0;
    position: static;
    right: auto;
    width: 100%;
  }

  .site-primary-navigation--mobile .site-primary-navigation__submenu a {
    padding-left: calc(1rem + var(--navigation-depth, 0) * 0.75rem);
    overflow-wrap: anywhere;
  }

  .site-primary-navigation--mobile
    .site-primary-navigation__submenu
    a[aria-current='page'] {
    background: #e7f6f8;
  }

  .site-primary-navigation--mobile .site-primary-navigation__submenu-list {
    border: 0;
    margin: 0;
    padding: 0;
  }

  .site-primary-navigation--mobile .site-primary-navigation__utility {
    grid-column: 1 / -1;
    margin: 1rem !important;
  }

  .site-primary-navigation--mobile .site-primary-navigation__utility a {
    justify-content: center;
    width: 100%;
  }
}

@media (min-width: 64rem) {
  .hazdev-page .hazdev-navigation {
    max-height: none;
  }

  .hazdev-navigation--primary-only {
    display: none !important;
  }
}
