/* ══════════════════════════════════════════════════════════════
   mabda-nav.css - mobile drawer + burger for the Mabda navbar
   Load AFTER base.css / mabda.css. Needs the markup from base_mabda.html (menu-head, menu-foot, burger spans, #menu-ovl).
   ══════════════════════════════════════════════════════════════ */

/* desktop: the drawer-only parts stay hidden */
.mabda-nav .menu-head,
.mabda-nav .menu-foot,
.mabda-nav .menu a > i{display:none}
.mabda-nav .burger{display:none}
.menu-ovl{display:none}

@media (max-width:768px){

  /* backdrop-filter on the bar would trap position:fixed children - so no blur here */
  .mabda-nav{
    -webkit-backdrop-filter:none;backdrop-filter:none;
    background:#f6f1e3 !important;
  }
  .mabda-nav .nav-in{gap:10px;padding:10px 0}
  .mabda-nav .nav-cta{margin-inline-start:auto;gap:8px}

  /* ── burger: three bars that turn into an X ── */
  .mabda-nav .burger{
    display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
    width:44px;height:44px;padding:0;border-radius:14px;
    border:1.5px solid rgba(85,98,44,.4);
    background:linear-gradient(140deg,#55622c,#32301c);
    box-shadow:0 8px 18px -10px rgba(35,32,21,.7);
    -webkit-tap-highlight-color:transparent;
  }
  .mabda-nav .burger:hover{transform:none;border-color:#c9a43f}
  .mabda-nav .burger span{
    display:block;width:20px;height:2px;border-radius:2px;background:#f6f1e3;
    transition:transform .3s,opacity .2s,width .3s;
  }
  .mabda-nav .burger span:nth-child(2){width:14px}
  .mabda-nav .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .mabda-nav .burger[aria-expanded="true"] span:nth-child(2){opacity:0}
  .mabda-nav .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* ── drawer ── */
  .mabda-nav .menu{
    position:fixed;top:0;bottom:0;right:0;left:auto;
    width:min(86vw,330px);margin:0;padding:0;
    display:flex;flex-direction:column;align-items:stretch;gap:4px;
    background:linear-gradient(180deg,#2a2914,#3a4118);
    border-inline-start:3px solid #c9a43f;
    box-shadow:-24px 0 60px -20px rgba(0,0,0,.6);
    overflow-y:auto;overscroll-behavior:contain;
    transform:translateX(105%);visibility:hidden;
    transition:transform .35s cubic-bezier(.22,.8,.3,1), visibility 0s linear .35s;
    z-index:1450;
  }
  .mabda-nav .menu.show{
    transform:none;visibility:visible;
    transition:transform .35s cubic-bezier(.22,.8,.3,1);
  }

  .mabda-nav .menu-head{
    display:flex;align-items:center;justify-content:space-between;
    padding:18px 20px 14px;margin-bottom:8px;
    border-bottom:1px solid rgba(201,164,63,.25);
  }
  .mabda-nav .menu-title{
    font-family:'Lalezar';font-size:26px;color:#c9a43f;
    display:inline-flex;align-items:center;gap:10px;
  }
  .mabda-nav .menu-close{
    width:40px;height:40px;border-radius:12px;border:none;
    background:rgba(246,241,227,.08);color:#e9e7d5;font-size:16px;
    display:grid;place-items:center;transition:.25s;
  }
  .mabda-nav .menu-close:hover{background:#c9a43f;color:#232015}

  .mabda-nav .menu > a{
    display:flex;align-items:center;gap:12px;
    margin:0 12px;padding:11px 14px;border-radius:14px;
    border-inline-start:3px solid transparent;
    background:none;box-shadow:none;
    color:#e9e7d5;font-size:15px;font-weight:700;white-space:normal;
  }
  .mabda-nav .menu > a > i{
    display:grid;place-items:center;width:34px;height:34px;border-radius:10px;
    background:rgba(246,241,227,.08);color:#c9a43f;font-size:15px;flex-shrink:0;
  }
  .mabda-nav .menu > a:hover{background:rgba(246,241,227,.08);color:#fff}
  .mabda-nav .menu > a.act{
    background:linear-gradient(135deg,rgba(201,164,63,.22),rgba(201,164,63,.06));
    border-inline-start-color:#c9a43f;color:#fff;
  }

  .mabda-nav .menu-foot{
    display:flex;flex-direction:column;gap:12px;margin-top:auto;
    padding:16px 20px 22px;border-top:1px solid rgba(201,164,63,.25);
  }
  .mabda-nav .menu-foot .btn{width:100%;justify-content:center}
  .mabda-nav .menu-foot small{color:#b9b49a;text-align:center;font-size:11.5px}

  /* ── dimmed page behind the drawer ── */
  .menu-ovl{
    display:block;position:fixed;inset:0;z-index:999;
    background:rgba(20,19,8,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
    opacity:0;visibility:hidden;transition:opacity .3s, visibility 0s linear .3s;
  }
  body.menu-open .menu-ovl{opacity:1;visibility:visible;transition:opacity .3s}
  html.menu-open,body.menu-open{overflow:hidden}
  body.menu-open #top-btn{opacity:0;pointer-events:none}
}

/* ── very small phones: icon-only login button, shorter logo ── */
@media (max-width:420px){
  .mabda-nav .nav-cta .btn{width:44px;height:44px;padding:0;justify-content:center}
  .mabda-nav .nav-cta .btn .lbl{display:none}
}
@media (max-width:380px){ .mabda-nav .logo small{display:none} }

@media (prefers-reduced-motion:reduce){
  .mabda-nav .menu,.menu-ovl,.mabda-nav .burger span{transition:none !important}
}