/* no-clip-header.css — Nuclear no-clip layer for mobile header icons
   Goal: Guarantee hamburger/X icons are never clipped regardless of origin.
   Strategy:
   - Make header stack overflow visible
   - Enforce adequate row height and toggle tap target (≥ 44px)
   - Icon wrappers use overflow: visible and position context
   - Keep animations within icon box with bar offsets
   - Scope strongly to headers but remain framework-agnostic
*/

/* 1) Header stack must never clip */
:where(header, [role="banner"], .mobile-header, #site-header, .desktop-header-slot) {
  overflow: visible !important;
}
:where(header, [role="banner"]) * {
  overflow: visible !important;
}

/* 2) Common header rows: keep adequate height and alignment */
:where(.mh-inner, .l8h-inner, header .inner, header .row) {
  display: flex;
  align-items: center;
  min-height: 3rem; /* ~48px tap-height safe area */
}

/* 3) Menu toggle button: force proper tap target, alignment, and no clipping */
:where(button[aria-controls], [data-menu-toggle], .mh-toggle, #l8h-toggle, .nav-toggle) {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 3rem;                  /* ≥48px tap target */
  height: 3rem;
  line-height: 1;               /* avoid vertical cropping */
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  box-sizing: border-box;
  position: relative;
  z-index: 10;                  /* sit above nearby elements */
  overflow: visible !important; /* pseudo elements/SVGs must not be cropped */
  cursor: pointer;
}

/* 4) Icon wrappers (span-based bars or SVGs) must not be clipped */
header :is(.mh-icon, .l8h-icon, .hamburger, .menu-icon, .menu__icon),
:where(button[aria-controls], [data-menu-toggle], .mh-toggle, #l8h-toggle, .nav-toggle) svg {
  display: inline-block;
  width: 1.25rem;               /* ~20px glyph inside 48px tap target */
  height: 1.25rem;
  position: relative;
  overflow: visible !important;
}

/* 5) Span/pseudo-element bars kept inside icon box */
header :is(.mh-icon, .l8h-icon)::before,
header :is(.mh-icon, .l8h-icon)::after,
header :is(.mh-icon, .l8h-icon) span {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
header :is(.mh-icon, .l8h-icon)::before { top: 0; }
header :is(.mh-icon, .l8h-icon)::after  { bottom: 0; }
header :is(.mh-icon, .l8h-icon) span    { top: 50%; transform: translateY(-50%); display: block; }

/* 6) Open/X state — keep rotations within the icon box */
:where(header.open, [aria-expanded="true"]) :is(.mh-icon, .l8h-icon)::before {
  transform: translateY(6px) rotate(45deg);
}
:where(header.open, [aria-expanded="true"]) :is(.mh-icon, .l8h-icon)::after {
  transform: translateY(-6px) rotate(-45deg);
}
:where(header.open, [aria-expanded="true"]) :is(.mh-icon, .l8h-icon) span {
  opacity: 0;
}

/* 7) Very small screens: compact slightly while preserving ≥40px touch area */
@media (max-width: 23.75rem) { /* 380px */
  :where(button[aria-controls], [data-menu-toggle], .mh-toggle, #l8h-toggle, .nav-toggle) {
    width: 2.75rem;
    height: 2.75rem;
  }
}