/* LazyNav front-end styles. Every selector below is scoped under .lazynav (either as a compound class on the header itself, or as a .lazynav ancestor combinator for elements inside it), and every declaration carries !important, so theme stylesheets loading after this one can't silently override the header's own settings-driven styling. The one unavoidable exception is `body.lazynav-menu-open`: the open mobile panel needs to lock page scroll on itself, which isn't a descendant of .lazynav, so it can't be scoped under it. Colors/sizes/positions come from CSS custom properties set inline by PHP from the saved settings (see LazyNav_Frontend::build_inline_css). Everything below just consumes those variables with sensible fallbacks, so this file never needs per-site edits. */ .lazynav { width: 100% !important; background: var(--lazynav-container-bg, #ffffff) !important; border-bottom: none !important; box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important; position: relative !important; z-index: 100 !important; transition: background-color 0.25s ease, box-shadow 0.25s ease !important; } .lazynav .lazynav__inner { max-width: 100% !important; margin: 0 auto !important; padding: var(--lazynav-container-padding-v, 16px) var(--lazynav-container-padding-h, 24px) !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; } .lazynav.lazynav--container-boxed .lazynav__inner { max-width: var(--lazynav-boxed-width, 1200px) !important; } @media (max-width: 767px) { .lazynav .lazynav__inner { padding: var(--lazynav-container-padding-v-mobile, 12px) var(--lazynav-container-padding-h-mobile, 16px) !important; } } @media (min-width: 768px) and (max-width: 1024px) { .lazynav .lazynav__inner { padding: var(--lazynav-container-padding-v-tablet, 14px) var(--lazynav-container-padding-h-tablet, 20px) !important; } } /* Divider: a separate element inset by the container's own horizontal padding (so it lines up with the content, never runs edge to edge), with its own adjustable spacing above it. */ .lazynav.lazynav--divider .lazynav__inner { position: relative !important; padding-bottom: calc(var(--lazynav-container-padding-v, 16px) + var(--lazynav-divider-padding, 0px)) !important; } @media (max-width: 767px) { .lazynav.lazynav--divider .lazynav__inner { padding-bottom: calc(var(--lazynav-container-padding-v-mobile, 12px) + var(--lazynav-divider-padding, 0px)) !important; } } @media (min-width: 768px) and (max-width: 1024px) { .lazynav.lazynav--divider .lazynav__inner { padding-bottom: calc(var(--lazynav-container-padding-v-tablet, 14px) + var(--lazynav-divider-padding, 0px)) !important; } } .lazynav .lazynav__divider { position: absolute !important; left: var(--lazynav-divider-offset, 24px) !important; right: var(--lazynav-divider-offset, 24px) !important; bottom: 0 !important; border-bottom: var(--lazynav-divider-width, 1px) solid var(--lazynav-divider-color, #e5e5e5) !important; } @media (min-width: 768px) and (max-width: 1024px) { .lazynav .lazynav__divider { left: var(--lazynav-divider-offset-tablet, 20px) !important; right: var(--lazynav-divider-offset-tablet, 20px) !important; } } @media (max-width: 767px) { .lazynav .lazynav__divider { left: var(--lazynav-divider-offset-mobile, 16px) !important; right: var(--lazynav-divider-offset-mobile, 16px) !important; } } /* Full Width divider: breaks out of the boxed container to run edge to edge of the viewport, regardless of screen size. The compound selector (two classes on .lazynav) gives this higher specificity than the base offset-based rule above and its responsive variants, so it reliably wins at every breakpoint without needing its own media queries. */ .lazynav.lazynav--divider-full .lazynav__divider { left: 50% !important; right: auto !important; width: 100vw !important; transform: translateX(-50%) !important; } /* Overlay only: sits on top of the section behind it (e.g. a hero image), scrolls away with the page since it's positioned in the document, not pinned to the viewport. */ .lazynav.lazynav--overlay:not(.lazynav--sticky) { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; z-index: var(--lazynav-overlay-zindex, 10) !important; background-color: transparent !important; background-image: var(--lazynav-overlay-gradient, none) !important; border-bottom: none !important; } /* Sticky only: stays in normal flow (so it doesn't overlay anything) and pins to the top of the viewport once scrolled to. Plain CSS position:sticky, no JS-managed positioning. */ .lazynav.lazynav--sticky:not(.lazynav--overlay) { position: sticky !important; top: var(--lazynav-sticky-offset, 0) !important; z-index: var(--lazynav-sticky-zindex, 999) !important; } /* Overlay + Sticky together: the classic "transparent header over a hero that becomes solid and pinned once you scroll" pattern. This needs position:fixed rather than sticky, since it has to sit out of the document flow (to overlay the hero) while still tracking the viewport as the page scrolls, which sticky alone can't do outside of flow. */ .lazynav.lazynav--overlay.lazynav--sticky { position: fixed !important; top: var(--lazynav-sticky-offset, 0) !important; left: 0 !important; width: 100% !important; z-index: var(--lazynav-sticky-zindex, 999) !important; background-color: transparent !important; background-image: var(--lazynav-overlay-gradient, none) !important; border-bottom: none !important; } .lazynav.lazynav--scroll-shadow.lazynav--scrolled { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important; } .lazynav.lazynav--scrolled { background: var(--lazynav-sticky-scroll-bg, #ffffff) !important; } /* Overlay + Sticky starts fully transparent (see the combined rule above), which outweighs the general scrolled-background rule on specificity alone. This repeats the same selector with the scrolled state added so the solid background actually takes over once the visitor scrolls past the threshold, instead of staying transparent forever in this specific combination. */ .lazynav.lazynav--overlay.lazynav--sticky.lazynav--scrolled { background: var(--lazynav-sticky-scroll-bg, #ffffff) !important; } .lazynav.lazynav--scrolled .lazynav__divider { display: none !important; } /* Logo */ .lazynav .lazynav__logo { display: inline-flex !important; align-items: center !important; text-decoration: none !important; flex-shrink: 0 !important; } .lazynav .lazynav__logo-img { width: var(--lazynav-logo-width, auto) !important; height: auto !important; max-height: 60px !important; display: block !important; } @media (max-width: 767px) { .lazynav .lazynav__logo-img { width: var(--lazynav-logo-width-mobile, var(--lazynav-logo-width, auto)) !important; } } .lazynav .lazynav__logo-text { font-size: 20px !important; font-weight: 700 !important; color: #0d0d0d !important; } /* Menu */ .lazynav .lazynav__menu { list-style: none !important; display: flex !important; align-items: center !important; gap: var(--lazynav-item-spacing, 32px) !important; margin: 0 !important; padding: 0 !important; } .lazynav .lazynav__menu-item { position: relative !important; } .lazynav .lazynav__menu-item a { position: relative !important; display: inline-flex !important; align-items: center !important; text-decoration: none !important; color: var(--lazynav-item-color, #0d0d0d) !important; font-size: var(--lazynav-item-size, 16px) !important; font-weight: var(--lazynav-item-weight, 500) !important; line-height: var(--lazynav-item-line-height, 22px) !important; font-family: var(--lazynav-item-font, inherit) !important; transition: color 0.2s ease !important; } .lazynav .lazynav__menu-item a:hover { color: var(--lazynav-item-hover, #c45c1a) !important; } .lazynav .lazynav__menu-item--active a { color: var(--lazynav-item-active, #c45c1a) !important; } /* Submenu: desktop dropdown flyout. Absolutely positioned so it never contributes extra width to the flex row - without this, every item with a submenu would measure noticeably wider than plain items, since the button would otherwise be a real flex sibling next to the link. Anchored from the RIGHT edge of .lazynav__menu-item, not the left - the item's own width is now (text + spacer), so a left:100% anchor would land past the spacer too, not right after the text. right = (spacer width - button width) lands the button's own left edge exactly where the text ends, with whatever's left over in the spacer's reserved zone becoming the trailing gap after the arrow. */ .lazynav .lazynav__submenu-toggle { display: inline-flex !important; align-items: center !important; justify-content: center !important; position: absolute !important; right: calc(var(--lazynav-submenu-arrow-spacing, 26px) - 22px) !important; top: 50% !important; transform: translateY(-50%) !important; background: none !important; border: none !important; width: 22px !important; height: 22px !important; padding: 0 !important; cursor: pointer !important; line-height: 0 !important; } .lazynav .lazynav__submenu-toggle::before { content: "" !important; display: block !important; position: absolute !important; top: calc(50% - 6px + var(--lazynav-submenu-arrow-offset, -4px)) !important; left: 50% !important; width: 7px !important; height: 7px !important; border-right: 1.5px solid var(--lazynav-submenu-arrow-color, currentColor) !important; border-bottom: 1.5px solid var(--lazynav-submenu-arrow-color, currentColor) !important; transform: translateX(-50%) rotate(45deg) !important; } /* A real (invisible) flex sibling, not padding on the item - reserves room in the flex row for the absolutely-positioned arrow button (22px wide, 4px left margin) that sits just past the text. The button itself doesn't contribute to the row's width anymore (that's the whole point of it being absolute), so without this, the next menu item's flex gap would be measured from the end of the text, not the end of the arrow, crowding the two together. Not rendered inside the mobile panel, where the button already stays in normal flow and needs no extra reserved space. */ .lazynav .lazynav__submenu-spacer { display: inline-block !important; width: var(--lazynav-submenu-arrow-spacing, 26px) !important; } .lazynav .lazynav__panel .lazynav__submenu-spacer { display: none !important; } /* Invisible bridge covering the gap between the trigger and the dropdown - without this, a nonzero gap (below) would recreate the dead-zone hover-flicker bug fixed earlier: moving the mouse straight down through empty space would briefly be over nothing, dropping the :hover state before it reaches the dropdown itself. */ .lazynav .lazynav__menu-item--has-submenu::after { content: "" !important; position: absolute !important; left: 0 !important; right: 0 !important; top: 100% !important; height: var(--lazynav-submenu-gap, 12px) !important; } .lazynav .lazynav__submenu { list-style: none !important; position: absolute !important; top: calc(100% + var(--lazynav-submenu-gap, 12px)) !important; left: 0 !important; margin: 0 !important; padding: 6px !important; box-sizing: border-box !important; width: var(--lazynav-submenu-width, 200px) !important; background: var(--lazynav-submenu-bg, #ffffff) !important; border-radius: var(--lazynav-submenu-radius, 8px) !important; box-shadow: var(--lazynav-submenu-shadow, 0 12px 32px rgba(0, 0, 0, 0.12)) !important; max-height: 0 !important; overflow: hidden !important; visibility: hidden !important; transition: max-height 0.3s ease, visibility 0s linear 0.3s !important; z-index: 20 !important; } .lazynav .lazynav__menu-item--has-submenu:hover > .lazynav__submenu, .lazynav .lazynav__menu-item--has-submenu:focus-within > .lazynav__submenu, .lazynav .lazynav__menu-item--has-submenu.lazynav__menu-item--submenu-open > .lazynav__submenu { max-height: 500px !important; visibility: visible !important; transition: max-height 0.3s ease, visibility 0s linear 0s !important; } .lazynav .lazynav__submenu-item { list-style: none !important; } .lazynav .lazynav__submenu-item a { position: relative !important; display: block !important; padding: var(--lazynav-submenu-padding-v, 10px) var(--lazynav-submenu-padding-h, 20px) !important; color: var(--lazynav-submenu-text, #0d0d0d) !important; font-size: var(--lazynav-submenu-size, 14px) !important; font-weight: var(--lazynav-submenu-weight, 400) !important; line-height: var(--lazynav-submenu-line-height, 20px) !important; text-decoration: none !important; white-space: normal !important; transition: color 0.15s ease, background-color 0.15s ease !important; } .lazynav .lazynav__submenu-item a:hover { color: var(--lazynav-submenu-text-hover, #c45c1a) !important; } .lazynav .lazynav__submenu-item--active a { color: var(--lazynav-submenu-text-active, #c45c1a) !important; } /* Underline effects (animated + static) share the same pseudo-element. Uses the direct-child combinator (>) deliberately, not a plain descendant selector - a descendant selector would also match links buried inside the submenu dropdown several levels down, which is exactly the bug this comment is here to prevent reintroducing. */ .lazynav.lazynav--effect-underline_animate .lazynav__menu-item > a::after, .lazynav.lazynav--effect-underline_static .lazynav__menu-item > a::after { content: "" !important; position: absolute !important; left: 0 !important; bottom: -4px !important; width: 100% !important; height: var(--lazynav-underline-height, 2px) !important; background-color: var(--lazynav-underline-color, #c45c1a) !important; } .lazynav.lazynav--effect-underline_animate .lazynav__menu-item > a::after { transform: scaleX(0) !important; transform-origin: left !important; transition: transform 0.3s ease !important; } .lazynav.lazynav--effect-underline_animate .lazynav__menu-item > a:hover::after, .lazynav.lazynav--effect-underline_animate .lazynav__menu-item > a:focus-visible::after { transform: scaleX(1) !important; } .lazynav.lazynav--effect-underline_static .lazynav__menu-item > a::after { opacity: 0 !important; transition: opacity 0.2s ease !important; } .lazynav.lazynav--effect-underline_static .lazynav__menu-item > a:hover::after, .lazynav.lazynav--effect-underline_static .lazynav__menu-item > a:focus-visible::after { opacity: 1 !important; } .lazynav.lazynav--effect-active.lazynav--effect-underline_animate .lazynav__menu-item--active > a::after { transform: scaleX(1) !important; } .lazynav.lazynav--effect-active.lazynav--effect-underline_static .lazynav__menu-item--active > a::after { opacity: 1 !important; } /* Submenu items never had an active-page underline at all - this adds it too, using the same effect type and Keep Effect Visible toggle as the main menu above. Positioned to roughly match the submenu item's own padding rather than spanning the full dropdown width. */ .lazynav.lazynav--effect-active.lazynav--effect-underline_animate .lazynav__submenu-item--active a::after, .lazynav.lazynav--effect-active.lazynav--effect-underline_static .lazynav__submenu-item--active a::after { content: "" !important; position: absolute !important; left: var(--lazynav-submenu-padding-h, 20px) !important; right: var(--lazynav-submenu-padding-h, 20px) !important; bottom: 4px !important; height: var(--lazynav-underline-height, 2px) !important; background-color: var(--lazynav-underline-color, #c45c1a) !important; opacity: 1 !important; transform: none !important; } /* Dot indicator, its own span appended after the link text. */ .lazynav .lazynav__dot { display: inline-block !important; width: var(--lazynav-dot-size, 6px) !important; height: var(--lazynav-dot-size, 6px) !important; border-radius: 50% !important; background-color: var(--lazynav-dot-color, #e8c547) !important; margin-left: 5px !important; opacity: 0 !important; transform: scale(0.4) !important; transition: opacity 0.2s ease, transform 0.2s ease !important; margin-bottom: 15px !important; } .lazynav.lazynav--effect-dot .lazynav__menu-item a:hover .lazynav__dot, .lazynav.lazynav--effect-dot .lazynav__menu-item a:focus-visible .lazynav__dot { opacity: 1 !important; transform: scale(1) !important; } .lazynav.lazynav--effect-dot.lazynav--effect-active .lazynav__menu-item--active .lazynav__dot { opacity: 1 !important; transform: scale(1) !important; } /* Button */ .lazynav .lazynav__button { display: inline-flex !important; align-items: center !important; justify-content: center !important; text-decoration: none !important; white-space: nowrap !important; flex-shrink: 0 !important; font-size: var(--lazynav-button-size, 14px) !important; font-weight: var(--lazynav-button-weight, 600) !important; letter-spacing: var(--lazynav-button-letter-spacing, 0px) !important; color: var(--lazynav-button-color, #f5f5f0) !important; background: var(--lazynav-button-bg, #0d0d0d) !important; border: var(--lazynav-button-border-width, 0px) solid var(--lazynav-button-border-color, transparent) !important; border-radius: var(--lazynav-button-radius, 6px) !important; padding: var(--lazynav-button-padding, 10px 22px) !important; transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease !important; } .lazynav .lazynav__button:hover { color: var(--lazynav-button-color-hover, #f5f5f0) !important; background-color: var(--lazynav-button-bg-hover, #c45c1a) !important; } /* Mobile toggle (hamburger) */ .lazynav .lazynav__toggle { display: none !important; flex-direction: column !important; justify-content: center !important; gap: 5px !important; width: var(--lazynav-hamburger-size, 28px) !important; height: var(--lazynav-hamburger-size, 28px) !important; background: transparent !important; border: 0 !important; cursor: pointer !important; padding: 0 !important; } .lazynav .lazynav__toggle-bar { display: block !important; height: 2px !important; width: 100% !important; background-color: var(--lazynav-hamburger-color, #0d0d0d) !important; border-radius: 2px !important; transition: transform 0.25s ease, opacity 0.25s ease !important; } .lazynav .lazynav__toggle[aria-expanded="true"] .lazynav__toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg) !important; } .lazynav .lazynav__toggle[aria-expanded="true"] .lazynav__toggle-bar:nth-child(2) { opacity: 0 !important; } .lazynav .lazynav__toggle[aria-expanded="true"] .lazynav__toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg) !important; } /* Layout 1: logo left, menu + button grouped right */ .lazynav.lazynav--layout-1 .lazynav__group--right { display: flex !important; align-items: center !important; gap: var(--lazynav-item-spacing, 32px) !important; } /* Layout 2: left-menu + logo + right-menu cluster together as one centered group (a grid keeps this reliable regardless of how much space the button column needs), button + toggle pinned to the right. */ .lazynav.lazynav--layout-2 .lazynav__inner { display: grid !important; grid-template-columns: 1fr auto 1fr !important; align-items: center !important; } .lazynav.lazynav--layout-2 .lazynav__center-group { grid-column: 2 !important; display: flex !important; align-items: center !important; gap: var(--lazynav-logo-gap, 32px) !important; } .lazynav.lazynav--layout-2 .lazynav__group--right { grid-column: 3 !important; justify-self: end !important; display: flex !important; align-items: center !important; gap: 16px !important; } /* Layout 2 variant: button on the left, logo centered, full menu on the right instead of split around the logo. Reuses the same grid as above (.lazynav__group--right already lands in column 3), just adds the left-side button group and pins the bare logo link to the middle column explicitly, since without .lazynav__center-group wrapping it, grid auto-placement alone isn't guaranteed to put it there. */ .lazynav.lazynav--layout-2.lazynav--layout2-button-left .lazynav__group--left { grid-column: 1 !important; justify-self: start !important; display: flex !important; align-items: center !important; } .lazynav.lazynav--layout-2.lazynav--layout2-button-left .lazynav__logo { grid-column: 2 !important; justify-self: center !important; } .lazynav.lazynav--layout-2.lazynav--layout2-button-left .lazynav__group--right { gap: var(--lazynav-item-spacing, 32px) !important; } /* Layout 3: logo left, menu centered, button right */ .lazynav.lazynav--layout-3 .lazynav__inner { justify-content: space-between !important; } .lazynav.lazynav--layout-3 .lazynav__center { flex: 1 !important; display: flex !important; justify-content: center !important; } /* Mobile panel (shared markup for both hamburger states) */ .lazynav .lazynav__mobile-overlay { position: fixed !important; inset: 0 !important; background: rgba(0, 0, 0, 0.35) !important; opacity: 0 !important; visibility: hidden !important; transition: opacity 0.3s ease !important; z-index: 9998 !important; } .lazynav.lazynav--menu-open .lazynav__mobile-overlay { opacity: 1 !important; visibility: visible !important; } .lazynav .lazynav__panel { position: fixed !important; top: 0 !important; bottom: 0 !important; width: var(--lazynav-panel-width, 280px) !important; max-width: 85vw !important; background-color: var(--lazynav-panel-bg, #0d0d0d) !important; z-index: 9999 !important; padding: 70px 32px 40px !important; transition: transform 0.35s ease !important; overflow-y: auto !important; } .lazynav.lazynav--panel-left .lazynav__panel { left: 0 !important; right: auto !important; transform: translateX(-100%) !important; } .lazynav.lazynav--panel-right .lazynav__panel { right: 0 !important; left: auto !important; transform: translateX(100%) !important; } .lazynav.lazynav--menu-open .lazynav__panel { transform: translateX(0) !important; } /* Full Screen panel style: overrides the side-drawer position/transform above (same specificity, later in source order) so Panel Position becomes irrelevant while this style is selected. The menu list centers itself both ways since the panel itself becomes a centering flex box. */ .lazynav.lazynav--panel-style-fullscreen .lazynav__panel { left: 0 !important; right: 0 !important; width: 100vw !important; max-width: 100vw !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; transform: none !important; opacity: 0 !important; visibility: hidden !important; transition: opacity 0.3s ease !important; } .lazynav.lazynav--panel-style-fullscreen.lazynav--menu-open .lazynav__panel { opacity: 1 !important; visibility: visible !important; } .lazynav.lazynav--panel-style-fullscreen .lazynav__panel .lazynav__menu { flex: none !important; flex-direction: column !important; align-items: center !important; gap: 24px !important; } .lazynav.lazynav--panel-style-fullscreen .lazynav__panel .lazynav__menu-item { width: auto !important; margin: 0 !important; text-align: center !important; } /* Items with a submenu use justify-content:space-between in the regular drawer panel, to pin the arrow to the far right of a full-width row. That doesn't make sense in the fullscreen style, where every item (including the link+arrow pair) should be centered as a group instead - space-between would otherwise push the link toward the left edge and the arrow toward the right edge of whatever width the item ends up being, breaking the centered look every other item has. */ .lazynav.lazynav--panel-style-fullscreen .lazynav__panel .lazynav__menu-item--has-submenu { justify-content: center !important; gap: 8px !important; width: auto !important; } .lazynav .lazynav__panel-close { position: absolute !important; top: 24px !important; right: 24px !important; background: transparent !important; border: none !important; color: var(--lazynav-close-color, #f5f5f0) !important; cursor: pointer !important; padding: 4px !important; line-height: 0 !important; } .lazynav .lazynav__panel .lazynav__menu { flex-direction: column !important; align-items: flex-start !important; gap: 0 !important; } .lazynav .lazynav__panel .lazynav__menu-item { width: 100% !important; margin: 0 0 20px !important; } .lazynav .lazynav__panel .lazynav__menu-item a { font-size: var(--lazynav-mobile-item-size, 18px) !important; color: var(--lazynav-mobile-item-color, #ffffff) !important; transition: color 0.2s ease !important; } .lazynav .lazynav__panel .lazynav__menu-item a:hover { color: var(--lazynav-mobile-item-hover, #e8c547) !important; } .lazynav .lazynav__panel .lazynav__menu-item--active a { color: var(--lazynav-mobile-item-active, #e8c547) !important; } /* Submenu inside the mobile panel: inline accordion, not a floating dropdown - a position:absolute flyout wouldn't make sense in a narrow slide-out drawer. */ .lazynav .lazynav__panel .lazynav__menu-item--has-submenu { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: space-between !important; } .lazynav .lazynav__panel .lazynav__menu-item--has-submenu > a { align-self: center !important; } .lazynav .lazynav__panel .lazynav__submenu-toggle { position: relative !important; right: auto !important; top: auto !important; transform: none !important; align-self: center !important; } .lazynav .lazynav__panel .lazynav__menu-item--has-submenu::after { content: none !important; } .lazynav .lazynav__panel .lazynav__submenu-toggle { color: var(--lazynav-mobile-item-color, #ffffff) !important; } .lazynav .lazynav__panel .lazynav__submenu-toggle::before { border-right-color: var(--lazynav-submenu-arrow-color-mobile, #ffffff) !important; border-bottom-color: var(--lazynav-submenu-arrow-color-mobile, #ffffff) !important; } .lazynav .lazynav__panel .lazynav__submenu { position: static !important; opacity: 1 !important; visibility: visible !important; transform: none !important; box-shadow: none !important; background: none !important; width: 100% !important; flex-basis: 100% !important; margin: 0 !important; padding: 0 !important; max-height: 0 !important; overflow: hidden !important; transition: max-height 0.25s ease !important; } .lazynav .lazynav__panel .lazynav__menu-item--has-submenu:hover > .lazynav__submenu, .lazynav .lazynav__panel .lazynav__menu-item--has-submenu:focus-within > .lazynav__submenu { max-height: 0 !important; } .lazynav .lazynav__panel .lazynav__menu-item--has-submenu.lazynav__menu-item--submenu-open > .lazynav__submenu { max-height: 1000px !important; } .lazynav .lazynav__panel .lazynav__submenu-item a { padding: 10px !important; color: var(--lazynav-mobile-item-color, #ffffff) !important; font-size: var(--lazynav-submenu-mobile-size, 16px) !important; opacity: 0.85 !important; white-space: normal !important; } .lazynav .lazynav__panel .lazynav__submenu-item a:hover { color: var(--lazynav-mobile-item-hover, #e8c547) !important; opacity: 1 !important; } .lazynav .lazynav__panel .lazynav__submenu-item--active a { color: var(--lazynav-mobile-item-active, #e8c547) !important; opacity: 1 !important; } .lazynav .lazynav__panel-empty { color: var(--lazynav-mobile-item-color, #f5f5f0) !important; opacity: 0.7 !important; margin: 0 !important; } /* Exception: locks scroll on while the mobile panel is open. is never a descendant of .lazynav, so this can't be scoped under it, but the class itself (lazynav-menu-open) is unique to this plugin and won't collide with theme styles. */ body.lazynav-menu-open { overflow: hidden !important; } @media (max-width: 767px) { .lazynav.lazynav--collapse-mobile .lazynav__inner > .lazynav__menu, .lazynav.lazynav--collapse-mobile .lazynav__group--right > .lazynav__menu, .lazynav.lazynav--collapse-mobile .lazynav__center > .lazynav__menu, .lazynav.lazynav--collapse-mobile .lazynav__center-group .lazynav__menu--left, .lazynav.lazynav--collapse-mobile .lazynav__center-group .lazynav__menu--right { display: none !important; } .lazynav.lazynav--collapse-mobile .lazynav__toggle { display: inline-flex !important; } .lazynav.lazynav--collapse-mobile.lazynav--hide-button-mobile > .lazynav__inner > .lazynav__button, .lazynav.lazynav--collapse-mobile.lazynav--hide-button-mobile .lazynav__group--right > .lazynav__button, .lazynav.lazynav--collapse-mobile.lazynav--hide-button-mobile .lazynav__group--left > .lazynav__button { display: none !important; } } @media (max-width: 1024px) { .lazynav.lazynav--collapse-tablet .lazynav__inner > .lazynav__menu, .lazynav.lazynav--collapse-tablet .lazynav__group--right > .lazynav__menu, .lazynav.lazynav--collapse-tablet .lazynav__center > .lazynav__menu, .lazynav.lazynav--collapse-tablet .lazynav__center-group .lazynav__menu--left, .lazynav.lazynav--collapse-tablet .lazynav__center-group .lazynav__menu--right { display: none !important; } .lazynav.lazynav--collapse-tablet .lazynav__toggle { display: inline-flex !important; } .lazynav.lazynav--collapse-tablet.lazynav--hide-button-mobile > .lazynav__inner > .lazynav__button, .lazynav.lazynav--collapse-tablet.lazynav--hide-button-mobile .lazynav__group--right > .lazynav__button, .lazynav.lazynav--collapse-tablet.lazynav--hide-button-mobile .lazynav__group--left > .lazynav__button { display: none !important; } }