/* Root/global styles */

/* Layout blocks */
#header {
  font-size: 25px;
  color: var(--color-navbar-text-header);
  font-family: "Inter", sans-serif;
  font-weight: 450;
}

#left-block {
  display: flex;
  align-items: center;
  gap: 0.25rem; /* space-x-1 */
  flex-shrink: 0;
  margin-left: 10px; /* ml-[10px] */
}

#center-block {
  display: none;
  flex-shrink: 1;
}

#right-block {
  display: flex;
  align-items: center;
  gap: 0.75rem; /* space-x-3 */
  margin-right: 10px; /* md:mr-[10px] */
  flex-shrink: 0;
}

.mobile_menu {
  flex-direction: column;
  gap: 0.75rem; /* space-y-3 */
  padding-inline: 1rem; /* px-4 */
  position: fixed;
  top: 59px;
  left: 0;
  z-index: 40;
  background-color: var(--color-bg-mobile-menu);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -4px rgba(0, 0, 0, 0.1); /* shadow-lg */
  backdrop-filter: blur(16px); /* backdrop-blur-lg */
  border-bottom-left-radius: 0.5rem; /* rounded-b-lg */
  border-bottom-right-radius: 0.5rem;
  width: 100%;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* transition-all duration-300 ease-in-out */
}

/* Buttons/toggles */
#lang-toggle {
  display: none; /* hidden */
  margin-left: 0.5rem; /* ml-2 */
}

.lang-toggle-style {
  width: 2rem; /* w-8 */
  height: 2rem; /* h-8 */
  border-radius: 100%; /* rounded-full */
  background-size: cover; /* bg-cover */
  background-position: center; /* bg-center */
  outline: none; /* focus:outline-none */
}

#menu-toggle {
  display: block;
  color: var(--color-primary-foreground); /* text-primary-foreground */
  padding-right: 1rem; /* pr-5 */
  padding-left: 0.5rem; /* pl-2 */
}

/* Text styles */
.main_text {
  font-family: "Inter", sans-serif;
  font-weight: 510;
  font-size: 14px;
  white-space: inherit;
  border-radius: 0.375rem;
  padding-inline: 0.75rem;
  padding-block: 8px;
  color: var(--color-navbar-text);
}

.main_text:hover {
  background-color: var(--color-navbar-bg-hover);
  color: var(--color-navbar-text-hover);
}
.main_off {
  display: flex;
}
.sec_text {
  font-family: "Inter", sans-serif;
  font-weight: 510;
  font-size: 14px;
  white-space: inherit;
  border-radius: 0.375rem;
  padding-inline: 0.75rem;
  padding-block: 6px;
  background-color: var(--color-navbar-bg-sec);
  color: var(--color-navbar-text-sec);
}
.sec_text:hover {
  background-color: var(--color-navbar-bg-hover-sec);
  color: var(--color-navbar-text-hover-sec);
}
.icon-nav-color {
  color: var(--color-navbar-icon);
}
@media (max-width: 780px) {
  html[data-lang="en"] #right-block {
    gap: 0.75rem;
  }

  html[data-lang="de"] #right-block {
    gap: 0.1rem;
  }
}
@media (min-width: 780px) {
  .main_text {
    font-size: 15px;
  }
  .sec_text {
    font-size: 15px;
  }
  .main_off {
    display: none;
  }
}

@media (min-width: 850px) {
  .main_text {
    font-size: 15px;
  }
  .sec_text {
    font-size: 15px;
  }
  .main_off {
    display: none;
  }
}
@media (min-width: 1090px) {
  .main_text {
    font-size: 15px;
  }
  .sec_text {
    font-size: 15px;
  }
  .main_off {
    display: flex;
  }
}
.mobile_text {
  font-family: "Inter", sans-serif;
  font-weight: 450;
  font-size: 20px;
  color: var(--color-text-mobile-menu);
  opacity: 0.6;
}

.mobile_text_sec {
  font-family: "Inter", sans-serif;
  font-weight: 510;
  font-size: 24px;
  color: var(--color-text-mobile-menu);
  opacity: 0.9;
}

/* Responsive/media queries */
@media (min-width: 780px) {
  #lang-toggle {
    display: flex; /* md:flex */
  }
  #menu-toggle {
    display: none; /* md:hidden */
  }
  #center-block {
    display: flex;
  }
  #left-block {
    margin-left: 20px; /* md:ml-[20px] */
  }
  .mobile_menu {
    display: none; /* md:hidden */
  }
}

@media (min-width: 1024px) {
  #center-block {
    gap: 0.75rem; /* space-x-3 */
  }
  #left-block {
    gap: 0.5rem; /* lg:space-x-2 */
  }
}

@media (max-width: 767px) {
  #right-block {
    margin-right: 0;
  }
}