/* header-fix.css — Prevent hamburger/X clipping across mobile headers
   - Ensures toggle and icon wrappers are never clipped
   - Provides adequate tap-target sizing and flexible header row height
   - Safe for span- or SVG-based icons; animations remain within the icon box
*/

/* Never clip the toggle or its icon (mobile header variants) */
.mobile-header,
.mobile-header .mh-inner,
.mobile-header .mh-toggle,
.mobile-header .mh-icon,
#l8-header,
#l8-header .l8h-inner,
#l8h-toggle,
#l8h-toggle .l8h-icon {
  overflow: visible !important;
}

/* Flexible header row height so bars/X have vertical room */
.mobile-header .mh-inner,
#l8-header .l8h-inner {
  display: flex;
  align-items: center;
  min-height: 3rem;
}

/* Toggle button: proper tap target and alignment; no inline box clipping */
.mobile-header .mh-toggle,
#l8h-toggle {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 3rem;
  height: 2.75rem;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  line-height: 1;            /* avoid vertical cropping */
  box-sizing: border-box;
  position: relative;
  z-index: 2;                /* sit above neighbors if needed */
  cursor: pointer;
}

/* Icon wrapper: span-based bars or SVG scale; never clip */
.mobile-header .mh-icon,
#l8h-toggle .l8h-icon,
.mobile-header .mh-toggle svg,
#l8h-toggle svg {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  overflow: visible !important;
}

/* Keep bar pseudo-elements comfortably within the icon box */
.mobile-header .mh-icon::before,
.mobile-header .mh-icon::after,
.mobile-header .mh-icon span,
#l8h-toggle .l8h-icon::before,
#l8h-toggle .l8h-icon::after,
#l8h-toggle .l8h-icon span {
  left: 3px;
  right: 3px;
  height: 2px;
}

/* Smallest devices: slightly compact but still ≥40px effective */
@media (max-width: 23.75rem) { /* 380px */
  .mobile-header .mh-toggle,
  #l8h-toggle {
    width: 2.75rem;
    height: 2.5rem;
  }
  .mobile-header .mh-icon,
  #l8h-toggle .l8h-icon,
  .mobile-header .mh-toggle svg,
  #l8h-toggle svg {
    width: 1.25rem;
    height: 1.25rem;
  }
}