/* Base styles */

.nav-menu ul {
   margin: 0;
   padding: 0;
   width: 100%;
   list-style: none;
   display: flex;
   flex-wrap: nowrap;
}

.nav-menu > ul {
   border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.nav-menu li {
   position: relative;
   margin: 0 8px;
}

.engagement-notification-container {
   margin: 0px !important;
   padding: 0px !important;
}

.nav-menu .sub-menu {
   position: absolute;
   z-index: 1;
   width: 180px;
   border-top: 2px solid var(--secondary);
   display: none;
}

.dropdown-open .sub-menu {
   display: flex;
}

.sub-menu > li {
   width: 100%;
   margin: 0;
}

.dropdown-open > .sub-menu {
   display: flex;
}

.nav-menu a {
   display: flex;
   padding: 8px 8px 8px 9px;
   text-decoration: none;
   border-bottom: 2px solid #fff;
   text-align: left;
   letter-spacing: 0.04em;
   font-family: "Poppins";
   font-weight: 600;
   font-style: normal;
   font-size: 0.9rem;
   color: #2a225f;
   transition: border-color 0.5s;
}

.nav-menu a:before {
   position: absolute;
   left: 8px;
   font-size: 16px;
   transform: translateY(2px);
   border-bottom: 2px solid #fff;
}

.nav-menu a:focus-visible {
   outline: 1px solid var(--primary);
   border-radius: 4px;
}

.nav-menu li.circled span {
   background: #f7f7f7;
   border-radius: 30px;
   padding: 0px 12px 0px 32px;
   margin: 8px 5px;
   box-sizing: border-box;
   height: 40px;
   line-height: 40px;
   min-width: 135px;
}

.nav-menu li.circled span:before {
   left: 12px;
   transform: translateY(0px);
}

.nav-menu li.circled:hover span {
   color: var(--secondary);
}

.nav-menu-icon {
   font-size: 1.2rem;
   margin-right: 8px;
}

.nav-menu-label {
   display: flex;
   align-items: center;
   position: relative;
}

.has-dropdown {
   cursor: pointer;
}

.has-dropdown:after {
   content: "\f0dd";
   font-family: "icons";
   margin-left: 8px;
}

.dropdown-toggle {
   display: none;
}

.nav-menu a:hover {
   border-color: #5952fd;
   color: #5952fd;
}

.sub-menu a,
.sub-menu span {
   background: #fff;
}

.nav-menu .sub-menu a:hover,
.nav-menu .sub-menu li.focus > a {
   color: var(--secondary);
   border-color: #fff;
}

/* Text meant only for screen readers. */
.screen-reader-text {
   clip: rect(1px, 1px, 1px, 1px);
   position: absolute !important;
   height: 1px;
   width: 1px;
   overflow: hidden;
}

.screen-reader-text:focus {
   background-color: #f1f1f1;
   border-radius: 3px;
   box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
   clip: auto !important;
   color: var(--primary);
   display: block;
   font-size: 14px;
   font-size: 0.875rem;
   font-weight: bold;
   height: auto;
   left: 5px;
   line-height: normal;
   padding: 15px 23px 14px;
   text-decoration: none;
   top: 5px;
   width: auto;
   z-index: 100000; /* Above WP toolbar. */
}

/* Hamburger container */
.menu-toggle {
   position: absolute;
   right: 25px;
   top: 10px;
   z-index: 100;
   width: 55px;
   height: 55px;
   background: #fff;
   border-radius: 50% 50% 50% 50%;
   -webkit-transition: 0.5s ease-in-out;
   transition: 0.5s ease-in-out;
   box-shadow: 2px 2px 6px 0 rgb(0 0 0 / 11%);
   cursor: pointer;
   z-index: 10001;
}

#main-nav .menu-toggle {
   box-shadow: none;
}

.main-nav-open .menu-toggle {
   position: fixed;
}

body.main-nav-open {
   max-height: 100vh;
   overflow: hidden;
}

.full-page-menu.active .menu-toggle {
   box-shadow: 0 0 0 100vw #fff, 0 0 0 500vh #fff;
   border-radius: 0;
}

.menu-avatar .nav-menu-icon,
.menu-avatar .nav-menu-label {
   display: none;
}

.nav-menu a.menu-avatar {
   padding: 0;
   border: none;
}

.menu-avatar:hover {
   border: none !important;
}

@media screen and (max-width: 880px) {
   #site-logo {
      max-width: 16px;
      overflow: hidden;
      padding-left: 1px;
   }
}

/* Mobile */

@media screen and (max-width: 720px) {
   #site-logo {
      display: none;
   }

   .page-header {
      border-top: 1px solid #bbb;
   }

   #main-nav {
      justify-content: center;
   }

   .header-right {
      padding: 0;
   }

   .page-header {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      height: 80px;
   }

   body {
      margin-bottom: 80px;
   }

   .nav-menu {
      width: 100%;
   }

   .nav-menu li {
      margin: 0;
   }

   .nav-menu-icon {
      font-size: 1.4rem;
      margin-right: 0;
   }

   .nav-menu a {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #2a73ba;
   }

   .nav-menu a.active,
   .nav-menu a:hover {
      color: #ce166d;
      border-color: #fff;
   }

   .menu-badge {
      position: absolute;
      bottom: 41px;
      left: calc(50% + 0px);
      transform: none;
   }

   .nav-menu-label {
      font-size: 0.82rem;
      font-weight: 400;
   }

   ul.menu-items {
      width: 100%;
      display: flex;
      justify-content: space-evenly;
   }

   .menu-avatar .nav-menu-icon,
   .menu-avatar .nav-menu-label {
      display: block;
   }

   .menu-avatar .avatar {
      display: none;
   }

   .nav-menu a.menu-avatar {
      padding: 8px 8px 8px 9px;

      border-bottom: 2px solid #fff;
   }
}