/* === Translate globe — minimal, stable === */

/* Outer wrapper sits nicely in Astra header; not the positioning context */
.tp-globe{
  display:inline-flex;
  flex:0 0 auto !important;
  align-items:center;
  font-size:0;
  z-index:120;
}

/* Tight inner anchor: the positioning context for the dropdown */
.tp-globe__anchor{
  position:relative;
  display:inline-block;
}

/* Trigger button */
.tp-globe__button{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  line-height:1;
  padding:.5rem .6rem;
  background:transparent;
  cursor:pointer;
  font-size:16px;
  color:currentColor; /* inherit Astra header color */


  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: inherit !important;        /* no color change */
  text-decoration: none !important; /* no underline ever */
  outline: none !important; 
}


.tp-globe__button{ 
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: inherit !important;        /* no color change */
  text-decoration: none !important; /* no underline ever */
  outline: none !important; }



/* Globe icon */
.tp-globe__icon{
  font-size:20px;
  line-height:1;
  filter: brightness(0) invert(1); /* → white */
  display:inline-block;
}

/* Current language label: hidden on desktop (we’ll handle mobile later) */
.tp-globe__label{ display:none; font-size:14px; }

/* Dropdown — visuals */
.tp-globe__menu{
  min-width:220px;
  background:#fff;
  color:#222;
  //box-shadow:0 10px 25px rgba(0,0,0,.12);
  //border:1px solid rgba(0,0,0,.08);
  padding:6px;
  z-index:9999;
}

/* Force narrower TP Globe menu + current label */
.tp-globe__menu,
.trp-ls-shortcode-current-language,
.trp-ls-shortcode-language {
  width: 100px !important;   /* adjust to taste */
  min-width: 100px !important;
}
.tp-globe__menu button,
.trp-ls-shortcode-current-language a,
.trp-ls-shortcode-language a {
  text-align: center !important;
  justify-content: center !important; /* for flex items */
}


/* Dropdown — position (always absolute, always below the button) */
.tp-globe__menu{
  position:absolute;
  top:calc(100% + 10px); /* gap under the button */
}

/* Alignment via wrapper class (from shortcode): center (default) or left */
.tp-globe.align-center .tp-globe__menu{
  left:50%;
  transform:translateX(-50%);
}
.tp-globe.align-left .tp-globe__menu{
  left:0;
  transform:none;
}

/* ≤1400px: anchor to the button's right edge so it stays on-screen */
@media (max-width: 1400px){
  .tp-globe.align-center .tp-globe__menu{
    left: auto;
    right: 0;             /* stick to the anchor's right edge */
    transform: none;      /* no centering shift */
    width: max-content;   /* hug the items */
    max-width: min(90vw, 360px);  /* hard cap so it never bleeds off-screen */
  }
}

/* (already recommended) prevent header from clipping the popover */
.ast-desktop-header-content{ overflow: visible !important; }



/* Items */
.tp-globe__item{
  display:flex;
  width:100%;
  padding:.6rem .8rem;
  font-size:14px;
  line-height:1.2;
  color: #014993;
  background:transparent;
  border:none;
  cursor:pointer;
  box-shadow: none !important;
}
.tp-globe__item:hover,
.tp-globe__item:focus{
  background:rgba(0,0,0,0);
  outline:none;
}
.tp-globe__item[aria-current="true"]{ font-weight:600; }

/* Keep TranslatePress’ original switcher in DOM but invisible */
.tp-globe__tp-source{
  position:absolute !important;
  left:-9999px !important;
  width:1px; height:1px; overflow:hidden;
}

/* Desktop breakpoint (kept for future mobile tweaks; currently no overrides) */
@media (min-width:1024px){
  /* no position overrides here on purpose */
}

/* Prevent Astra header from clipping the popover */
.ast-desktop-header-content{ overflow:visible !important; }





// MOBILE PART OF THE TRANSLATE BUTTON //


/* Make the language LI a positioning context */
.ast-mobile-popup-drawer .menu-item-tp-globe{ position: relative; }


/* Mobile globe trigger cleanup */
.tp-globe__mobile-trigger {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #fff !important;         /* white text + globe */
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-size: 16px;
  padding: 0.75rem 1rem;
}

/* Submenu transition */
.tp-globe__mobile-sub {
  overflow: visible;
  max-height: 0;
  transition: max-height 0.25s ease;
}

.menu-item-tp-globe.ast-submenu-expanded > .tp-globe__mobile-sub {
  display: block !important;
  max-height: 500px; /* large enough for list */
}

/* Arrow rotate animation */
.menu-item-tp-globe .ast-menu-toggle .ast-icon {
  transition: transform 0.25s ease;
}
.menu-item-tp-globe.ast-submenu-expanded .ast-menu-toggle .ast-icon {
  transform: rotate(180deg);
}


/* Scope all mobile overrides to the drawer */
.ast-mobile-popup-drawer .menu-item-tp-globe .tp-globe__mobile-trigger{
  background:none !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;

  color:#fff !important;          /* white globe + text */
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;

  font-size:16px !important;      /* pin size to stop theme bumps */
  line-height:1.2;
  padding:.75rem 1rem;
}

/* Left side (globe + current) stays inline */
.ast-mobile-popup-drawer .tp-globe__mobile-left{
  display:inline-flex;
  gap:.5rem;
  align-items:center;
  filter: brightness(0) invert(1); /* → white */
}

/* Chevron: subtle + rotates on expand */
.ast-mobile-popup-drawer .menu-item-tp-globe .tp-globe__chev{
  display:inline-block;
  transition:transform .25s ease;
}
.ast-mobile-popup-drawer .menu-item-tp-globe.ast-submenu-expanded .tp-globe__chev{
  transform:rotate(180deg);
}

/* Submenu: transparent background, white links, smooth expand */
.ast-mobile-popup-drawer .menu-item-tp-globe > .tp-globe__mobile-sub{
  position: absolute;
  left: 0; right: 0; top: 0;

  display:block !important;       /* allow max-height animation */
  background:transparent !important;
  box-shadow:none !important;
  border:0 !important;

  max-height: 50vh;                    /* scroll if many langs */
  overflow: auto;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}

/* Expanded state (class toggled from JS) */
.ast-mobile-popup-drawer .menu-item-tp-globe.ast-submenu-expanded > .tp-globe__mobile-sub{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Ensure the drawer doesn’t clip the overlay */
.ast-mobile-popup-drawer,
.ast-mobile-popup-drawer .ast-mobile-popup-inner{ overflow: visible !important; }

/* Submenu items: pin size & colors; remove theme bg */
.ast-mobile-popup-drawer .menu-item-tp-globe .tp-globe__mobile-sub .menu-link{
  color:#fff !important;
  background:transparent !important;
  font-size:16px !important;
  padding:.6rem 1rem;
}

/* Extra: neutralize any inherited backgrounds on the whole menu row */
@media (max-width:1024px){
  .ast-builder-menu-mobile .main-navigation .main-header-menu .menu-item-tp-globe,
  .ast-builder-menu-mobile .main-navigation .main-header-menu .menu-item-tp-globe .menu-link,
  .ast-builder-menu-mobile .main-navigation .main-header-menu .menu-item-tp-globe .sub-menu{
    background-color:transparent !important;
    background-image:none !important;
  }
}


/* Kill theme backgrounds just for our language item inside the drawer */
.ast-mobile-popup-drawer .menu-item-tp-globe,
.ast-mobile-popup-drawer .menu-item-tp-globe .menu-link,
.ast-mobile-popup-drawer .menu-item-tp-globe .sub-menu{
  background: transparent !important;
  background-image: none !important;
}

/* Ensure submenu links are white and consistent size */
.ast-mobile-popup-drawer .menu-item-tp-globe .sub-menu .menu-link{
  color: #fff !important;
  font-size: 16px !important;
}

/* No underline on trigger ever */
.tp-globe__mobile-trigger,
.tp-globe__mobile-trigger:hover,
.tp-globe__mobile-trigger:focus,
.tp-globe__mobile-trigger:active{
  text-decoration: none !important;
  -webkit-tap-highlight-color: transparent;
}

/* No underline on submenu links either */
.ast-mobile-popup-drawer .menu-item-tp-globe .tp-globe__mobile-sub .menu-link,
.ast-mobile-popup-drawer .menu-item-tp-globe .tp-globe__mobile-sub .menu-link:hover,
.ast-mobile-popup-drawer .menu-item-tp-globe .tp-globe__mobile-sub .menu-link:focus,
.ast-mobile-popup-drawer .menu-item-tp-globe .tp-globe__mobile-sub .menu-link:active{
  text-decoration: none !important;
}

/* Tighter vertical rhythm between languages */
.ast-mobile-popup-drawer .menu-item-tp-globe .tp-globe__mobile-sub .menu-link{
  line-height: 1.25;
  padding: .4rem 1rem; /* was ~.6rem; reduces the gap */
}






/* --- Smooth fade-in / fade-out for TP Globe menu --- */

/* keep [hidden] overriden so we can animate */
.tp-globe__menu[hidden] { 
  display: block !important;
}

/* closed state */
.tp-globe__menu {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, visibility 0s linear .2s;
  will-change: opacity;
}

/* open state when aria-expanded is true */
.tp-globe__anchor > .tp-globe__button[aria-expanded="true"] + .tp-globe__menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .2s ease;
}

/* accessibility */
@media (prefers-reduced-motion: reduce){
  .tp-globe__menu {
    transition: none;
  }
}



/* ===== Astra mobile submenu: pure fade in/out ===== */
@media (max-width: 921px) {
  /* 1) Let submenus exist in the flow so they can animate */
  .ast-header-break-point .main-header-menu .sub-menu {
    display: block !important;           /* override inline display:none/block */
    overflow: visible;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    max-height: 0;                       /* collapsed */
    transition: opacity .2s ease, max-height .25s ease, visibility 0s linear .25s;
    will-change: opacity, max-height;
  }

  /* 2) Open state — when Astra marks the toggle as expanded */
  .ast-header-break-point .main-header-menu .menu-item-has-children
  > .ast-menu-toggle[aria-expanded="true"] + .sub-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    max-height: 600px;                   /* large enough to fit contents */
    transition: opacity .2s ease, max-height .25s ease, visibility 0s;
  }

  /* 3) Alternate open marker used by some Astra builds */
  .ast-header-break-point .main-header-menu .menu-item-has-children.ast-submenu-expanded > .sub-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    max-height: 600px;
    transition: opacity .2s ease, max-height .25s ease, visibility 0s;
  }

  /* Respect reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .ast-header-break-point .main-header-menu .sub-menu {
      transition: none;
      max-height: none;
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }
  }
}


// Extra mobile injection button fine tuning
.menu-item-tp-globe > .tp-globe__mobile-trigger,
.menu-item-tp-globe > .menu-link {
  line-height: 61.27px !important;
}