/* === 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;
  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% + 9.5px); /* 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: 0.6rem 0.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;
}





/* --- 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;
  }
}







/* 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%;
}

/* Submenu transition */
.tp-globe__mobile-sub {
  display: block;          /* ensure it's a normal block UL */
  margin: 0;
  padding: 0;

  overflow: visible;
  max-height: 0;
  transition: max-height 0.25s ease;
}





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





/* 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 removed so theme / media queries can control it */
}


/* 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;
}


  /* Reset LI spacing inside the language submenu */
  .ast-builder-menu-mobile .main-header-menu.stack-on-mobile 
    .menu-item-tp-globe > .tp-globe__mobile-sub > li {
      margin: 0;
      padding: 0;
  }



/* ===== Astra mobile submenu: pure fade in/out ===== */
@media (max-width: 1024px) {
  /* 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;
    }
  }
}