/* ADOL Monitor — small CSS overrides for the static / PHP version. */ /* ------------------------------------------------------------- */ /* Top navigation: restore Superfish-style sub-menu on hover. */ /* CherryFramework's CSS hides .sf-menu ul with display:none AND */ /* top:-999em, expecting the original Superfish jQuery plugin to */ /* toggle display. Without the plugin we replace display:none */ /* with visibility/opacity so the existing :hover rule works. */ /* ------------------------------------------------------------- */ .sf-menu ul { display: block !important; visibility: hidden; opacity: 0; transition: opacity .15s ease; } .sf-menu li:hover > ul, .sf-menu li.sfHover > ul, .sf-menu li:focus-within > ul { visibility: visible; opacity: 1; } /* Make sure deeper sub-menus inherit the show-on-hover behavior */ ul.sf-menu li:hover > ul, ul.sf-menu li.sfHover > ul, ul.sf-menu li:focus-within > ul { visibility: visible; opacity: 1; } ul.sf-menu li li:hover > ul, ul.sf-menu li li.sfHover > ul, ul.sf-menu li li:focus-within > ul { top: 0; left: 100%; visibility: visible; opacity: 1; } /* ------------------------------------------------------------- */ /* Hide widget shells whose body became empty after removing the */ /* third-party JS embeds (smartemailing newsletter, etc.). */ /* ------------------------------------------------------------- */ .widget_text:has(> .textwidget:empty) { display: none; } /* ------------------------------------------------------------- */ /* Mobile menu — show/hide the slide-in panels via body classes. */ /* WP Mobile Menu plugin's CSS expects an .mob-menu-overlay */ /* ancestor, but the original JS that managed those classes is */ /* gone. We toggle .show-nav-left / .show-nav-right on */ /* in adol.js and drive everything from here. */ /* ------------------------------------------------------------- */ .mobmenu-panel.mobmenu-left-panel { transform: translateX(-100%); transition: transform .3s ease, visibility 0s .3s, opacity .3s; visibility: hidden; opacity: 0; } .mobmenu-panel.mobmenu-right-panel { transform: translateX(100%); transition: transform .3s ease, visibility 0s .3s, opacity .3s; visibility: hidden; opacity: 0; } body.show-nav-left .mobmenu-panel.mobmenu-left-panel, body.show-nav-right .mobmenu-panel.mobmenu-right-panel { transform: translateX(0); visibility: visible; opacity: 1; transition: transform .3s ease, opacity .3s; z-index: 100001; } body.show-nav-left .mobmenu-overlay, body.show-nav-right .mobmenu-overlay { background: rgba(0, 0, 0, .5); width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 10001; cursor: pointer; visibility: visible; opacity: 1; } .mobmenu-overlay { visibility: hidden; opacity: 0; transition: opacity .3s, visibility 0s .3s; } body.show-nav-left, body.show-nav-right { overflow: hidden; } /* Inline expand-toggle next to nested mobile menu items. */ .mobmenu-panel .menu-item-has-children > .mob-expand-submenu { float: right; cursor: pointer; padding: 4px 16px; user-select: none; color: inherit; font-style: normal; } /* The original CherryFramework inline CSS makes the trigger icons 30px, which clips inside the 40px-tall mobile header bar. Trim them down, align them to the bar baseline, and put the right-side login icon AFTER the label so it visually sits on the far right. */ .mob-menu-header-holder .mobmenul-container, .mob-menu-header-holder .mobmenur-container { top: 0 !important; height: 40px; } .mob-menu-header-holder .mobmenul-container > a, .mob-menu-header-holder .mobmenur-container > a { height: 40px; line-height: 40px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; } /* Right side: text first, then user icon → icon ends up on the right. */ .mob-menu-header-holder .mobmenur-container > a { flex-direction: row-reverse; } .mob-menu-header-holder .mobmenul-container i, .mob-menu-header-holder .mobmenur-container i { font-size: 20px !important; line-height: 40px !important; float: none !important; } .mob-menu-header-holder .left-menu-icon-text, .mob-menu-header-holder .right-menu-icon-text { line-height: 40px !important; float: none !important; }