/* ============================================================
   Language switcher + geo suggestion banner
   Loaded on every localised page. Matches the existing dark
   indigo/cyan palette and the two type families already in use.

   The switcher is a <details>/<summary> element, so it opens and
   closes with zero JavaScript. geo-detect.js only adds the
   click-outside-to-close nicety and the cookie write.
   ============================================================ */

/* ---------------- switcher ---------------- */

.ai-lang {
  position: relative;
  flex-shrink: 0;
}

.ai-lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 255, 0.24);
  background: rgba(148, 163, 255, 0.06);
  color: #C7D2E4;
  font-size: 13.5px;
  cursor: pointer;
  white-space: nowrap;
  list-style: none;
  transition: background .25s, border-color .25s;
}

.ai-lang-toggle::-webkit-details-marker,
.ai-lang-toggle::marker {
  display: none;
  content: "";
}

.ai-lang-toggle:hover {
  background: rgba(148, 163, 255, 0.14);
  border-color: rgba(148, 163, 255, 0.45);
}

.ai-lang-globe {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  opacity: .8;
}

.ai-lang-caret {
  font-size: 10px;
  opacity: .7;
}

.ai-lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 190px;
  padding: 8px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 255, 0.2);
  background: rgba(9, 13, 34, 0.97);
  backdrop-filter: blur(20px);
  box-shadow: 0 30px 70px -28px rgba(0, 0, 0, .85);
  z-index: 120;
  display: grid;
  gap: 2px;
}

.ai-lang-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  color: #C7D2E4;
  font-size: 14px;
  text-decoration: none;
  transition: background .2s, color .2s;
}

.ai-lang-item:hover {
  background: rgba(79, 70, 229, 0.22);
  color: #FFFFFF;
}

.ai-lang-item[aria-current="true"] {
  background: rgba(79, 70, 229, 0.16);
  color: #FFFFFF;
}

.ai-lang-item[aria-current="true"]::after {
  content: "✓";
  font-size: 11px;
  color: #7DD3FC;
}

/* The English name, shown small beside the native name, so a visitor who
   landed on the wrong language can still find their way out. */
.ai-lang-en {
  font-size: 11.5px;
  color: #6D7AA6;
  font-family: 'Space Grotesk', sans-serif;
}

/* ---------------- geo suggestion banner ---------------- */

#orbiqe-geo-banner {
  position: sticky;
  top: 0;
  z-index: 95;
  background: linear-gradient(120deg, rgba(79, 70, 229, 0.95), rgba(6, 182, 212, 0.9));
  backdrop-filter: blur(12px);
}

#orbiqe-geo-banner[hidden] {
  display: none;
}

.ai-geo-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 11px 34px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 14px;
  color: #FFFFFF;
}

.ai-geo-msg {
  flex: 1;
  min-width: 200px;
}

.ai-geo-yes {
  padding: 7px 15px;
  border-radius: 10px;
  background: rgba(5, 8, 22, 0.85);
  color: #FFFFFF !important;
  font-weight: 600;
  font-size: 13.5px;
  white-space: nowrap;
  text-decoration: none;
  transition: transform .25s;
}

.ai-geo-yes:hover {
  transform: translateY(-1px);
}

.ai-geo-no {
  padding: 7px 12px;
  border: none;
  background: none;
  color: rgba(255, 255, 255, 0.82);
  font-size: 13.5px;
  font-family: inherit;
  cursor: pointer;
  text-decoration: underline;
  white-space: nowrap;
}

.ai-geo-no:hover {
  color: #FFFFFF;
}

/* ---------------- footer locale row ---------------- */

.ai-footer-langs {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.ai-footer-langs a {
  color: #5F6C96;
  transition: color .25s;
}

.ai-footer-langs a:hover {
  color: #FFFFFF;
}

.ai-footer-langs a[aria-current="true"] {
  color: #A5B4FC;
}

/* ---------------- mobile ---------------- */

@media (max-width: 960px) {
  .ai-lang-toggle {
    padding: 9px 11px;
    font-size: 13px;
  }
  .ai-lang-label {
    display: none;   /* globe + code only, to save header width */
  }
  .ai-geo-inner {
    padding: 11px 20px;
    font-size: 13.5px;
  }
}