/* =========================================================
   NOAH AI SCHOOL SITE UI V13 FLOAT NAV LAYOUT - 2026-06-29
   Scope: HOME right floating navigation + language switcher docking.
   Goal: no overlap with hero headline area; stable right-side vertical dock.
========================================================= */
:root{
  --noah-v13-blue:#0ea5ff;
  --noah-v13-blue2:#2563eb;
  --noah-v13-green:#10b981;
  --noah-v13-ink:#0f172a;
  --noah-v13-muted:#526078;
}

/* V13 creates one right-side dock and moves the language switcher + right nav into it. */
body.web-index #noahRightDock{
  position:fixed!important;
  top:220px!important;
  right:16px!important;
  width:98px!important;
  max-width:98px!important;
  z-index:10075!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  gap:10px!important;
  pointer-events:none!important;
  transform:none!important;
  box-sizing:border-box!important;
}

/* In the dock, language switcher becomes a compact vertical block, not a wide horizontal pill. */
body.web-index #noahRightDock #wbLangSwitcher,
body.web-index #noahRightDock .wb-lang-switcher{
  position:static!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;
  transform:none!important;
  width:98px!important;
  min-width:98px!important;
  max-width:98px!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:center!important;
  gap:6px!important;
  padding:7px!important;
  margin:0!important;
  border-radius:24px!important;
  background:rgba(255,255,255,.96)!important;
  border:1px solid rgba(37,99,235,.16)!important;
  box-shadow:0 16px 36px rgba(15,23,42,.16)!important;
  backdrop-filter:blur(14px)!important;
  -webkit-backdrop-filter:blur(14px)!important;
  overflow:hidden!important;
  pointer-events:auto!important;
  box-sizing:border-box!important;
}
body.web-index #noahRightDock #wbLangSwitcher:before,
body.web-index #noahRightDock #wbLangSwitcher:after,
body.web-index #noahRightDock .wb-lang-switcher:before,
body.web-index #noahRightDock .wb-lang-switcher:after{
  content:none!important;
  display:none!important;
}
body.web-index #noahRightDock #wbLangSwitcher button,
body.web-index #noahRightDock .wb-lang-switcher button{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  height:34px!important;
  min-height:34px!important;
  line-height:1!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0 6px!important;
  margin:0!important;
  border:0!important;
  border-radius:999px!important;
  background:transparent!important;
  color:#334155!important;
  font-size:12px!important;
  font-weight:850!important;
  letter-spacing:0!important;
  white-space:nowrap!important;
  text-align:center!important;
  box-shadow:none!important;
  box-sizing:border-box!important;
}
body.web-index #noahRightDock #wbLangSwitcher button.is-active,
body.web-index #noahRightDock #wbLangSwitcher button.active,
body.web-index #noahRightDock .wb-lang-switcher button.is-active,
body.web-index #noahRightDock .wb-lang-switcher button.active{
  color:#fff!important;
  background:linear-gradient(135deg,var(--noah-v13-blue2),var(--noah-v13-blue))!important;
  box-shadow:0 10px 22px rgba(14,165,255,.22)!important;
}

/* Right floating navigation becomes the second block in the same dock. */
body.web-index #noahRightDock .web_right{
  position:static!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;
  transform:none!important;
  width:98px!important;
  min-width:98px!important;
  max-width:98px!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  z-index:auto!important;
  display:block!important;
  overflow:visible!important;
  pointer-events:auto!important;
  box-sizing:border-box!important;
}
body.web-index #noahRightDock .web_right .web_rightlb{
  width:98px!important;
  max-width:98px!important;
  max-height:calc(100vh - 340px)!important;
  margin:0!important;
  padding:9px 7px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  gap:2px!important;
  border-radius:26px!important;
  background:rgba(255,255,255,.95)!important;
  border:1px solid rgba(37,99,235,.16)!important;
  box-shadow:0 18px 42px rgba(15,23,42,.15)!important;
  backdrop-filter:blur(14px)!important;
  -webkit-backdrop-filter:blur(14px)!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  box-sizing:border-box!important;
}
body.web-index #noahRightDock .web_right .web_rightlb::-webkit-scrollbar{width:0!important;height:0!important;display:none!important;}
body.web-index #noahRightDock .web_right .web_rightlb li,
body.web-index #noahRightDock .web_right .web_rightlb li a{
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  float:none!important;
  clear:both!important;
  display:block!important;
  margin:0!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  box-sizing:border-box!important;
}
body.web-index #noahRightDock .web_right .web_rightlb li a span{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  min-height:38px!important;
  height:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin:2px 0!important;
  padding:7px 6px!important;
  border-radius:16px!important;
  box-sizing:border-box!important;
  color:var(--noah-v13-muted)!important;
  background:transparent!important;
  font-size:13px!important;
  font-weight:850!important;
  line-height:1.18!important;
  letter-spacing:0!important;
  text-align:center!important;
  white-space:normal!important;
  word-break:keep-all!important;
  overflow:visible!important;
}
body.web-index #noahRightDock .web_right .web_rightlb li a:hover span,
body.web-index #noahRightDock .web_right .web_rightlb li.on a span{
  color:#fff!important;
  background:linear-gradient(135deg,var(--noah-v13-blue2),var(--noah-v13-blue))!important;
  box-shadow:0 10px 22px rgba(37,99,235,.22)!important;
}
body.web-index #noahRightDock .web_right .web-xstop{
  width:98px!important;
  margin-top:8px!important;
  display:block!important;
  pointer-events:auto!important;
}

/* Fallback: before JS moves elements into the dock, keep them in the right edge and avoid the old wide pill overlap. */
body.web-index:not(.noah-v13-docked) #wbLangSwitcher,
body.web-index:not(.noah-v13-docked) .wb-lang-switcher{
  position:fixed!important;
  top:220px!important;
  right:16px!important;
  width:98px!important;
  flex-direction:column!important;
  z-index:10080!important;
}
body.web-index:not(.noah-v13-docked) .web_right{
  position:fixed!important;
  top:322px!important;
  right:16px!important;
  width:98px!important;
  z-index:10020!important;
}

@media(max-width:1280px){
  body.web-index #noahRightDock,
  body.web-index .web_right{display:none!important;}
}
@media(max-height:720px){
  body.web-index #noahRightDock{top:140px!important;}
  body.web-index #noahRightDock .web_right .web_rightlb{max-height:calc(100vh - 250px)!important;}
}