/*
 * Mobile "Products" mega-menu accordion fix.
 *
 * assets/theme/js/plugins/meanmenu.min.js turns every nested <ul> inside
 * the mobile nav into an accordion by appending a "+" toggle
 * (a.mean-expand) to that <ul>'s own parent element, then positions every
 * such toggle with `position: absolute; top: 0; inset-inline-end: 0;`
 * (main.css, ".mean-container .mean-nav ul li a.mean-expand") — which
 * resolves against the nearest *positioned* ancestor.
 *
 * core/views/partials/front/main-nav.php wraps each product category in
 * the "Other Categories" columns as its own <div class="mega-menu-category">
 * (a title + a <ul>) so each gets its own toggle instead of them colliding
 * — but a plain <div> has no `position` of its own, so the browser skips
 * right past it to the shared column <li> instead. With 2+ categories in
 * one column (e.g. 5 categories split across 2 columns, per
 * PageContentSchema/TaxonomyService — Drying Systems gets its own column,
 * the rest are split evenly), every category's toggle in that column
 * landed on the exact same spot (top of the <li>), so only the topmost one
 * was visible/tappable and the others were dead, invisible buttons
 * underneath it — the "Products" submenu looked broken or only partially
 * expandable on mobile/tablet.
 *
 * Making the category div itself the positioned ancestor puts each
 * toggle back next to its own title, matching how the single-category
 * "Drying Systems" column (one <ul> directly in its <li>) already worked.
 *
 * That alone wasn't enough, though (confirmed by driving a real headless
 * browser against /product-category/automation-control and measuring the
 * rendered boxes): main.css floats every mobile nav link
 * (".mean-container .mean-nav ul li a { float: left; ... }"), and a floated
 * child only inflates its parent's height when that parent itself starts a
 * new block-formatting context. The "Drying Systems" <li> gets one for
 * free because it's floated itself; a plain <div> is not, so each
 * .mega-menu-category collapsed to 0px tall — its floated title and
 * absolutely-positioned "+" toggle both fell outside its own box. With
 * every category in a column collapsed to zero height, they all rendered
 * stacked on the exact same spot (only nudged apart by the "mt-3" margin,
 * not by any real content height), so titles and "+" icons from 2-3
 * categories painted directly on top of each other — reading, in a
 * screenshot, as one garbled icon plus a couple of rows with no icon at
 * all, and taps landing on whichever category happened to paint last.
 * `display: flow-root` gives the div its own block-formatting context so
 * it properly contains its floated title (same fix as the classic
 * `overflow: hidden` clearfix, without that property's risk of clipping
 * anything that should overflow it).
 */
.mean-container .mean-nav .mega-menu-category {
    position: relative;
    display: flow-root;
}

/*
 * main.css's open/active toggle coloring (".mean-nav ul li.dropdown-opened
 * > a.mean-expand.mean-clicked") only matches when that class lands on an
 * <li> — meanmenu adds "dropdown-opened" to the toggle's own parent
 * (see above), which for a category toggle is the <div> above, not an
 * <li>, so an opened category's "+" never got the site's active-state
 * highlight (has-theme-light-blue, the theme this site's offcanvas uses)
 * that every other opened menu item gets. Mirrors that same rule for the
 * div case.
 */
.offcanvas-area.has-theme-light-blue .mean-container .mean-nav .mega-menu-category.dropdown-opened > a:not(.mean-expand) {
    color: var(--rs-theme-light-blue);
}

.offcanvas-area.has-theme-light-blue .mean-container .mean-nav .mega-menu-category.dropdown-opened > a.mean-expand.mean-clicked {
    background: var(--rs-theme-light-blue);
    color: var(--rs-white);
}