/**
 * @file
 * Navbar, main menu with dropdowns, footer menu.
 *
 * Breakpoint: the menu collapses below 992px (like navbar-expand-lg).
 */

.navbar {
  padding: 0.5rem 0;
}

.navbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

/* Branding. */
.region-nav-branding .site-logo {
  display: block;
  margin-right: 1rem;
  padding: 5px 0;
}

.region-nav-branding .site-logo img {
  width: auto;
  height: 36px;
}

@media (min-width: 768px) {
  .region-nav-branding .site-logo img {
    height: 80px;
  }
}

/* Toggler (mobile). */
.navbar__toggler {
  padding: 0.25rem 0.75rem;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--vk-menu-blue);
  cursor: pointer;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 0.375rem;
}

.navbar__toggler-icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  background:
    linear-gradient(currentColor, currentColor) center 25% / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center 50% / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center 75% / 100% 2px no-repeat;
}

.navbar__toggler[aria-expanded="true"] .navbar__toggler-icon {
  background:
    linear-gradient(45deg, transparent calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(-45deg, transparent calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), transparent calc(50% + 1px));
}

/* Main menu – shared. */
.main-menu {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.main-menu__item {
  position: relative;
}

.main-menu__link,
.footer-menu__link {
  display: block;
  padding: 10px 8px;
  font-family: var(--vk-font-display);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.5;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--vk-menu-blue);
  text-shadow: 1px 1px #121212;
}

.main-menu__link:hover,
.main-menu__link:focus-visible,
.main-menu__item.is-open > .main-menu__link {
  color: var(--vk-white);
}

/* Caret. */
.main-menu__link--toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
}

/* Dropdown. */
.main-menu__dropdown {
  display: none;
  min-width: 10rem;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: var(--vk-submenu);
  border: 1px solid rgba(0, 0, 0, 0.175);
}

.main-menu__item.is-open > .main-menu__dropdown {
  display: block;
}

.main-menu__dropdown-link {
  display: block;
  padding: 0.25rem 1rem;
  font-weight: 400;
  white-space: nowrap;
  text-decoration: none;
  color: var(--vk-white);
}

.main-menu__dropdown-link:hover,
.main-menu__dropdown-link:focus-visible,
.main-menu__dropdown-link.is-active {
  color: var(--vk-white);
  background-color: var(--vk-menu-hover);
}

/* Additional region (Facebook icon). */
.region-nav-additional p {
  margin: 0;
}

/* Desktop. */
@media (min-width: 992px) {
  .navbar__inner {
    flex-wrap: nowrap;
  }

  .navbar__toggler {
    display: none;
  }

  .navbar__collapse {
    display: flex;
    flex-grow: 1;
    align-items: center;
    justify-content: flex-end;
  }

  .main-menu {
    justify-content: flex-end;
  }

  /* The "lifted tab" hover of the previous theme. */
  .main-menu > .main-menu__item:hover {
    margin-top: -8px;
    padding-top: 2px;
    border-top: 6px solid var(--vk-menu-blue);
  }

  .main-menu__dropdown {
    position: absolute;
    z-index: 1000;
    top: 100%;
    left: 0;
  }

  .main-menu__item--has-children:hover > .main-menu__dropdown,
  .main-menu__item--has-children:focus-within > .main-menu__dropdown {
    display: block;
  }

  .region-nav-additional {
    margin-left: 0.5rem;
  }
}

/* Mobile. */
@media (max-width: 991.98px) {
  .navbar__collapse {
    flex-basis: 100%;
    margin-top: 0.5rem;
    padding: 0.5rem 0;
    background: var(--vk-deepblue);
  }

  .js .navbar__collapse:not(.is-open) {
    display: none;
  }

  .main-menu {
    flex-direction: column;
  }

  .main-menu__link {
    padding: 6px 1rem;
  }

  .main-menu__dropdown {
    border: 0;
  }

  .main-menu__dropdown-link {
    padding: 0.5rem 2rem;
    white-space: normal;
  }

  .region-nav-additional {
    padding: 0.5rem 1rem 0;
  }
}

/* Footer menu – same look as the main menu. */
.footer-menu {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-menu__item:hover {
  margin-top: -8px;
  padding-top: 2px;
  border-top: 6px solid var(--vk-menu-blue);
}

.footer-menu__link:hover,
.footer-menu__link:focus-visible {
  color: var(--vk-menu-hover);
}

/* Breadcrumb (disabled by default, styled for when it is placed). */
.breadcrumb ol {
  margin: 1rem 0 0;
}