/* ============================================================
   vefogix-match custom HEADER — injected site-wide, replaces the
   old seolounge header entirely. Promo bar + white nav + pill auth.
   ============================================================ */

/* Hide the old theme header + its banner/breadcrumb on every page. */
.wraper_header, .wraper_header_top, .wraper_header_main,
.header, header.header, .header_top, .header_main, .wraper_flyout_search,
.radiantthemes-website-layout > .header,
.wraper-banner-default, .banner-wraper, .theme-banner,
.wraper-banner, .banner-default, .rt-banner,
.wraper_inner_banner, .wraper_inner_banner_main, .wraper_inner_banner_breadcrumb,
.banner_main, .banner_breadcrumb { display: none !important; }

/* Our header */
.vfx-site-header { font-family: 'Inter', sans-serif; position: sticky; top: 0; z-index: 9999; }

/* promo bar */
.vfx-topbar {
    background: linear-gradient(135deg, #29b6f6 0%, #4f46e5 55%, #7c3aed 100%);
    color: #fff; text-align: center; font-size: 13.5px; font-weight: 600; padding: 9px 16px;
}
.vfx-topbar a { color: #ffe082; text-decoration: underline; font-weight: 700; }

/* main nav row */
.vfx-nav {
    background: #fff; border-bottom: 1px solid #eef2f7;
    box-shadow: 0 2px 18px rgba(15,35,95,.05);
}
.vfx-nav-inner {
    max-width: 1280px; margin: 0 auto; padding: 14px 22px;
    display: flex; align-items: center; gap: 26px;
}
.vfx-logo { background: transparent !important; }
.vfx-logo img { height: 44px; width: auto; display: block; background: transparent !important; box-shadow: none !important; border: none !important; }
.vfx-nav-links { display: flex; align-items: center; gap: 22px; margin: 0 auto 0 20px; list-style: none; padding: 0; }
.vfx-nav-links > li > a {
    color: #0f172a; font-weight: 600; font-size: 15px; text-decoration: none; padding: 8px 0;
    display: inline-flex; align-items: center; gap: 5px; transition: color .15s;
}
.vfx-nav-links > li > a:hover { color: #4f46e5; }
.vfx-nav-links .vfx-has-caret > a::after { content: "▾"; font-size: 11px; color: #94a3b8; }

/* dropdowns */
.vfx-nav-links li.vfx-drop { position: relative; }
/* transparent "bridge" so moving the cursor from the link into the panel never
   crosses a non-hover gap (the old 8px margin made the menu close too early). */
.vfx-nav-links li.vfx-drop::after {
    content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 14px; display: none;
}
.vfx-nav-links li.vfx-drop:hover::after { display: block; }
.vfx-nav-links .vfx-submenu {
    position: absolute; top: calc(100% + 12px); left: 0; min-width: 230px; background: #fff;
    border: 1px solid #eef2f7; border-radius: 14px; box-shadow: 0 18px 46px rgba(15,35,95,.16);
    padding: 8px; list-style: none; margin: 0; z-index: 1200;
    opacity: 0; visibility: hidden; transform: translateY(6px); pointer-events: none;
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
/* keep open while hovering the trigger OR the panel itself */
.vfx-nav-links li.vfx-drop:hover > .vfx-submenu,
.vfx-nav-links li.vfx-drop:focus-within > .vfx-submenu,
.vfx-nav-links .vfx-submenu:hover {
    opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}
.vfx-submenu li a { display: block; padding: 9px 14px; border-radius: 9px; color: #334155; font-size: 13.5px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.vfx-submenu li a:hover { background: #eef1ff; color: #4f46e5; }
/* tall resources menu: scroll if it ever exceeds the viewport */
.vfx-submenu-tall { max-height: 70vh; overflow-y: auto; right: auto; }

/* MEGA MENU (Tools — 12 items in 2 columns) */
.vfx-megamenu { min-width: 480px; padding: 14px; }
.vfx-mega-head { padding: 4px 10px 12px; margin-bottom: 6px; border-bottom: 1px solid #f1f5f9; }
.vfx-mega-head a { color: #4f46e5; font-weight: 700; font-size: 13px; text-decoration: none; }
.vfx-mega-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; list-style: none; margin: 0; padding: 0; }
.vfx-mega-grid li a { display: block; padding: 9px 12px; border-radius: 9px; color: #334155; font-size: 13.5px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.vfx-mega-grid li a:hover { background: #eef1ff; color: #4f46e5; }

/* auth buttons */
.vfx-nav-auth { display: flex; align-items: center; gap: 10px; }
.vfx-nav-auth a { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 14px; text-decoration: none; border-radius: 10px; padding: 9px 20px; transition: .15s; line-height: 1; }
/* Sign In — clean outlined pill */
.vfx-signin { color: #4f46e5; border: 1.5px solid #d6dcf7; background: #fff; }
.vfx-signin:hover { border-color: #4f46e5; background: #f5f6ff; color: #4f46e5; }
/* Sign Up — solid gradient pill */
.vfx-signup { background: linear-gradient(135deg, #29b6f6, #4f46e5 60%, #7c3aed); color: #fff; box-shadow: 0 6px 18px rgba(79,70,229,.32); border: 1.5px solid transparent; }
.vfx-signup:hover { transform: translateY(-1px); box-shadow: 0 9px 22px rgba(79,70,229,.4); color: #fff; }

/* mobile */
.vfx-nav-toggle { display: none; background: none; border: none; font-size: 26px; line-height: 1; color: #0f172a; cursor: pointer; margin-left: auto; padding: 4px 6px; }
@media (max-width: 1000px) {
    .vfx-nav-inner { padding: 12px 16px; gap: 12px; }
    .vfx-logo img { height: 38px; }
    .vfx-nav-links, .vfx-nav-auth { display: none; }
    .vfx-nav-toggle { display: block; }

    /* keep logo left + burger right on one tidy row */
    .vfx-nav.is-open .vfx-nav-inner { flex-wrap: wrap; }
    .vfx-nav-toggle { order: 2; }

    /* the menu panel: full width, left-aligned, consistent indentation.
       Scrolls if the full tools+resources list exceeds the screen height. */
    .vfx-nav.is-open .vfx-nav-links {
        order: 3; display: flex; flex-direction: column; width: 100%;
        gap: 0; margin: 10px 0 0; align-items: stretch;
        border-top: 1px solid #eef2f7; padding-top: 6px;
        max-height: calc(100vh - 160px); overflow-y: auto; -webkit-overflow-scrolling: touch;
    }
    .vfx-nav.is-open .vfx-nav-links > li { width: 100%; }
    .vfx-nav.is-open .vfx-nav-links > li > a {
        display: flex; justify-content: space-between; align-items: center;
        width: 100%; padding: 13px 4px; font-size: 16px; box-sizing: border-box;
        border-bottom: 1px solid #f1f5f9;
    }
    /* submenus: indented, lighter, with a left rule — always visible when open.
       Force them on (override the desktop opacity/visibility/transform). */
    .vfx-nav.is-open .vfx-nav-links .vfx-submenu {
        position: static !important; box-shadow: none; border: none; min-width: 0 !important;
        border-radius: 0; padding: 2px 0 6px 16px; margin: 0; max-height: none !important;
        border-left: 2px solid #e2e8f0;
        opacity: 1 !important; visibility: visible !important; transform: none !important; pointer-events: auto !important;
    }
    .vfx-nav.is-open .vfx-submenu li a, .vfx-nav.is-open .vfx-mega-grid li a { padding: 10px 8px; font-size: 14.5px; white-space: normal; }
    /* mega menu collapses to a single column + flat layout on mobile */
    .vfx-nav.is-open .vfx-megamenu { min-width: 0 !important; padding: 2px 0 6px 16px !important; }
    .vfx-nav.is-open .vfx-mega-grid { grid-template-columns: 1fr !important; }
    .vfx-nav.is-open .vfx-mega-head { padding: 8px 8px 8px 0; margin: 0; }
    /* hide the transparent desktop hover-bridge inside the mobile panel */
    .vfx-nav.is-open .vfx-nav-links li.vfx-drop::after { display: none !important; }

    /* auth row: full-width, buttons sized evenly, NO duplicate toggle */
    .vfx-nav.is-open .vfx-nav-auth {
        order: 4; display: flex; flex-wrap: wrap; align-items: center;
        gap: 10px; width: 100%; margin-top: 14px; padding-top: 12px;
        border-top: 1px solid #eef2f7;
    }
    .vfx-nav.is-open .vfx-nav-auth .vfx-nav-cart { margin-right: auto; }
    .vfx-nav.is-open .vfx-nav-auth .vfx-signin,
    .vfx-nav.is-open .vfx-nav-auth .vfx-signup { flex: 1 1 0; min-width: 120px; text-align: center; }
}