/*
 * Shared FALLBACK styles — loaded ONLY for a page whose design ships no JS of its own (a
 * platform-built site, not an imported design). Drives the dependency-free mobile menu +
 * click-dropdowns wired to data-zar-* hooks, and a theme-aware hover for the platform's own
 * chrome nav. An imported design brings its own nav CSS, so this never loads there.
 */
[data-zar-menu].zar-open { display: block !important; }
[data-zar-dropdown].zar-open > [data-zar-submenu],
[data-zar-dropdown].zar-open [data-zar-submenu] { display: block !important; }

/*
    Theme-aware hover for the platform's OWN chrome (header/footer nav + dropdowns).
    Scoped to data-zar-* hooks. The hover tint mixes currentColor (always the readable text
    colour) with transparent, so it stays a faint wash of the text in BOTH light and dark —
    it can never resolve to black-on-black or white-on-white.
*/
[data-zar-nav] a[data-zar-item] { transition: opacity .15s ease, background-color .15s ease; border-radius: 6px; }
[data-zar-nav="header"] a[data-zar-item]:hover { opacity: .7; }
[data-zar-children] a[data-zar-item]:hover,
[data-zar-nav="footer"] a[data-zar-item]:hover {
    background: color-mix(in srgb, currentColor 12%, transparent);
}