/* ================================================================= BaitBaitk · Mobile Menu Toggle Icon Override File: bbk-mobile-toggle.css Target: .bbk-mobile-utility-header injected toggle button (visible "Menu" text instead of an icon) Theme: Kadence (active). Drawer state class: body.showing-popup-drawer-from-right ================================================================= */ /* ---- 1. Replace the literal "Menu" text with a hamburger icon ---- */ .bbk-mobile-utility-header .bbk-mobile-actions button[aria-label="Open menu"], .bbk-mobile-utility-header .bbk-mobile-actions button[aria-label="فتح القائمة"]{ position: relative; display: inline-flex !important; align-items: center; justify-content: center; /* Touch target ≥ 44×44 (WCAG 2.5.5 / Apple HIG) */ min-width: 44px !important; min-height: 44px !important; width: 44px; height: 44px; padding: 0 !important; /* utility-header rules force white bg with !important — keep that, paint bars dark */ background: #fff !important; border: 1px solid rgba(29, 23, 18, 0.16) !important; border-radius: 12px !important; color: #1d1712; cursor: pointer; /* Hide the visible "Menu" / "القائمة" text WITHOUT losing the aria-label */ font-size: 0 !important; line-height: 0 !important; color: transparent; text-indent: -9999px; overflow: hidden; white-space: nowrap; -webkit-tap-highlight-color: transparent; transition: background-color .18s ease, border-color .18s ease, transform .18s ease; } /* Restore an explicit text color usable by ::before/::after via currentColor. We can't use `color: transparent` AND `currentColor` together, so we paint the bars with a fixed white via background instead. */ .bbk-mobile-utility-header .bbk-mobile-actions button[aria-label="Open menu"]::before, .bbk-mobile-utility-header .bbk-mobile-actions button[aria-label="فتح القائمة"]::before{ content: ""; position: absolute; top: 50%; left: 50%; width: 22px; height: 2px; background: #1d1712; border-radius: 2px; transform: translate(-50%, -50%); transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .22s ease, opacity .15s ease; box-shadow: 0 -7px 0 0 #1d1712, /* top bar */ 0 7px 0 0 #1d1712; /* bottom bar */ } /* Empty ::after; activated only when drawer opens (becomes the second X stroke) */ .bbk-mobile-utility-header .bbk-mobile-actions button[aria-label="Open menu"]::after, .bbk-mobile-utility-header .bbk-mobile-actions button[aria-label="فتح القائمة"]::after{ content: ""; position: absolute; top: 50%; left: 50%; width: 22px; height: 2px; background: #1d1712; border-radius: 2px; transform: translate(-50%, -50%) rotate(0deg); opacity: 0; transition: transform .28s cubic-bezier(.2,.7,.2,1), opacity .18s ease .05s; } /* ---- 2. Hover / focus / active polish ---- */ .bbk-mobile-utility-header .bbk-mobile-actions button[aria-label="Open menu"]:hover, .bbk-mobile-utility-header .bbk-mobile-actions button[aria-label="فتح القائمة"]:hover{ background: #f4ede1 !important; border-color: rgba(29, 23, 18, 0.32) !important; } .bbk-mobile-utility-header .bbk-mobile-actions button[aria-label="Open menu"]:focus-visible, .bbk-mobile-utility-header .bbk-mobile-actions button[aria-label="فتح القائمة"]:focus-visible{ outline: 2px solid #1d1712; outline-offset: 2px; } .bbk-mobile-utility-header .bbk-mobile-actions button[aria-label="Open menu"]:active, .bbk-mobile-utility-header .bbk-mobile-actions button[aria-label="فتح القائمة"]:active{ transform: scale(0.96); } /* ---- 3. Open state: animate hamburger -> X ---- Kadence adds `showing-popup-drawer-from-right` to while the drawer is open. */ body.showing-popup-drawer-from-right .bbk-mobile-utility-header .bbk-mobile-actions button[aria-label="Open menu"]::before, body.showing-popup-drawer-from-right .bbk-mobile-utility-header .bbk-mobile-actions button[aria-label="فتح القائمة"]::before{ /* Top + bottom bars vanish, middle rotates to one X stroke */ box-shadow: 0 0 0 0 rgba(29,23,18,0), 0 0 0 0 rgba(29,23,18,0); transform: translate(-50%, -50%) rotate(45deg); } body.showing-popup-drawer-from-right .bbk-mobile-utility-header .bbk-mobile-actions button[aria-label="Open menu"]::after, body.showing-popup-drawer-from-right .bbk-mobile-utility-header .bbk-mobile-actions button[aria-label="فتح القائمة"]::after{ /* Second X stroke fades in and rotates */ opacity: 1; transform: translate(-50%, -50%) rotate(-45deg); } /* ---- 4. Hide stray text inside Kadence's own SVG (defensive) ---- */ #mobile-toggle .kadence-svg-iconset svg title, .menu-toggle-close .kadence-svg-iconset svg title{ display: none !important; } /* ---- 5. Respect reduced motion ---- */ @media (prefers-reduced-motion: reduce){ .bbk-mobile-utility-header .bbk-mobile-actions button[aria-label="Open menu"]::before, .bbk-mobile-utility-header .bbk-mobile-actions button[aria-label="فتح القائمة"]::before, .bbk-mobile-utility-header .bbk-mobile-actions button[aria-label="Open menu"]::after, .bbk-mobile-utility-header .bbk-mobile-actions button[aria-label="فتح القائمة"]::after{ transition: none !important; } } /* ---- 6. Mobile-only safety net (utility header already display:none on desktop) ---- */ @media (min-width: 769px){ .bbk-mobile-utility-header .bbk-mobile-actions button[aria-label="Open menu"], .bbk-mobile-utility-header .bbk-mobile-actions button[aria-label="فتح القائمة"]{ display: none !important; } }