/* ===== Next Educators — custom styles (Tailwind CDN handles the rest) ===== */

:root{
  --brand-blue:#0B63E5; --brand-deep:#0A2A6B;
  --brand-orange:#FF8A00; --brand-amber:#F5A623;
  --ink:#0A0E1A;
}
html{scroll-behavior:smooth}
body{overflow-x:hidden}

/* ---- Navbar link states ---- */
.nav-brand{color:#0A2A6B}
.nav-link{color:#334155}
.nav-link:hover{color:var(--brand-blue);background:#F5F7FB}
.nav-link.is-active{color:var(--brand-blue);background:#eef4ff}

/* transparent nav (over dark hero) → white text */
#site-header[data-transparent="1"]:not(.solid) .nav-brand,
#site-header[data-transparent="1"]:not(.solid) .nav-link{color:#fff}
#site-header[data-transparent="1"]:not(.solid) .nav-link:hover{background:rgba(255,255,255,.12);color:#fff}
#site-header[data-transparent="1"]:not(.solid) .nav-link.is-active{background:rgba(255,255,255,.15);color:#fff}

/* header becomes solid once scrolled */
#site-header.solid{background:rgba(255,255,255,.96);backdrop-filter:blur(8px);box-shadow:0 1px 12px rgba(10,42,107,.08)}

/* ---- Hero orbit motif ---- */
.orbit-wrap{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.orbit{position:absolute;border-radius:50%;border:1.5px solid transparent;
  background:linear-gradient(135deg,rgba(11,99,229,.35),rgba(255,138,0,.35)) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.orbit.o1{width:520px;height:520px;top:-120px;right:-120px;opacity:.5}
.orbit.o2{width:760px;height:760px;top:-220px;right:-260px;opacity:.3}
.orbit.o3{width:300px;height:300px;bottom:-80px;left:-60px;opacity:.4}
.glow-blue{position:absolute;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(11,99,229,.35),transparent 70%);filter:blur(40px)}
.glow-orange{position:absolute;width:360px;height:360px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,138,0,.28),transparent 70%);filter:blur(40px)}

/* ---- Reveal on scroll ---- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

/* ---- Cards ---- */
.card-hover{transition:transform .25s ease,box-shadow .25s ease}
.card-hover:hover{transform:translateY(-4px);box-shadow:0 18px 40px -12px rgba(10,42,107,.25)}

/* ---- Gradient text ---- */
.grad-text{background:linear-gradient(135deg,var(--brand-blue),var(--brand-orange));
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ---- Flash toast ---- */
.flash-toast{animation:slideIn .3s ease, fadeOut .4s ease 4s forwards}
@keyframes slideIn{from{transform:translateX(20px);opacity:0}to{transform:none;opacity:1}}
@keyframes fadeOut{to{opacity:0;transform:translateX(20px);visibility:hidden}}

/* ---- Chat bubbles ---- */
.chat-msg{max-width:85%;padding:8px 12px;border-radius:14px;line-height:1.4}
.chat-bot{background:#fff;border:1px solid #e2e8f0;align-self:flex-start;border-bottom-left-radius:4px}
.chat-user{background:var(--brand-blue);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
#chat-body{display:flex;flex-direction:column}
.chat-wa{display:inline-block;margin-top:6px;padding:6px 12px;border-radius:10px;background:#25D366;color:#fff;font-size:12px;font-weight:600;text-decoration:none}

/* prevent floating buttons overlapping on small screens */
@media (max-width:400px){
  #chat-toggle{right:5rem}
}

/* accessibility */
:focus-visible{outline:2px solid var(--brand-blue);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}