/* TENSUNG - language switcher inside the off-canvas navigation panel.
 *
 * The header copy is hidden wherever the panel is in use, so the two can no
 * longer overlap. Colours follow the site design: ink #16211D, jade #1D5B4A,
 * amber #B35F1B, 3px radius, no shadows.
 */

.tensung-navlang {
  margin: 22px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid #E2EAE6;
}

.tensung-navlang__title {
  margin: 0 0 10px;
  padding: 0 10px;
  text-align: left;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  line-height: 1.2;
  text-transform: uppercase;
  color: #56635E;
}

.tensung-navlang__list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  text-align: left;
}

.tensung-navlang__item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 10px;
  border-radius: 3px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  color: #16211D;
  transition: background-color .18s ease, color .18s ease;
}

.tensung-navlang__item:hover,
.tensung-navlang__item:focus-visible {
  background: #F1F5F3;
  color: #B35F1B;
}

.tensung-navlang__item:focus-visible {
  outline: 2px solid #B35F1B;
  outline-offset: -2px;
}

.tensung-navlang__item.is-current {
  background: #F1F5F3;
  color: #1D5B4A;
  font-weight: 600;
  cursor: default;
}

.tensung-navlang__flag {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px;
  border-radius: 999px !important;
  object-fit: cover;
  aspect-ratio: 1 !important;
  flex: 0 0 auto;
}

/* The panel only exists below 1025px; above that the header switcher is the one
   people see, so this block would be a duplicate. */
@media (min-width: 1025px) {
  .tensung-navlang {
    display: none;
  }
}

/* Below 1025px the header switcher sits next to the toggle, in the same column.
   hblank01 stays out of the way - one switcher in the header is enough. */
@media (max-width: 1024px) {
  html body .xpro-theme-builder-header .tensung-lang-mobile {
    display: block !important;
  }
  html body .xpro-theme-builder-header .tensung-lang-desktop {
    display: none !important;
  }
  html body .xpro-theme-builder-header .elementor-element-hmobtog1 {
    width: auto !important;
    min-width: 42px !important;
    gap: 10px !important;
    overflow: visible !important;
  }
}

/* Tablet reserves a fixed 42px column for the toggle alone. Now that the column
   also carries the switcher it has to size to its contents, or the block spills
   left out of its cell and lands on the quote button. */
@media (min-width: 768px) and (max-width: 1024px) {
  html body .xpro-theme-builder-header .elementor-element-htoprow1 > .e-con-inner {
    grid-template-columns: 122px minmax(12px, 1fr) auto auto !important;
  }
  html body .xpro-theme-builder-header .elementor-element-hmenu002 {
    flex: 0 0 42px !important;
    width: 42px !important;
  }
}

/* The panel is position:fixed but renders inside the header's stacking context,
   so the header switcher paints over it and lands on the close button. While the
   panel is open the switcher steps aside; the panel carries its own copy. */
.tensung-nav-open .xpro-theme-builder-header .tensung-lang-mobile,
.tensung-nav-open .xpro-theme-builder-header .tensung-lang-desktop {
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .tensung-navlang__item {
    transition: none;
  }
}