/** * Abraham & Betty Offen Mikvah — mobile navigation overlay patch v1.1.0. * * Scope: only a .primary-nav element temporarily marked .nm-mobile-nav by * this plugin. No Elementor page/template content is changed or imported. */ .nm-mobile-menu-backdrop { display: none; } @media (max-width: 900px) { /* Keep the existing header and its close button above the page. */ .site-chrome.nm-mobile-menu-active, .site-chrome.nm-mobile-menu-active .site-header, .site-chrome.nm-mobile-menu-active .header-inner { position: relative !important; z-index: 2147483000 !important; } .site-chrome.nm-mobile-menu-active .menu-toggle { position: relative !important; z-index: 2147483002 !important; } /* The nav is moved to only while open, avoiding transformed or overflow-hidden Elementor ancestors that can clip position: fixed. */ body > .primary-nav.nm-mobile-nav { position: fixed !important; z-index: 2147482999 !important; top: var(--nm-mobile-menu-top, 72px) !important; right: 0 !important; bottom: 0 !important; left: 0 !important; box-sizing: border-box !important; width: 100% !important; max-width: none !important; height: auto !important; max-height: none !important; margin: 0 !important; padding: 12px 16px calc(16px + env(safe-area-inset-bottom)) !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain !important; -webkit-overflow-scrolling: touch !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; display: block !important; background: #fbf8f2 !important; border: 0 !important; border-radius: 0 !important; box-shadow: 0 24px 60px rgba(33, 28, 41, 0.18) !important; backdrop-filter: none !important; transform: translateY(-6px) !important; transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease !important; } body > .primary-nav.nm-mobile-nav[data-open="true"], body > .primary-nav.nm-mobile-nav.nm-is-open { visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; transform: translateY(0) !important; } body > .primary-nav.nm-mobile-nav > ul, body > .primary-nav.nm-mobile-nav .nav-list, body > .primary-nav.nm-mobile-nav .elementor-nav-menu { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 6px !important; box-sizing: border-box !important; width: min(100%, 560px) !important; max-width: 560px !important; height: auto !important; margin: 0 auto !important; padding: 0 !important; list-style: none !important; } body > .primary-nav.nm-mobile-nav li, body > .primary-nav.nm-mobile-nav .menu-item { position: relative !important; display: block !important; box-sizing: border-box !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; float: none !important; transform: none !important; } body > .primary-nav.nm-mobile-nav a, body > .primary-nav.nm-mobile-nav .elementor-item { display: flex !important; box-sizing: border-box !important; width: 100% !important; min-height: 46px !important; align-items: center !important; justify-content: flex-start !important; margin: 0 !important; padding: 11px 14px !important; border: 1px solid rgba(52, 39, 61, 0.11) !important; border-radius: 14px !important; color: #211c29 !important; background: rgba(255, 255, 255, 0.58) !important; box-shadow: none !important; font-size: 0.96rem !important; font-weight: 750 !important; line-height: 1.2 !important; text-align: left !important; text-decoration: none !important; white-space: normal !important; transform: none !important; } body > .primary-nav.nm-mobile-nav a:hover, body > .primary-nav.nm-mobile-nav a:focus-visible, body > .primary-nav.nm-mobile-nav a[aria-current="page"], body > .primary-nav.nm-mobile-nav .current-menu-item > a, body > .primary-nav.nm-mobile-nav .current_page_item > a { color: #34273d !important; background: rgba(126, 147, 166, 0.16) !important; outline: none !important; } /* Future submenu items are displayed from the live menu, not hardcoded. */ body > .primary-nav.nm-mobile-nav ul ul, body > .primary-nav.nm-mobile-nav .sub-menu { position: static !important; display: flex !important; flex-direction: column !important; gap: 5px !important; box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; margin: 5px 0 0 !important; padding: 0 0 0 14px !important; visibility: visible !important; opacity: 1 !important; background: transparent !important; box-shadow: none !important; transform: none !important; } body > .primary-nav.nm-mobile-nav ul ul a, body > .primary-nav.nm-mobile-nav .sub-menu a { min-height: 40px !important; padding: 9px 12px !important; font-size: 0.9rem !important; } body > .nm-mobile-menu-backdrop { position: fixed !important; z-index: 2147482998 !important; top: var(--nm-mobile-menu-top, 72px) !important; right: 0 !important; bottom: 0 !important; left: 0 !important; display: block !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; background: rgba(33, 28, 41, 0.12) !important; transition: opacity 160ms ease, visibility 160ms ease !important; } body > .nm-mobile-menu-backdrop.nm-is-open { visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } /* Current five-item menu fits without scrolling on normal portrait phones. Internal scrolling remains as a safe fallback for future longer menus, submenus, landscape mode, or very short screens. */ @media (max-height: 620px) { body > .primary-nav.nm-mobile-nav { padding-top: 8px !important; padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important; } body > .primary-nav.nm-mobile-nav > ul, body > .primary-nav.nm-mobile-nav .nav-list, body > .primary-nav.nm-mobile-nav .elementor-nav-menu { gap: 4px !important; } body > .primary-nav.nm-mobile-nav a, body > .primary-nav.nm-mobile-nav .elementor-item { min-height: 40px !important; padding: 8px 12px !important; border-radius: 12px !important; font-size: 0.91rem !important; } } } @media (min-width: 901px) { body > .primary-nav.nm-mobile-nav, body > .nm-mobile-menu-backdrop { display: none !important; } } @media (prefers-reduced-motion: reduce) { body > .primary-nav.nm-mobile-nav, body > .nm-mobile-menu-backdrop { transition: none !important; } }