/* Custom Styles */

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

body {
  top: 0px !important;
}

/* Custom Language Switcher Styling */
.language-switcher-container {
  display: inline-block;
  margin-left: 15px;
  position: relative;
  z-index: 100;
}

.custom-lang-select {
  padding: 5px 10px;
  border-radius: 4px;
  border: 1px solid #ccc;
  background-color: transparent;
  color: inherit;
  font-size: 14px;
  cursor: pointer;
  appearance: none;
  font-weight: 500;
  outline: none;
}

.custom-lang-select:focus {
  border-color: #555;
}

/* Hide default google translate element */
#google_translate_element {
  display: none !important;
}

@media (max-width: 767px) {
  .language-switcher-container {
    margin-left: 10px;
  }
}

/* Premium Educational Design System */
:root {
  --edu-primary: #0f172a;
  --edu-secondary: #0ea5e9;
  --edu-accent: #f59e0b;
  --edu-text: #1e293b;
  --edu-bg-light: #f8fafc;
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(255, 255, 255, 0.3);
  --shadow-premium: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

body {
  font-family: 'Inter', sans-serif !important;
  color: var(--edu-text);
  background-color: var(--edu-bg-light);
  line-height: 1.6;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 700;
  color: var(--edu-primary);
  letter-spacing: -0.02em;
}

/* Glassmorphism utility */
.glass-effect {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
}

/* Testimonials & Cards Styling */
.edu-card {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: var(--shadow-premium);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid #e2e8f0;
}

.edu-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

/* Banner Localization Logic */
/* Hide both by default to avoid flickering on load if classes are assigned */
.banner-en,
.banner-es,
.lang-en,
.lang-es {
  display: none !important;
}

/* Show English when attribute is 'en' or empty (default) */
body[data-current-lang="en"] .banner-en,
body[data-current-lang="en"] .lang-en,
body:not([data-current-lang]) .banner-en,
body:not([data-current-lang]) .lang-en {
  display: block !important;
}

/* Show Spanish when attribute is 'es' */
body[data-current-lang="es"] .banner-es,
body[data-current-lang="es"] .lang-es {
  display: block !important;
}