/* =====================================================================
   WEKA Navigation  ·  weka-nav.css
   Transparent → solid on scroll, auto light/dark based on section theme,
   mega menu + dropdowns, two CTAs, fully responsive.
   ===================================================================== */


/* -------------------------------------------------- Tokens */
:root {
  --wknav-height: 84px;
  --wknav-height-scrolled: 76px;
  --wknav-max: 1440px;
  --wknav-radius: 16px;
  --wknav-ease: cubic-bezier(.22, .61, .36, 1);

  /* brand */
  
}

/* =====================================================================
   THEME PALETTES  —  .wk-nav__bar carries the data-theme attribute that
   the JS flips based on the section currently under the bar. The palette
   variables are still declared on the .wk-nav shell (via :has) so the
   header background layer, color and shadow can read them too.
   ===================================================================== */

/* DARK theme (default — over dark sections / dark hero) */
.wk-nav:has(.wk-nav__bar[data-theme="dark"]) {
  --weka-off-white: #FCFCFB;
  --nav-fg: #FCFCFB;
  --nav-fg-muted: rgba(242, 242, 235, .62);
  --nav-bg: rgba(20, 24, 29, 1);
  --nav-hairline: rgba(255, 255, 255, .10);
  --nav-item-hover: rgba(255, 255, 255, .07);

  --nav-panel-bg: #0E1216;
  --nav-panel-hairline: rgba(255, 255, 255, .08);
  --nav-panel-item-hover: rgba(255, 255, 255, .05);
  --nav-col-title: var(--weka-periwinkle);
  --nav-desc: rgba(242, 242, 235, .55);

  /* CTAs */
  --nav-cta1-bg: rgba(255, 255, 255, .06);
  --nav-cta1-fg: #F2F2EB;
  --nav-cta1-bd: rgba(255, 255, 255, .14);
  --nav-cta2-bg: var(--weka-periwinkle);
  --nav-cta2-fg: #171C21;
  --nav-cta2-bg-hover: #d9bff7;

  --nav-shadow: 0 18px 50px -20px rgba(0, 0, 0, .7);
}

/* LIGHT theme (over light sections) */
.wk-nav:has(.wk-nav__bar[data-theme="light"]) {
  --nav-fg: #171C21;
  --nav-fg-muted: rgba(23, 28, 33, .62);
  --nav-bg: rgba(242, 242, 235, 1);
  --nav-hairline: rgba(23, 28, 33, .10);
  --nav-item-hover: rgba(23, 28, 33, .05);

  --nav-panel-bg: #FBFBF6;
  --nav-panel-hairline: rgba(23, 28, 33, .09);
  --nav-panel-item-hover: rgba(23, 28, 33, .045);
  --nav-col-title: var(--weka-purple);
  --nav-desc: rgba(23, 28, 33, .55);

  --nav-cta1-bg: transparent;
  --nav-cta1-fg: #171C21;
  --nav-cta1-bd: rgba(23, 28, 33, .18);
  --nav-cta2-bg: var(--weka-purple);
  --nav-cta2-fg: #ffffff;
  --nav-cta2-bg-hover: #6a02cc;

  --nav-shadow: 0 18px 50px -22px rgba(23, 28, 33, .28);
}
*{box-sizing: border-box;}
/* =====================================================================
   HEADER SHELL
   ===================================================================== */
.wk-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  padding: var(--spacing-12) var(--spacing-24);
  font-family: var(--ff-body);
  color: var(--nav-fg);
  transition: color .35s var(--wknav-ease);
  -webkit-font-smoothing: antialiased;
}

/* translucent background layer lives on the BAR — hidden while transparent at top */
.wk-nav__bar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #0c0e11;
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  opacity: 0;
  transition: opacity .35s var(--wknav-ease),
              background .35s var(--wknav-ease),
              border-color .35s var(--wknav-ease);
  pointer-events: none;
  z-index: -1;                 /* sit behind the bar's logo / nav / CTAs */
}

/* bar background becomes visible once scrolled — stays transparent when a
   panel is open so clicking a nav link doesn't tint the bar */
.wk-nav.is-scrolled .wk-nav__bar::before {
  opacity: 1;
  border-bottom-color: var(--nav-hairline);
  border-radius: 6px;
  border-color: #0F1316;
}

.wk-nav__bar {
  position: relative;
  max-width: var(--wknav-max);
  margin: 0 auto;
  padding: var(--spacing-8) var(--spacing-12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1280px;
  gap: 28px;
  height: 54px;
  border-radius: 6px;
  transition: all .25s cubic-bezier(.23,1,.32,1);
  /* backdrop-filter: blur(7.5px);
  -webkit-backdrop-filter: blur(7.5px); */
}
.wk-nav.is-scrolled .wk-nav__bar {
  max-width: 1024px;
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -4px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
}
/* light-theme bar: bordered, blurred glass panel over light sections */
.wk-nav__bar[data-theme="light"] {
  border-radius: 6px;
  border: 1px solid #FBFBF8;
  background: rgba(242, 242, 235, 0.85);
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -4px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(7.5px);
  -webkit-backdrop-filter: blur(7.5px);
}

/* the CTAs inside the drawer are mobile-only; the sibling set serves desktop */
.wk-nav__bar nav .wk-nav__actions { display: none; }
/* -------------------------------------------------- Logo */
.wk-nav__logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  color: var(--nav-fg);
  text-decoration: none;
  position: relative;
  /* fixed box so the two marks can cross-fade in place; width eases on scroll */
  height: 20px;
  width: 98px;                     /* full wordmark footprint at 30px tall */
}
.wk-nav__logo:hover{
  color: #fff;
}
/* both marks stack in the same spot and cross-fade */
.wk-nav__logo svg {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  height: 20px;
  width: auto;
  transform-origin: left center;
  transition: opacity .3s var(--wknav-ease), transform .35s var(--wknav-ease);
}
.wk-nav__logo .wk-logo-full { opacity: 1; transform: scale(1); }
.wk-nav__logo .wk-logo-mark { opacity: 0; transform: scale(.85); pointer-events: none; }

/* on scroll the wordmark fades/scales out while the icon mark fades in,
   and the logo box collapses to the icon's width — all smoothly */
.wk-nav.is-scrolled .wk-nav__logo { width: 28px; }
.wk-nav.is-scrolled .wk-nav__logo .wk-logo-full { opacity: 0; transform: scale(.92); pointer-events: none; }
.wk-nav.is-scrolled .wk-nav__logo .wk-logo-mark { opacity: 1; transform: scale(1); }

/* -------------------------------------------------- Primary nav list */
.wk-nav__menu {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
}
.wk-nav__item { position: relative; }
/* panel items don't act as the offset parent, so every panel (mega + list)
   is positioned against .wk-nav__bar and shares the same drop line; JS sets
   --panel-left to align each to the left of its own trigger */
.wk-nav__item.has-panel { position: static; }

.wk-nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-4);
  font-weight: var(--fw-regular);
  font-size: var(--fs-14);
  line-height: 20px;
  color: var(--nav-fg);
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: var(--spacing-8);
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s var(--wknav-ease), color .2s var(--wknav-ease);
}
.wk-nav__trigger:hover { background: rgba(255, 255, 255, .07); color: var(--nav-fg); }
.wk-nav__item.is-open > .wk-nav__trigger{background: #0f1316}
/* light theme: nav link hover/open uses a light tint */
.wk-nav__bar[data-theme="light"] .wk-nav__item.is-open > .wk-nav__trigger,
.wk-nav__bar[data-theme="light"] .wk-nav__trigger:hover { background: #FBFBF8; }


.wk-nav__caret {
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
  transition: transform .3s var(--wknav-ease);
}
.wk-nav__item.is-open > .wk-nav__trigger .wk-nav__caret { transform: rotate(180deg); }

/* -------------------------------------------------- CTAs */
.wk-nav__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}
.wk-nav__actions .wk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-8) var(--spacing-16);
  border-radius: 6px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: 0;
  font-family: var(--ff-body);
  transition: background .2s var(--wknav-ease), color .2s var(--wknav-ease),
              border-color .2s var(--wknav-ease), transform .15s var(--wknav-ease);
}
.wk-nav__actions .wk-btn.wk-btn-sm{
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
  line-height: 20px;
  padding: var(--spacing-8) var(--spacing-16);
}
.wk-nav__actions .wk-btn:active { transform: translateY(1px); }
.wk-nav__actions .wk-btn--ghost {
  background: rgba(255, 255, 255, .05);
  color: var(--nav-cta1-fg);
  border-color: var(--nav-cta1-bd);
}
.wk-nav__actions .wk-btn--ghost:hover { border-color: var(--nav-fg); background: rgba(255, 255, 255, .10)}
.wk-nav__actions .wk-btn--primary {
  background: var(--nav-cta2-bg);
  color: var(--nav-cta2-fg);
}
.wk-nav__actions .wk-btn--primary:hover { background: rgba(199, 159, 241, .8) }

/* =====================================================================
   PANELS  (dropdown + mega)
   ===================================================================== */
.wk-nav__panel {
  position: absolute;
  top: calc(100% + 2px);
  background: #0c0e11;
  border: 1px solid var(--nav-panel-hairline);
  border-radius: 6px;
  box-shadow: var(--nav-shadow);
  padding: var(--spacing-16) var(--spacing-8);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .28s var(--wknav-ease),
              transform .28s var(--wknav-ease),
              visibility .28s var(--wknav-ease);
  z-index: 5;
  backdrop-filter: blur(7.5px);
}
.wk-nav__item.is-open > .wk-nav__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* simple list dropdown — always aligns to the left of its parent link,
   clamped so it never spills past .wk-nav__bar on the right */
.wk-nav__panel--list {
  left: var(--panel-left, 0px);
  width: max-content;
  min-width: 256px;
  max-width: calc(100% - var(--panel-left, 0px));
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wk-nav__link {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  padding: var(--spacing-8);
  border-radius: 6px;
  text-decoration: none;
  color: var(--nav-fg);
  transition: background .18s var(--wknav-ease);
  font-weight: var(--fw-regular);font-size: var(--fs-14);
  line-height: 20px;
  white-space: break-spaces;
}
.wk-nav__link:hover { background: rgba(255, 255, 255, .07); color: var(--nav-fg);}
.wk-nav__link .title {
  display: block;
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
  line-height: 20px;
}
.wk-nav__link .desc {
  display: block;
  font-size: var(--fs-12);
  font-weight: var(--fw-regular);
  line-height: 16px;
  color: var(--nav-desc);
  min-width: 244px;
}
.wk-nav__link .title .new-badge {
    font-size: 65%;
    color: #FF3FD5;
    position: relative;
    top: -4px;
    line-height: 1;
    background: var(--weka-bright-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: initial;
    margin-left: 4px;
}
/* mega menu — shares the dropdowns' drop line (top comes from .wk-nav__panel);
   opens from the left edge of its trigger <li> (--panel-left, set by JS),
   sizes to its own content, but never spills past .wk-nav__bar on the right */
.wk-nav__panel--mega {
  left: var(--panel-left, 0px);
  width: max-content;
  max-width: calc(100% - var(--panel-left, 0px));
}

.wk-mega {
  display: grid;
  /* each group sizes to its own content; middle track is the divider */
  grid-template-columns: auto 1px auto;
  gap: var(--spacing-16);
}

.wk-mega__divider { background: var(--nav-panel-hairline); }

.wk-mega__col-title {
  font-size: var(--fs-12);
  font-family: var(--ff-mono);
  font-weight: var(--fw-regular);
  letter-spacing: .04em;
  color: var(--nav-col-title);
  padding: var(--spacing-8);
  margin: 0;
  line-height: 20px;
}
.wk-mega__grid {
  display: grid;
  /* fill top-to-bottom, max 6 links per column; a 7th spills to a new column */
  grid-auto-flow: column;
  grid-template-rows: repeat(6, auto);
  grid-auto-columns: 1fr;
  gap: 4px 12px;
}
.wk-nav__link{
  max-width: 256px;
  min-width: 120px;
}
/* =====================================================================
   MOBILE
   ===================================================================== */
.wk-nav__toggle {
  display: none;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background: var(--nav-item-hover);
  border: 0;
  cursor: pointer;
  padding: var(--spacing-8) var(--spacing-16);
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.wk-nav__toggle span {
  position: absolute;
  width: 14px;
  height: 2px;
  background: var(--nav-fg);
  transition: background .2s;
}
.wk-nav__toggle span::before,
.wk-nav__toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 14px;
  height: 2px;
  background: var(--nav-fg);
  border-radius: 2px;
  transition: transform .28s var(--wknav-ease), top .28s var(--wknav-ease);
}
.wk-nav__toggle span::before { top: -6px; }
.wk-nav__toggle span::after { top: 6px; }
.wk-nav.is-menu-open .wk-nav__toggle span { background: transparent; }
.wk-nav.is-menu-open .wk-nav__toggle span::before { top: 0; transform: rotate(45deg); }
.wk-nav.is-menu-open .wk-nav__toggle span::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 1024px) {
  /* header stays transparent; the bar itself carries the dark background */
  .wk-nav{
    padding: var(--spacing-8) var(--spacing-16);
  }
  .wk-nav__bar {
    padding: 0 12px;
    gap: 14px;
    justify-content: space-between;
    position: static;
    background: var(--nav-bg);
  }
  .wk-nav__bar::before { display: none; }   /* bar bg handled directly now */
  .wk-nav__toggle { display: flex; }

  /* the bar is static and its blur removed so it no longer forms a containing
     block — the drawer below is positioned against the <header> (.wk-nav)
     instead, so it moves with the header when the header shifts */
  .wk-nav__bar,
  .wk-nav.is-scrolled .wk-nav__bar,
  .wk-nav__bar[data-theme="light"] {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* ---- the same <nav> becomes the fade-in drawer, anchored to the header ---- */
  .wk-nav__bar nav {
    position: absolute;          /* relative to .wk-nav (the header) */
    left: 0;
    right: 0;
    top: 66px;                   /* 70px from the header's top */
    height: calc(100dvh - 72px); /* fill to the viewport bottom */
    flex: none;
    display: flex;
    flex-direction: column;      /* lets the CTAs sit at the bottom */
    color: var(--nav-fg);
    overflow-y: auto;
    padding: var(--spacing-16);      /* bottom room for the pinned CTAs */
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s var(--wknav-ease),
                visibility .3s var(--wknav-ease);
    z-index: 1;
    border-radius: 6px;
        border: 1px solid var(--nav-panel-hairline);
        background: rgba(14, 18, 22, 0.92);
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(7.5px);
        -webkit-backdrop-filter: blur(7.5px);
        margin: 0 var(--spacing-16);
    
  }
  .wk-nav.is-scrolled .wk-nav__bar nav { top: 70px; }
  .wk-nav.is-menu-open .wk-nav__bar nav { opacity: 1; visibility: visible; }
  .wk-nav__bar nav .wk-nav__actions{
    display: flex;
    position: relative;
    background: none;
    gap: var(--spacing-8);
    padding: var(--spacing-16) 0 0;
    margin-top: auto;              /* push to the bottom of the drawer */
  }
.wk-nav__bar .wk-nav__actions{
  display: none;
}
  /* ---- menu items stack vertically ---- */
  .wk-nav__menu { flex-direction: column; align-items: stretch; gap: var(--spacing-8); width: 100%; flex: 0 0 auto; }
  .wk-nav__item { width: 100%;}

  .wk-nav__trigger {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0 0 8px;
    border-radius: 0;
    color: var(--nav-fg);
  }
  .wk-nav__trigger:hover,
  .wk-nav__item.is-open > .wk-nav__trigger { background: none !important; }
  .wk-nav__caret { width: 14px; height: 14px; }

  /* ---- panels become in-flow accordion bodies (JS animates max-height) ---- */
  .wk-nav__panel,
  .wk-nav__panel--list,
  .wk-nav__panel--mega {
    position: static;
    left: auto;
    right: auto;
    width: auto;
    max-width: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s var(--wknav-ease);
    z-index: auto;
  }

  /* mega columns stack in the accordion */
  .wk-mega { display: block; }
  .wk-mega__divider { display: none; }
  .wk-mega__grid { grid-auto-flow: row; grid-template-rows: none; grid-template-columns: 1fr; }
  .wk-mega__col-title { color: var(--nav-col-title);padding: 0 0 8px 8px }

  .wk-nav__link { padding: 0 0 8px 8px  }
  .wk-nav__link .title { display: block; font-weight: var(--fw-bold); font-size: var(--fs-14); line-height: 20px; color: var(--nav-fg); }
  .wk-nav__link .desc  { display: block; font-size: var(--fs-12); line-height: 16px; font-weight: var(--fw-regular); color: var(--nav-desc); margin-top: 2px; }

  /* ---- CTA buttons inside the drawer ---- */
  .wk-nav__actions .wk-btn { width: 100%; padding: 14px; font-size: 16px; }
  .wk-nav__actions .wk-btn--ghost { background: var(--nav-cta1-bg); color: var(--nav-cta1-fg); border: 1px solid var(--nav-cta1-bd); }
  .wk-nav__actions .wk-btn--primary { background: var(--nav-cta2-bg); color: var(--nav-cta2-fg); }

  body.wk-nav-locked { overflow: hidden; }
}
.wk-nav__bar nav .wk-mega .wk-mega__group{
  margin-bottom: var(--spacing-8);
}
@media (max-width: 640px) {
 .wk-nav__bar nav .wk-nav__actions{
  flex-direction: column;
 }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .wk-nav, .wk-nav *, .wk-nav::before { transition: none !important; }
}