/*
 * blog-vue menus (B14): what Flatsome's JavaScript did for the header bar and the phone menu.
 * The markup is Flatsome's (View\MainMenu) and flatsome.css styles it; these rules only cover the states
 * that flatsome.js / magnific-popup used to set, plus the fallbacks when Vue does not run.
 */

/* Dropdowns open on keyboard focus too (html stays .no-js: flatsome.css opens them on :hover). */
.no-js li.has-dropdown:focus-within > .nav-dropdown { opacity: 1; max-height: inherit; left: -15px; }

/* Phone menu (off-canvas-left). The Vue island ("menu" in js/blog.js) sets .mn-open / .mfp-ready. */
.mn-offcanvas { display: none; }
.mn-offcanvas.mn-open { display: block; }
.mn-offcanvas .mfp-wrap { overflow: hidden auto; }
.mn-offcanvas .mfp-close { color: #fff; }

/* Without Vue: the hamburger link (#main-menu) opens it through :target, every submenu is open, no toggles. */
.mn-offcanvas:not(.mn-vue):has(#main-menu:target) { display: block; }
.mn-offcanvas:not(.mn-vue):has(#main-menu:target) .mfp-bg { opacity: .6; }
.mn-offcanvas:not(.mn-vue):has(#main-menu:target) .mfp-content { opacity: 1; transform: translate(0, 0); }
.mn-offcanvas:not(.mn-vue):has(#main-menu:target) .mfp-close { opacity: .5; transform: none; }
.mn-offcanvas:not(.mn-vue) .nav .children { position: inherit; opacity: 1; left: auto; transform: none; }
.mn-offcanvas:not(.mn-vue) .toggle { display: none; }