/* ========================================================= GENESIS TURF — FLUID + RESPONSIVE HFE NAVIGATION IMPORTANT - Replace the previous navigation CSS with this whole block. - Do not stack this below the older versions/patches. - Existing Elementor typography is intentionally preserved. - Desktop mega-menu design values remain the same at normal desktop sizes; only compact viewports scale proportionally. Widget: .elementor-element-fc0e284 Menu: #menu-1-fc0e284 ========================================================= */ :root { --gt-mega-max-width: 1120px; --gt-mega-edge: 24px; --gt-mega-gap: 18px; --gt-mega-radius: 24px; --gt-mega-layer: 100001; --gt-mega-shadow: 0 24px 60px rgba(0, 0, 0, 0.12); --gt-mega-border: rgba(0, 0, 0, 0.08); --gt-mega-divider: #d9d9d9; --gt-mega-green: #2f6d45; } /* ========================================================= SAFE CONTAINMENT ========================================================= */ .elementor-element-fc0e284, .elementor-element-fc0e284 *, .elementor-element-fc0e284 *::before, .elementor-element-fc0e284 *::after { box-sizing: border-box; } #masthead, .elementor-location-header, #masthead .e-con, #masthead .e-con-inner, #masthead .elementor-container, .elementor-location-header .e-con, .elementor-location-header .e-con-inner, .elementor-location-header .elementor-container, .elementor-element-fc0e284, .elementor-element-fc0e284 .elementor-widget-container { overflow: visible !important; } .elementor-element-fc0e284 { min-width: 0 !important; max-width: 100% !important; } .elementor-element-fc0e284 .elementor-widget-container, .elementor-element-fc0e284 nav, .elementor-element-fc0e284 .hfe-nav-menu { min-width: 0 !important; max-width: 100% !important; } .elementor-element-fc0e284 ul, .elementor-element-fc0e284 li { margin: 0; } html, body { max-width: 100%; overflow-x: hidden; } @supports (overflow: clip) { html, body { overflow-x: clip; } } /* ========================================================= DESKTOP — 1025PX AND ABOVE ========================================================= */ @media only screen and (min-width: 1025px) { /* Keep logo, navigation and CTA on one row. */ #masthead .e-con-inner, #masthead .elementor-container, .elementor-location-header .e-con-inner, .elementor-location-header .elementor-container { flex-wrap: nowrap !important; min-width: 0 !important; } .elementor-element-fc0e284 { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; } .elementor-element-fc0e284 .elementor-widget-container, .elementor-element-fc0e284 nav.hfe-nav-menu__layout-horizontal, .elementor-element-fc0e284 .hfe-nav-menu__layout-horizontal { width: 100% !important; min-width: 0 !important; max-width: 100% !important; } /* Anchor the mega panel to the navigation area. */ .elementor-element-fc0e284 nav.hfe-nav-menu__layout-horizontal, .elementor-element-fc0e284 .hfe-nav-menu__layout-horizontal { position: relative !important; overflow: visible !important; } #menu-1-fc0e284 { position: static !important; display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; } #menu-1-fc0e284 > li { flex: 0 1 auto !important; min-width: 0 !important; } #menu-1-fc0e284 > li.menu-item-mega { position: static !important; } /* Never allow top-level labels or arrows to collide. */ #menu-1-fc0e284 > li > .hfe-has-submenu-container, #menu-1-fc0e284 > li > a.hfe-menu-item { min-width: 0 !important; } #menu-1-fc0e284 > li > .hfe-has-submenu-container > a.hfe-menu-item, #menu-1-fc0e284 > li > a.hfe-menu-item { white-space: nowrap !important; } #menu-1-fc0e284 > li > .hfe-has-submenu-container .hfe-menu-toggle { flex: 0 0 auto !important; } /* Keep the Contact button from wrapping or shrinking. */ #masthead .elementor-widget-button, .elementor-location-header .elementor-widget-button { flex: 0 0 auto !important; min-width: max-content !important; } #masthead .elementor-widget-button .elementor-button, .elementor-location-header .elementor-widget-button .elementor-button { white-space: nowrap !important; } /* ======================================================= DESKTOP MEGA PANEL ======================================================= */ #menu-1-fc0e284 > li.menu-item-mega > ul.sub-menu { position: absolute !important; top: calc(100% - 1px) !important; left: 50% !important; right: auto !important; bottom: auto !important; display: grid !important; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr) !important; align-items: stretch !important; gap: var(--gt-mega-gap) !important; width: min(var(--gt-mega-max-width), calc(100vw - (var(--gt-mega-edge) * 2))) !important; min-width: 0 !important; max-width: calc(100vw - (var(--gt-mega-edge) * 2)) !important; margin: 0 !important; padding: 10px !important; list-style: none !important; background: #ffffff !important; border: 1px solid var(--gt-mega-border) !important; border-radius: var(--gt-mega-radius) !important; box-shadow: var(--gt-mega-shadow) !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transform: translateX(-50%) translateY(6px) !important; transform-origin: top center !important; z-index: 99999 !important; transition: opacity 0.22s ease, visibility 0.22s ease, transform 0.22s ease !important; } /* Invisible hover bridge removes accidental closing. */ #menu-1-fc0e284 > li.menu-item-mega > ul.sub-menu::before { content: ""; position: absolute; top: -10px; right: 0; left: 0; height: 12px; background: transparent; } #menu-1-fc0e284 > li.menu-item-mega:hover > ul.sub-menu, #menu-1-fc0e284 > li.menu-item-mega:focus-within > ul.sub-menu { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateX(-50%) translateY(0) !important; z-index: var(--gt-mega-layer) !important; } /* Three main columns. */ #menu-1-fc0e284 > li.menu-item-mega > ul.sub-menu > li { position: relative !important; width: 100% !important; min-width: 0 !important; height: auto !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } /* Nested lists become column contents, not flyouts. */ #menu-1-fc0e284 > li.menu-item-mega > ul.sub-menu > li > ul.sub-menu { position: static !important; inset: auto !important; transform: none !important; display: block !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; overflow: visible !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } /* Remove nested arrows. */ #menu-1-fc0e284 .menu-mega-bio > .hfe-has-submenu-container .hfe-menu-toggle, #menu-1-fc0e284 .menu-mega-group > .hfe-has-submenu-container .hfe-menu-toggle { display: none !important; } /* Hide structural headings "1" and "2". */ #menu-1-fc0e284 .menu-mega-group > .hfe-has-submenu-container { display: none !important; } /* ======================================================= DESKTOP BIO COLUMN — ORIGINAL DESIGN VALUES ======================================================= */ #menu-1-fc0e284 > li.menu-item-mega > ul.sub-menu > li.menu-mega-bio { padding: 22px !important; background: linear-gradient( 180deg, #f4faf5 0%, #ebf4ee 100% ) !important; border: 1px solid rgba(56, 111, 72, 0.08) !important; border-radius: 20px !important; } #menu-1-fc0e284 .menu-mega-bio > .hfe-has-submenu-container { display: block !important; margin: 0 0 14px !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } #menu-1-fc0e284 .menu-mega-bio > .hfe-has-submenu-container > a { display: block !important; margin: 0 0 16px !important; padding: 0 !important; color: #4e5d51 !important; font-size: 34px !important; line-height: 0.98 !important; font-weight: 600 !important; letter-spacing: -0.02em !important; white-space: normal !important; overflow-wrap: normal !important; word-break: normal !important; text-decoration: none !important; pointer-events: none !important; cursor: default !important; } #menu-1-fc0e284 .menu-mega-bio > ul.sub-menu > li { margin: 0 0 12px !important; padding: 0 !important; border: 0 !important; } #menu-1-fc0e284 .menu-mega-bio > ul.sub-menu > li:last-child { margin-bottom: 0 !important; } #menu-1-fc0e284 .menu-mega-bio > ul.sub-menu > li > a { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; color: #6f786f !important; background: transparent !important; font-size: 15px !important; line-height: 1.6 !important; white-space: normal !important; overflow-wrap: anywhere !important; text-decoration: none !important; pointer-events: none !important; cursor: default !important; } /* ======================================================= DESKTOP LINK COLUMNS — ORIGINAL DESIGN VALUES ======================================================= */ #menu-1-fc0e284 > li.menu-item-mega > ul.sub-menu > li.menu-mega-group { padding: 8px 4px !important; background: #ffffff !important; border-radius: 18px !important; } #menu-1-fc0e284 .menu-mega-group > ul.sub-menu > li { margin: 0 !important; padding: 0 !important; border: 0 !important; } #menu-1-fc0e284 .menu-mega-group > ul.sub-menu > li > a { display: block !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 16px 18px !important; color: #4e4e4e !important; background: #ffffff !important; border: 0 !important; border-top: 1px solid var(--gt-mega-divider) !important; border-radius: 0 !important; font-size: 18px !important; line-height: 1.25 !important; white-space: normal !important; overflow-wrap: anywhere !important; text-decoration: none !important; transition: background-color 0.2s ease, color 0.2s ease, padding-left 0.2s ease !important; } #menu-1-fc0e284 .menu-mega-group > ul.sub-menu > li > a:hover, #menu-1-fc0e284 .menu-mega-group > ul.sub-menu > li > a:focus-visible { padding-left: 22px !important; color: var(--gt-mega-green) !important; background: #f6f8f4 !important; } } /* Prevent a previously focused desktop panel from covering the hovered one. */ @media only screen and (min-width: 1025px) and (hover: hover) { #menu-1-fc0e284:hover > li.menu-item-mega:not(:hover) > ul.sub-menu { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transform: translateX(-50%) translateY(6px) !important; z-index: 99998 !important; } } /* ========================================================= FLUID COMPACT DESKTOP — 1025PX TO 1440PX Typography family/weight is untouched. Only available space, logo width, link padding and mega-panel dimensions adapt. ========================================================= */ @media only screen and (min-width: 1025px) and (max-width: 1440px) { #masthead .elementor-widget-theme-site-logo, .elementor-location-header .elementor-widget-theme-site-logo { flex: 0 1 auto !important; min-width: 0 !important; } #masthead .elementor-widget-theme-site-logo img, .elementor-location-header .elementor-widget-theme-site-logo img { width: auto !important; max-width: clamp(205px, 23vw, 330px) !important; height: auto !important; } #menu-1-fc0e284 { column-gap: clamp(0px, 0.22vw, 4px) !important; } #menu-1-fc0e284 > li > .hfe-has-submenu-container > a.hfe-menu-item, #menu-1-fc0e284 > li > a.hfe-menu-item { padding-right: clamp(7px, 0.72vw, 12px) !important; padding-left: clamp(7px, 0.72vw, 12px) !important; } #masthead .elementor-widget-button .elementor-button, .elementor-location-header .elementor-widget-button .elementor-button { padding-right: clamp(13px, 1.15vw, 20px) !important; padding-left: clamp(13px, 1.15vw, 20px) !important; } } /* Medium compact desktop. */ @media only screen and (min-width: 1181px) and (max-width: 1280px) { #masthead .elementor-widget-theme-site-logo img, .elementor-location-header .elementor-widget-theme-site-logo img { max-width: clamp(225px, 22vw, 280px) !important; } #menu-1-fc0e284 > li.menu-item-mega > ul.sub-menu { width: min(980px, calc(100vw - 36px)) !important; max-width: calc(100vw - 36px) !important; gap: 14px !important; } } /* Narrow compact desktop. */ @media only screen and (min-width: 1025px) and (max-width: 1180px) { #masthead .elementor-widget-theme-site-logo img, .elementor-location-header .elementor-widget-theme-site-logo img { max-width: clamp(180px, 20vw, 225px) !important; } #menu-1-fc0e284 { column-gap: 0 !important; } #menu-1-fc0e284 > li > .hfe-has-submenu-container > a.hfe-menu-item, #menu-1-fc0e284 > li > a.hfe-menu-item { padding-right: clamp(4px, 0.45vw, 6px) !important; padding-left: clamp(4px, 0.45vw, 6px) !important; } #masthead .elementor-widget-button .elementor-button, .elementor-location-header .elementor-widget-button .elementor-button { padding-right: 12px !important; padding-left: 12px !important; } #menu-1-fc0e284 > li.menu-item-mega > ul.sub-menu { width: min(860px, calc(100vw - 28px)) !important; max-width: calc(100vw - 28px) !important; grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr) minmax(0, 1fr) !important; gap: 12px !important; padding: 9px !important; border-radius: 20px !important; } #menu-1-fc0e284 > li.menu-item-mega > ul.sub-menu > li.menu-mega-bio { padding: 18px !important; border-radius: 17px !important; } #menu-1-fc0e284 .menu-mega-bio > .hfe-has-submenu-container > a { font-size: 30px !important; } #menu-1-fc0e284 .menu-mega-bio > ul.sub-menu > li > a { font-size: 14px !important; line-height: 1.5 !important; } #menu-1-fc0e284 .menu-mega-group > ul.sub-menu > li > a { padding: 14px 14px !important; font-size: 16px !important; } #menu-1-fc0e284 .menu-mega-group > ul.sub-menu > li > a:hover, #menu-1-fc0e284 .menu-mega-group > ul.sub-menu > li > a:focus-visible { padding-left: 18px !important; } } /* Extra-compact desktop: protect the 1025px–1100px transition. */ @media only screen and (min-width: 1025px) and (max-width: 1100px) { #masthead .elementor-widget-theme-site-logo img, .elementor-location-header .elementor-widget-theme-site-logo img { max-width: 175px !important; } #menu-1-fc0e284 > li > .hfe-has-submenu-container > a.hfe-menu-item, #menu-1-fc0e284 > li > a.hfe-menu-item { padding-right: 3px !important; padding-left: 3px !important; } #masthead .elementor-widget-button .elementor-button, .elementor-location-header .elementor-widget-button .elementor-button { padding-right: 10px !important; padding-left: 10px !important; } #menu-1-fc0e284 > li.menu-item-mega > ul.sub-menu { width: min(820px, calc(100vw - 24px)) !important; max-width: calc(100vw - 24px) !important; gap: 10px !important; } } /* ========================================================= TABLET + MOBILE ACCORDION — 1024PX AND BELOW ========================================================= */ @media only screen and (max-width: 1024px) { #masthead, .elementor-location-header { position: relative !important; z-index: 100000 !important; } #masthead .e-con, #masthead .e-con-inner, #masthead .elementor-container, .elementor-location-header .e-con, .elementor-location-header .e-con-inner, .elementor-location-header .elementor-container { min-width: 0 !important; } .elementor-element-fc0e284, .elementor-element-fc0e284 .elementor-widget-container { position: static !important; width: auto !important; min-width: 0 !important; max-width: none !important; } .elementor-element-fc0e284 .hfe-nav-menu__toggle { position: relative !important; z-index: 100002 !important; } /* Make the HFE dropdown scroll safely on short screens. */ .elementor-element-fc0e284 nav.hfe-dropdown, .elementor-element-fc0e284 nav.hfe-dropdown-expandible { max-height: calc(100vh - 72px) !important; max-height: calc(100dvh - 72px) !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } /* Natural sizing — no fixed submenu heights. */ #menu-1-fc0e284, #menu-1-fc0e284 ul, #menu-1-fc0e284 li { width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; box-sizing: border-box !important; } #menu-1-fc0e284 li { position: relative !important; } #menu-1-fc0e284 > li.menu-item-mega { overflow: visible !important; } /* ======================================================= CLOSED TOP-LEVEL MEGA PANELS ======================================================= */ #menu-1-fc0e284 > li.menu-item-mega > ul.sub-menu { position: static !important; inset: auto !important; float: none !important; clear: both !important; transform: none !important; display: none !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 12px !important; background: #ffffff !important; border: 1px solid var(--gt-mega-border) !important; border-radius: 0 0 16px 16px !important; box-shadow: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; overflow: hidden !important; } /* Open-state fallbacks used by different HFE releases. */ #menu-1-fc0e284 > li.menu-item-mega > .hfe-has-submenu-container[aria-expanded="true"] + ul.sub-menu, #menu-1-fc0e284 > li.menu-item-mega > ul.sub-menu[aria-hidden="false"], #menu-1-fc0e284 > li.menu-item-mega > ul.sub-menu[style*="display: block"], #menu-1-fc0e284 > li.menu-item-mega > ul.sub-menu[style*="display:block"] { display: block !important; height: auto !important; min-height: 0 !important; max-height: none !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; overflow: visible !important; } /* Use :has only as an additional modern-browser fallback. */ @supports selector(.x:has(.y)) { #menu-1-fc0e284 > li.menu-item-mega > .hfe-has-submenu-container:has(> a[aria-expanded="true"]) + ul.sub-menu { display: block !important; height: auto !important; min-height: 0 !important; max-height: none !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; overflow: visible !important; } } /* ======================================================= FULL-WIDTH MOBILE ACCORDION CONTROLS ======================================================= */ #menu-1-fc0e284 > li.menu-item-mega > .hfe-has-submenu-container { position: relative !important; display: block !important; width: 100% !important; min-width: 0 !important; cursor: pointer !important; pointer-events: auto !important; } #menu-1-fc0e284 > li.menu-item-mega > .hfe-has-submenu-container > a.hfe-menu-item { position: relative !important; display: block !important; width: 100% !important; min-width: 0 !important; padding-right: 52px !important; white-space: normal !important; overflow-wrap: break-word !important; pointer-events: none !important; } #menu-1-fc0e284 > li.menu-item-mega > .hfe-has-submenu-container > a.hfe-menu-item > .hfe-menu-toggle { position: absolute !important; top: 50% !important; right: 10px !important; bottom: auto !important; left: auto !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 38px !important; height: 38px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; transform: translateY(-50%) !important; pointer-events: none !important; z-index: 6 !important; } #menu-1-fc0e284 > li.menu-item-mega > .hfe-has-submenu-container > a.hfe-menu-item > .hfe-menu-toggle > i, #menu-1-fc0e284 > li.menu-item-mega > .hfe-has-submenu-container > a.hfe-menu-item > .hfe-menu-toggle > svg { position: static !important; inset: auto !important; margin: 0 !important; transform: none !important; } /* ======================================================= MOBILE BIO SECTION ======================================================= */ #menu-1-fc0e284 > li.menu-item-mega > ul.sub-menu > li.menu-mega-bio { display: block !important; width: 100% !important; margin: 0 0 12px !important; padding: 16px !important; background: linear-gradient( 180deg, #f4faf5 0%, #ebf4ee 100% ) !important; border: 1px solid rgba(56, 111, 72, 0.10) !important; border-radius: 14px !important; } #menu-1-fc0e284 .menu-mega-bio > .hfe-has-submenu-container { display: block !important; margin: 0 0 10px !important; padding: 0 !important; background: transparent !important; border: 0 !important; } #menu-1-fc0e284 .menu-mega-bio > .hfe-has-submenu-container > a { display: block !important; margin: 0 !important; padding: 0 !important; background-color: transparent; color: #4e5d51 !important; font-size: 23px !important; line-height: 1.1 !important; font-weight: 600 !important; white-space: normal !important; overflow-wrap: normal !important; pointer-events: none !important; cursor: default !important; } #menu-1-fc0e284 .menu-mega-bio > .hfe-has-submenu-container .hfe-menu-toggle { display: none !important; } #menu-1-fc0e284 .menu-mega-bio > ul.sub-menu { position: static !important; inset: auto !important; transform: none !important; display: block !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; overflow: visible !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } #menu-1-fc0e284 .menu-mega-bio > ul.sub-menu > li { margin: 0 !important; padding: 0 !important; border: 0 !important; } #menu-1-fc0e284 .menu-mega-bio > ul.sub-menu > li > a { display: block !important; width: 100% !important; margin: 0 !important; padding: 7px 0 !important; color: #6f786f !important; background: transparent !important; font-size: 15px !important; line-height: 1.5 !important; white-space: normal !important; overflow-wrap: anywhere !important; pointer-events: none !important; cursor: default !important; } /* ======================================================= MOBILE LINK GROUPS ======================================================= */ #menu-1-fc0e284 .menu-mega-group > .hfe-has-submenu-container { display: none !important; } #menu-1-fc0e284 .menu-mega-group { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; background: #ffffff !important; } #menu-1-fc0e284 .menu-mega-group > ul.sub-menu { position: static !important; inset: auto !important; transform: none !important; display: block !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; overflow: visible !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } #menu-1-fc0e284 .menu-mega-group > ul.sub-menu > li { width: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } #menu-1-fc0e284 .menu-mega-group > ul.sub-menu > li > a { display: block !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; padding: 14px 12px !important; color: #4e4e4e !important; background: #ffffff !important; border: 0 !important; border-top: 1px solid #e3e3e3 !important; border-radius: 0 !important; font-size: 17px !important; line-height: 1.3 !important; white-space: normal !important; overflow-wrap: anywhere !important; word-break: normal !important; text-decoration: none !important; } #menu-1-fc0e284 .menu-mega-group > ul.sub-menu > li > a:hover, #menu-1-fc0e284 .menu-mega-group > ul.sub-menu > li > a:focus-visible { color: var(--gt-mega-green) !important; background: #f6f8f4 !important; } } /* ========================================================= SMALL MOBILE — 767PX AND BELOW ========================================================= */ @media only screen and (max-width: 767px) { .elementor-element-fc0e284 nav.hfe-dropdown, .elementor-element-fc0e284 nav.hfe-dropdown-expandible { max-height: calc(100vh - 64px) !important; max-height: calc(100dvh - 64px) !important; } #menu-1-fc0e284 > li.menu-item-mega > ul.sub-menu { padding: 9px !important; } #menu-1-fc0e284 > li.menu-item-mega > ul.sub-menu > li.menu-mega-bio { padding: 14px !important; } #menu-1-fc0e284 .menu-mega-group > ul.sub-menu > li > a { padding: 13px 11px !important; font-size: 16px !important; } } /* ========================================================= REMOVE HFE'S EXTRA ITEM BORDERS The custom light dividers above remain intact. ========================================================= */ .elementor-167 .elementor-element.elementor-element-fc0e284 .sub-menu li.menu-item:not(:last-child), .elementor-167 .elementor-element.elementor-element-fc0e284 nav.hfe-dropdown li.menu-item:not(:last-child), .elementor-167 .elementor-element.elementor-element-fc0e284 nav.hfe-dropdown-expandible li.menu-item:not(:last-child) { border-bottom: 0 !important; } /* ========================================================= ACCESSIBILITY + REDUCED MOTION ========================================================= */ #menu-1-fc0e284 a:focus-visible, #menu-1-fc0e284 button:focus-visible, .elementor-element-fc0e284 .hfe-nav-menu__toggle:focus-visible { outline: 2px solid #548d11 !important; outline-offset: 2px !important; } @media (prefers-reduced-motion: reduce) { .elementor-element-fc0e284 *, .elementor-element-fc0e284 *::before, .elementor-element-fc0e284 *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ========================================================= GENESIS TURF — 1025px TO 1280px FLUID HEADER PATCH Paste this block at the VERY END of the working navigation CSS. Preserves: - Current font family - Current font weight - Current mega-menu design - Current mobile accordion at 1024px and below ========================================================= */ @media only screen and (min-width: 1025px) and (max-width: 1280px) { /* Let navigation use all remaining space between logo and CTA. */ .elementor-element-fc0e284 { flex: 1 1 0 !important; width: 0 !important; min-width: 0 !important; max-width: none !important; } .elementor-element-fc0e284 .elementor-widget-container, .elementor-element-fc0e284 nav.hfe-nav-menu__layout-horizontal, .elementor-element-fc0e284 .hfe-nav-menu__layout-horizontal { width: 100% !important; min-width: 0 !important; max-width: 100% !important; } /* Scale logo smoothly instead of allowing it to crowd menu. */ #masthead .elementor-widget-theme-site-logo, .elementor-location-header .elementor-widget-theme-site-logo { flex: 0 1 auto !important; min-width: 0 !important; } #masthead .elementor-widget-theme-site-logo img, .elementor-location-header .elementor-widget-theme-site-logo img { width: auto !important; max-width: clamp(175px, 18vw, 230px) !important; height: auto !important; } /* Keep all desktop menu items on one row. */ #menu-1-fc0e284 { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-width: 0 !important; column-gap: clamp(1px, 0.25vw, 4px) !important; } #menu-1-fc0e284 > li { flex: 0 0 auto !important; min-width: 0 !important; margin: 0 !important; } /* Fluid top-level labels without changing font family or weight. */ #menu-1-fc0e284 > li > .hfe-has-submenu-container > a.hfe-menu-item, #menu-1-fc0e284 > li > a.hfe-menu-item { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 0 !important; min-height: 40px !important; padding-right: clamp(4px, 0.48vw, 6px) !important; padding-left: clamp(4px, 0.48vw, 6px) !important; /* * Font family and weight continue to inherit from * the existing design. */ font-size: clamp(13px, 1.25vw, 16px) !important; line-height: 1.05 !important; white-space: nowrap !important; } /* Keep arrows beside labels without overlapping. */ #menu-1-fc0e284 > li > .hfe-has-submenu-container .hfe-menu-toggle { position: static !important; display: inline-flex !important; flex: 0 0 auto !important; align-items: center !important; justify-content: center !important; width: clamp(10px, 1vw, 13px) !important; height: clamp(10px, 1vw, 13px) !important; margin: 0 0 0 2px !important; padding: 0 !important; transform: none !important; } #menu-1-fc0e284 > li > .hfe-has-submenu-container .hfe-menu-toggle i, #menu-1-fc0e284 > li > .hfe-has-submenu-container .hfe-menu-toggle svg { width: 8px !important; height: 8px !important; margin: 0 !important; font-size: 8px !important; transform: none !important; } /* Compact CTA smoothly at intermediate desktop widths. */ #masthead .elementor-widget-button, .elementor-location-header .elementor-widget-button { flex: 0 0 auto !important; min-width: max-content !important; } #masthead .elementor-widget-button .elementor-button, .elementor-location-header .elementor-widget-button .elementor-button { min-height: 40px !important; padding: 9px clamp(11px, 1.1vw, 15px) !important; font-size: clamp(13px, 1.25vw, 16px) !important; line-height: 1 !important; white-space: nowrap !important; } } /* ========================================================= VERY NARROW DESKTOP — 1025px TO 1080px Final protection immediately before the 1024px mobile accordion breakpoint. ========================================================= */ @media only screen and (min-width: 1025px) and (max-width: 1080px) { #masthead .elementor-widget-theme-site-logo img, .elementor-location-header .elementor-widget-theme-site-logo img { max-width: 170px !important; } #menu-1-fc0e284 > li > .hfe-has-submenu-container > a.hfe-menu-item, #menu-1-fc0e284 > li > a.hfe-menu-item { padding-right: 3px !important; padding-left: 3px !important; font-size: 12.75px !important; } #masthead .elementor-widget-button .elementor-button, .elementor-location-header .elementor-widget-button .elementor-button { padding-right: 10px !important; padding-left: 10px !important; font-size: 13px !important; } }/* ========================================================= GENESIS TURF — FINAL TABLET + MOBILE STABILITY PATCH Paste this block at the VERY END of the current working CSS, or use the complete replacement file supplied with it. Fixes: 1. Mobile menu text disappearing / arrows showing alone 2. Tablet dropdown hanging at the left side 3. Stable logo + CTA + hamburger alignment 4. Full-width mobile Contact Us button 5. Full-width, scrollable HFE dropdown below the header ========================================================= */ @media only screen and (max-width: 1024px) { /* ------------------------------------------------------- HEADER ROW: LOGO | CTA | MENU TOGGLE ------------------------------------------------------- */ #masthead, .elementor-location-header { position: relative !important; z-index: 100000 !important; overflow: visible !important; } /* Target the Elementor row that directly contains this nav. */ @supports selector(.x:has(.y)) { #masthead .e-con:has(> .elementor-element-fc0e284), #masthead .e-con-inner:has(> .elementor-element-fc0e284), #masthead .elementor-container:has(> .elementor-element-fc0e284), .elementor-location-header .e-con:has(> .elementor-element-fc0e284), .elementor-location-header .e-con-inner:has(> .elementor-element-fc0e284), .elementor-location-header .elementor-container:has(> .elementor-element-fc0e284) { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; /*width: 100% !important;*/ min-width: 0 !important; column-gap: clamp(8px, 1.4vw, 16px) !important; overflow: visible !important; } } /* Logo remains flexible and never pushes the controls away. */ #masthead .elementor-widget-theme-site-logo, .elementor-location-header .elementor-widget-theme-site-logo { order: 1 !important; flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; } #masthead .elementor-widget-theme-site-logo img, .elementor-location-header .elementor-widget-theme-site-logo img { display: block !important; width: auto !important; max-width: clamp(180px, 28vw, 255px) !important; height: auto !important; margin: 0 !important; } /* CTA is second on tablet. */ #masthead .elementor-widget-button, .elementor-location-header .elementor-widget-button { order: 2 !important; flex: 0 0 auto !important; width: auto !important; min-width: max-content !important; max-width: none !important; margin: 0 !important; } #masthead .elementor-widget-button .elementor-button-wrapper, .elementor-location-header .elementor-widget-button .elementor-button-wrapper { width: auto !important; } #masthead .elementor-widget-button .elementor-button, .elementor-location-header .elementor-widget-button .elementor-button { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 42px !important; padding: 9px clamp(14px, 2vw, 22px) !important; white-space: nowrap !important; } /* Nav toggle is always the final control on the right. */ .elementor-element-fc0e284 { position: static !important; order: 3 !important; flex: 0 0 auto !important; width: auto !important; min-width: 44px !important; max-width: none !important; margin: 0 !important; } .elementor-element-fc0e284 .elementor-widget-container { position: static !important; width: auto !important; min-width: 44px !important; max-width: none !important; margin: 0 !important; overflow: visible !important; } .elementor-element-fc0e284 .hfe-nav-menu__toggle { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; z-index: 100003 !important; } .elementor-element-fc0e284 .hfe-nav-menu-icon, .elementor-element-fc0e284 .hfe-nav-menu__toggle svg, .elementor-element-fc0e284 .hfe-nav-menu__toggle i { margin: 0 !important; } /* ------------------------------------------------------- FULL-WIDTH HFE DROPDOWN The previous width was inherited from the narrow nav widget, which caused the left-side hanging panel and hidden labels. ------------------------------------------------------- */ .elementor-element-fc0e284 nav.hfe-dropdown, .elementor-element-fc0e284 nav.hfe-dropdown-expandible { position: absolute !important; top: 100% !important; right: 0 !important; left: 0 !important; bottom: auto !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; background: #ffffff !important; border: 0 !important; border-top: 1px solid rgba(0, 0, 0, 0.08) !important; box-shadow: 0 18px 36px rgba(0, 0, 0, 0.14) !important; max-height: calc(100vh - 86px) !important; max-height: calc(100dvh - 86px) !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; z-index: 100002 !important; } /* Support the active class used by HFE without forcing it open. */ .elementor-element-fc0e284 nav.hfe-dropdown.menu-is-active, .elementor-element-fc0e284 nav.hfe-dropdown-expandible.menu-is-active, .elementor-element-fc0e284 nav.hfe-dropdown[aria-hidden="false"], .elementor-element-fc0e284 nav.hfe-dropdown-expandible[aria-hidden="false"] { visibility: visible !important; opacity: 1 !important; } /* The top-level menu itself must use the entire dropdown width. */ #menu-1-fc0e284 { display: block !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; padding: 8px clamp(12px, 2.2vw, 22px) 18px !important; background: #ffffff !important; overflow: visible !important; } #menu-1-fc0e284 > li { position: relative !important; display: block !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; border-bottom: 1px solid #ececec !important; } #menu-1-fc0e284 > li:last-child { border-bottom: 0 !important; } /* Restore visible menu labels on narrow phones. */ #menu-1-fc0e284 > li > .hfe-has-submenu-container, #menu-1-fc0e284 > li > a.hfe-menu-item { position: relative !important; display: block !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; background: #ffffff !important; opacity: 1 !important; visibility: visible !important; } #menu-1-fc0e284 > li > .hfe-has-submenu-container > a.hfe-menu-item, #menu-1-fc0e284 > li > a.hfe-menu-item { position: relative !important; display: flex !important; align-items: center !important; width: 100% !important; min-width: 0 !important; min-height: 52px !important; margin: 0 !important; padding: 12px 54px 12px 4px !important; color: #4e4e4e !important; background: #ffffff !important; opacity: 1 !important; visibility: visible !important; font-size: clamp(16px, 2.1vw, 18px) !important; line-height: 1.3 !important; white-space: normal !important; overflow-wrap: break-word !important; text-decoration: none !important; } /* Wrapper handles the accordion click; text and arrow stay aligned. */ #menu-1-fc0e284 > li.menu-item-mega > .hfe-has-submenu-container { cursor: pointer !important; pointer-events: auto !important; } #menu-1-fc0e284 > li.menu-item-mega > .hfe-has-submenu-container > a.hfe-menu-item { pointer-events: none !important; } #menu-1-fc0e284 > li.menu-item-mega > .hfe-has-submenu-container > a.hfe-menu-item > .hfe-menu-toggle { position: absolute !important; top: 50% !important; right: 4px !important; left: auto !important; bottom: auto !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 44px !important; height: 44px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; transform: translateY(-50%) !important; pointer-events: none !important; z-index: 6 !important; } #menu-1-fc0e284 > li.menu-item-mega > .hfe-has-submenu-container > a.hfe-menu-item > .hfe-menu-toggle > i, #menu-1-fc0e284 > li.menu-item-mega > .hfe-has-submenu-container > a.hfe-menu-item > .hfe-menu-toggle > svg { position: static !important; inset: auto !important; margin: 0 !important; transform: none !important; } /* Keep opened mega panels fully visible inside the dropdown. */ #menu-1-fc0e284 > li.menu-item-mega > ul.sub-menu { width: 100% !important; min-width: 0 !important; max-width: 100% !important; } } /* ========================================================= PHONE LAYOUT — 767PX AND BELOW LOGO + HAMBURGER ON ROW 1 FULL-WIDTH CONTACT BUTTON ON ROW 2 ========================================================= */ @media only screen and (max-width: 767px) { @supports selector(.x:has(.y)) { #masthead .e-con:has(> .elementor-element-fc0e284), #masthead .e-con-inner:has(> .elementor-element-fc0e284), #masthead .elementor-container:has(> .elementor-element-fc0e284), .elementor-location-header .e-con:has(> .elementor-element-fc0e284), .elementor-location-header .e-con-inner:has(> .elementor-element-fc0e284), .elementor-location-header .elementor-container:has(> .elementor-element-fc0e284) { flex-wrap: wrap !important; row-gap: 9px !important; } } #masthead .elementor-widget-theme-site-logo, .elementor-location-header .elementor-widget-theme-site-logo { order: 1 !important; flex: 1 1 calc(100% - 58px) !important; } #masthead .elementor-widget-theme-site-logo img, .elementor-location-header .elementor-widget-theme-site-logo img { max-width: min(255px, calc(100vw - 92px)) !important; } .elementor-element-fc0e284 { order: 2 !important; flex: 0 0 44px !important; margin-left: auto !important; } /* Contact Us becomes a consistent full-width second row. */ #masthead .elementor-widget-button, .elementor-location-header .elementor-widget-button { order: 3 !important; flex: 0 0 100% !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; } #masthead .elementor-widget-button .elementor-button-wrapper, .elementor-location-header .elementor-widget-button .elementor-button-wrapper, #masthead .elementor-widget-button .elementor-button, .elementor-location-header .elementor-widget-button .elementor-button { width: 100% !important; max-width: 100% !important; } #masthead .elementor-widget-button .elementor-button, .elementor-location-header .elementor-widget-button .elementor-button { display: flex !important; min-height: 46px !important; padding: 11px 18px !important; justify-content: center !important; text-align: center !important; } .elementor-element-fc0e284 nav.hfe-dropdown, .elementor-element-fc0e284 nav.hfe-dropdown-expandible { max-height: calc(100vh - 138px) !important; max-height: calc(100dvh - 138px) !important; } #menu-1-fc0e284 { padding: 6px 12px 18px !important; } #menu-1-fc0e284 > li > .hfe-has-submenu-container > a.hfe-menu-item, #menu-1-fc0e284 > li > a.hfe-menu-item { min-height: 50px !important; padding: 11px 52px 11px 2px !important; font-size: 16px !important; } } /* ========================================================= VERY SMALL PHONES — 420PX AND BELOW ========================================================= */ @media only screen and (max-width: 420px) { #masthead .elementor-widget-theme-site-logo img, .elementor-location-header .elementor-widget-theme-site-logo img { max-width: min(225px, calc(100vw - 88px)) !important; } #menu-1-fc0e284 { padding-right: 10px !important; padding-left: 10px !important; } } /* ========================================================= GENESIS TURF — TABLET NAV VISIBILITY PATCH Range: 768px to 1024px Fixes: - Missing hamburger between 768px and 1024px - Missing Contact Us button - Empty/hanging tablet header - Dropdown opening at the wrong width ========================================================= */ @media only screen and (min-width: 768px) and (max-width: 1024px) { /* ------------------------------------------------------- HEADER POSITIONING ------------------------------------------------------- */ #masthead, .elementor-location-header { position: relative !important; width: 100% !important; min-height: 76px !important; overflow: visible !important; z-index: 100000 !important; } /* ------------------------------------------------------- KEEP LOGO VISIBLE AND LEAVE ROOM FOR CONTROLS ------------------------------------------------------- */ #masthead .elementor-widget-theme-site-logo, .elementor-location-header .elementor-widget-theme-site-logo { display: block !important; width: auto !important; min-width: 0 !important; max-width: calc(100% - 290px) !important; margin-right: auto !important; visibility: visible !important; opacity: 1 !important; } #masthead .elementor-widget-theme-site-logo img, .elementor-location-header .elementor-widget-theme-site-logo img { display: block !important; width: auto !important; max-width: clamp(190px, 28vw, 255px) !important; height: auto !important; margin: 0 !important; } /* ------------------------------------------------------- FORCE CONTACT BUTTON TO DISPLAY ON TABLET ------------------------------------------------------- */ #masthead .elementor-widget-button, .elementor-location-header .elementor-widget-button { position: absolute !important; top: 50% !important; right: 78px !important; left: auto !important; display: block !important; width: auto !important; min-width: max-content !important; max-width: none !important; margin: 0 !important; visibility: visible !important; opacity: 1 !important; transform: translateY(-50%) !important; z-index: 100002 !important; } #masthead .elementor-widget-button .elementor-button-wrapper, .elementor-location-header .elementor-widget-button .elementor-button-wrapper { display: block !important; width: auto !important; } #masthead .elementor-widget-button .elementor-button, .elementor-location-header .elementor-widget-button .elementor-button { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: max-content !important; min-height: 42px !important; padding: 9px 18px !important; white-space: nowrap !important; } /* ------------------------------------------------------- FORCE HFE TABLET HAMBURGER TO DISPLAY ------------------------------------------------------- */ .elementor-element-fc0e284 { position: static !important; display: block !important; width: 44px !important; min-width: 44px !important; max-width: 44px !important; height: 44px !important; margin: 0 !important; visibility: visible !important; opacity: 1 !important; overflow: visible !important; z-index: 100003 !important; } .elementor-element-fc0e284 .elementor-widget-container { position: static !important; display: block !important; width: 44px !important; min-width: 44px !important; max-width: 44px !important; height: 44px !important; margin: 0 !important; padding: 0 !important; visibility: visible !important; opacity: 1 !important; overflow: visible !important; } .elementor-element-fc0e284 .hfe-nav-menu__toggle { position: absolute !important; top: 50% !important; right: 18px !important; left: auto !important; bottom: auto !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important; margin: 0 !important; padding: 0 !important; visibility: visible !important; opacity: 1 !important; transform: translateY(-50%) !important; cursor: pointer !important; z-index: 100004 !important; } .elementor-element-fc0e284 .hfe-nav-menu__toggle, .elementor-element-fc0e284 .hfe-nav-menu__toggle * { pointer-events: auto !important; } /* Do not change HFE's open/close icon switching. */ .elementor-element-fc0e284 .hfe-nav-menu-icon, .elementor-element-fc0e284 .hfe-nav-menu__toggle i, .elementor-element-fc0e284 .hfe-nav-menu__toggle svg { visibility: visible !important; opacity: 1 !important; margin: 0 !important; } /* ------------------------------------------------------- FULL-WIDTH TABLET DROPDOWN ------------------------------------------------------- */ .elementor-element-fc0e284 nav.hfe-dropdown, .elementor-element-fc0e284 nav.hfe-dropdown-expandible { position: absolute !important; top: 100% !important; right: 0 !important; left: 0 !important; bottom: auto !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; transform: none !important; background: #ffffff !important; border: 0 !important; border-top: 1px solid rgba(0, 0, 0, 0.08) !important; box-shadow: 0 18px 36px rgba(0, 0, 0, 0.14) !important; max-height: calc(100vh - 76px) !important; max-height: calc(100dvh - 76px) !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; z-index: 100003 !important; } #menu-1-fc0e284 { display: block !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; padding: 8px 18px 20px !important; background: #ffffff !important; } #menu-1-fc0e284 > li { display: block !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; } #menu-1-fc0e284 > li > .hfe-has-submenu-container, #menu-1-fc0e284 > li > .hfe-has-submenu-container > a.hfe-menu-item, #menu-1-fc0e284 > li > a.hfe-menu-item { width: 100% !important; min-width: 0 !important; max-width: 100% !important; visibility: visible !important; opacity: 1 !important; } } /* ========================================================= GENESIS TURF — HARD TABLET HAMBURGER FIX Applies only from 768px through 1024px This overrides Elementor's generated tablet-hidden rules. Desktop and phone layouts remain unchanged. ========================================================= */ @media only screen and (min-width: 768px) and (max-width: 1024px) { /* ======================================================= 1. UNHIDE NAV WIDGET AND ANY TABLET-HIDDEN WRAPPER ======================================================= */ body .elementor.elementor-167 .elementor-element.elementor-element-fc0e284, body .elementor.elementor-167 .elementor-element.elementor-element-fc0e284.elementor-hidden-tablet, body #masthead .elementor-element.elementor-element-fc0e284, body .elementor-location-header .elementor-element.elementor-element-fc0e284 { display: block !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } /* * Some Elementor layouts place the navigation inside a * parent container that is itself hidden on tablet. */ @supports selector(.x:has(.y)) { body .elementor.elementor-167 .elementor-element.elementor-hidden-tablet: has(.elementor-element-fc0e284) { display: flex !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } body .elementor.elementor-167 .elementor-element.elementor-hidden-tablet: has(.elementor-widget-button) { display: flex !important; visibility: visible !important; opacity: 1 !important; } } /* ======================================================= 2. HEADER POSITIONING ======================================================= */ body #masthead, body .elementor-location-header, body .elementor.elementor-167 { position: relative !important; width: 100% !important; min-height: 76px !important; overflow: visible !important; z-index: 100000 !important; } /* ======================================================= 3. KEEP LOGO CONTROLLED ON TABLET ======================================================= */ body .elementor.elementor-167 .elementor-widget-theme-site-logo { display: block !important; width: auto !important; min-width: 0 !important; max-width: calc(100% - 285px) !important; margin-right: auto !important; visibility: visible !important; opacity: 1 !important; } body .elementor.elementor-167 .elementor-widget-theme-site-logo img { display: block !important; width: auto !important; max-width: clamp(195px, 29vw, 260px) !important; height: auto !important; margin: 0 !important; } /* ======================================================= 4. FORCE CONTACT BUTTON BACK ON TABLET ======================================================= */ body .elementor.elementor-167 .elementor-element.elementor-widget-button, body .elementor.elementor-167 .elementor-element.elementor-widget-button.elementor-hidden-tablet, body #masthead .elementor-widget-button, body .elementor-location-header .elementor-widget-button { position: absolute !important; top: 50% !important; right: 82px !important; left: auto !important; display: block !important; width: auto !important; min-width: max-content !important; max-width: none !important; margin: 0 !important; visibility: visible !important; opacity: 1 !important; transform: translateY(-50%) !important; pointer-events: auto !important; z-index: 100006 !important; } body .elementor.elementor-167 .elementor-widget-button .elementor-button-wrapper { display: block !important; width: auto !important; } body .elementor.elementor-167 .elementor-widget-button .elementor-button { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: max-content !important; min-height: 42px !important; padding: 9px 18px !important; white-space: nowrap !important; } /* ======================================================= 5. POSITION NAV WIDGET AT FAR RIGHT ======================================================= */ body .elementor.elementor-167 .elementor-element.elementor-element-fc0e284, body #masthead .elementor-element-fc0e284, body .elementor-location-header .elementor-element-fc0e284 { position: absolute !important; top: 50% !important; right: 18px !important; bottom: auto !important; left: auto !important; display: block !important; flex: none !important; width: 48px !important; min-width: 48px !important; max-width: 48px !important; height: 48px !important; min-height: 48px !important; margin: 0 !important; padding: 0 !important; visibility: visible !important; opacity: 1 !important; overflow: visible !important; transform: translateY(-50%) !important; z-index: 100008 !important; } body .elementor.elementor-167 .elementor-element-fc0e284 .elementor-widget-container { position: relative !important; display: block !important; width: 48px !important; min-width: 48px !important; max-width: 48px !important; height: 48px !important; min-height: 48px !important; margin: 0 !important; padding: 0 !important; visibility: visible !important; opacity: 1 !important; overflow: visible !important; } /* ======================================================= 6. FORCE HAMBURGER TO DISPLAY Higher specificity than HFE/Elementor generated CSS. ======================================================= */ body .elementor.elementor-167 .elementor-element.elementor-element-fc0e284 .hfe-nav-menu__toggle, body .elementor.elementor-167 .elementor-element.elementor-element-fc0e284 .hfe-nav-menu__toggle.elementor-clickable { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 48px !important; min-width: 48px !important; max-width: 48px !important; height: 48px !important; min-height: 48px !important; max-height: 48px !important; margin: 0 !important; padding: 0 !important; visibility: visible !important; opacity: 1 !important; transform: none !important; pointer-events: auto !important; cursor: pointer !important; overflow: visible !important; z-index: 100010 !important; } body .elementor.elementor-167 .elementor-element-fc0e284 .hfe-nav-menu__toggle .hfe-nav-menu-icon, body .elementor.elementor-167 .elementor-element-fc0e284 .hfe-nav-menu__toggle i, body .elementor.elementor-167 .elementor-element-fc0e284 .hfe-nav-menu__toggle svg { visibility: visible !important; opacity: 1 !important; margin: 0 !important; pointer-events: none !important; } /* * Keep the desktop horizontal list hidden throughout * the tablet range. */ body .elementor.elementor-167 .elementor-element-fc0e284 nav.hfe-nav-menu__layout-horizontal { display: none !important; } /* ======================================================= 7. FULL-VIEWPORT TABLET DROPDOWN The nav widget itself is only 48px wide, so the dropdown must not inherit that width. ======================================================= */ body .elementor.elementor-167 .elementor-element-fc0e284 nav.hfe-dropdown, body .elementor.elementor-167 .elementor-element-fc0e284 nav.hfe-dropdown-expandible { position: absolute !important; top: calc(100% + 14px) !important; right: -18px !important; bottom: auto !important; left: auto !important; width: 100vw !important; min-width: 100vw !important; max-width: 100vw !important; margin: 0 !important; padding: 0 !important; transform: none !important; background: #ffffff !important; border: 0 !important; border-top: 1px solid rgba(0, 0, 0, 0.08) !important; box-shadow: 0 18px 36px rgba(0, 0, 0, 0.14) !important; max-height: calc(100vh - 76px) !important; max-height: calc(100dvh - 76px) !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; z-index: 100009 !important; } body .elementor.elementor-167 #menu-1-fc0e284 { display: block !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; padding: 8px 20px 20px !important; background: #ffffff !important; } body .elementor.elementor-167 #menu-1-fc0e284 > li { display: block !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; } body .elementor.elementor-167 #menu-1-fc0e284 > li > .hfe-has-submenu-container, body .elementor.elementor-167 #menu-1-fc0e284 > li > .hfe-has-submenu-container > a.hfe-menu-item, body .elementor.elementor-167 #menu-1-fc0e284 > li > a.hfe-menu-item { width: 100% !important; min-width: 0 !important; max-width: 100% !important; visibility: visible !important; opacity: 1 !important; } } /* ========================================================= GENESIS TURF — CORRECTED TABLET MENU PATCH Range: 768px through 1024px REPLACE the previous: "FINAL TABLET CLICK + DROPDOWN PATCH" Fixes: 1. Keeps hamburger click working 2. Centers the dropdown under the complete header 3. Makes the dropdown use the full header width 4. Restores visible dark menu text 5. Prevents submenu content from being clipped ========================================================= */ @media only screen and (min-width: 768px) and (max-width: 1024px) { /* ======================================================= HEADER POSITIONING ======================================================= */ body #masthead, body .elementor-location-header { position: relative !important; width: 100% !important; overflow: visible !important; z-index: 100000 !important; } /* * Remove positioned ancestors between the dropdown and * the complete header. The dropdown will now align against * the header rather than against the 48px hamburger widget. */ body #masthead .elementor-element-d517fe6, body .elementor-location-header .elementor-element-d517fe6, body #masthead .elementor-element-fc0e284, body .elementor-location-header .elementor-element-fc0e284, body #masthead .elementor-element-fc0e284 .elementor-widget-container, body .elementor-location-header .elementor-element-fc0e284 .elementor-widget-container { position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; overflow: visible !important; } @supports selector(.x:has(.y)) { body #masthead .e-con:has(.elementor-element-fc0e284), body #masthead .e-con-inner:has(.elementor-element-fc0e284), body #masthead .elementor-container:has(.elementor-element-fc0e284), body .elementor-location-header .e-con:has(.elementor-element-fc0e284), body .elementor-location-header .e-con-inner:has(.elementor-element-fc0e284), body .elementor-location-header .elementor-container:has(.elementor-element-fc0e284) { position: static !important; overflow: visible !important; } } /* ======================================================= NAVIGATION WIDGET AND HAMBURGER ======================================================= */ body #masthead .elementor-element-fc0e284, body .elementor-location-header .elementor-element-fc0e284 { display: block !important; flex: 0 0 48px !important; width: 48px !important; min-width: 48px !important; max-width: 48px !important; height: 48px !important; min-height: 48px !important; margin: 0 !important; padding: 0 !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; z-index: 100008 !important; } body #masthead .elementor-element-fc0e284 .elementor-widget-container, body .elementor-location-header .elementor-element-fc0e284 .elementor-widget-container { display: block !important; width: 48px !important; min-width: 48px !important; max-width: 48px !important; height: 48px !important; min-height: 48px !important; margin: 0 !important; padding: 0 !important; visibility: visible !important; opacity: 1 !important; } body #masthead .elementor-element-fc0e284 .hfe-nav-menu__toggle, body .elementor-location-header .elementor-element-fc0e284 .hfe-nav-menu__toggle { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 48px !important; min-width: 48px !important; max-width: 48px !important; height: 48px !important; min-height: 48px !important; max-height: 48px !important; margin: 0 !important; padding: 0 !important; visibility: visible !important; opacity: 1 !important; transform: none !important; pointer-events: auto !important; cursor: pointer !important; z-index: 100012 !important; } /* * The HFE toggle handles the click. Nested icons remain * visual so they cannot intercept the click event. */ body #masthead .elementor-element-fc0e284 .hfe-nav-menu__toggle > *, body .elementor-location-header .elementor-element-fc0e284 .hfe-nav-menu__toggle > * { pointer-events: none !important; } /* ======================================================= FULL-WIDTH TABLET DROPDOWN ======================================================= */ body #masthead .elementor-element-fc0e284 nav.hfe-nav-menu__layout-horizontal, body .elementor-location-header .elementor-element-fc0e284 nav.hfe-nav-menu__layout-horizontal, body #masthead .elementor-element-fc0e284 nav.hfe-dropdown, body .elementor-location-header .elementor-element-fc0e284 nav.hfe-dropdown, body #masthead .elementor-element-fc0e284 nav.hfe-dropdown-expandible, body .elementor-location-header .elementor-element-fc0e284 nav.hfe-dropdown-expandible { position: absolute !important; top: 100% !important; right: 0 !important; bottom: auto !important; left: 0 !important; display: block !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; background: #ffffff !important; border: 0 !important; border-top: 1px solid rgba(0, 0, 0, 0.08) !important; box-shadow: 0 18px 36px rgba(0, 0, 0, 0.14) !important; transform: none !important; transform-origin: top center !important; box-sizing: border-box !important; z-index: 100010 !important; } /* ======================================================= CLOSED TABLET MENU ======================================================= */ body #masthead .elementor-element-fc0e284 .hfe-nav-menu__toggle:not(.hfe-active-menu):not(.hfe-active-menu-full-width) + nav, body .elementor-location-header .elementor-element-fc0e284 .hfe-nav-menu__toggle:not(.hfe-active-menu):not(.hfe-active-menu-full-width) + nav { height: 0 !important; min-height: 0 !important; max-height: 0 !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; overflow: hidden !important; } /* ======================================================= OPEN TABLET MENU ======================================================= */ body #masthead .elementor-element-fc0e284 .hfe-nav-menu__toggle.hfe-active-menu + nav, body #masthead .elementor-element-fc0e284 .hfe-nav-menu__toggle.hfe-active-menu-full-width + nav, body .elementor-location-header .elementor-element-fc0e284 .hfe-nav-menu__toggle.hfe-active-menu + nav, body .elementor-location-header .elementor-element-fc0e284 .hfe-nav-menu__toggle.hfe-active-menu-full-width + nav, body #masthead .elementor-element-fc0e284 nav.menu-is-active, body .elementor-location-header .elementor-element-fc0e284 nav.menu-is-active, body #masthead .elementor-element-fc0e284 nav[aria-hidden="false"], body .elementor-location-header .elementor-element-fc0e284 nav[aria-hidden="false"] { height: auto !important; min-height: 0 !important; max-height: calc(100vh - 76px) !important; max-height: calc(100dvh - 76px) !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; overflow-x: hidden !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } /* ======================================================= COMPLETE MENU WIDTH ======================================================= */ body #masthead #menu-1-fc0e284, body .elementor-location-header #menu-1-fc0e284 { display: block !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: auto !important; margin: 0 !important; padding: 8px 18px 20px !important; background: #ffffff !important; box-sizing: border-box !important; } body #menu-1-fc0e284 > li { display: block !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; background: #ffffff !important; border-bottom: 1px solid #ececec !important; box-sizing: border-box !important; } body #menu-1-fc0e284 > li:last-child { border-bottom: 0 !important; } /* ======================================================= RESTORE TOP-LEVEL MENU TEXT ======================================================= */ body #menu-1-fc0e284 > li > .hfe-has-submenu-container, body #menu-1-fc0e284 > li > a.hfe-menu-item { position: relative !important; display: block !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; background: #ffffff !important; visibility: visible !important; opacity: 1 !important; } body #menu-1-fc0e284 > li > .hfe-has-submenu-container > a.hfe-menu-item, body #menu-1-fc0e284 > li > a.hfe-menu-item, body #menu-1-fc0e284 > li.current-menu-item > a.hfe-menu-item, body #menu-1-fc0e284 > li.current-menu-ancestor > .hfe-has-submenu-container > a.hfe-menu-item { position: relative !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; min-height: 52px !important; margin: 0 !important; padding: 13px 56px 13px 18px !important; color: #4e4e4e !important; background: #ffffff !important; font-size: 17px !important; line-height: 1.3 !important; font-weight: 400 !important; text-align: left !important; white-space: normal !important; visibility: visible !important; opacity: 1 !important; box-shadow: none !important; transform: none !important; box-sizing: border-box !important; } body #menu-1-fc0e284 > li:hover > .hfe-has-submenu-container > a.hfe-menu-item, body #menu-1-fc0e284 > li:focus-within > .hfe-has-submenu-container > a.hfe-menu-item { color: #4e4e4e !important; background: #f8faf7 !important; } /* ======================================================= TOP-LEVEL ARROWS ======================================================= */ body #menu-1-fc0e284 > li.menu-item-mega > .hfe-has-submenu-container > a.hfe-menu-item > .hfe-menu-toggle { position: absolute !important; top: 50% !important; right: 8px !important; bottom: auto !important; left: auto !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 42px !important; height: 42px !important; margin: 0 !important; padding: 0 !important; color: #4e4e4e !important; background: transparent !important; transform: translateY(-50%) !important; pointer-events: none !important; z-index: 5 !important; } body #menu-1-fc0e284 > li.menu-item-mega > .hfe-has-submenu-container > a.hfe-menu-item > .hfe-menu-toggle i, body #menu-1-fc0e284 > li.menu-item-mega > .hfe-has-submenu-container > a.hfe-menu-item > .hfe-menu-toggle svg { color: #4e4e4e !important; fill: currentColor !important; } /* ======================================================= RESTORE BIO-CARD TEXT ======================================================= */ body #menu-1-fc0e284 .menu-mega-bio > .hfe-has-submenu-container > a { color: #4e5d51 !important; background: transparent !important; text-align: left !important; visibility: visible !important; opacity: 1 !important; } body #menu-1-fc0e284 .menu-mega-bio > ul.sub-menu > li > a { color: #6f786f !important; background: transparent !important; text-align: left !important; visibility: visible !important; opacity: 1 !important; } /* ======================================================= RESTORE SUBMENU LINK TEXT ======================================================= */ body #menu-1-fc0e284 .menu-mega-group > ul.sub-menu > li > a { display: block !important; width: 100% !important; padding: 14px 16px !important; color: #4e4e4e !important; background: #ffffff !important; text-align: left !important; visibility: visible !important; opacity: 1 !important; } } /* ========================================================= GENESIS TURF — PRECISE DESKTOP MEGA HOVER Requires the small JS block below. Desktop only. Tablet/mobile untouched. ========================================================= */ @media only screen and (min-width: 1025px) and (hover: hover) { /* ------------------------------------------------------- 1. DISABLE ALL EXISTING PARENT-LI HOVER OPENING ------------------------------------------------------- */ body #menu-1-fc0e284 > li.menu-item-mega:hover > ul.sub-menu, body #menu-1-fc0e284 > li.menu-item-mega:focus-within > ul.sub-menu { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transform: translateX(-50%) translateY(6px) !important; z-index: 99999 !important; } /* ------------------------------------------------------- 2. OPEN ONLY WHEN JS ADDS .gt-mega-open ------------------------------------------------------- */ body #menu-1-fc0e284 > li.menu-item-mega.gt-mega-open > ul.sub-menu { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateX(-50%) translateY(0) !important; z-index: var(--gt-mega-layer) !important; } /* ------------------------------------------------------- 3. REMOVE LARGE/INVISIBLE HOVER BRIDGE Your current code creates ::before above every panel. We don't need it once JS controls the transition. ------------------------------------------------------- */ body #menu-1-fc0e284 > li.menu-item-mega > ul.sub-menu::before { content: none !important; display: none !important; width: 0 !important; height: 0 !important; pointer-events: none !important; } /* Closed menus must never catch the mouse. */ body #menu-1-fc0e284 > li.menu-item-mega:not(.gt-mega-open) > ul.sub-menu { pointer-events: none !important; } }