/* Masir unified top navigation — self-contained, scoped to .masir-nav.
   Loads on the Webflow homepage AND WordPress/Tutor pages for one consistent header.
   Pure CSS dropdown + mobile toggle (no JS). RTL. */

@font-face{font-family:'Dana';src:url('/fonts/dana-regular.ttf') format('truetype');font-weight:400;font-display:swap;}
@font-face{font-family:'Dana';src:url('/fonts/dana-demibold.ttf') format('truetype');font-weight:600;font-display:swap;}
@font-face{font-family:'Dana';src:url('/fonts/dana-bold.ttf') format('truetype');font-weight:700;font-display:swap;}

.masir-nav,.masir-nav *{box-sizing:border-box;}
.masir-nav{
  position:sticky;top:0;z-index:99999;
  width:100%;align-self:stretch;       /* override Webflow .body{align-items:center} so the bar is full-width */
  background:transparent;direction:rtl;
  font-family:'Dana','Tahoma',sans-serif;
  border-bottom:none;
}
.masir-nav-toggle{position:absolute;opacity:0;pointer-events:none;}
.masir-nav-inner{
  max-width:none;width:100%;margin:0;
  display:flex;align-items:center;gap:30px;
  padding:13px 40px;flex-wrap:wrap;
}
.masir-nav-logo{display:flex;align-items:center;flex-shrink:0;text-decoration:none;gap:3px;}
.masir-nav-logo .masir-logo-text{font-family:'Dana','Tahoma',sans-serif;font-weight:800;font-size:23px;color:#fff;line-height:1;letter-spacing:.5px;}
.masir-nav-logo .masir-logo-dot{width:7px;height:7px;border-radius:50%;background:#ff006b;display:inline-block;align-self:flex-end;margin-bottom:5px;}
.masir-nav-menu{
  display:flex;align-items:center;gap:28px;
  list-style:none;margin:0;padding:0;flex:1;
}
.masir-nav-menu>li{position:relative;}
.masir-nav-menu a{
  color:#e8eaed;text-decoration:none;font-size:15px;font-weight:600;
  line-height:1.6;transition:color .2s;white-space:nowrap;
}
.masir-nav-menu a:hover{color:#ff006b;}
.masir-nav-menu>li.has-sub>a::after{content:"⌄";margin-right:5px;font-size:12px;opacity:.7;}
.masir-nav-sub{
  position:absolute;top:160%;right:0;min-width:248px;
  background:#11161f;border:1px solid rgba(255,255,255,.08);border-radius:12px;
  padding:8px;list-style:none;margin:0;
  opacity:0;visibility:hidden;transform:translateY(6px);transition:.18s ease;
  box-shadow:0 16px 40px rgba(0,0,0,.45);
}
.masir-nav-menu>li.has-sub:hover>.masir-nav-sub{opacity:1;visibility:visible;transform:translateY(0);}
.masir-nav-sub li a{display:block;padding:11px 13px;border-radius:8px;font-weight:500;color:#cbd2da;}
.masir-nav-sub li a:hover{background:rgba(255,255,255,.06);color:#fff;}
.masir-nav-sub .soon{font-size:11px;color:#ffb800;margin-right:6px;font-weight:600;}
.masir-nav-cta{
  background:#f63d68;color:#fff;padding:10px 24px;border-radius:10px;
  font-weight:700;font-size:14px;text-decoration:none;white-space:nowrap;
  transition:background .2s;flex-shrink:0;
}
.masir-nav-cta:hover{background:#ff006b;color:#fff;}
/* desktop: spread to full width (logo at right edge, CTA at left edge) regardless of menu flex */
@media (min-width:881px){ .masir-nav-inner{justify-content:space-between;} .masir-nav-menu{flex:0 1 auto;} }
.masir-nav-burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:6px;}
.masir-nav-burger span{display:block;width:24px;height:2px;background:#fff;border-radius:2px;transition:.2s;}

/* mobile */
@media (max-width:880px){
  .masir-nav{position:sticky;}
  .masir-nav-inner{gap:14px;justify-content:space-between;position:relative;}
  .masir-nav-logo{order:1;}
  .masir-nav-cta{order:2;padding:8px 16px;}
  .masir-nav-burger{display:flex;order:3;}
  /* menu becomes an absolute dropdown panel (out of the top row's flow) */
  .masir-nav-menu{
    position:absolute;top:100%;right:0;left:0;
    background:#000813;border-top:1px solid rgba(255,255,255,.07);
    flex-direction:column;align-items:stretch;gap:0;
    max-height:0;overflow:hidden;transition:max-height .3s ease;
    box-shadow:0 18px 40px rgba(0,0,0,.5);
  }
  .masir-nav-toggle:checked ~ .masir-nav-inner .masir-nav-menu{max-height:560px;}
  .masir-nav-menu>li{border-top:1px solid rgba(255,255,255,.06);}
  .masir-nav-menu>li:first-child{border-top:none;}
  .masir-nav-menu>li>a{display:block;padding:15px 24px;}
  .masir-nav-sub{
    position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    border:none;background:rgba(255,255,255,.02);padding:4px 0 8px 0;min-width:0;border-radius:0;
  }
  .masir-nav-sub li a{padding:11px 36px;color:#9aa4b2;}
}