/* ========================================================== Mega Menu Block v2 – Frontend Styles ========================================================== */ /* ── Wrapper ────────────────────────────────────────────────── */ .mega-menu-block-wrapper { display: inline-block; position: static; } /* ── Trigger Button ─────────────────────────────────────────── */ .mega-menu-trigger { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 9px 12px; background: transparent; border: 1.5px solid #c8c0b8; border-radius: 4px; font-family: inherit; font-size: 14px; font-weight: 500; color: #1a1a1a; cursor: pointer; letter-spacing: 0.01em; transition: border-color 0.18s ease, background 0.18s ease; line-height: 1; white-space: nowrap; } .mega-menu-trigger:hover, .mega-menu-trigger:focus-visible { border-color: #1a1a1a; outline: none; } .mega-menu-trigger.is-active { border-color: #1a1a1a; } .mega-menu-grid-icon { flex-shrink: 0; display: block; } /* ── Dropdown panel ─────────────────────────────────────────── */ /* * The dropdown is moved to by JS, so position:fixed works * cleanly from the viewport regardless of parent overflow/stacking. * `top` is set inline by JS to sit below the nav bar bottom edge. */ .mega-menu-dropdown { display: none; /* JS switches to block then adds is-open */ position: fixed; top: 0; /* overridden by JS */ left: 0; width: 100%; background: #ffffff; border-top: 2px solid #1a1a1a; border-bottom: 1px solid #e5e0da; box-shadow: 0 8px 32px rgba( 0, 0, 0, 0.09 ); z-index: 99999; opacity: 0; transform: translateY( -6px ); transition: opacity 0.22s ease, transform 0.22s ease; max-height: 80vh; overflow-y: auto; } .mega-menu-dropdown.is-open { opacity: 1; transform: translateY( 0 ); } /* ── Inner container ────────────────────────────────────────── */ .mega-menu-inner { max-width: 1590px; margin: 0 auto; padding: 0 32px 32px; } /* ── Header row ─────────────────────────────────────────────── */ .mega-menu-header { display: flex; align-items: center; gap: 20px; padding: 18px 0; border-bottom: 1px solid #ede8e3; margin-bottom: 24px; } .mega-menu-close { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; background: transparent; border: 1.5px solid #1a1a1a; border-radius: 4px; font-family: inherit; font-size: 13px; font-weight: 500; color: #1a1a1a; cursor: pointer; transition: background 0.15s ease; line-height: 1; } .mega-menu-close:hover { background: #f5f2ef; } .mega-menu-header-title { font-family: inherit; font-size: 15px; font-weight: 600; color: #1a1a1a; letter-spacing: 0.02em; } /* ── Content area (InnerBlocks output) ──────────────────────── */ .mega-menu-content { } /* core/columns inside the mega menu */ .mega-menu-content .wp-block-columns { gap: 0 !important; } .mega-menu-content .wp-block-column { padding: 0 24px 0 0; border-right: 1px solid #ede8e3; } .mega-menu-content .wp-block-column:last-child { border-right: none; padding-right: 0; } .mega-menu-content .wp-block-column:not( :first-child ) { padding-left: 24px; } /* Headings */ .mega-menu-content h1, .mega-menu-content h2, .mega-menu-content h3, .mega-menu-content h4 { font-size: 15px; font-weight: 700; color: #1a1a1a; margin: 0 0 12px; } /* Lists */ .mega-menu-content ul, .mega-menu-content ol { padding-left: 0; list-style: none; margin: 0; } .mega-menu-content li + li { margin-top: 6px; } .mega-menu-content li a, .mega-menu-content a { font-size: 13.5px; color: #3a3a3a; text-decoration: none; transition: color 0.14s ease; } .mega-menu-content li a:hover, .mega-menu-content a:hover { color: #000; } /* ── Responsive ─────────────────────────────────────────────── */ @media ( max-width: 768px ) { .mega-menu-inner { padding: 0 16px 24px; } .mega-menu-content .wp-block-columns { flex-direction: column; } .mega-menu-content .wp-block-column { border-right: none; padding-right: 0; border-bottom: 1px solid #ede8e3; padding-bottom: 16px; margin-bottom: 16px; } .mega-menu-content .wp-block-column:not( :first-child ) { padding-left: 0; } }