/* Custom styles vanilla Tagora */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  background-color: #f8fafc;
  color: #0f172a;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Outfit', 'Inter', ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -0.02em;
}

.font-display {
  font-family: 'Outfit', 'Inter', sans-serif;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 9999px;
}

.dark ::-webkit-scrollbar-thumb {
  background: #334155;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Fade-in helper */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 150ms ease-out;
}

/* Modal animation */
@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.zoom-in {
  animation: zoomIn 200ms ease-out;
}

/* Pulse override */
.animate-spin-slow {
  animation: spin 1.5s linear infinite;
}

.font-st6952 {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-size: 3rem;
  font-weight: 200;
}

.title-st6952 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

/* Code/monospace helper for docs pages */
.code-block { font-family: 'Menlo', 'Monaco', 'Consolas', monospace; }

/* Site-nav container must be sticky so the inner navHero sticks across all pages */
#site-nav { position: sticky; top: 0; z-index: 50; }

/* ── Utility ─────────────────────────────────────────────── */
.hidden { display: none !important; }

/* ── Nav ─────────────────────────────────────────────────── */
.nav {
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  padding: 1rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media (min-width: 768px) { .nav { padding: 1rem 3rem; } }

.nav-left  { display: flex; align-items: center; gap: 0.75rem; }
.nav-brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; }
.nav-logo  {
  background: #2563eb; color: #fff;
  width: 2.5rem; height: 2.5rem;
  border-radius: 0.75rem;
  font-size: 1.25rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 6px -1px rgb(0 0 0/.1);
}
.nav-wordmark {
  font-size: 1.5rem; font-weight: 800; color: #0f172a;
  letter-spacing: -0.025em;
  font-family: 'Outfit', 'Inter', sans-serif;
}

.nav-powered {
  display: none;
  align-items: center; gap: 0.5rem;
  padding-left: 0.75rem; margin-left: 0.75rem;
  border-left: 1px solid #cbd5e1;
}
@media (min-width: 640px) { .nav-powered { display: flex; } }
.nav-powered-label {
  font-size: 10px; font-weight: 700; color: #64748b;
  text-transform: uppercase; letter-spacing: 0.1em;
}
.nav-powered-logo { height: 1rem; width: 60px; object-fit: contain; flex-shrink: 0; }

.nav-links {
  display: none;
  align-items: center; gap: 2rem;
  font-size: 0.875rem; font-weight: 600; color: #475569;
}
@media (min-width: 768px) { .nav-links { display: flex; } }
.nav-link { color: inherit; text-decoration: none; transition: color 0.15s; }
.nav-link:hover { color: #2563eb; }

.nav-actions { display: flex; align-items: center; gap: 0.75rem; }
.nav-lang-desktop { display: none; }
@media (min-width: 768px) { .nav-lang-desktop { display: block; } }

.nav-mobile-btn {
  display: flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: 0.75rem; border: none; cursor: pointer;
  background: #f1f5f9; color: #334155;
  transition: background 0.15s, transform 0.1s;
}
.nav-mobile-btn:hover   { background: #e2e8f0; }
.nav-mobile-btn:active  { transform: scale(0.95); }
@media (min-width: 768px) { .nav-mobile-btn { display: none; } }

.nav-login {
  display: none;
  background: #0f172a; color: #fff;
  padding: 0.625rem 1.5rem; border-radius: 9999px;
  font-size: 0.875rem; font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 6px -1px rgb(0 0 0/.1);
  align-items: center;
  transition: background 0.15s, transform 0.1s;
}
.nav-login:hover  { background: #1e293b; }
.nav-login:active { transform: scale(0.95); }
@media (min-width: 768px) { .nav-login { display: inline-flex; } }

.nav-user { display: none; align-items: center; gap: 0.5rem; }
@media (min-width: 768px) { .nav-user { display: flex; } }
.nav-username { font-size: 0.875rem; font-weight: 600; color: #0f172a; }
.nav-logout {
  background: transparent; border: 1.5px solid #e2e8f0; color: #64748b;
  padding: 0.375rem 0.875rem; border-radius: 9999px;
  font-size: 0.8125rem; font-weight: 600; cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.nav-logout:hover { border-color: #0f172a; color: #0f172a; }

.nav-mobile-user { display: flex; align-items: center; gap: 0.5rem; }
.nav-mobile-username { font-size: 0.875rem; font-weight: 600; color: #0f172a; }
.nav-mobile-logout {
  background: #0f172a; color: #fff; border: none;
  padding: 0.625rem 1.25rem; border-radius: 9999px;
  font-size: 0.875rem; font-weight: 600; cursor: pointer;
}

/* Mobile menu */
.nav-mobile-menu {
  position: fixed; left: 0; right: 0; top: 69px;
  z-index: 40; background: #fff;
  border-bottom: 1px solid #e2e8f0;
  box-shadow: 0 20px 25px -5px rgb(0 0 0/.1);
}
.nav-mobile-inner {
  display: flex; flex-direction: column;
  padding: 1rem 1.5rem; gap: 0.25rem;
}
.nav-mobile-link {
  display: flex; align-items: center;
  padding: 0.75rem; border-radius: 0.75rem;
  font-size: 0.875rem; font-weight: 600; color: #334155;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.nav-mobile-link:hover { background: #f1f5f9; color: #2563eb; }
.nav-mobile-bottom {
  padding-top: 0.75rem; margin-top: 0.25rem;
  border-top: 1px solid #f1f5f9;
  display: flex; align-items: center; justify-content: space-between;
}
.nav-mobile-langs { display: flex; align-items: center; gap: 0.5rem; }
.nav-mobile-login {
  background: #0f172a; color: #fff;
  padding: 0.625rem 1.5rem; border-radius: 9999px;
  font-size: 0.875rem; font-weight: 600; text-decoration: none;
}

/* Lang switcher */
.lang-switcher { position: relative; }
.lang-btn {
  display: flex; align-items: center; gap: 0.375rem;
  padding: 0.5rem 0.75rem; border-radius: 0.75rem; border: none;
  background: #f1f5f9; color: #334155;
  font-size: 0.75rem; font-weight: 600; cursor: pointer;
  transition: background 0.15s;
}
.lang-btn:hover { background: #e2e8f0; }
.lang-dropdown {
  position: absolute; right: 0; top: calc(100% + 0.5rem);
  width: 10rem; border-radius: 1rem; overflow: hidden;
  background: #fff; border: 1px solid #e2e8f0;
  box-shadow: 0 20px 25px -5px rgb(0 0 0/.1); z-index: 50;
}
.lang-option {
  width: 100%; display: flex; align-items: center; gap: 0.625rem;
  padding: 0.75rem 1rem; border: none; background: none;
  font-size: 0.875rem; font-weight: 600; color: #334155;
  cursor: pointer; text-align: left;
  transition: background 0.1s;
}
.lang-option:hover { background: #f8fafc; }
.lang-mobile-btn {
  display: flex; align-items: center; gap: 0.375rem;
  padding: 0.5rem 0.75rem; border-radius: 0.75rem; border: none;
  background: #f1f5f9; color: #334155;
  font-size: 0.75rem; font-weight: 600; cursor: pointer;
}

/* ── Footer ──────────────────────────────────────────────── */
.site-footer {
  background: #fff; border-top: 1px solid #e2e8f0;
  padding: 3rem 1.5rem; text-align: center;
  margin-top: auto; flex-shrink: 0;
}
.footer-inner {
  max-width: 72rem; margin: 0 auto;
  display: flex; flex-direction: column;
  align-items: center; gap: 1rem;
  font-size: 0.875rem; color: #94a3b8;
}
@media (min-width: 768px) {
  .footer-inner { flex-direction: row; justify-content: space-between; gap: 0; }
}
.footer-brand       { display: flex; align-items: center; gap: 0.5rem; }
.footer-brand-name  { font-weight: 700; color: #334155; }
.footer-links       { display: flex; gap: 1.5rem; font-size: 0.75rem; }
.footer-link        { color: inherit; text-decoration: none; transition: color 0.15s; }
.footer-link:hover  { color: #475569; }

/* ── Searchbar ───────────────────────────────────────────── */
.searchbar { position: relative; width: 100%; }
.searchbar__wrap { position: relative; }
.searchbar__icon {
  position: absolute; left: 1.25rem; top: 50%; transform: translateY(-50%);
  width: 1.25rem; height: 1.25rem; pointer-events: none;
  transition: color 0.15s;
}
.searchbar__wrap--dark  .searchbar__icon { color: #64748b; }
.searchbar__wrap--light .searchbar__icon { color: #94a3b8; }
.searchbar__wrap--dark:focus-within  .searchbar__icon { color: #60a5fa; }
.searchbar__wrap--light:focus-within .searchbar__icon { color: #3b82f6; }

.searchbar__input {
  width: 100%; border-radius: 1rem;
  padding: 1rem 1.5rem 1rem 3.5rem;
  font-size: 1.125rem; border: 1px solid transparent;
  transition: border-color 0.15s, background 0.15s;
}
.searchbar__input:focus { outline: none; }
.searchbar__input--dark {
  background: rgb(30 41 59/.4); border-color: rgb(51 65 85/.6);
  color: #e2e8f0; box-shadow: 0 25px 50px -12px rgb(0 0 0/.25);
}
.searchbar__input--dark::placeholder { color: #64748b; }
.searchbar__input--dark:focus { border-color: rgb(59 130 246/.5); background: rgb(30 41 59/.8); }
.searchbar__input--light {
  background: #fff; border-color: #e2e8f0;
  color: #1e293b; box-shadow: 0 4px 6px -1px rgb(0 0 0/.05);
}
.searchbar__input--light::placeholder { color: #94a3b8; }
.searchbar__input--light:focus { border-color: #3b82f6; }

.searchbar__results {
  position: absolute; top: 100%; margin-top: 0.75rem;
  width: 100%; border-radius: 1rem; overflow: hidden; z-index: 50;
}
.searchbar__results--dark  { background: #0f172a; border: 1px solid #1e293b; box-shadow: 0 25px 50px -12px rgb(0 0 0/.25); }
.searchbar__results--light { background: #fff; border: 1px solid #e2e8f0; box-shadow: 0 4px 6px -1px rgb(0 0 0/.05); }

.searchbar__list  { padding: 0.5rem; max-height: 350px; overflow-y: auto; }
.searchbar__item  { width: 100%; display: flex; align-items: center; gap: 1rem; padding: 0.75rem; border-radius: 0.75rem; text-decoration: none; transition: background 0.1s; }
.searchbar__item--dark:hover  { background: rgb(59 130 246/.1); }
.searchbar__item--light:hover { background: #eff6ff; }
.searchbar__item-icon {
  padding: 0.5rem; border-radius: 0.5rem; flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.searchbar__item--dark  .searchbar__item-icon { background: #1e293b; color: #94a3b8; }
.searchbar__item--light .searchbar__item-icon { background: #f1f5f9; color: #64748b; }
.searchbar__item:hover  .searchbar__item-icon { background: #3b82f6; color: #fff; }
.searchbar__item-body  { flex: 1; min-width: 0; }
.searchbar__item-title { font-weight: 600; font-size: 0.875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.searchbar__item--dark  .searchbar__item-title { color: #e2e8f0; }
.searchbar__item--light .searchbar__item-title { color: #1e293b; }
.searchbar__item--dark:hover  .searchbar__item-title { color: #60a5fa; }
.searchbar__item--light:hover .searchbar__item-title { color: #2563eb; }
.searchbar__item-desc  { font-size: 0.75rem; color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.searchbar__empty      { padding: 2rem; text-align: center; font-size: 0.875rem; color: #64748b; }
.searchbar__footer     { padding: 0.5rem 1rem; display: flex; align-items: center; justify-content: space-between; }
.searchbar__footer--dark  { background: rgb(2 6 23/.5); border-top: 1px solid #1e293b; }
.searchbar__footer--light { background: #f8fafc; border-top: 1px solid #e2e8f0; }
.searchbar__label { font-size: 10px; color: #64748b; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; font-family: monospace; }
.searchbar__kbd   { padding: 0.125rem 0.375rem; border-radius: 0.25rem; font-size: 10px; }
.searchbar__kbd--dark  { border: 1px solid #334155; background: #1e293b; color: #94a3b8; }
.searchbar__kbd--light { border: 1px solid #e2e8f0; background: #fff; color: #64748b; }

/* ── Slide-in animation (used in partner.html) ── */
@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.anim-in {
  animation: fadeSlideIn 300ms ease-out forwards;
}