/* ============================================================ Divi Mega Menu — dmm.css v1.3 - Panel centered to viewport (not to menu item) - 3-column grid - Long nav titles: wrap gracefully - Flyout overflow: max-height + scroll OR 2-col auto - 4 depth levels (d0 → d1 → d2 → d3) - Full Divi .nav li ul override block ============================================================ */ /* ── CSS Variables ──────────────────────────────────────── */ :root { --dmm-bg: #ffffff; --dmm-panel-bg: #ffffff; --dmm-hover-bg: #f4f4f6; --dmm-border: #e2e2e8; --dmm-text: #1a1a2e; --dmm-muted: #52526a; --dmm-accent: #2d6a4f; --dmm-radius: 10px; --dmm-panel-w: 220px; /* 1-col panel width */ --dmm-flyout-w: 220px; /* flyout panel width */ --dmm-font: inherit; --dmm-ease: cubic-bezier(.4, 0, .2, 1); --dmm-shadow: 0 8px 30px rgba(0,0,0,0.11), 0 2px 8px rgba(0,0,0,0.06); } #top-menu li li{ padding:8px!important; } /* ══════════════════════════════════════════════════════════ DIVI THEME OVERRIDES .nav li ul sets position:absolute, width:240px, visibility:hidden, border-top on ALL nested

— position:relative anchors nothing now (panel is fixed+JS positioned) but keep for toggle logic */ .dmm-menu > .dmm-item { position: relative !important; list-style: none; display: flex; align-items: stretch; } /* ── Shared: plain link + toggle button ─────────────────── */ /* FIX: remove white-space:nowrap, add max-width + word wrap */ .dmm-menu .dmm-link, .dmm-menu .dmm-toggle { display: inline-flex; align-items: center; gap: 4px; padding: 0 10px; color: var(--dmm-muted); text-decoration: none !important; font-size: inherit; font-weight: inherit; font-family: var(--dmm-font); letter-spacing: inherit; text-transform: inherit; white-space: normal; word-break: break-word; text-align: center; background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; transition: color 0.18s, border-color 0.18s; line-height: 1.3; -webkit-font-smoothing: antialiased; } .dmm-menu .dmm-link:hover, .dmm-menu .dmm-toggle:hover { color: var(--dmm-text); border-bottom-color: var(--dmm-accent); } .dmm-menu .current-menu-item .dmm-link, .dmm-menu .current-menu-ancestor .dmm-toggle, .dmm-menu .dmm-has-panel.is-open .dmm-toggle { color: var(--dmm-accent); border-bottom-color: var(--dmm-accent); } .dmm-panel { pointer-events: none; } .dmm-has-panel.is-open .dmm-panel { pointer-events: all; } /* Nested inside toggle is decorative */ .dmm-toggle-link { color: inherit !important; text-decoration: none !important; pointer-events: none; font: inherit; background: none; border: none; padding: 0; } /* Down arrow on toggle */ .dmm-arrow { width: 12px; height: 12px; flex-shrink: 0; color: var(--dmm-muted); transition: transform 0.22s var(--dmm-ease); margin-left: 2px; } .dmm-has-panel:hover .dmm-arrow, .dmm-has-panel.is-open .dmm-arrow { transform: rotate(180deg); color: var(--dmm-accent); } /* ── Mega Panel ─────────────────────────────────────────── */ /* position:fixed — JS sets exact top + left to center it */ .dmm-panel { position: fixed !important; width: min(var(--dmm-panel-w), calc(100vw - 32px)); background: var(--dmm-panel-bg); border: 1px solid var(--dmm-border); border-radius: var(--dmm-radius); padding: 20px 0px; box-shadow: var(--dmm-shadow); opacity: 0; pointer-events: none; z-index: 99999; transform: none; transition: opacity 0.18s var(--dmm-ease); } .dmm-has-panel:hover .dmm-panel, .dmm-has-panel.is-open .dmm-panel { opacity: 1; transform: translateY(0); pointer-events: all; } /* Small caret */ .dmm-panel::before, .dmm-panel::after { content: ''; position: absolute; /* JS sets --dmm-caret-left via inline style */ left: var(--dmm-caret-left, 50%); transform: translateX(-50%); width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; } .dmm-panel::before { top: -7px; border-bottom: 7px solid var(--dmm-border); } .dmm-panel::after { top: -6px; border-bottom: 6px solid var(--dmm-panel-bg); } /* ── 3-column grid ──────────────────────────────────────── */ .dmm-panel-list { list-style: none !important; margin: 0 !important; padding: 0 !important; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; } /* ── Depth-1 child links ────────────────────────────────── */ .dmm-child-item { list-style: none; } .dmm-child-link { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; color: var(--dmm-muted) !important; text-decoration: none !important; font-size: 0.875rem; border-radius: 7px; transition: background 0.14s, color 0.14s; gap: 6px; white-space: normal; word-break: break-word; line-height: 1.35; } .dmm-child-link:hover { background: var(--dmm-hover-bg); color: var(--dmm-text) !important; } .dmm-child-active .dmm-child-link { color: var(--dmm-accent) !important; font-weight: 500; } /* ══════════════════════════════════════════════════════════ FLYOUT PANELS (depth 1→2 and depth 2→3) ══════════════════════════════════════════════════════════ */ /* Any item that triggers a flyout */ .dmm-flyout-item { position: relative !important; } /* Right-pointing arrow */ .dmm-flyout-arrow { width: 13px; height: 13px; flex-shrink: 0; color: var(--dmm-muted); transition: color 0.15s, transform 0.15s; margin-left: auto; } .dmm-flyout-item:hover > a .dmm-flyout-arrow { color: var(--dmm-accent); transform: translateX(2px); } .dmm-flyout-item:hover > .dmm-flyout-trigger, .dmm-flyout-item:hover > .dmm-child-link { background: var(--dmm-hover-bg) !important; color: var(--dmm-text) !important; } /* ── Flyout panel shared styles (PORTALLED to body by JS) ── */ /* position:fixed and top/left are set entirely by JS. CSS only handles appearance and the hidden default state. */ .dmm-flyout-panel, .dmm-flyout-panel-d3 { position: fixed !important; /* JS sets top + left */ width: var(--dmm-flyout-w); background: var(--dmm-panel-bg); border: 1px solid var(--dmm-border); border-radius: var(--dmm-radius); padding: 8px; box-shadow: var(--dmm-shadow); max-height: 70vh; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--dmm-border) transparent; list-style: none !important; margin: 0 !important; /* Hidden by default — JS toggles visibility + opacity */ opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(4px); transition: opacity 0.15s var(--dmm-ease), transform 0.15s var(--dmm-ease); z-index: 100000 !important; } .dmm-flyout-panel::-webkit-scrollbar, .dmm-flyout-panel-d3::-webkit-scrollbar { width: 4px; } .dmm-flyout-panel::-webkit-scrollbar-thumb, .dmm-flyout-panel-d3::-webkit-scrollbar-thumb { background: var(--dmm-border); border-radius: 4px; } /* CSS hover rules removed — JS handles all show/hide via inline styles */ /* 2-col layout when JS detects tall content */ .dmm-flyout-panel.dmm-flyout-2col { columns: 2; column-gap: 4px; max-height: none; overflow-y: visible; } .dmm-flyout-panel.dmm-flyout-2col .dmm-flyout-link-item, .dmm-flyout-panel.dmm-flyout-2col .dmm-flyout-link-item-d3 { break-inside: avoid; } /* ── Depth-2 links (inside first flyout) ───────────────── */ .dmm-flyout-link-item { list-style: none !important; } .dmm-flyout-link { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 9px 12px !important; color: var(--dmm-muted) !important; text-decoration: none !important; font-size: 0.875rem !important; border-radius: 7px !important; transition: background 0.14s, color 0.14s !important; gap: 6px !important; white-space: normal !important; word-break: break-word !important; line-height: 1.3 !important; } .dmm-flyout-link:hover { background: var(--dmm-hover-bg) !important; color: var(--dmm-text) !important; } .dmm-flyout-link-active .dmm-flyout-link { color: var(--dmm-accent) !important; font-weight: 500 !important; } /* Depth-2 item that itself has children (second flyout) */ .dmm-flyout-d2 { position: static !important; } .dmm-flyout-link-d3 { display: block !important; padding: 8px 12px !important; color: var(--dmm-muted) !important; text-decoration: none !important; font-size: 0.85rem !important; border-radius: 7px !important; transition: background 0.14s, color 0.14s !important; white-space: normal !important; word-break: break-word !important; line-height: 1.3 !important; } .dmm-flyout-link-d3:hover { background: var(--dmm-hover-bg) !important; color: var(--dmm-text) !important; } /* ══════════════════════════════════════════════════════════ MOBILE HAMBURGER ══════════════════════════════════════════════════════════ */ .dmm-burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 36px; height: 36px; cursor: pointer; padding: 6px; border: 1px solid var(--dmm-border); background: transparent; border-radius: 6px; flex-shrink: 0; margin-left: 12px; } .dmm-burger span { display: block; width: 100%; height: 2px; background: var(--dmm-text); border-radius: 2px; transition: transform 0.28s var(--dmm-ease), opacity 0.18s; } .dmm-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .dmm-burger.is-open span:nth-child(2) { opacity: 0; } .dmm-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ══════════════════════════════════════════════════════════ MOBILE DRAWER ══════════════════════════════════════════════════════════ */ .dmm-drawer ul, .dmm-drawer li { all: unset; display: block; box-sizing: border-box; } .dmm-drawer { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--dmm-bg); overflow-y: auto; overscroll-behavior: contain; z-index: 999999; transform: translateX(100%); transition: transform 0.32s var(--dmm-ease); -webkit-overflow-scrolling: touch; } .dmm-drawer.is-open { transform: translateX(0); } .dmm-drawer-inner { padding: 80px 24px 80px; } /* ── Mobile list structure ──────────────────────────────── */ ul.dmm-mob-list { list-style: none !important; margin: 0 !important; padding: 0 !important; flex-direction:column; } ul.dmm-mob-list li{ padding:20px; } .dmm-mob-item { border-bottom: 1px solid var(--dmm-border); } .dmm-mob-item:last-child { border-bottom: none; } /* Toggle buttons — depth-0 */ .dmm-mob-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 15px 4px; background: none; border: none; color: var(--dmm-text); font-size: 1rem; font-weight: 500; font-family: var(--dmm-font); cursor: pointer; text-align: left; gap: 10px; } .dmm-mob-toggle a { color: inherit !important; text-decoration: none !important; pointer-events: none; flex: 1; text-align: left; } .dmm-mob-toggle .dmm-arrow { width: 16px; height: 16px; color: var(--dmm-muted); } .dmm-mob-toggle.is-open .dmm-arrow { transform: rotate(180deg); color: var(--dmm-accent); } /* Sub-toggle buttons — depth 1+ */ .dmm-mob-toggle-sub { padding: 12px 4px; font-size: 0.95rem; font-weight: 400; } .dmm-mob-toggle-sub .dmm-arrow { width: 14px; height: 14px; } /* Plain links */ .dmm-mob-link { display: block; padding: 15px 4px; color: var(--dmm-text) !important; text-decoration: none !important; font-size: 1rem; font-weight: 500; } .dmm-mob-link:hover { color: var(--dmm-accent) !important; } /* Sub-lists — all depths */ .dmm-mob-sub { list-style: none !important; margin: 0 !important; padding: 0 !important; display: none; } .dmm-mob-sub.is-open { display: block; } /* Sub-links with depth-based indentation */ .dmm-mob-sub-link { display: block; padding: 10px 10px; color: var(--dmm-muted) !important; text-decoration: none !important; font-size: 0.9rem; border-radius: 7px; transition: background 0.14s, color 0.14s; } .dmm-mob-sub-link:hover { background: var(--dmm-hover-bg); color: var(--dmm-text) !important; } /* Depth-based indentation for mobile */ .dmm-mob-depth-1 > .dmm-mob-sub-link, .dmm-mob-depth-1 > .dmm-mob-toggle-sub { padding-left: 12px; } .dmm-mob-depth-2 > .dmm-mob-sub-link, .dmm-mob-depth-2 > .dmm-mob-toggle-sub { padding-left: 24px; font-size: 0.875rem; } .dmm-mob-depth-3 > .dmm-mob-sub-link, .dmm-mob-depth-3 > .dmm-mob-toggle-sub { padding-left: 36px; font-size: 0.85rem; color: #999; } .is-active > .dmm-mob-link, .is-active > .dmm-mob-toggle a { color: var(--dmm-accent) !important; } /* ══════════════════════════════════════════════════════════ RESPONSIVE ══════════════════════════════════════════════════════════ */ @media (max-width: 980px) { #mobile_menu svg{display:none;} #top-menu-nav ul.dmm-menu > .dmm-item { display: none !important; } .dmm-burger { display: flex !important; } .dmm-drawer { display: block; } li#menu-item-12505 button { background: #fff; border: none; font-family: 'Montserrat'; } } @media (min-width: 981px) { .dmm-drawer { display: none !important; transform: translateX(100%) !important; } .dmm-burger { display: none !important; } }