/* Mobile fixes: non-invasive overrides to improve mobile UX without changing desktop view */

/* Make header responsive toggler visible on small screens (used by layout scripts) */
@media (max-width: 991px) {
  .menu-toggler.responsive-toggler,
  .page-header .menu-toggler.responsive-toggler {
    display: block !important;
  }

  /* Ensure top menu collapser is tappable */
  .page-header .menu-toggler,
  .page-header .menu-toggler.responsive-toggler {
    width: 44px;
    height: 44px;
    padding: 8px;
    line-height: 28px;
    text-align: center;
    box-sizing: border-box;
  }
}

/* Make floating quick menu panel more mobile-friendly */
@media (max-width: 768px) {
  .menuPanel {
    bottom: 18px;
    top: auto;
    right: 50%;
    transform: translateX(50%);
    padding: 10px 14px;
    border-radius: 12px;
    gap: 8px;
  }

  .menuPanel a {
    width: 44px;
    height: 44px;
    font-size: 18px;
    border-radius: 10px;
  }

  /* Ensure menu panel buttons are reachable and not overlapping content */
  .menuPanel a[title]:hover::after {
    right: auto;
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    white-space: nowrap;
  }
}

/* Make page content scroll smooth on touch devices */
@media (max-width: 991px) {
  .page-content,
  .page-content .page-content-body,
  .page-sidebar,
  .page-sidebar .page-sidebar-menu {
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
  }
}

/* Make mapplic and other fixed-height widgets responsive */
@media (max-width: 991px) {
  /* Allow maps to scale to available viewport without overflowing */
  .mapplic-element,
  .map-container,
  #mapplic,
  #mapplic2 {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: calc(100vh - 140px) !important; /* leaves space for header/footer */
  }

  /* Ensure editor-window and examples are not clipped */
  .editor-window,
  #examples {
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* Small UX improvement: increase tappable area for menu icons on all devices */
.menuPanel a {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(0,0,0,0.1);
}