/* TENSUNG Header Language Switcher 2026-08-14 */
/* TranslatePress renders the shortcode switcher twice: .trp-shortcode-anchor
   (visibility:hidden, holds space in the flow) and .trp-shortcode-overlay
   (position:absolute, the copy you see and click). Both must keep identical box
   metrics or the visible control drifts off the space reserved for it. */

/* Re-theme through the plugin's own custom properties (inline style sets them,
   so !important is required to win). */
.xpro-theme-builder-header .tensung-lang-switcher .trp-shortcode-switcher__wrapper {
  --text: #16211D !important;
  --text-hover: #B35F1B !important;
  --bg: transparent !important;
  --bg-hover: transparent !important;
  --border: none !important;
  --border-width: 0 !important;
  --border-color: transparent !important;
  --border-radius: 0 !important;
  --font-size: 14px !important;
  --flag-size: 20px !important;
  --flag-radius: 999px !important;
  --aspect-ratio: 1 !important;
  position: relative;
  display: block;
  width: auto;
  min-width: 0;
  max-width: none;
}

/* No display declaration on the widget root: Elementor's own
   .elementor-hidden-tablet / -desktop / -mobile classes carry the same
   specificity and must stay in charge of which copy is shown. */
.xpro-theme-builder-header .tensung-lang-switcher {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  max-width: none;
}

.xpro-theme-builder-header .tensung-lang-switcher > .elementor-widget-container,
.xpro-theme-builder-header .tensung-lang-switcher .elementor-shortcode {
  display: flex;
  align-items: center;
  width: auto;
  min-width: 0;
  max-width: none;
}

/* Strip the card chrome off BOTH copies so anchor and overlay stay in sync. */
.xpro-theme-builder-header .tensung-lang-switcher .trp-shortcode-switcher {
  width: auto;
  min-width: 0;
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

/* Trigger row: flag + name + caret, sitting directly on the header. */
.xpro-theme-builder-header .tensung-lang-switcher .trp-current-language-item__wrapper {
  display: flex;
  align-items: center;
  gap: 2px;
  padding-right: 0;
}

.xpro-theme-builder-header .tensung-lang-switcher .trp-current-language-item__wrapper .trp-language-item {
  box-sizing: border-box;
  min-height: 40px;
  padding: 0 4px;
  gap: 8px;
  background: transparent;
  border: 0;
  border-radius: 3px;
}

.xpro-theme-builder-header .tensung-lang-switcher .trp-language-item-name {
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.xpro-theme-builder-header .tensung-lang-switcher .trp-flag-image {
  width: 20px !important;
  height: 20px !important;
  aspect-ratio: 1 !important;
  border-radius: 999px !important;
  object-fit: cover;
  flex: 0 0 auto;
}

.xpro-theme-builder-header .tensung-lang-switcher .trp-shortcode-arrow {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  transition: transform .2s ease;
}

/* Dropdown panel. Taken out of flow so the overlay never grows wider than the
   anchor - that width mismatch is what pushed the old control off-position. */
.xpro-theme-builder-header .tensung-lang-switcher .trp-switcher-dropdown-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 100%;
  width: max-content;
  background: #FFFFFF;
  border: 1px solid transparent;
  border-radius: 3px;
  padding: 0;
}

.xpro-theme-builder-header .tensung-lang-switcher .trp-shortcode-switcher.is-open .trp-switcher-dropdown-list {
  border-color: #D7E2DD;
}

.xpro-theme-builder-header .tensung-lang-switcher .trp-shortcode-switcher.is-open .trp-shortcode-arrow {
  transform: rotate(180deg);
}

.xpro-theme-builder-header .tensung-lang-switcher .trp-switcher-dropdown-list .trp-language-item {
  box-sizing: border-box;
  min-height: 40px;
  padding: 9px 12px;
  gap: 8px;
  white-space: nowrap;
}

.xpro-theme-builder-header .tensung-lang-switcher .trp-switcher-dropdown-list .trp-language-item:hover {
  background: #F7F8F7;
}

.xpro-theme-builder-header .tensung-lang-switcher .trp-language-item:focus-visible {
  outline: 2px solid #B35F1B;
  outline-offset: -2px;
}

/* Nothing in the header chain may clip the open panel. */
.xpro-theme-builder-header,
.xpro-theme-builder-header .elementor-element-htoproot,
.xpro-theme-builder-header .elementor-element-htoprow1,
.xpro-theme-builder-header .elementor-element-htoprow1 > .e-con-inner,
.xpro-theme-builder-header .elementor-element-hblank01,
.xpro-theme-builder-header .elementor-element-hmobtog1 {
  overflow: visible;
}

/* Top row paints above the green nav bar so the panel is not covered. */
.xpro-theme-builder-header .elementor-element-htoproot {
  position: relative;
  z-index: 20;
}

.xpro-theme-builder-header .elementor-element-hnavroot {
  position: relative;
  z-index: 10;
}

/* ---------- Layout ---------- */
/* Desktop keeps Elementor's native three-column brand row (language / logo /
   quote). The tablet and phone header grids are owned by source-fidelity.css,
   which now reserves a "lang" cell on tablet and lets the phone toggle column
   size to its contents; only alignment and overflow belong here. */

.xpro-theme-builder-header .elementor-element-hblank01 {
  align-items: center;
  justify-content: flex-start;
}

.xpro-theme-builder-header .elementor-element-hbrand01 {
  align-items: center;
}

.xpro-theme-builder-header .elementor-element-hquote01 {
  align-items: center;
  justify-content: flex-end;
}

.xpro-theme-builder-header .elementor-element-hmobtog1 {
  align-items: center;
}

/* Tablet and phone put the switcher on the right of the row, so the panel has
   to open inward or it runs off the viewport. */
@media (max-width: 1024px) {
  .xpro-theme-builder-header .tensung-lang-switcher .trp-switcher-dropdown-list {
    left: auto;
    right: 0;
  }
}

@media (max-width: 767px) {
  .xpro-theme-builder-header .tensung-lang-switcher .trp-current-language-item__wrapper .trp-language-item {
    padding: 0 2px;
    gap: 6px;
  }
}

/* Narrow phones: the label would push the logo out, so show the flag alone. */
@media (max-width: 379px) {
  .xpro-theme-builder-header .tensung-lang-mobile .trp-language-item-name {
    display: none;
  }
}
/* END TENSUNG Header Language Switcher 2026-08-14 */

/* TENSUNG Language Dropdown Card 2026-09-15 */
/* Replace the plugin's max-height reveal with a fade / lift / scale card. */
.xpro-theme-builder-header .tensung-lang-switcher .trp-shortcode-overlay .trp-switcher-dropdown-list {
  top: calc(100% + 12px);
  min-width: 168px;
  max-height: 349px !important;
  overflow: visible !important;
  padding: 6px;
  background: #FFFFFF;
  border: 1px solid rgba(22, 33, 29, .08) !important;
  border-radius: 12px;
  box-shadow: 0 18px 40px -12px rgba(14, 42, 33, .28), 0 4px 12px -4px rgba(14, 42, 33, .12);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px) scale(.96);
  transform-origin: 24px 0;
  transition: opacity .22s ease, transform .28s cubic-bezier(.2, .9, .3, 1.2), visibility 0s linear .28s, max-height .28s linear !important;
}
/* Pointer notch under the trigger. */
.xpro-theme-builder-header .tensung-lang-switcher .trp-shortcode-overlay .trp-switcher-dropdown-list::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 22px;
  width: 11px;
  height: 11px;
  background: #FFFFFF;
  border-left: 1px solid rgba(22, 33, 29, .08);
  border-top: 1px solid rgba(22, 33, 29, .08);
  border-radius: 2px 0 0 0;
  transform: rotate(45deg);
}
/* Invisible bridge so the gap above the card does not close it on hover. */
.xpro-theme-builder-header .tensung-lang-switcher .trp-shortcode-overlay .trp-switcher-dropdown-list::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
}
.xpro-theme-builder-header .tensung-lang-switcher .trp-shortcode-overlay.is-open .trp-switcher-dropdown-list {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  max-height: 350px !important;
  transition: opacity .22s ease, transform .32s cubic-bezier(.2, .9, .3, 1.2), visibility 0s, max-height .32s linear !important;
}
.xpro-theme-builder-header .tensung-lang-switcher .trp-switcher-dropdown-list .trp-language-item {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 10px 14px 10px 12px;
  gap: 10px;
  border-radius: 8px;
  color: #16211D;
  opacity: 0;
  transform: translateX(-6px);
  transition: background-color .18s ease, color .18s ease, opacity .2s ease, transform .25s ease;
}
.xpro-theme-builder-header .tensung-lang-switcher .trp-shortcode-overlay.is-open .trp-switcher-dropdown-list .trp-language-item {
  opacity: 1;
  transform: translateX(0);
  transition-delay: .06s;
}
.xpro-theme-builder-header .tensung-lang-switcher .trp-shortcode-overlay.is-open .trp-switcher-dropdown-list .trp-language-item:nth-child(2) { transition-delay: .1s; }
.xpro-theme-builder-header .tensung-lang-switcher .trp-shortcode-overlay.is-open .trp-switcher-dropdown-list .trp-language-item:nth-child(3) { transition-delay: .14s; }
.xpro-theme-builder-header .tensung-lang-switcher .trp-switcher-dropdown-list .trp-language-item:hover,
.xpro-theme-builder-header .tensung-lang-switcher .trp-switcher-dropdown-list .trp-language-item:focus-visible {
  background: #F3F6F4;
  color: #B35F1B;
}
/* Trailing arrow that slides in on hover. */
.xpro-theme-builder-header .tensung-lang-switcher .trp-switcher-dropdown-list .trp-language-item::after {
  content: "";
  margin-left: auto;
  width: 6px;
  height: 6px;
  border-right: 1.6px solid currentColor;
  border-top: 1.6px solid currentColor;
  transform: translateX(-4px) rotate(45deg);
  opacity: 0;
  transition: opacity .18s ease, transform .22s ease;
}
.xpro-theme-builder-header .tensung-lang-switcher .trp-switcher-dropdown-list .trp-language-item:hover::after {
  opacity: 1;
  transform: translateX(0) rotate(45deg);
}
.xpro-theme-builder-header .tensung-lang-switcher .trp-switcher-dropdown-list .trp-flag-image {
  box-shadow: 0 0 0 1px rgba(22, 33, 29, .08);
  transition: transform .2s ease;
}
.xpro-theme-builder-header .tensung-lang-switcher .trp-switcher-dropdown-list .trp-language-item:hover .trp-flag-image {
  transform: scale(1.08);
}
/* Trigger: soft pill on hover / open, caret eases round. */
.xpro-theme-builder-header .tensung-lang-switcher .trp-shortcode-overlay .trp-current-language-item__wrapper {
  border-radius: 999px;
  padding-right: 6px;
  transition: background-color .2s ease;
}
.xpro-theme-builder-header .tensung-lang-switcher .trp-shortcode-overlay .trp-current-language-item__wrapper:hover,
.xpro-theme-builder-header .tensung-lang-switcher .trp-shortcode-overlay.is-open .trp-current-language-item__wrapper {
  background: rgba(22, 33, 29, .05);
}
.xpro-theme-builder-header .tensung-lang-switcher .trp-shortcode-anchor .trp-current-language-item__wrapper {
  padding-right: 6px;
}
.xpro-theme-builder-header .tensung-lang-switcher .trp-shortcode-arrow {
  transition: transform .3s cubic-bezier(.2, .9, .3, 1.2);
}
@media (max-width: 1024px) {
  .xpro-theme-builder-header .tensung-lang-switcher .trp-shortcode-overlay .trp-switcher-dropdown-list { transform-origin: calc(100% - 24px) 0; }
  .xpro-theme-builder-header .tensung-lang-switcher .trp-shortcode-overlay .trp-switcher-dropdown-list::before { left: auto; right: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .xpro-theme-builder-header .tensung-lang-switcher .trp-switcher-dropdown-list,
  .xpro-theme-builder-header .tensung-lang-switcher .trp-switcher-dropdown-list .trp-language-item { transition: none !important; transform: none !important; }
}
/* TENSUNG Language Dropdown Hover 2026-09-15 */
/* Open on pointer hover or keyboard focus from CSS alone, so the card never depends on the plugin's JS timing. A short delay on the way out lets the cursor cross the gap. */
.xpro-theme-builder-header .tensung-lang-switcher .trp-shortcode-overlay .trp-switcher-dropdown-list[hidden] { display: flex !important; }
.xpro-theme-builder-header .tensung-lang-switcher .trp-shortcode-overlay .trp-switcher-dropdown-list { transition: opacity .2s ease .12s, transform .26s ease .12s, visibility 0s linear .4s, max-height .28s linear !important; }
.xpro-theme-builder-header .tensung-lang-switcher .trp-shortcode-overlay:hover .trp-switcher-dropdown-list, .xpro-theme-builder-header .tensung-lang-switcher .trp-shortcode-overlay:focus-within .trp-switcher-dropdown-list, .xpro-theme-builder-header .tensung-lang-switcher .trp-shortcode-overlay.is-open .trp-switcher-dropdown-list { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); max-height: 350px !important; transition: opacity .22s ease, transform .32s cubic-bezier(.2, .9, .3, 1.2), visibility 0s, max-height .32s linear !important; }
.xpro-theme-builder-header .tensung-lang-switcher .trp-shortcode-overlay:hover .trp-switcher-dropdown-list .trp-language-item, .xpro-theme-builder-header .tensung-lang-switcher .trp-shortcode-overlay:focus-within .trp-switcher-dropdown-list .trp-language-item { opacity: 1; transform: translateX(0); transition-delay: .06s; }
.xpro-theme-builder-header .tensung-lang-switcher .trp-shortcode-overlay:hover .trp-shortcode-arrow, .xpro-theme-builder-header .tensung-lang-switcher .trp-shortcode-overlay:focus-within .trp-shortcode-arrow { transform: rotate(180deg); }
.xpro-theme-builder-header .tensung-lang-switcher .trp-shortcode-overlay:hover .trp-current-language-item__wrapper { background: rgba(22, 33, 29, .05); }
@media (prefers-reduced-motion: reduce) { .xpro-theme-builder-header .tensung-lang-switcher .trp-shortcode-overlay .trp-switcher-dropdown-list { transition: none !important; } }