/* ============================================
   NJWEBFORGE NAVIGATION - CLEAN / FLAT STYLE
   For GeneratePress Theme
   ============================================ */

/* Transparent navigation bar over header */
.main-navigation {
    background: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* Stickied nav also transparent */
.main-navigation.is_stuck {
    background: transparent !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
}

/* ============================================
   TOP-LEVEL MENU ITEMS
   ============================================ */

.main-navigation .main-nav > ul > li {
    margin: 0 6px;
}

.main-navigation .main-nav > ul > li > a {
    display: flex;
    flex-direction: row;           /* icon left of label */
    align-items: center;
    justify-content: center;
    padding: 6px 4px;              /* controls nav height */
    color: #ff6a00;
    background: transparent;
    border-radius: 0;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    border-bottom: 2px solid transparent;
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease;
}

/* Hover / current */
.main-navigation .main-nav > ul > li > a:hover,
.main-navigation .main-nav > ul > li.current-menu-item > a,
.main-navigation .main-nav > ul > li.current-menu-ancestor > a {
    color: #ffffff;
    border-bottom-color: #ff6a00;
    background: transparent;
}

/* Remove any theme box-shadows on current item */
.main-navigation .main-nav > ul > li.current-menu-item > a,
.main-navigation .main-nav > ul > li.current-menu-ancestor > a {
    box-shadow: none !important;
}

/* IMPORTANT: Let GeneratePress default caret / ::after work
   (do NOT add any custom ::after here) */

/* ============================================
   ICON / EMOJI STYLES (use CSS Classes in menu)
   Chrome fix: explicit emoji font-family
   ============================================ */

.main-navigation .main-nav ul li a::before {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", "Android Emoji", "EmojiOne Color", sans-serif !important;
    font-size: 18px;
    margin-right: 6px;
    line-height: 1;
    display: inline-block;
    transform: translateY(1px);
    transition: transform 0.2s ease;
    font-style: normal;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.main-navigation .main-nav ul li a:hover::before {
    transform: translateY(1px) scale(1.1);
}

/* Icons per menu item (add these classes in Appearance > Menus) */
.menu-item.menu-sign-in > a::before            { content: "🔐"; }
.menu-item.menu-dashboard > a::before          { content: "📊"; }
.menu-item.menu-support-tickets > a::before    { content: "🎫"; }
.menu-item.menu-workflows > a::before          { content: "⚡"; }
.menu-item.menu-clients > a::before            { content: "👥"; }
.menu-item.menu-requests > a::before           { content: "📝"; }
.menu-item.menu-request-workflow > a::before   { content: "🚀"; }
.menu-item.menu-submit-ticket > a::before      { content: "📨"; }
.menu-item.menu-add-client > a::before         { content: "➕"; }
.menu-item.menu-edit-file > a::before          { content: "✏️"; }
.menu-item.menu-importer > a::before           { content: "📥"; }

/* ============================================
   SIMPLE DROPDOWN (SUB-MENU) STYLE
   ============================================ */

/* Sub-menu container: centered under parent, single column */
.main-navigation .main-nav ul ul.sub-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 200px;
    background: rgba(15, 23, 42, 0.96);
    border-radius: 10px;
    padding: 4px 0;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
    display: none;
    z-index: 9999;
}

/* Show sub-menu on hover */
.main-navigation .main-nav ul li:hover > ul.sub-menu {
    display: block;
}

/* Small arrow above sub-menu */
.main-navigation .main-nav ul ul.sub-menu::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid rgba(15, 23, 42, 0.96);
}

/* Sub-menu items as simple list */
.main-navigation .main-nav ul ul.sub-menu li {
    width: 100%;
}

/* Sub-menu links */
.main-navigation .main-nav ul ul.sub-menu li a {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 8px 14px;
    font-size: 12px;
    color: #e2e8f0;
    background: transparent;
    border-radius: 0;
    border-bottom: none;
    text-align: left;
}

/* Sub-menu icon tweaks */
.main-navigation .main-nav ul ul.sub-menu li a::before {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", "Android Emoji", "EmojiOne Color", sans-serif !important;
    font-size: 16px;
    margin-right: 8px;
    font-style: normal;
    font-weight: normal;
}

/* Sub-menu hover */
.main-navigation .main-nav ul ul.sub-menu li a:hover {
    background: rgba(51, 65, 85, 0.95);
    color: #ffffff;
}

/* ============================================
   RESPONSIVE (MOBILE)
   ============================================ */

@media (max-width: 768px) {
    .main-navigation .main-nav ul li a {
        justify-content: flex-start;
        padding: 10px 16px;
    }

    .main-navigation .main-nav ul li a::before {
        font-size: 18px;
        margin-right: 10px;
    }

    .main-navigation .main-nav ul ul.sub-menu {
        position: relative;
        left: 0;
        transform: none;
        box-shadow: none;
        border-radius: 0;
        background: transparent;
        padding: 0;
    }

    .main-navigation .main-nav ul ul.sub-menu::before {
        display: none;
    }

    .main-navigation .main-nav ul ul.sub-menu li a {
        padding-left: 28px; /* indent children */
    }
}

/* ============================================
   SPECIAL BUTTON STYLES
   ============================================ */

/* Sign In button */
.menu-item.menu-sign-in > a {
    background: linear-gradient(135deg, #ff6a00, #ff8533) !important;
    color: #fff !important;
    border-radius: 999px !important;
    padding: 6px 16px !important;
    border-bottom: none !important; /* no underline on button */
}

.menu-item.menu-sign-in > a:hover {
    background: linear-gradient(135deg, #ff8533, #ff9a4d) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(255, 106, 0, 0.4);
}

/* Add Client pill */
.menu-item.menu-add-client > a {
    background: rgba(16, 185, 129, 0.18) !important;
    border: 1px solid #10b981 !important;
    color: #10b981 !important;
    border-radius: 999px;
}

.menu-item.menu-add-client > a:hover {
    background: #10b981 !important;
    color: #fff !important;
}