/* athena-ui-fixes.css Navigation + layout fixes for the Athena Cleaning clone. Loaded last in so it overrides Elementor's generated CSS. Scoping rules (verified against the live DOM): - Desktop mega-menu dropdowns live in red panels #C40E0E (containers a3eac3a / 7c54e97 / 337c658) and only show at >1024px (tablet+ uses the burger menu). All dropdown rules are gated to min-width:1025px so the light-background mobile burger menu is never touched. - The top header bar menu is a different widget on a white bar, so none of these selectors reach it. ============================================================ */ /* ---------- 1. Desktop dropdown panels: readable white text ---------- Items are #FFF by default but flip to #000 on :focus / .elementor-item-active, which is unreadable on the red panel. Force white across every state. */ @media (min-width: 1025px) { .elementor-element-a3eac3a .elementor-nav-menu--main .elementor-item, .elementor-element-a3eac3a .elementor-nav-menu--main .elementor-item:link, .elementor-element-a3eac3a .elementor-nav-menu--main .elementor-item:visited, .elementor-element-a3eac3a .elementor-nav-menu--main .elementor-item:hover, .elementor-element-a3eac3a .elementor-nav-menu--main .elementor-item:focus, .elementor-element-a3eac3a .elementor-nav-menu--main .elementor-item.elementor-item-active, .elementor-element-7c54e97 .elementor-nav-menu--main .elementor-item, .elementor-element-7c54e97 .elementor-nav-menu--main .elementor-item:link, .elementor-element-7c54e97 .elementor-nav-menu--main .elementor-item:visited, .elementor-element-7c54e97 .elementor-nav-menu--main .elementor-item:hover, .elementor-element-7c54e97 .elementor-nav-menu--main .elementor-item:focus, .elementor-element-7c54e97 .elementor-nav-menu--main .elementor-item.elementor-item-active, .elementor-element-337c658 .elementor-nav-menu--main .elementor-item, .elementor-element-337c658 .elementor-nav-menu--main .elementor-item:link, .elementor-element-337c658 .elementor-nav-menu--main .elementor-item:visited, .elementor-element-337c658 .elementor-nav-menu--main .elementor-item:hover, .elementor-element-337c658 .elementor-nav-menu--main .elementor-item:focus, .elementor-element-337c658 .elementor-nav-menu--main .elementor-item.elementor-item-active { color: #ffffff !important; fill: #ffffff !important; } /* keep a subtle hover affordance instead of the colour swap */ .elementor-element-a3eac3a .elementor-nav-menu--main .elementor-item:hover, .elementor-element-7c54e97 .elementor-nav-menu--main .elementor-item:hover, .elementor-element-337c658 .elementor-nav-menu--main .elementor-item:hover { opacity: .82; text-decoration: underline; text-underline-offset: 3px; } /* ---------- 2. Desktop dropdown panels: multi-column, no wasted space ---- The panels carry --width:30%, so items rendered as one narrow column with the rest of the red band empty. Give the panel a content-sized width and flow items into 2 columns to halve the height and remove the dead space. */ .elementor-element-a3eac3a, .elementor-element-7c54e97, .elementor-element-337c658 { --width: 540px !important; max-width: 90vw; } .elementor-element-a3eac3a .elementor-nav-menu--main > ul.elementor-nav-menu, .elementor-element-7c54e97 .elementor-nav-menu--main > ul.elementor-nav-menu, .elementor-element-337c658 .elementor-nav-menu--main > ul.elementor-nav-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 36px; width: 100%; } /* tighten vertical rhythm now that items sit in a grid */ .elementor-element-a3eac3a .elementor-nav-menu--main .elementor-item, .elementor-element-7c54e97 .elementor-nav-menu--main .elementor-item, .elementor-element-337c658 .elementor-nav-menu--main .elementor-item { padding-top: 9px !important; padding-bottom: 9px !important; } } /* ---------- 3. Footer "Our Services" links: contrast + columns ---------- Links inherited the global red (#C40E0E) on the blue band (#0181F5) — fails contrast. Make them white and flow into columns to fill the band. */ .athena-footer-services-nav h2, .athena-footer-services-nav .elementor-heading-title { color: #ffffff !important; } .athena-footer-services-nav a, .athena-footer-services-nav a:link, .athena-footer-services-nav a:visited { color: #ffffff !important; } .athena-footer-services-nav a:hover, .athena-footer-services-nav a:focus { color: #ffe9d6 !important; text-decoration: underline; } @media (min-width: 768px) { .athena-footer-services-nav ul, .athena-footer-services-nav .elementor-icon-list-items { column-count: 3; column-gap: 32px; } .athena-footer-services-nav ul > li, .athena-footer-services-nav .elementor-icon-list-items > li { break-inside: avoid; } } /* ---------- 4. Footer order: keep the copyright line LAST ---------- DOM order put the town-links block (.areas-we-serve) after the copyright. Make the footer a flex column and reorder so copyright (inside the blue band) renders below the town links. The 4-column footer block lives in a separate section above