@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap);
@import "./constants/colors.css";

:root {
  --topbar-height: 70px;
  --dropdown-height: 2.5rem;
}
.topbar,
.topbar-container {
  height: 70px;
  height: var(--topbar-height);
  width: 100%;
}
.topbar {
  background-color: #fff;
  box-shadow: 0 0 5px var(--wnp-color-secondary);
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
  padding: 0 15px;
  position: fixed;
  top: 0;
  z-index: 1000;
}
.topbar-left-content {
  display: flex;
  flex-direction: column;
}
.topbar-left-content .topbar-left-content-top {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.topbar-left-content .topbar-left-content-top > div {
  display: flex;
  position: relative;
  align-items: center;
}
.topbar-logo {
  height: 35px;
  height: calc(var(--topbar-height) / 2);
}
.topbar-logo.topbar-logo-small {
  display: none;
}
.topbar-menu-toggle-button {
  align-items: center;
  background-color: #fff;
  border: 1.5px solid var(--wnp-color-font);
  border-radius: 38.88889px;
  border-radius: calc(var(--topbar-height) / 1.8);
  cursor: pointer;
  display: flex;
  height: 38.88889px;
  height: calc(var(--topbar-height) / 1.8);
  justify-content: center;
  width: 65px;
}
.topbar-menu-toggle-button:active {
  border-color: var(--wnp-color-primary);
  border-width: 2px;
  box-shadow: 0 0 1px var(--wnp-color-secondary-light);
}
.topbar-menu-toggle-button > img {
  height: 22px;
}
.topbar-menu-mobile {
  --menu-background-opacity: 0.5;
  --menu-background-blur: 2px;
  display: none; /* Change from flex to none */
  height: 100vh;                      
  justify-content: flex-end;
  position: fixed;
  right: 0;
  top: var(--topbar-height);        
  width: 100vw;                      
  max-width: 100vw;                  
  overflow-x: hidden;                
  box-sizing: border-box;            
  z-index: 980;
}

.topbar-menu-mobile-open {
  display: flex; /* Ensure it shows when open */
}

.topbar-menu-mobile-inner {
  background: #fff;
  box-shadow: 0 0 5px var(--wnp-color-secondary);
  padding-top: 9px;
  position: fixed;
  top: 0;
  right: -100%;
  width: 180px;
  height: 100vh;
  z-index: 990;
  max-width: 100vw;
  box-sizing: border-box;
}
.topbar-menu-mobile-open {
  -webkit-animation: topbar-menu-mobile-opacity-open 0.25s linear 0s 1 forwards;
  animation: topbar-menu-mobile-opacity-open 0.25s linear 0s 1 forwards;
}
.topbar-partnership-logo-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: 0.3rem;
}
.topbar-partner-logo {
  height: 18.91892px;
  height: calc(var(--topbar-height) / 3.7);
}
.topbar-partnership-logo-container > span {
  font-size: 0.7rem;
  padding-right: 0.2rem;
  text-align: center;
}
.topbar-partnership-logo-container > div {
  display: flex;
  align-content: center;
  justify-content: center;
  font-weight: 600;
  color: #272727;
  font-size: 0.8rem;
}
.topbar-partnership-logo-container > div > span {
  padding-left: 2px;
  font-family: "Montserrat", sans-serif;
}
@-webkit-keyframes topbar-menu-mobile-opacity-open {
  0% {
    -webkit-backdrop-filter: blur(0);
    backdrop-filter: blur(0);
    background-color: rgba(213, 215, 216, 0);
  }
  to {
    -webkit-backdrop-filter: blur(var(--menu-background-blur));
    backdrop-filter: blur(var(--menu-background-blur));
    background-color: rgba(213, 215, 216, var(--menu-background-opacity));
  }
}
@keyframes topbar-menu-mobile-opacity-open {
  0% {
    -webkit-backdrop-filter: blur(0);
    backdrop-filter: blur(0);
    background-color: rgba(213, 215, 216, 0);
  }
  to {
    -webkit-backdrop-filter: blur(var(--menu-background-blur));
    backdrop-filter: blur(var(--menu-background-blur));
    background-color: rgba(213, 215, 216, var(--menu-background-opacity));
  }
}
.topbar-menu-mobile-open > .topbar-menu-mobile-inner {
  -webkit-animation: topbar-menu-mobile-slide-open 0.25s linear 0s 1 forwards;
  animation: topbar-menu-mobile-slide-open 0.25s linear 0s 1 forwards;
}
@-webkit-keyframes topbar-menu-mobile-slide-open {
  0% {
    right: -100%;
  }
  to {
    right: 0;
  }
}
@keyframes topbar-menu-mobile-slide-open {
  0% {
    right: -100%;
  }
  to {
    right: 0;
  }
}
.topbar-menu-mobile-close {
  -webkit-animation: topbar-menu-mobile-opacity-close 0.25s linear 0s 1 forwards;
  animation: topbar-menu-mobile-opacity-close 0.25s linear 0s 1 forwards;
}
@-webkit-keyframes topbar-menu-mobile-opacity-close {
  0% {
    -webkit-backdrop-filter: blur(var(--menu-background-blur));
    backdrop-filter: blur(var(--menu-background-blur));
    background-color: rgba(213, 215, 216, var(--menu-background-opacity));
  }
  99% {
    -webkit-backdrop-filter: blur(0);
    backdrop-filter: blur(0);
    background-color: rgba(213, 215, 216, 0);
    margin-right: 0;
  }
  to {
    margin-right: -100%;
  }
}
@keyframes topbar-menu-mobile-opacity-close {
  0% {
    -webkit-backdrop-filter: blur(var(--menu-background-blur));
    backdrop-filter: blur(var(--menu-background-blur));
    background-color: rgba(213, 215, 216, var(--menu-background-opacity));
  }
  99% {
    -webkit-backdrop-filter: blur(0);
    backdrop-filter: blur(0);
    background-color: rgba(213, 215, 216, 0);
    margin-right: 0;
  }
  to {
    margin-right: -100%;
  }
}
.topbar-menu-mobile-close > .topbar-menu-mobile-inner {
  -webkit-animation: topbar-menu-mobile-slide-close 0.25s linear 0s 1 forwards;
  animation: topbar-menu-mobile-slide-close 0.25s linear 0s 1 forwards;
}
@-webkit-keyframes topbar-menu-mobile-slide-close {
  0% {
    right: 0;
  }
  to {
    right: -100%;
  }
}
@keyframes topbar-menu-mobile-slide-close {
  0% {
    right: 0;
  }
  to {
    right: -100%;
  }
}
.topbar-menu-mobile-container {
  text-align: center;
}
.topbar-menu-mobile-inner-link {
  padding: 15px 20px;
}
.topbar-menu-mobile-inner-link-selected {
  background-color: #edf9ff;
  border-left: 5px solid var(--wnp-color-primary);
}
.topbar-menu-mobile-inner-link-selected > a {
  margin-left: -5px;
}
.topbar-menu-mobile-inner-link > a {
  font-size: 18px;
}
.topbar-menu-mobile-inner-button {
  padding: 10px 20px;
}
.topbar-menu-desktop-container {
  display: none;
}
@media only screen and (min-width: 330px) {
  :root {
    --dropdown-height: 2rem;
  }
  #cert-select-menu-container > div {
    height: 2.5rem;
    height: var(--dropdown-height);
  }
  .topbar-logo.topbar-logo-small {
    display: initial;
    height: 23.33333px;
    height: calc(var(--topbar-height) / 3);
  }
  .topbar-middle-content {
    margin-left: 10px;
  }
}
@media only screen and (min-width: 460px) {
  :root {
    --dropdown-height: 2.5rem;
  }
  #cert-select-menu-container > div {
    position: relative;
    top: 10px;
    height: 2.5rem;
    height: var(--dropdown-height);
  }
  .topbar-logo.topbar-logo-small {
    height: 35px;
    height: calc(var(--topbar-height) / 2);
  }
  .topbar-middle-content {
    margin-left: 20px;
  }
  .topbar-partnership-logo-container > div > span {
    padding-left: 2px;
    font-family: "Montserrat", sans-serif;
  }
  .topbar-partner-logo {
    height: 18.42105px;
    height: calc(var(--topbar-height) / 3.8);
  }
  .topbar-partnership-logo-container > span {
    font-size: 0.8rem;
    padding-right: 0.2rem;
    text-align: center;
  }
  .topbar-partnership-logo-container > div {
    display: flex;
    align-content: center;
    justify-content: center;
    font-weight: 600;
    color: #272727;
    font-size: 0.9rem;
  }
  
}
@media only screen and (min-width: 780px) {
  :root {
    --topbar-height: 70px;
    --dropdown-height: 2.5rem;
  }
  .topbar {
    padding: 0 15px 0 20px;
  }
  .topbar-middle-content {
    margin-left: 30px;
  }
  .topbar-menu-mobile-container {
    display: none;
  }
  .topbar-menu-desktop-container,
  .topbar-menu-desktop-link {
    align-items: center;
    display: flex;
    height: 100%;
  }
  .topbar-menu-desktop-button,
  .topbar-menu-desktop-link {
    padding: 0 15px;
  }
  .topbar-menu-desktop-link-selected {
    border-bottom: 5px solid var(--wnp-color-primary);
  }
  .topbar-menu-desktop-link-selected > a {
    margin-bottom: -5px;
  }
  .topbar-menu-desktop-link > a {
    font-size: 18px;
  }
  
}