/* =========================================
   NAVBAR / MENU
========================================= */

#navbar {
  transition: top 0.5s;
}

.navbar {
  z-index: 1050;
}

.navbar .container,
#container-navbar {
  position: relative;
  z-index: 2;
}

.navbar-blur {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;

  backdrop-filter: blur(var(--blur-strong));
  -webkit-backdrop-filter: blur(var(--blur-strong));

  background: var(--g-glass);
  border-radius: 0 0 1rem 1rem;
  z-index: -1;

  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 66%, rgba(0,0,0,0) 100%);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: bottom;
  -webkit-mask-size: cover;

  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 66%, rgba(0,0,0,0) 100%);
  mask-repeat: no-repeat;
  mask-position: bottom;
  mask-size: cover;
}

.navbar-nav {
  align-items: center;
}


/* =========================================
   NAV ITEMS PRINCIPAIS
========================================= */

.nav-item {
  position: relative;

  border-radius: var(--border-radius-var);
  padding: 0 !important;

  transform-origin: center;

  box-shadow: var(--shadow-soft);

  backdrop-filter: blur(var(--blur-strong));
  -webkit-backdrop-filter: blur(var(--blur-strong));

  border: 1px solid var(--c-white);

  transition: var(--t-smooth);
}

.nav-item::before {
  content: "";
  position: absolute;
  inset: 0;

  background: var(--g-glass);

  z-index: -1;

  transition: opacity 0.5s ease;
  border-radius: inherit;
}

.nav-item::after {
  content: "";
  position: absolute;
  inset: 0;

  background: var(--g-glow-orange);

  z-index: -1;

  opacity: 0;
  transition: opacity 0.5s ease;
  border-radius: inherit;
}

.nav-item:hover {
  transform: scale(1.05);
}

.nav-item:hover::after {
  opacity: 1;
}

.nav-item::before,
.nav-item::after {
  pointer-events: none;
}


/* =========================================
   LINKS PRINCIPAIS
========================================= */

.nav-link {
  color: var(--c-ink);

  font-family: 'UniviaProBold', sans-serif;
  text-transform: uppercase;

  margin: 0;
  padding: 0.5rem 1.5rem !important;

  display: flex !important;
  align-items: center;
  justify-content: center;

  height: 100%;

  word-break: normal;
  white-space: normal;
  word-wrap: break-word;

  width: auto;
  max-width: 20rem;

  position: relative;
  border-radius: inherit;

  text-align: center;
  text-decoration: none;

  cursor: pointer;

  transition:
    color 0.25s ease,
    background 0.25s ease,
    transform 0.25s ease;
}

.nav-link:hover,
.nav-link:focus,
.nav-link:active {
  color: var(--c-ink);
  text-decoration: none;
  background: transparent;
}


/* =========================================
   DROPDOWN PARENT
========================================= */

.navbar .nav-item.dropdown {
  position: relative;

  border: 0;
  box-shadow: none;

  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.navbar .nav-item.dropdown::before,
.navbar .nav-item.dropdown::after {
  display: none;
}

.navbar .nav-item.dropdown > .nav-link {
  border-radius: var(--border-radius-var);
  border: 1px solid var(--c-white);

  box-shadow: var(--shadow-soft);

  background: var(--g-glass);

  backdrop-filter: blur(var(--blur-strong));
  -webkit-backdrop-filter: blur(var(--blur-strong));
}

.navbar .nav-item.dropdown:hover > .nav-link,
.navbar .nav-item.dropdown > .nav-link[aria-expanded="true"],
.navbar .nav-item.dropdown.is-mobile-open > .nav-link {
  background: var(--g-glow-orange);
}


/* =========================================
   SETA DO DROPDOWN
========================================= */

.navbar .dropdown-toggle::after {
  transition: transform 0.25s ease;
}

.navbar .nav-item.dropdown:hover > .dropdown-toggle::after,
.navbar .nav-item.dropdown > .dropdown-toggle[aria-expanded="true"]::after,
.navbar .nav-item.dropdown.show > .dropdown-toggle::after,
.navbar .nav-item.dropdown.is-mobile-open > .dropdown-toggle::after,
.navbar .dropdown-subitem.is-mobile-open > .dropdown-toggle::after {
  transform: rotate(180deg);
}


/* =========================================
   DROPDOWN MENU BASE
========================================= */

.navbar .dropdown-menu,
.navbar .dropdown-menu[data-bs-popper] {
  min-width: max-content;

  padding: 0.75rem;

  border: 0;
  border-radius: var(--border-radius-var);

  text-align: start !important;

  box-shadow: var(--shadow-soft);
}

.navbar .dropdown-menu.glass {
  background: var(--g-glass);

  backdrop-filter: blur(var(--blur-strong));
  -webkit-backdrop-filter: blur(var(--blur-strong));

  border: 1px solid var(--a-white-30);
  border-radius: var(--border-radius-var);
}


/* =========================================
   DROPDOWN NORMAL
========================================= */

.navbar .nav-item.dropdown:not(.dropdown-mega) > .dropdown-menu,
.navbar .nav-item.dropdown:not(.dropdown-mega) > .dropdown-menu[data-bs-popper] {
  left: 0 !important;
  right: auto !important;
  top: 100% !important;

  transform: translateY(0.35rem) !important;

  margin-left: 0 !important;
  margin-right: 0 !important;
}


/* =========================================
   SUBITEMS DROPDOWN
========================================= */

.navbar .dropdown-menu .dropdown-subitem {
  display: block !important;

  width: 100%;

  list-style: none;

  margin: 0;
  padding: 0;

  text-align: start !important;

  transform-origin: left center;
  transition: var(--t-smooth);
}

.navbar .dropdown-menu .dropdown-subitem.zoom:hover {
  transform: scale(1.05);
}

.navbar .dropdown-menu .dropdown-subitem-link,
.navbar .dropdown-menu .dropdown-item.dropdown-subitem-link {
  display: block !important;

  width: 100% !important;
  max-width: none !important;

  height: auto !important;

  margin: 0 !important;
  padding: 0.5rem 1rem !important;

  color: var(--c-ink) !important;

  font-family: 'UniviaProBold', sans-serif;
  text-transform: uppercase;

  text-align: start !important;
  text-align-last: start !important;

  white-space: nowrap;

  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  border: 0 !important;
  border-radius: calc(var(--border-radius-var) / 1.5);

  box-shadow: none !important;

  cursor: pointer;

  float: none !important;

  transition: var(--t-smooth);
}

.navbar .dropdown-menu .dropdown-subitem-link:hover,
.navbar .dropdown-menu .dropdown-subitem-link:focus,
.navbar .dropdown-menu .dropdown-subitem-link:active,
.navbar .dropdown-menu .dropdown-item.dropdown-subitem-link:hover,
.navbar .dropdown-menu .dropdown-item.dropdown-subitem-link:focus,
.navbar .dropdown-menu .dropdown-item.dropdown-subitem-link:active {
  color: var(--c-ink) !important;

  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  box-shadow: none !important;
  outline: none !important;
}


/* =========================================
   MULTILEVEL
========================================= */

.navbar .dropdown-subitem.dropend {
  position: relative;
}

.navbar .dropdown-subitem.dropend > .dropdown-menu,
.navbar .dropdown-subitem.dropend > .dropdown-menu[data-bs-popper] {
  top: 0 !important;
  left: 100% !important;
  right: auto !important;

  margin-top: 0 !important;
  margin-left: 0.5rem !important;

  transform: translateX(0.35rem) !important;
}


/* =========================================
   MEGAMENU
========================================= */

.navbar .dropdown-mega {
  position: static !important;
}

.navbar .dropdown-mega > .mega-menu,
.navbar .dropdown-mega > .mega-menu[data-bs-popper] {
  width: min(90vw, 1100px);

  top: 100% !important;
  left: 50% !important;
  right: auto !important;

  transform: translate(-50%, 0.35rem) !important;

  margin-left: 0 !important;
  margin-right: 0 !important;

  padding: 0;

  overflow: visible;
}

.mega-content {
  width: 100%;
}

.mega-column {
  text-align: start;
}

.mega-heading,
.mega-heading-link {
  display: block;

  margin-bottom: 0.75rem;

  color: var(--c-ink);

  font-family: 'UniviaProBold', sans-serif;
  text-transform: uppercase;

  text-align: start;
  text-decoration: none;
}

.mega-column-list {
  list-style: none;

  margin: 0;
  padding: 0;
}

.mega-link-item {
  list-style: none;

  margin: 0;
  padding: 0;

  transform-origin: left center;
  transition: var(--t-smooth);
}

.mega-link-item.zoom:hover {
  transform: scale(1.05);
}

.mega-link {
  display: block;

  width: 100%;

  padding: 0.45rem 0;

  color: var(--c-ink);

  font-family: 'UniviaProBold', sans-serif;
  text-transform: uppercase;

  text-align: start;
  text-decoration: none;

  background: transparent;
}

.mega-link:hover,
.mega-link:focus {
  color: var(--c-ink);
  background: transparent;
  text-decoration: none;
}


/* =========================================
   DESKTOP
   Hover + clique com animação
========================================= */

@media (min-width: 992px) {
  .navbar .nav-item.dropdown {
    padding-bottom: 0.5rem !important;
    margin-bottom: -0.5rem;
  }

  .navbar .dropdown-menu,
  .navbar .dropdown-menu[data-bs-popper] {
    display: block !important;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
      opacity 0.25s ease,
      transform 0.25s ease,
      visibility 0.25s ease;
  }

  .navbar .nav-item.dropdown:not(.dropdown-mega):hover > .dropdown-menu,
  .navbar .nav-item.dropdown:not(.dropdown-mega).show > .dropdown-menu,
  .navbar .nav-item.dropdown:not(.dropdown-mega) > .dropdown-menu.show {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;

    transform: translateY(0) !important;
  }

  .navbar .dropdown-subitem.dropend:hover > .dropdown-menu,
  .navbar .dropdown-subitem.dropend.show > .dropdown-menu,
  .navbar .dropdown-subitem.dropend > .dropdown-menu.show {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;

    transform: translateX(0) !important;
  }

  .navbar .dropdown-mega:hover > .mega-menu,
  .navbar .dropdown-mega.show > .mega-menu,
  .navbar .dropdown-mega > .mega-menu.show {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;

    transform: translate(-50%, 0) !important;
  }

  .navbar .nav-item.dropdown > .dropdown-menu::before {
    content: "";
    position: absolute;

    top: -0.75rem;
    left: 0;
    right: 0;

    height: 0.75rem;
  }

  .navbar .dropdown-subitem.dropend > .dropdown-menu::before {
    content: "";
    position: absolute;

    top: 0;
    left: -0.75rem;

    width: 0.75rem;
    height: 100%;
  }
}


/* =========================================
   MOBILE / OFFCANVAS
   No mobile, todos os itens principais
   recebem o visual no <a>, não no <li>.
========================================= */

.offcanvas-backdrop {
  background-color: unset;
}

.offcanvas {
  z-index: 1060;
}

.offcanvas .offcanvas-body {
  overflow-y: auto;
}

@media (max-width: 991.98px) {
  .offcanvas .navbar-nav {
    width: 100%;
    align-items: stretch;
  }

  /*
    Remove o visual dos LI no mobile.
    Isto impede diferença de altura entre items normais e dropdowns.
  */
  .offcanvas .navbar-nav > .nav-item {
    width: 100%;

    height: auto !important;
    min-height: 0 !important;

    border: 0 !important;
    box-shadow: none !important;

    background: transparent !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    border-radius: var(--border-radius-var);
  }

  .offcanvas .navbar-nav > .nav-item::before,
  .offcanvas .navbar-nav > .nav-item::after {
    display: none !important;
  }

  /*
    Todos os links principais ficam com a mesma caixa visual.
  */
  .offcanvas .navbar-nav > .nav-item > .nav-link,
  .offcanvas .navbar-nav > .nav-item.dropdown > .nav-link,
  .offcanvas .navbar-nav > .nav-item.dropdown > .nav-link-dropdown-parent {
    width: 100% !important;
    max-width: none !important;

    height: 54px !important;
    min-height: 54px !important;

    padding: 0 1.25rem !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box;

    border-radius: var(--border-radius-var);
    border: 1px solid var(--c-white);

    box-shadow: var(--shadow-soft);

    background: var(--g-glass);

    backdrop-filter: blur(var(--blur-strong));
    -webkit-backdrop-filter: blur(var(--blur-strong));

    text-align: center !important;
  }

  .offcanvas .navbar-nav > .nav-item:hover > .nav-link,
  .offcanvas .navbar-nav > .nav-item.dropdown:hover > .nav-link,
  .offcanvas .navbar-nav > .nav-item.dropdown.is-mobile-open > .nav-link,
  .offcanvas .navbar-nav > .nav-item.dropdown > .nav-link[aria-expanded="true"] {
    background: var(--g-glow-orange);
  }

  .offcanvas .nav-item.dropdown {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;

    width: 100%;
    height: auto !important;
  }

  .offcanvas .dropdown-menu,
  .offcanvas .dropdown-menu[data-bs-popper],
  .offcanvas .dropdown-mega > .mega-menu,
  .offcanvas .dropdown-mega > .mega-menu[data-bs-popper] {
    position: static !important;
    inset: auto !important;

    transform: none !important;

    width: 100% !important;
    min-width: 100% !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0.5rem !important;

    text-align: start !important;

    overflow: hidden;

    display: block !important;

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

    transition:
      max-height 0.35s ease,
      opacity 0.25s ease,
      visibility 0.25s ease;
  }

  .offcanvas .dropdown-menu.show,
  .offcanvas .dropdown-menu.is-mobile-open,
  .offcanvas .nav-item.dropdown.show > .dropdown-menu,
  .offcanvas .nav-item.dropdown.is-mobile-open > .dropdown-menu,
  .offcanvas .dropdown-subitem.dropend.show > .dropdown-menu,
  .offcanvas .dropdown-subitem.dropend.is-mobile-open > .dropdown-menu,
  .offcanvas .dropdown-mega > .mega-menu.show,
  .offcanvas .dropdown-mega > .mega-menu.is-mobile-open,
  .offcanvas .dropdown-mega.show > .mega-menu,
  .offcanvas .dropdown-mega.is-mobile-open > .mega-menu {
    max-height: 1500px !important;

    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .offcanvas .dropdown-subitem.dropend {
    display: flex !important;
    flex-direction: column !important;

    width: 100%;
    height: auto !important;
  }

  .offcanvas .dropdown-subitem.dropend > .dropdown-menu,
  .offcanvas .dropdown-subitem.dropend > .dropdown-menu[data-bs-popper] {
    padding-left: 1rem;
  }

  .offcanvas .dropdown-menu .dropdown-subitem {
    display: block !important;

    width: 100%;

    text-align: start !important;

    transform-origin: left center;
  }

  .offcanvas .dropdown-menu .dropdown-subitem.zoom:hover {
    transform: scale(1.03);
  }

  .offcanvas .dropdown-menu .dropdown-subitem-link,
  .offcanvas .dropdown-menu .dropdown-item.dropdown-subitem-link {
    display: block !important;

    width: 100% !important;
    max-width: none !important;

    height: auto !important;

    margin: 0 !important;
    padding: 0.65rem 1rem !important;

    text-align: start !important;
    text-align-last: start !important;

    white-space: nowrap;

    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    box-shadow: none !important;
  }

  .offcanvas .mega-menu {
    padding: 0.75rem !important;
  }

  .offcanvas .mega-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .offcanvas .mega-column {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  .offcanvas .mega-column-list {
    padding-left: 0.75rem;
  }
}


/* =========================================
   TABLET
========================================= */

@media (min-width: 768px) and (max-width: 991.98px) {
  .offcanvas.offcanvas-end {
    width: 350px !important;
    max-width: 350px;
  }
}


/* =========================================
   TOGGLER
========================================= */

.navbar-toggler {
  color: var(--c-ink);

  background: var(--g-glass);

  backdrop-filter: blur(var(--blur-strong));
  -webkit-backdrop-filter: blur(var(--blur-strong));

  border: 1px solid var(--a-white-30);
  border-radius: var(--border-radius-var);

  box-shadow: var(--shadow-soft);

  padding: 0;
  width: 3.5rem;
  height: 3.5rem;

  display: flex;
  align-items: center;
  justify-content: center;

  transition: var(--t-smooth);
}

.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler:focus-visible {
  outline: none !important;
  box-shadow: 0 0 30px rgba(0,0,0,.2) !important;
}

/* =========================================
   DESKTOP — ALTURAS IGUAIS NOS ITEMS
   Igual ao comportamento do menu do plugin
========================================= */

@media (min-width: 992px) {
  #site-header #navbar .biota-navbar-equal {
    display: flex !important;
    align-items: stretch !important;
  }

  #site-header #navbar .biota-navbar-equal > .nav-item {
    display: flex !important;
    align-items: stretch !important;
    justify-content: center !important;

    height: auto !important;
    min-height: 100%;

    align-self: stretch !important;
  }

  #site-header #navbar .biota-navbar-equal > .nav-item > .nav-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    height: 100% !important;
    min-height: 100%;

    box-sizing: border-box;
  }

  /*
    Os dropdowns têm o glass no link, não no li.
    Isto garante que também ficam com a mesma altura visual.
  */
  #site-header #navbar .biota-navbar-equal > .nav-item.dropdown {
    display: flex !important;
    align-items: stretch !important;
  }

  #site-header #navbar .biota-navbar-equal > .nav-item.dropdown > .nav-link {
    height: 100% !important;
    min-height: 100%;
  }
}