/* ============================================================
   WDS Premium Header — glassmorphism + tilt
   Shared across all pages. Loaded AFTER each page's inline <style>
   so these rules win the cascade. Added 2026-06-05.
   ============================================================ */

/* --- Glass header bar --- */
.header{
  background:rgba(255,255,255,.80)!important;
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid rgba(255,255,255,.55);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 8px 26px -14px rgba(12,74,110,.30)!important;
}

/* --- Desktop nav: spacing for touch --- */
.nav{gap:8px!important;}

/* --- Nav links: glass pills + animated underline --- */
.nav a{
  position:relative;overflow:hidden;white-space:nowrap;
  display:inline-flex;align-items:center;
  min-height:42px;padding:9px 14px;
  border:1px solid transparent;border-radius:12px;
  color:var(--deep);font-weight:600;
  transform-style:preserve-3d;
  transition:background .25s ease,border-color .25s ease,box-shadow .25s ease,color .25s ease;
}
.nav a:not(.nav-btn):hover,
.nav a:not(.nav-btn):focus-visible{
  background:rgba(255,255,255,.60);
  border-color:rgba(255,255,255,.85);
  box-shadow:0 8px 20px -10px rgba(12,74,110,.35),0 1px 0 rgba(255,255,255,.9) inset;
  color:var(--primary-text);
}
.nav a:not(.nav-btn)::after{
  content:"";position:absolute;left:16px;right:16px;bottom:6px;height:2px;
  background:linear-gradient(90deg,var(--primary),var(--primary-2));
  border-radius:2px;transform:scaleX(0);transform-origin:left center;
  transition:transform .28s cubic-bezier(.4,0,.2,1);
}
.nav a:not(.nav-btn):hover::after,
.nav a:not(.nav-btn):focus-visible::after{transform:scaleX(1);}

/* --- Register CTA: animated AI button (still links to registration) --- */
.nav a.nav-btn,.nav .nav-btn{
  position:relative;overflow:hidden;
  display:inline-flex!important;align-items:center;gap:7px;
  min-height:44px;padding:11px 22px!important;
  border-radius:14px!important;
  color:#fff!important;font-weight:700!important;letter-spacing:.3px;
  text-shadow:0 1px 2px rgba(0,0,0,.30);
  background:linear-gradient(110deg,#f97316 0%,#ec4899 28%,#8b5cf6 52%,#3b82f6 74%,#f97316 100%)!important;
  background-size:280% 100%!important;
  animation:wdsAiShift 7s linear infinite;
  border:1px solid rgba(255,255,255,.45)!important;
  box-shadow:0 8px 24px -6px rgba(139,92,246,.6),inset 0 1px 0 rgba(255,255,255,.35)!important;
  transition:box-shadow .25s ease!important;
}
@keyframes wdsAiShift{to{background-position:280% 0}}
.nav a.nav-btn::after{display:none!important;}
.nav a.nav-btn .ai-spark{width:15px;height:15px;flex:none;filter:drop-shadow(0 0 3px rgba(255,255,255,.85))}
.nav a.nav-btn:hover,.nav .nav-btn:hover{
  box-shadow:0 12px 32px -6px rgba(236,72,153,.72),inset 0 1px 0 rgba(255,255,255,.5)!important;
}

/* --- Keyboard focus rings --- */
.nav a:focus-visible,.mobile-menu-btn:focus-visible,.mobile-nav a:focus-visible{
  outline:3px solid var(--cta);outline-offset:2px;
}

/* --- Mobile menu button: glass icon (3 HTML bars morph to X) --- */
.mobile-menu-btn{
  width:44px;height:44px;padding:0!important;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
  border-radius:12px!important;
  color:var(--deep)!important;font-size:0!important;
  background:rgba(255,255,255,.55)!important;
  border:1px solid rgba(255,255,255,.80)!important;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 8px 20px -12px rgba(12,74,110,.3),0 1px 0 rgba(255,255,255,.9) inset!important;
}
.mobile-menu-btn .bar{display:block;width:22px;height:2px;border-radius:2px;background:currentColor;transition:transform .3s ease,opacity .2s ease}
.mobile-menu-btn[aria-expanded="true"] .bar-top{transform:translateY(7px) rotate(45deg)}
.mobile-menu-btn[aria-expanded="true"] .bar-mid{opacity:0}
.mobile-menu-btn[aria-expanded="true"] .bar-bot{transform:translateY(-7px) rotate(-45deg)}

/* --- Mobile dropdown: glass panel with smooth open --- */
@media (max-width:980px){
  .nav{display:none!important;}
  .mobile-menu-btn{display:flex!important;}
  .mobile-nav{
    display:flex!important;
    opacity:0;transform:translateY(-10px);pointer-events:none;
    background:rgba(255,255,255,.85)!important;
    -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
    border-bottom:1px solid rgba(255,255,255,.6);
    box-shadow:0 18px 38px -16px rgba(12,74,110,.32)!important;
    gap:8px!important;
    transition:opacity .25s ease,transform .25s ease;
  }
  .mobile-nav.active{opacity:1;transform:translateY(0);pointer-events:auto;}
  .mobile-nav a{min-height:46px;display:flex;align-items:center;justify-content:center;}
}

/* --- Respect reduced motion --- */
@media (prefers-reduced-motion: reduce){
  .nav a,.nav a::after,.nav .nav-btn,.mobile-menu-btn .bar,.mobile-nav{transition:none!important;animation:none!important;}
}

/* --- Fit to screen: fills laptops, capped at 1600px so it doesn't sprawl on ultrawide --- */
.header-content,.hero-inner{max-width:1600px!important;}
.wrap{max-width:1600px!important;padding-left:24px!important;padding-right:24px!important;}

/* --- Floating action buttons: anchored to the 1600px content column (24px gutters below 1600) --- */
.whatsapp-btn{
  width:52px!important;height:52px!important;
  bottom:24px!important;left:max(24px, 50% - 800px)!important;
  box-shadow:0 8px 22px -6px rgba(37,211,102,.5)!important;z-index:1001!important;
}
#wesley-chat-button{
  height:52px!important;min-height:52px!important;
  bottom:24px!important;right:max(24px, 50% - 800px)!important;
  box-shadow:0 8px 22px -6px rgba(12,74,110,.35)!important;
}

/* --- Compact logo + floats on small phones --- */
@media (max-width:480px){
  .logo img{height:40px!important;}
  .logo-text{font-size:16px!important;}
  .whatsapp-btn{width:48px!important;height:48px!important;bottom:18px!important;left:18px!important;}
  #wesley-chat-button{height:48px!important;min-height:48px!important;bottom:18px!important;right:18px!important;}
}