/* JL Navigation v2.0 — Fun, sticky, works everywhere */

@keyframes jlFadeIn { from{opacity:0} to{opacity:1} }
@keyframes jlWiggle { 0%,100%{transform:rotate(0)} 15%{transform:rotate(5deg)} 30%{transform:rotate(-5deg)} 45%{transform:rotate(3deg)} 60%{transform:rotate(-2deg)} }
@keyframes jlGlow { 0%,100%{box-shadow:0 0 16px rgba(245,166,35,.25),0 4px 16px rgba(0,0,0,.12)} 50%{box-shadow:0 0 32px rgba(245,166,35,.5),0 4px 16px rgba(0,0,0,.12)} }
@keyframes jlFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }

/* === Main Nav Bar === */
.jl-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(255,248,231,.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(0,0,0,.04);
  transition: all .4s ease;
}
.jl-nav.jl-nav-scrolled,
.jl-nav.scrolled {
  background: rgba(255,255,255,.97);
  box-shadow: 0 4px 24px rgba(0,0,0,.06);
}
.jl-nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(16px,4vw,40px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

/* Logo */
.jl-nav-logo {
  font-family: 'Baloo 2', cursive;
  font-size: 22px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #2C3E50;
  transition: all .3s cubic-bezier(0.34,1.56,0.64,1);
}
.jl-nav-logo:hover { transform: scale(1.05); }
.jl-nav-logo-icon {
  font-size: 26px;
  display: inline-block;
  animation: jlFloat 3s ease-in-out infinite;
}
.jl-nav-logo-text span { color: #E8739A; }

/* Nav Items */
.jl-nav-items {
  display: flex;
  align-items: center;
  gap: 2px;
}
.jl-nav-item {
  padding: 8px 14px;
  border-radius: 14px;
  font-family: 'Fredoka', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: #2C3E50;
  transition: all .3s cubic-bezier(0.34,1.56,0.64,1);
  display: flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
}
.jl-nav-item:hover {
  background: rgba(155,111,207,.08);
  transform: translateY(-3px) scale(1.04);
  color: #9B6FCF;
}
.jl-nav-item:hover .jl-nav-item-icon {
  animation: jlWiggle .5s ease;
  display: inline-block;
}
.jl-nav-item-icon {
  font-size: 16px;
  display: inline-block;
  transition: transform .3s;
}
.jl-nav-item-label { white-space: nowrap; }

/* CTA Button */
.jl-nav-cta {
  padding: 10px 22px;
  border-radius: 100px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 14px;
  background: linear-gradient(135deg, #E8739A, #9B6FCF);
  color: white;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  transition: all .3s cubic-bezier(0.34,1.56,0.64,1);
  animation: jlGlow 3s ease-in-out infinite;
}
.jl-nav-cta:hover {
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}

/* Hamburger */
.jl-nav-burger {
  display: none;
  background: none;
  font-size: 24px;
  padding: 8px;
  border: none;
  cursor: pointer;
  color: #2C3E50;
  transition: transform .3s;
}
.jl-nav-burger:hover { transform: scale(1.1); }

/* === Mobile Drawer === */
.jl-drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 998;
  background: rgba(0,0,0,.4);
}
.jl-drawer {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(255,248,231,.98);
  backdrop-filter: blur(20px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.jl-drawer[aria-hidden="false"],
.jl-drawer.open {
  display: flex;
  animation: jlFadeIn .3s ease;
}
.jl-drawer-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
}
.jl-drawer-logo {
  font-family: 'Baloo 2', cursive;
  font-size: 20px;
  font-weight: 800;
  color: #2C3E50;
}
.jl-drawer-close {
  font-size: 28px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: #2C3E50;
  transition: transform .3s;
}
.jl-drawer-close:hover { transform: scale(1.2) rotate(90deg); }

.jl-drawer-items { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.jl-drawer-item {
  font-family: 'Fredoka', sans-serif;
  font-size: 20px;
  font-weight: 700;
  padding: 14px 36px;
  border-radius: 18px;
  color: #2C3E50;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all .3s cubic-bezier(0.34,1.56,0.64,1);
}
.jl-drawer-item:hover {
  background: rgba(155,111,207,.08);
  transform: scale(1.05);
}
.jl-drawer-item-icon { font-size: 24px; }

.jl-drawer-cta {
  margin-top: 16px;
  padding: 14px 32px;
  border-radius: 100px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 18px;
  background: linear-gradient(135deg, #E8739A, #9B6FCF);
  color: white;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(0,0,0,.15);
  transition: all .3s cubic-bezier(0.34,1.56,0.64,1);
}
.jl-drawer-cta:hover { transform: translateY(-3px) scale(1.05); }

/* === Responsive === */
@media (max-width: 960px) {
  .jl-nav-items { display: none; }
  .jl-nav-cta { display: none; }
  .jl-nav-burger { display: block; }
}
@media (max-width: 480px) {
  .jl-nav-inner { height: 56px; }
  .jl-nav-logo { font-size: 19px; }
  .jl-nav-logo-icon { font-size: 22px; }
}