/* Sticky mobile hamburger menu (shown on phones/tablets, hidden on desktop) */
.mobile-nav-toggle,
.mobile-nav-panel { display: none; }

@media (max-width: 991px) {
  /* hide the desktop stacked nav on mobile */
  .header__area-3 .header__nav-2 { display: none !important; }

  .mobile-nav-toggle {
    display: flex; align-items: center; justify-content: center;
    position: fixed; top: 14px; right: 14px; z-index: 10000;
    width: 50px; height: 50px; padding: 0;
    background: #111; border: none; border-radius: 12px; cursor: pointer;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  }
  .mobile-nav-toggle .bar {
    position: relative; display: block; width: 24px; height: 2px;
    background: #fff; transition: transform .25s ease, opacity .2s ease;
  }
  .mobile-nav-toggle .bar::before,
  .mobile-nav-toggle .bar::after {
    content: ''; position: absolute; left: 0; width: 24px; height: 2px;
    background: #fff; transition: transform .25s ease, top .25s ease;
  }
  .mobile-nav-toggle .bar::before { top: -7px; }
  .mobile-nav-toggle .bar::after { top: 7px; }

  .mobile-nav-toggle.open .bar { background: transparent; }
  .mobile-nav-toggle.open .bar::before { top: 0; transform: rotate(45deg); }
  .mobile-nav-toggle.open .bar::after { top: 0; transform: rotate(-45deg); }

  .mobile-nav-panel {
    position: fixed; inset: 0; z-index: 9999;
    background: #ffffff; display: none; flex-direction: column;
    padding: 96px 28px 40px; overflow-y: auto;
  }
  .mobile-nav-panel.open { display: flex; }
  .mobile-nav-panel a {
    font-family: 'Roboto', system-ui, sans-serif;
    font-size: 24px; font-weight: 700; color: #111; text-decoration: none;
    padding: 16px 0; border-bottom: 1px solid #ededed;
  }
  .mobile-nav-panel a:active { color: #7fae16; }
  .mobile-nav-panel .mnav-langs {
    display: flex; gap: 20px; margin-top: 18px;
  }
  .mobile-nav-panel .mnav-langs a {
    font-size: 16px; font-weight: 500; border: none; padding: 8px 0; color: #666;
  }

  body.mnav-lock { overflow: hidden; }
}