/* ==========================================================================
   Charter Connect Navbar
   ========================================================================== */

body {
  font-family: var(--font-primary);
}

.navbar {
  background: var(--color-bg-light);
  padding: 16px 0;
  z-index: 1000;

  li {
    list-style: none;
  }

  &.fixed-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }

  .container-fluid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1350px;
    margin: 0 auto;
  }

  .navbar-brand {
    display: flex;
    align-items: center;

    img {
      height: 34px;
      width: auto;
    }
  }

  .hamburger-icon {
    width: 32px;
    height: 32px;
  }

  .navbar-toggler {
    border: none;
    background: transparent;
    padding: 8px;
  }

  .menu {
    display: flex;
    align-items: center;
  }
}

div.custom-menu-class {
  display: flex;
  align-items: center;

  ul {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
    gap: 8px;
  }

  li {
    display: inline-block;

    a {
      color: var(--color-secondary);
      text-decoration: none;
      font-size: 22px;
      font-weight: 400;
      padding: 10px 16px;
      display: inline-block;
      transition: color 0.3s ease;

      &:hover {
        color: var(--color-primary);
      }
    }

    &:last-child a {
      background: var(--color-secondary);
      color: white !important;
      border: 2px solid var(--color-secondary);
      padding: 10px 24px;
      border-radius: 50px;
      font-weight: 600;
      transition: all 0.3s ease;

      &:hover {
        background: transparent;
        color: var(--color-secondary) !important;
      }
    }
  }
}

.menu-item-last {
  display: none;
}

div.custom-menu-toggle {
  ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  li {
    a {
      color: var(--color-text-dark);
      text-decoration: none;
      font-size: 25px;
      letter-spacing: 2px;
      padding: 12px 20px;
      display: block;
    }

    &:last-child a {
      background: var(--color-secondary);
      color: white !important;
      border: 2px solid var(--color-secondary);
      padding: 12px 28px;
      border-radius: 50px;
      font-weight: 600;
    }
  }
}

/* ==========================================================================
   Desktop Styles (992px and up)
   ========================================================================== */

@media (min-width: 992px) {
  .navbar {
    .menu {
      display: flex !important;
      opacity: 1 !important;
      visibility: visible !important;
      max-height: none !important;
    }

    .navbar-toggler {
      display: none;
    }
  }
}

/* ==========================================================================
   Mobile Styles (991px and below)
   ========================================================================== */

@media (max-width: 991px) {
  .navbar {
    .container-fluid {
      flex-wrap: wrap;
    }

    .navbar-brand img {
      height: 22px;
    }

    .menu {
      width: 100%;
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      visibility: hidden;
      transition:
        max-height 0.3s ease,
        opacity 0.3s ease,
        visibility 0.3s ease;
      flex-direction: column;
      padding: 0;
      margin-top: 0;
    }

    &.opened .menu {
      max-height: 500px;
      opacity: 1;
      visibility: visible;
      padding: 12px 0;
    }

    &.closed .menu {
      max-height: 0;
      opacity: 0;
      visibility: hidden;
    }
  }

  div.custom-menu-class {
    width: 100%;

    ul {
      flex-direction: column;
      width: 100%;
      gap: 0;
    }

    li {
      display: block;
      width: 100%;
      text-align: center;

      a {
        display: block;
        padding: 16px 20px;
        font-size: 16px;
      }

      &:last-child {
        margin-top: 16px;

        a {
          display: inline-block;
          width: auto;
        }
      }
    }
  }

  .menu-item-last {
    display: none !important;
  }
}

/* ==========================================================================
   Navbar Margin
   ========================================================================== */

.navbar-margin {
  height: 80px;
}

@media (max-width: 991px) {
  .navbar-margin {
    height: 70px;
  }
}