/* ================================================================
   EK Custom CSS — supplements native Elementor/XPRO widget settings
   with the handful of interaction/behavior effects that only exist
   as global CSS/JS in the source prototype (fixed transparent navbar,
   hero particles, drift animations, dark mode, back-to-top).
   ================================================================ */

:root{
  --color-primary:#003399;
  --color-primary-dark:#002277;
  --color-primary-darker:#001155;
  --color-secondary:#FFCC00;
}

/* ============ NAVBAR (fixed + transparent-to-solid on scroll) ============ */
#ek-navbar{
  left:0 !important; right:0 !important; width:100% !important;
  transition:background .35s ease, box-shadow .35s ease, padding .35s ease, backdrop-filter .35s ease;
}
#ek-navbar.scrolled{
  background:rgba(255,255,255,0.97) !important;
  box-shadow:0 4px 24px rgba(0,0,0,0.06);
  backdrop-filter:blur(10px);
  padding-top:14px !important; padding-bottom:14px !important;
}
/* Logo: white over hero, dark once scrolled */
#ek-navbar .ek-logo-name{ color:#fff; transition:color .3s ease; }
#ek-navbar.scrolled .ek-logo-name{ color:#1a1a2e; }
#ek-navbar .ek-logo-title{ color:rgba(255,255,255,0.75); transition:color .3s ease; }
#ek-navbar.scrolled .ek-logo-title{ color:var(--color-primary); }

/* Defensive reset in case menu markup renders as a list */
.ek-nav-menu, .ek-nav-menu ul{ list-style:none !important; margin:0; padding:0; display:flex !important; flex-wrap:nowrap !important; align-items:center; }
.ek-nav-menu li{ list-style:none !important; }
.ek-nav-menu li::marker{ content:''; }

/* Nav menu: widget default is dark (matches scrolled state) — force white while unscrolled */
#ek-navbar:not(.scrolled) .ek-nav-menu a{ color:#fff !important; }
#ek-navbar:not(.scrolled) .ek-nav-menu a:hover,
#ek-navbar:not(.scrolled) .ek-nav-menu a.active{ color:var(--color-secondary) !important; }

/* Theme toggle button: light-on-dark by default, swaps once scrolled */
#ek-theme-toggle{ transition:background .3s ease; }
#ek-navbar:not(.scrolled) #ek-theme-toggle{ background:rgba(255,255,255,0.15) !important; }
#ek-navbar:not(.scrolled) #ek-theme-toggle i{ color:#fff !important; }
#ek-navbar.scrolled #ek-theme-toggle{ background:rgba(0,51,153,0.08) !important; }
#ek-navbar.scrolled #ek-theme-toggle i{ color:var(--color-primary) !important; }
#ek-theme-toggle{ cursor:pointer; }

/* ============ HERO STAR PARTICLES ============ */
#ek-hero-stars{ pointer-events:none; overflow:hidden; }
#ek-hero-stars .ek-star{
  position:absolute; width:3px; height:3px; border-radius:50%;
  background:#FFCC00; opacity:0.5;
  animation:ekTwinkle 3.5s ease-in-out infinite;
}
@keyframes ekTwinkle{
  0%,100%{ opacity:0.15; transform:scale(1); }
  50%{ opacity:0.9; transform:scale(1.6); }
}

/* ============ HERO VISUAL DRIFT ============ */
#ek-avatar-circle{ animation:ekFloat 6s ease-in-out infinite; }
#ek-badge-1{ animation:ekFloat 5s ease-in-out infinite; animation-delay:.3s; }
#ek-badge-2{ animation:ekFloat 5.5s ease-in-out infinite; animation-delay:.8s; }
@keyframes ekFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-14px); }
}

/* ============ BACK TO TOP ============ */
#ekBackToTop{
  position:fixed; bottom:32px; right:32px; width:48px; height:48px; border-radius:50%;
  background:var(--color-primary); color:#fff; display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transform:translateY(20px);
  transition:all .3s ease; z-index:900; box-shadow:0 10px 26px rgba(0,51,153,0.35);
  cursor:pointer; border:none; font-size:16px;
}
#ekBackToTop.show{ opacity:1; visibility:visible; transform:translateY(0); }
#ekBackToTop:hover{ background:var(--color-primary-dark); transform:translateY(-4px); }

/* ============ SCROLL REVEAL (applies to elements flagged with class) ============ */
.ek-reveal{ opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
.ek-reveal.ek-in{ opacity:1; transform:translateY(0); }

/* ============ DARK MODE ============ */
body.ek-dark{ background:#0f1420 !important; color:#e5e7ee; }
body.ek-dark #section-who-i-am,
body.ek-dark #section-latest-blog{ background:#141a2b !important; }
body.ek-dark #section-who-i-am .e-con,
body.ek-dark #section-latest-blog .e-con{ background:transparent; }
body.ek-dark [data-id] > .e-con-inner,
body.ek-dark .elementor-widget-heading .elementor-heading-title{ color:inherit; }
body.ek-dark #ek-navbar.scrolled{ background:rgba(15,20,32,0.97) !important; }
body.ek-dark #ek-navbar.scrolled .ek-logo-name,
body.ek-dark #ek-navbar.scrolled .ek-nav-menu a{ color:#e5e7ee !important; }
body.ek-dark #ek-footer{ background:#001133 !important; }

/* Utility: hide scrollbar jump on mobile nav open (XPRO handles panel itself) */
html.ek-nav-open{ overflow:hidden; }