/* Mobile Nav
--------------------------------------------- */

#btn-mobile-nav {
  cursor: pointer;
  font-size: var(--font-2xl);
  background-color: rgb(var(--primary-900));
  color: rgb(var(--primary-50));
  padding: 0.5rem;
  border-radius: 50%;
}

@media (min-width: 960px) {
  #btn-mobile-nav {
    display: none;
  }
}

.mobile-nav {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  z-index: 300;
  width: 85%;
  max-width: 480px;
  overflow: auto;
  background-color: rgb(var(--primary-900));
  color: rgb(var(--primary-50));
  visibility: hidden;
  transform: translateX(100%);
  transition: visibility 0.3s ease-in-out, transform 0.3s ease-in-out;

  &.active {
    visibility: visible;
    transform: translateX(0);
  }

  & a {
    color: rgb(var(--primary-50));
  }

  & > .container {
    height: 100%;
    padding: 1.5rem 24px 3rem;
  }

  & .flex-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    height: 100%;

    & .col:nth-child(1) {
      flex-grow: 1;
    }

    & .col:nth-child(1) {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      font-size: var(--font-lg);
    }
  }

  & .site-title {
    margin-bottom: 1.5rem;

    & svg {
      display: block;
      height: 20px;
      fill: rgb(var(--primary-50));
      transition: fill 0.2s;

      & a:hover svg {
        fill: rgb(var(--primary-50));
      }
    }
  }

  & .menu {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: var(--font-lg);
    font-weight: var(--font-black);
  }

  & .menu-item a::after {
    font-family: var(--font-symbol);
    display: inline-block;
    line-height: 1;
    vertical-align: middle;
    content: '\e5cc';
    margin-left: 0.5rem;
    font-size: var(--font-2xl);
  }

  & .lang-switcher {
    margin-top: 1.5rem;
    font-weight: var(--font-black);
  }

  & .section-title {
    font-size: var(--font-lg);
    font-weight: var(--font-black);
    margin-bottom: 0.75rem;
  }

  & .contact-info {
    margin-bottom: 1.5rem;
	  
	& .working-hours {
      margin-top: 1rem;
    }
  }

  & .social-networks {
    display: flex;
    align-items: center;
    gap: 1rem;

    & svg {
      display: block;
      width: var(--font-2xl);
      height: var(--font-2xl);
      fill: rgba(var(--primary-50), 1);
      transition: fill 0.2s;
    }
  }
}