/* Classic Columns */ /* * Mega menu design — applied when a top-level menu item has the "sr-mega" * CSS class (markup produced by inc/custom/mega-menu-walker.php): * * li.sr-mega-trigger * └ div.sr-mega-panel * └ ul.sr-mega-columns * └ li.sr-mega-column * ├ a.sr-mega-col-header (span when the item's URL is # or empty) * └ ul.sr-mega-col-items > li > a * * Items with the "sr-no-title" class render no header and the li gets * .sr-mega-column--no-title. With a #/empty URL nothing else is output * (continuation column, e.g. one long list split across two columns); with a * real URL the item renders as a plain standalone link (a.sr-mega-col-link). * Each design should pad continuation columns on desktop so their list aligns * with the sibling list they continue, leave standalone link columns unpadded * (link sits level with the titles), and style .sr-mega-col-link like a * column item link. * * Selected via SRD Theme → General → Mega Menu Design. To add a new design, * create mega-style-N.css in this folder; the first-line comment is its * dropdown label. * * Menu design compatibility — mega designs are CSS-only and rely on the * active menu design (assets/menus/menu-style-N/) providing: * 1. template.php rendering with SR_Mega_Menu_Walker, * 2. the .sr_main_menu_wrap container class (all selectors are scoped to it), * 3. script.js treating .sr-mega-panel like a .sub-menu dropdown: mobile * accordion (.active + inline max-height), desktop click-only triggers * (.sr-click-toggle / .sr-open), and aria-expanded syncing. * * Mobile contract (≤1080px): the active menu design's script.js toggles the * .active class and an inline max-height on .sr-mega-panel — every design * must keep the accordion rules (max-height: 0 / overflow: hidden) below. * Mobile text must go through var(--sr-mobile-menu-text, ) and * var(--sr-mobile-menu-sub-weight, ) so the SRD Theme → General → * Mobile Menu settings apply. */ header .sr_main_menu_wrap .sr-mega-columns, header .sr_main_menu_wrap .sr-mega-col-items { list-style: none; margin: 0; padding: 0; } @media (min-width: 1081px) { header .sr_main_menu_wrap .sr-mega-panel { position: absolute; top: 100%; left: 0; z-index: 999; min-width: max-content; padding: 24px 28px; background: var(--sr-dropdown-bg, #7a580a); border: 1px solid var(--sr-dropdown-border, #b09950); visibility: hidden; opacity: 0; transition: opacity 0.2s ease, visibility 0.2s ease; } /* Real-URL triggers open on :hover/:focus-within. Triggers with href="#" or no href get .sr-click-toggle from the menu design's script.js and are click-only: the panel shows when script.js toggles .sr-open on the li. */ header .sr_main_menu_wrap .sr-mega-trigger:not(.sr-click-toggle):hover > .sr-mega-panel, header .sr_main_menu_wrap .sr-mega-trigger:not(.sr-click-toggle):focus-within > .sr-mega-panel, header .sr_main_menu_wrap .sr-mega-trigger.sr-open > .sr-mega-panel { opacity: 1; visibility: visible; } header .sr_main_menu_wrap .sr-mega-columns { display: flex; gap: 2rem; } header .sr_main_menu_wrap .sr-mega-column { min-width: 160px; } header .sr_main_menu_wrap .sr-mega-col-header { display: block; color: #ffd26a; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; line-height: 20px; padding-bottom: 8px; border-bottom: 1px solid #b09950; margin-bottom: 8px; } header .sr_main_menu_wrap span.sr-mega-col-header { cursor: default; } /* Continuation columns (sr-no-title with a list) — pad down to align with the sibling list they continue (20px line + 8px padding + 1px border + 8px margin). Standalone link columns get no pad: the link sits at the top, level with the column titles. */ header .sr_main_menu_wrap .sr-mega-column--no-title:has(> .sr-mega-col-items) { padding-top: 37px; } /* Standalone link column (sr-no-title + real URL) — styled like a column item link. */ header .sr_main_menu_wrap a.sr-mega-col-link { display: block; padding: 6px 10px; color: var(--sr-dropdown-text, #fff); } header .sr_main_menu_wrap a.sr-mega-col-link:hover { background: var(--sr-dropdown-hover-bg, rgba(255, 255, 255, 0.15)); } header .sr_main_menu_wrap .sr-mega-col-items { margin-top: 4px; } header .sr_main_menu_wrap .sr-mega-col-items > li > a { display: block; padding: 6px 10px; color: var(--sr-dropdown-text, #fff); } header .sr_main_menu_wrap .sr-mega-col-items > li > a:hover { background: var(--sr-dropdown-hover-bg, rgba(255, 255, 255, 0.15)); } } @media (max-width: 1080px) { /* Mega panel accordion — .active + inline max-height set by the menu design's script.js */ header .sr_main_menu_wrap .sr-mega-panel { max-height: 0; overflow: hidden; transition: max-height 0.35s ease, opacity 0.25s ease; opacity: 0; } header .sr_main_menu_wrap .sr-mega-panel.active { opacity: 1; } header .sr_main_menu_wrap .sr-mega-columns { display: flex; flex-direction: column; gap: 0; padding: 10px 0 0 15px; } header .sr_main_menu_wrap .sr-mega-column { min-width: 0; margin-bottom: 12px; } /* A headerless continuation column (it has a list, unlike a standalone link) belongs to the list above it — remove the gap between the two. */ header .sr_main_menu_wrap .sr-mega-column:has(+ .sr-mega-column--no-title > .sr-mega-col-items) { margin-bottom: 0; } header .sr_main_menu_wrap a.sr-mega-col-link { display: block; padding: 6px 10px 6px 16px; color: var(--sr-mobile-menu-text, #555); font-size: 16px; font-weight: var(--sr-mobile-menu-sub-weight, 400); } header .sr_main_menu_wrap .sr-mega-col-header { display: block; color: var(--sr-mobile-menu-text, #333); font-size: 18px; font-weight: 700; margin-bottom: 6px; } header .sr_main_menu_wrap .sr-mega-col-items > li > a { display: block; padding: 6px 10px 6px 16px; color: var(--sr-mobile-menu-text, #555); font-size: 16px; font-weight: var(--sr-mobile-menu-sub-weight, 400); } }