/* =====================================================
   NAVBAR
===================================================== */
.navbar {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow .3s, height .3s;
}
.navbar.scrolled { box-shadow: 0 4px 24px rgba(10,22,40,.1); }
.navbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; height: 110px;
}

/* ── Logo block ── */
.logo {
  display: flex; align-items: center; gap: 14px; flex-shrink: 0;
  text-decoration: none;
}
.logo-img {
  height: 100px; width: auto; display: block; object-fit: contain;
  transition: height .3s;
  filter: brightness(0) saturate(100%) invert(29%) sepia(88%) saturate(1200%) hue-rotate(185deg);
}
.navbar.scrolled .logo-img { height: 80px; }
.logo-img-inv { filter: brightness(0) invert(1); }
.logo-text-block { display: flex; flex-direction: column; line-height: 1.15; }
.logo-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 24px; font-weight: 800; color: var(--brand-blue);
  letter-spacing: -.02em;
}
.logo-academy {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 12px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--brand-yellow);
  -webkit-text-stroke: .3px var(--brand-yel-dk);
}

/* ── Center nav links ── */
.nav-list { display: flex; align-items: center; gap: 2px; list-style: none; }
.nav-list a {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 14px; font-weight: 600; color: #4B5563;
  padding: 7px 11px; border-radius: 9px; white-space: nowrap;
  transition: color .2s, background .2s;
}
.nav-list a:hover { color: var(--brand-blue); background: #EFF6FF; }
.nav-list a.dim { color: #CBD5E1; pointer-events: none; cursor: default; }
.nav-soon {
  font-size: 9px; background: #FEF3C7; color: #92400E;
  padding: 2px 6px; border-radius: 99px; font-weight: 800;
  margin-inline-start: 4px; vertical-align: middle;
}

/* ── Right action buttons ── */
.nav-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.btn-login {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; color: var(--brand-blue);
  border: 1.5px solid var(--brand-blue); border-radius: 999px;
  padding: 9px 18px; font-family: 'Space Grotesk', sans-serif;
  font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap;
  transition: background .2s, color .2s, transform .2s;
  text-decoration: none;
}
.btn-login:hover { background: #EFF6FF; transform: translateY(-1px); }
.btn-contact {
  display: inline-flex; align-items: center; gap: 6px;
  background: #25D366; color: #fff; border: none; border-radius: 999px;
  padding: 9px 20px; font-family: 'Space Grotesk', sans-serif;
  font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap;
  transition: background .2s, transform .2s, box-shadow .2s;
  text-decoration: none;
}
.btn-contact:hover { background: #1ebe5a; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(37,211,102,.3); }

/* ── Language switcher ── */
.lang-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 1.5px solid var(--border); border-radius: 999px;
  padding: 7px 14px; cursor: pointer;
  font-family: 'IBM Plex Sans', sans-serif; font-size: 13px; font-weight: 700;
  color: var(--brand-text); transition: border-color .2s, background .2s;
  white-space: nowrap;
}
.lang-toggle:hover { border-color: var(--brand-blue); background: #EFF6FF; color: var(--brand-blue); }
.lang-globe { font-size: 16px; }

/* ── Hamburger ── */
.hamburger {
  display: none; background: none; border: 1.5px solid var(--border);
  border-radius: 9px; padding: 8px 12px; font-size: 20px;
  color: var(--brand-text); cursor: pointer;
}

/* ── Mobile drawer ── */
.mob-nav {
  display: none; position: absolute;
  top: 80px; left: 12px; right: 12px;
  background: #fff; border: 1px solid var(--border); border-radius: 20px;
  box-shadow: var(--sh-lg); padding: 14px;
  flex-direction: column; gap: 4px; z-index: 99;
}
.mob-nav.open { display: flex; }
.mob-nav a {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 15px; font-weight: 600; color: var(--brand-text);
  padding: 11px 14px; border-radius: 11px; transition: background .2s;
}
.mob-nav a:hover { background: var(--brand-gray); }
.mob-nav a.dim { color: #CBD5E1; pointer-events: none; }
.mob-cta {
  margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 8px;
}

/* ── RTL overrides ──
   When html[dir="rtl"] is set, direction:rtl is inherited by all elements.
   For a flex container with flex-direction:row, direction:rtl automatically
   makes items flow RIGHT → LEFT, so no flex-direction:row-reverse is needed.
   Adding row-reverse would double-reverse and produce a LTR layout — that
   was the original bug causing the logo to stay on the left.
── */

/* Navbar bar: logo lands on RIGHT, nav in CENTER, actions on LEFT naturally */

/* Logo: image is first child → goes to RIGHT; text block aligns its
   two lines to start (= right in RTL) */
html[dir="rtl"] .logo-text-block { align-items: flex-start; }

/* Nav-soon badge spacing: swap the margin to the other side */
html[dir="rtl"] .nav-soon { margin-inline-start: 0; margin-inline-end: 4px; }

/* Mobile drawer stays full-width, text reads right */
html[dir="rtl"] .mob-nav { left: 12px; right: 12px; text-align: right; }