/**
 * Google Translate Widget Styles
 */

.google-translate-widget {
  margin-top: -40px;
  width: 100%;
  display: flex
;
  justify-content: flex-end;
  margin-bottom: 1rem;
}

.goog-te-gadget {
  font-family: inherit !important;
}

/* Style the Google Translate dropdown to match site theme */
.goog-te-gadget-simple {
  margin: 4px 0;
  padding: 4px 8px !important;
  border: 1px solid #ccc !important;
  border-radius: 4px;
  background-color: #fff;
  font-size: 13px;
  line-height: 1.4;
}

/* Hide the Google Translate banner */
.goog-te-banner-frame {
  display: none !important;
}

/* Adjust body margin when Google Translate is active */
body {
  top: 0 !important;
}

/* Style the Google Translate tooltip */
.goog-te-menu-value {
  color: #666;
}

.goog-te-menu-value:before {
  content: "Translate: ";
  color: #333;
  font-weight: normal;
}

/* 
 * Conditional display logic using CSS :has() selector
 * Hide Google Translate when professional language dropdown is present
 */
@supports selector(:has(*)) {
  /* Hide when any language dropdown block is present */
  body:has(.block-lang-dropdown) .google-translate-conditional {
    display: none;
  }
  
  /* Hide when Language Switcher blocks are present */
  body:has(.block-language-block) .google-translate-conditional {
    display: none;
  }
  
  /* Hide when any element with language switching classes is present */
  body:has(.language-switcher-locale-url) .google-translate-conditional {
    display: none;
  }
  
  /* Hide when specific language dropdown elements are present */
  body:has([class*="lang-dropdown"]) .google-translate-conditional {
    display: none;
  }
}

/* Fallback for browsers that don't support :has() */
@supports not selector(:has(*)) {
  /* Add a fallback message or alternative styling */
  .google-translate-conditional.js-lang-dropdown-detected {
    display: none;
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .google-translate-widget {
    margin: 8px 0;
  }
  
  .goog-te-combo {
    width: 100%;
    max-width: 200px;
  }
}

/* Loading state */
.google-translate-element:empty:before {
  content: "Loading translation widget...";
  color: #666;
  font-style: italic;
  font-size: 12px;
}

/* Error state styling */
.google-translate-error {
  color: #d32f2f;
  font-size: 12px;
  margin-top: 4px;
}

/* Accessibility improvements */
.google-translate-widget [role="listbox"] {
  border: 1px solid #ccc;
}

.google-translate-widget [role="option"]:focus,
.google-translate-widget [role="option"]:hover {
  background-color: #f5f5f5;
  outline: 2px solid #0073aa;
  outline-offset: -2px;
}