/* ==========================================================
   JDA LANGUAGE SWITCHER — Custom GTranslate Skin  v3
   ==========================================================

   V3 STRUCTURE:
   <div class="jda-lang-switcher">          ← outer wrapper (JS-built)
     <button class="jda-lang-trigger">      ← globe + label + chevron
     <div class="gtranslate_wrapper">       ← ORIGINAL wrapper = dropdown panel
       <a class="glink jda-lang-item">      ← real GTranslate links (untouched)
       <a class="glink jda-lang-item">
       <div id="google_translate_element2"> ← translate engine (hidden)
   ========================================================== */


/* ----------------------------------------------------------
   1. SWITCHER OUTER WRAPPER
   ---------------------------------------------------------- */
.jda-lang-switcher {
  position:    relative;
  display:     inline-flex;
  align-items: center;
}


/* ----------------------------------------------------------
   2. TRIGGER BUTTON
      Green border · transparent fill · green label ·
      dark-gray globe + chevron
   ---------------------------------------------------------- */
.jda-lang-trigger {
  display:        flex;
  align-items:    center;
  gap:            10px;
  padding:        13px 24px;
  border-radius:  50px;
  border:         2.5px solid #008c5f;
  background:     transparent;
  cursor:         pointer;
  white-space:    nowrap;
  line-height:    1;
  font-family:    'Lato', sans-serif;
  font-size:      15px;
  font-weight:    700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          #008c5f;
  transition:
    border-color 0.25s ease,
    background   0.25s ease,
    box-shadow   0.25s ease;
}

.jda-lang-trigger:hover {
  background:   rgba(0, 140, 95, 0.07);
  border-color: #006b48;
  box-shadow:   0 0 0 3px rgba(0, 140, 95, 0.12);
}

.jda-lang-switcher:has(.gtranslate_wrapper.jda-open) .jda-lang-trigger {
  background:   rgba(0, 140, 95, 0.07);
  border-color: #006b48;
}

/* Globe — dark charcoal */
.jda-lang-trigger .jda-globe {
  flex-shrink: 0;
  width:       20px;
  height:      20px;
  color:       #3d3c39;
}

/* Chevron — dark charcoal, rotates when open */
.jda-lang-trigger .jda-chevron {
  flex-shrink: 0;
  width:       12px;
  height:      12px;
  color:       #3d3c39;
  transition:  transform 0.25s ease;
}

.gtranslate_wrapper.jda-open ~ .jda-lang-trigger .jda-chevron,
.jda-lang-switcher:has(.gtranslate_wrapper.jda-open) .jda-lang-chevron {
  transform: rotate(180deg);
}

/* Chevron rotation via JS-toggled class on wrapper's parent */
.jda-lang-switcher.open .jda-lang-trigger .jda-chevron {
  transform: rotate(180deg);
}


/* ----------------------------------------------------------
   3. DROPDOWN PANEL
      The original .gtranslate_wrapper IS the panel now.
      We only add the visual panel styles here — GTranslate's
      own classes and JS remain completely untouched.
   ---------------------------------------------------------- */
.jda-lang-switcher .gtranslate_wrapper {
  /* Override any previous hiding rules */
  position:                absolute    !important;
  top:                     calc(100% + 12px) !important;
  right:                   0           !important;
  left:                    auto        !important;
  bottom:                  auto        !important;
  width:                   auto        !important;
  min-width:               156px       !important;
  height:                  auto        !important;
  overflow:                visible     !important;
  opacity:                 0           !important;
  pointer-events:          none        !important;
  clip:                    auto        !important;
  z-index:                 9999        !important;

  /* Panel appearance */
  background:              rgba(10, 26, 19, 0.97) !important;
  border:                  1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius:           14px   !important;
  padding:                 8px    !important;
  backdrop-filter:         blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:              0 16px 48px rgba(0, 0, 0, 0.40);

  /* Hidden → shown transition */
  transform:               translateY(-8px) !important;
  transition:
    opacity   0.22s ease,
    transform 0.22s ease !important;

  /* Reset any display:flex or other layout GTranslate may set */
  display:     block  !important;
  text-align:  left   !important;
}

/* OPEN STATE — added by JS when trigger is clicked */
.jda-lang-switcher .gtranslate_wrapper.jda-open {
  opacity:        1    !important;
  pointer-events: all  !important;
  transform:      none !important;
}


/* ----------------------------------------------------------
   4. LANGUAGE ITEMS
      The real .glink <a> elements inside the wrapper.
      We add .jda-lang-item via JS but keep all GTranslate
      classes and event listeners intact.
   ---------------------------------------------------------- */
.jda-lang-switcher .gtranslate_wrapper a.jda-lang-item {
  display:         flex      !important;
  align-items:     center    !important;
  gap:             10px      !important;
  width:           100%      !important;
  padding:         10px 14px !important;
  border-radius:   8px       !important;
  background:      transparent !important;
  cursor:          pointer   !important;
  text-decoration: none      !important;
  white-space:     nowrap    !important;
  line-height:     1         !important;
  font-family:     'Lato', sans-serif !important;
  font-size:       13px      !important;
  font-weight:     400       !important;
  color:           rgba(255, 255, 255, 0.65) !important;
  transition:
    background 0.20s ease,
    color      0.20s ease !important;
  /* Reset GTranslate's inline styles if any */
  margin:          0 !important;
  border:          none !important;
}

.jda-lang-switcher .gtranslate_wrapper a.jda-lang-item:hover {
  background: rgba(255, 255, 255, 0.09) !important;
  color:      #fff !important;
}

/* Active / current language */
.jda-lang-switcher .gtranslate_wrapper a.jda-lang-item.jda-active {
  color:       #9bcb4f !important;
  font-weight: 700     !important;
}

.jda-lang-flag {
  font-size:   17px;
  line-height: 1;
  flex-shrink: 0;
}

.jda-lang-name {
  flex: 1;
}


/* ----------------------------------------------------------
   5. DARK NAV OVERRIDE
      Inside the dark floating pill nav (hero/transparent state):
      flip trigger to white so it reads on the dark background.
      The green style returns automatically when nav gets .solid.
   ---------------------------------------------------------- */
#navbar:not(.solid) .jda-lang-trigger {
  border-color: rgba(255, 255, 255, 0.30);
  color:        rgba(255, 255, 255, 0.90);
}

#navbar:not(.solid) .jda-lang-trigger .jda-globe,
#navbar:not(.solid) .jda-lang-trigger .jda-chevron {
  color: rgba(255, 255, 255, 0.75);
}

#navbar:not(.solid) .jda-lang-trigger:hover {
  border-color: rgba(255, 255, 255, 0.60);
  background:   rgba(255, 255, 255, 0.08);
  color:        #fff;
  box-shadow:   none;
}

#navbar:not(.solid) .jda-lang-trigger:hover .jda-globe,
#navbar:not(.solid) .jda-lang-trigger:hover .jda-chevron {
  color: rgba(255, 255, 255, 0.95);
}


/* ----------------------------------------------------------
   6. SOLID NAV OVERRIDE (scrolled — cream background)
      Trigger base style (green) is already correct.
      Adapt the dropdown panel for a light background.
   ---------------------------------------------------------- */
#navbar.solid .jda-lang-switcher .gtranslate_wrapper {
  background:  rgba(250, 248, 243, 0.98) !important;
  border:      1px solid rgba(0, 0, 0, 0.10) !important;
  box-shadow:  0 8px 32px rgba(0, 0, 0, 0.12) !important;
}

#navbar.solid .jda-lang-switcher .gtranslate_wrapper a.jda-lang-item {
  color: #6B6960 !important;
}

#navbar.solid .jda-lang-switcher .gtranslate_wrapper a.jda-lang-item:hover {
  background: rgba(0, 0, 0, 0.05) !important;
  color:      #000 !important;
}

#navbar.solid .jda-lang-switcher .gtranslate_wrapper a.jda-lang-item.jda-active {
  color: #008c5f !important;
}


/* ----------------------------------------------------------
   7. MOBILE — prevent dropdown clipping off screen edge
   ---------------------------------------------------------- */
@media (max-width: 991px) {
  .jda-lang-switcher .gtranslate_wrapper {
    right: auto  !important;
    left:  0     !important;
  }
}


/* ----------------------------------------------------------
   8. FOCUS RING — keyboard accessibility (WCAG 2.4.7)
   ---------------------------------------------------------- */
.jda-lang-trigger:focus-visible {
  outline:        2px solid #9bcb4f;
  outline-offset: 3px;
}

.jda-lang-switcher .gtranslate_wrapper a.jda-lang-item:focus-visible {
  outline:        2px solid #9bcb4f !important;
  outline-offset: 2px !important;
  border-radius:  8px;
}