/* =====================================================================
   Mobile / tablet navigation drawer — polished layout (loaded after nav-mobile.css)
   ===================================================================== */
.mi-ico{display:none}
.menu-head,.menu-foot{display:none}

@media (max-width:1100px){
  .menu,html[lang="en"] .menu{padding:0 0 calc(24px + env(safe-area-inset-bottom)) !important;width:min(340px,88vw);gap:0 !important;box-shadow:0 0 0 100vmax rgba(6,18,42,0),-24px 0 60px rgba(6,18,42,.28) !important}
  .menu.open{animation:navIn .22s ease-out}
  @keyframes navIn{from{transform:translateX(-16px)}to{transform:none}}
  html[dir="ltr"] .menu.open{animation-name:navInLtr}
  @keyframes navInLtr{from{transform:translateX(16px)}to{transform:none}}

  /* header of the drawer (space for the ✕ button on the same side) */
  .menu-head{display:flex !important;align-items:center;gap:12px;min-height:72px;padding:14px 18px;padding-inline-end:72px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#F5F9FB,#fff);position:sticky;top:0;z-index:2}
  .menu-head img{width:40px;height:40px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px #fff,0 0 0 3px var(--sky-2,#BBD7E4)}
  .menu-head span{display:flex;flex-direction:column;font-weight:700;color:var(--navy);font-size:15.5px;line-height:1.3}
  .menu-head small{font-weight:500;color:var(--muted);font-size:12px}

  /* every row aligned the same way: icon · label · (caret at the far end) */
  .mi{width:100%}
  .mi-top,.menu > a.mi-top{display:flex !important;width:100%;justify-content:flex-start !important;text-align:start;gap:12px !important;padding:14px 18px !important;margin:0;border-radius:0 !important;border-bottom:1px solid #EEF2F6 !important;font-size:15.5px !important;font-weight:600 !important;color:var(--ink) !important;background:none}
  .mi-top .mi-l{flex:1;text-align:start}
  .mi-ico{display:inline-block;color:var(--steel);flex:0 0 auto}
  .mi-top .caret{margin-inline-start:auto;flex:0 0 auto}
  .mi-top:active{background:var(--alt)}
  .mi.active>.mi-top,a.mi-top[aria-current="page"]{background:var(--sky) !important;color:var(--navy) !important;box-shadow:inset -3px 0 0 var(--steel)}
  html[dir="ltr"] .mi.active>.mi-top,html[dir="ltr"] a.mi-top[aria-current="page"]{box-shadow:inset 3px 0 0 var(--steel)}
  .has-sub.open>.mi-top{background:#F7FAFC}

  /* sub-items: indented under the icon column */
  .sub{margin:0 !important;border-radius:0 !important;background:#F7FAFC !important;padding:4px 0 8px !important;border-bottom:1px solid #EEF2F6 !important}
  .sub a{padding:11px 18px !important;padding-inline-start:52px !important;font-size:14.5px !important;border-radius:0 !important;gap:10px}
  .sub a .ico{width:17px;height:17px}
  .sub a[aria-current="page"]{background:var(--sky) !important;font-weight:700}

  /* footer of the drawer: main CTA + account + language */
  .menu-foot{display:flex !important;flex-direction:column;gap:12px;padding:18px 18px 8px;margin-top:auto}
  .menu-foot .btn-block,.menu-foot .btn-block:hover{width:100%;justify-content:center;min-height:48px;font-size:15px;font-weight:700;border-radius:10px;display:inline-flex;align-items:center;gap:8px;background:var(--navy) !important;color:#fff !important;border:0 !important;text-decoration:none}
  .menu-foot .btn-block .ico{color:#9CC6DA}
  .menu-foot-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .menu-foot-row a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border:1px solid var(--line);border-radius:10px;color:var(--navy);text-decoration:none;font-weight:600;font-size:14px;background:#fff}
  .menu-foot-row a .ico{color:var(--steel)}
  .menu > a.menu-only:not(.mi-top){display:none !important}

  /* while open: the drawer has its own brand, so the page header shows only the ✕ */
  body.menu-open .site-header .nav > .brand,body.menu-open .nav-tools > :not(.burger){visibility:hidden}

  /* the ✕ toggle sits inside the drawer header */
  body.menu-open .burger{background:#fff;border:1px solid var(--line);border-radius:10px;color:var(--navy);width:42px;height:42px;font-size:18px}
}
