/* helpmegrow-addendum.css — small, hand-authored gap-fill on top of the vendored * styles.min.css (don't hand-edit that file — see other sites' *-addendum.css files * for the same convention). * * Genuine accessibility bug reproduced on the live site itself: jquery-accessibleMegaMenu.min.js * (vendored, initialized in scripts.min.js) correctly implements full keyboard support for the * top nav (arrow keys, Home/End, Escape) -- on ArrowDown it sets aria-expanded="true" and adds * the plugin's own `openClass` ("open") to the .nav-dropdown panel, then tries to focus the first * tabbable link inside it. But styles.min.css only reveals .nav-dropdown via :hover/.hover * (jQuery's own hoverClass, toggled on real mouse hover) -- it never checks .open or * [aria-expanded], so a keyboard-triggered expansion sets the right ARIA state but the panel * stays display:none. With nothing visible inside it to focus, focus falls back to , * silently breaking arrow-key navigation into the submenu. Confirmed via Playwright against * both localhost and https://helpmegrowmn.org/HMG/index.html -- same symptom on both. */ .header .bottom-nav ul li .nav-dropdown.open, .header .bottom-nav ul li .nav-dropdown[aria-expanded="true"] { display: block; position: absolute; width: 150%; left: 0; padding: 15px; border: 5px solid #dedede; background: #fff; margin-top: 10px; } .header .bottom-nav ul li .nav-dropdown.two-col.open, .header .bottom-nav ul li .nav-dropdown.two-col[aria-expanded="true"] { width: 260%; } /* styles.min.css also gates the submenu's OWN inner list/link styling on :hover/.hover, not just the outer panel box (see the rules above) -- the plugin's mouseout handler removes .hover immediately but delays the actual close (aria-expanded/.open reset) by 250ms, so for that window the outer box still shows via the rules above while everything inside it (list margin/padding, item borders, link color) reverts to unstyled browser defaults, since those inner rules only ever had a :hover/.hover path. Mirror each one, scoped to the open panel. */ .header .bottom-nav ul li .nav-dropdown.open ul, .header .bottom-nav ul li .nav-dropdown[aria-expanded="true"] ul { margin: 0; padding: 0; } .header .bottom-nav ul li .nav-dropdown.open ul li, .header .bottom-nav ul li .nav-dropdown[aria-expanded="true"] ul li { float: none; display: block; margin: 0; padding: 5px 1px; border-bottom: 1px solid #d2d2d2; text-align: left; } .header .bottom-nav ul li .nav-dropdown.open ul li:last-child, .header .bottom-nav ul li .nav-dropdown[aria-expanded="true"] ul li:last-child { border-bottom: 0; } .header .bottom-nav ul li .nav-dropdown.open ul li:hover, .header .bottom-nav ul li .nav-dropdown[aria-expanded="true"] ul li:hover { background: none; } .header .bottom-nav ul li .nav-dropdown.open ul li a, .header .bottom-nav ul li .nav-dropdown[aria-expanded="true"] ul li a { color: #6d6c6c; text-decoration: none; } .header .bottom-nav ul li .nav-dropdown.open ul li a:hover, .header .bottom-nav ul li .nav-dropdown[aria-expanded="true"] ul li a:hover { color: #c11028; } /* The trigger's own background highlight (li:hover/li.hover { background:#dedede }) lives on the

, one level up from .nav-dropdown, so it can't be reached by a descendant selector -- :has() is needed to check "this li contains an open panel" from the li itself. */ .header .bottom-nav ul li:has(.nav-dropdown.open), .header .bottom-nav ul li:has(.nav-dropdown[aria-expanded="true"]) { background: #dedede; } /* A

can only hold phrasing content, but CMBoxComponent's edit-mode click-to-select overlay wraps its rendered component in a

-- putting that inside a real

makes the browser auto-close the

right before the

, silently splitting the element and losing whatever styling/containment the

was providing. Every CTA wrapper that used to be a bare

(no class of its own, just riding styles.min.css's default p{margin:10px 0;font-size:95%}) was swapped to

instead; this replicates that default so the swap is visually a no-op outside of edit mode. */ .cta-p { margin: 10px 0; font-size: 95%; } /* Live's larger-summary-text rule is `p.larger-font` -- tag-qualified to a real

element. RichText renders its wrapper as a (or whatever `tag` prop is passed), so passing class="larger-font" to it never actually matched live's rule; the class sat there as a no-op. Re-declared here without the tag qualifier so it works on whatever element it's applied to, independent of the summary content's own markup shape. */ .larger-font { font-size: 110%; line-height: 150%; }