/* ===============================
   TOPBAR
=============================== */

.topbar {
   position: sticky;
   top: 0;
   z-index: 1000;
   width: 100%;
   background: linear-gradient(135deg, #162447, #1f4068, #1b3a57);
   box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}

.topbar .wrapper {
   max-width: 1200px;
   width: 90%;
   margin: auto;
   display: flex;
   align-items: center;
   padding: 16px 0;
   position: relative;
   transition: all 0.3s;
}

/* ===============================
   LOGO
=============================== */

.topbar .mark a {
   font-family: 'Audiowide';
   font-size: 1.6rem;
   color: #fff;
   text-decoration: none;
   white-space: nowrap;
}

/* ===============================
   LOGIN BUTTON
=============================== */

a.loginButton {
   margin-left: auto;
   padding: 8px 16px;
   font-family: 'Montserrat';
   font-size: .95rem;
   font-weight: 600;
   color: #eaf6ff;
   background: transparent;
   border: 2px solid #6fbaff;
   border-radius: 16px;
   cursor: pointer;
   transition: all .3s ease;
   margin-right: 15px;
}

.loginButton:hover {
   background: rgba(255, 255, 255, .08);
}

/* ===============================
   HAMBURGER
=============================== */

.menuToggle {
   display: none;
   margin-left: 18px;
   background: none;
   border: none;
   cursor: pointer;
}

.menuToggle svg {
   width: 28px;
   height: 28px;
   fill: #fff;
}

/* ===============================
   MENU DESKTOP
=============================== */

.listPanel {
   display: flex;
   align-items: center;
   gap: 22px;
}

.listPanel a,
.listPanel .dropButton {
   font-family: 'Montserrat';
   font-size: .95rem;
   font-weight: 600;
   color: #fff;
   background: none;
   border: none;
   cursor: pointer;
   text-decoration: none;
}

/* ===============================
   DROPDOWN DESKTOP
=============================== */

.dropDown {
   position: relative;
}

.dropButton {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
}

.caret {
   width: 8px;
   height: 8px;
   border-right: 2px solid #fff;
   border-bottom: 2px solid #fff;
   transform: rotate(45deg);
   transition: transform .3s ease;
}

.dropDown.is-open .caret {
   transform: rotate(-45deg);
}

.dropContent {
   position: absolute;
   top: calc(100% + 14px);
   right: 0px;

   min-width: 200px;
   background-color: rgb(32, 60, 92);
   backdrop-filter: blur(10px);
   border-radius: 16px;
   box-shadow: 0 30px 30px rgba(0, 0, 0, .3);

   display: flex;
   flex-direction: column;
   padding: 10px 0;

   opacity: 0;
   pointer-events: none;
   transform: translateY(-10px);
   transition:
      opacity .45s ease,
      transform .45s ease;
}

.dropDown.is-open .dropContent {
   transform: translateY(0px);
   opacity: 1;
   pointer-events: auto;
}

.dropContent a {
   padding: 14px 22px;
   color: #f1f1f1;
   font-size: .9rem;
   text-align: center;
}

/* ===============================
   CLOSE BUTTON
=============================== */

.closeButton {
   display: none;
}

/* ===============================
   RESPONSIVE
=============================== */

@media (max-width: 991px) {

   .topbar {
      position: relative;
   }

   .topbar .wrapper {
      position: static;
   }


   .menuToggle {
      display: block;
      margin-left: auto;
   }

   a.loginButton {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      padding: 6px 14px;
      font-size: .9rem;
   }

   .listPanel {
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      flex-direction: column;
      align-items: center;
      gap: 18px;
      background: linear-gradient(135deg, #162447, #1f4068, #1b3a57);
      padding: 20px 0;

      opacity: 0;
      transform: translateY(-12px);
      pointer-events: none;
      transition: all .35s ease;
   }

   .listPanel.is-open {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
   }

   .closeButton {
      display: flex;
      position: absolute;
      top: 10px;
      right: 16px;
      width: 28px;
      height: 28px;
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.9);
      color: #000000;
      border: none;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      font-weight: 700;
   }

   /* ===============================
      MOBILE DROPDOWN (ACCORDION)
   =============================== */

   .dropDown {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
   }

   .dropButton {
      width: auto;
      justify-content: center;
   }

   .dropContent {
      position: static;
      transform: translateY(-6px);

      width: auto;
      min-width: unset;

      background: rgba(40, 63, 107, 0.35);
      border-radius: 12px;
      box-shadow: none;

      max-height: 0;
      opacity: 0;
      overflow: hidden;
      pointer-events: none;

      transition:
         max-height .5s ease,
         opacity .4s ease,
         transform .4s ease;
   }

   .dropDown.is-open .dropContent {
      max-height: 300px;
      opacity: 1;
      transform: translateY(10px);
      pointer-events: auto;
   }
}

/* ===============================
   EXTRA MOBILE
=============================== */

@media (max-width: 600px) {
   .topbar .mark a {
      font-size: 1.3rem;
   }

   a.loginButton {
      left: auto;
      right: 40px;
      transform: none;
      font-size: .8rem;
      padding: 5px 10px;
   }
}