/**
 * WorkJam Mega Menu Styles
 * 
 * @package WorkJam
 * @since 1.0.0
 */

/* CSS Reset for menu components */
.workjam-header,
.workjam-header *,
.workjam-header *::before,
.workjam-header *::after {
    box-sizing: border-box;
}

/* Main Header Container */
.workjam-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #FFFFFF;
    border-bottom: 1px solid rgba(18, 28, 102, 0.1);
    z-index: 1000;
}

/* Prevent content from hiding under fixed header */
body {
    padding-top: 92px; /* Same as header height */
}

/* Admin bar adjustments for logged-in users */
body.logged-in.admin-bar .workjam-custom-header {
    top: 32px;
}

/* Adjust mega dropdown position when admin bar is present */
body.logged-in.admin-bar .mega-dropdown {
    top: 125px; /* 93px original + 32px admin bar */
}

/* Language dropdown positioning is now relative to parent, no admin bar adjustment needed */

.workjam-container {
    max-width: 1512px;
    margin: 0 auto;
    padding: 0 39px;
}

/* Main Navigation Layout */
.workjam-mega-menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 92px;
    padding: 19px 0;
    font-family: 'Avenir Next', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Left Section: Logo + Main Nav */
.workjam-mega-menu__left {
    display: flex;
    align-items: center;
    gap: 35px;
}

/* Right Section: Language, Support, Sign In, CTA */
.workjam-mega-menu__right {
    display: flex;
    align-items: center;
    gap: 35px;
}

/* WorkJam Logo */
.workjam-logo {
    display: flex;
    align-items: center;
}

.workjam-logo a {
    display: block;
    line-height: 0;
}

.workjam-logo__image {
    width: 108px !important;
    height: 54px !important;
    max-width: 108px !important;
    max-height: 54px !important;
    object-fit: contain;
}

/* Ensure picture element doesn't override sizing */
.workjam-logo picture {
    width: 108px !important;
    height: 54px !important;
    max-width: 108px !important;
    max-height: 54px !important;
}

.workjam-logo picture img {
    width: 108px !important;
    height: 54px !important;
    max-width: 108px !important;
    max-height: 54px !important;
}

/* Main Navigation Menu */
.workjam-nav-main {
    display: flex;
    align-items: center;
    gap: 35px;
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
}

/* Invisible bridge to connect menu item to mega dropdown */
.has-mega-menu::before {
    content: '';
    position: absolute;
    top: 100%;
    width: 150%;
    height: 50px;
    display: none;
    pointer-events: auto;
}

.has-mega-menu:hover::before {
    display: block;
}

.workjam-nav-link {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 0;
    color: #121C66;
    text-decoration: none;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.workjam-nav-link:hover {
    color: #0073AA;
}

.workjam-nav-link:focus {
    outline: 2px solid #0073AA;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Dropdown Icons */
.workjam-dropdown-icon {
    width: 12px;
    height: 8px;
    transition: transform 0.3s ease;
}

.workjam-nav-item[aria-expanded="true"] .workjam-dropdown-icon,
.workjam-language-selector.active .workjam-dropdown-icon {
    transform: rotate(180deg);
}

/* Right Navigation Links */
.workjam-language-selector,
.workjam-support-link,
.workjam-signin-link {
    color: #121C66;
    text-decoration: none;
    font-size: 16px;
    font-weight: 400;
    transition: color 0.3s ease;
}

.workjam-language-selector:hover,
.workjam-support-link:hover,
.workjam-signin-link:hover {
    color: #0073AA;
}

.workjam-language-link {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* CTA Button */
.workjam-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 152px;
    padding: 16px 24px;
    background: #121C66;
    color: #FFFFFF;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    border-radius: 500px;
    transition: all 0.3s ease;
    box-shadow: 0px 4px 14px rgba(18, 28, 102, 0.15);
}

.workjam-cta-button:hover {
    background: #0F1A5A;
    transform: translateY(-1px);
    box-shadow: 0px 6px 20px rgba(18, 28, 102, 0.25);
    color: #FFFFFF;
}

.workjam-cta-button:focus {
    outline: 2px solid #FFFFFF;
    outline-offset: 2px;
    border-radius: 500px;
    color: #FFFFFF;
}

/* Mega Dropdown Base Styles */
.mega-dropdown {
    position: fixed;
    top: 93px; /* header height with fixed positioning */
    left: 50%;
    transform: translateX(-50%);
    width: 1200px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 32px;
    box-shadow: 0px 14px 24px rgba(0, 0, 0, 0.25);
    z-index: 1000;

    /* Hidden by default */
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(-10px);
    transition: all 0.3s ease;
    pointer-events: none;
}

.mega-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.mega-dropdown-content {
    padding: 24px;
}

/* Common Section Title Styles */
.mega-section-title {
    margin: 0 0 24px 0;
    color: #757575;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.4;
    margin-bottom: unset;
}

/* Products Dropdown Styles */
.products-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.products-top-section {
    display: flex;
    gap: 24px;
}

.products-grid-section {
    flex: 1;
    background: #FFFFFF;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.products-section-title,
.featured-section-title,
.more-section-title {
    margin-bottom: 0;
    font-size: 16px;
    font-weight: 700;
    color: #757575;
    text-transform: none;
}

.products-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0;
    justify-content: space-between;
}

.product-item {
    width: calc(50% - 8px);
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    margin: -8px;
    border-radius: 8px;
    transition: background-color 0.2s ease;
    cursor: pointer;
    min-height: 62px;
}

.product-item:hover {
    background-color: #D5D5D5;
}

/* Reset link styles for clickable containers */
.product-item,
.solution-item,
.resource-item,
.more-item {
    text-decoration: none !important;
    color: inherit;
}

.product-item:visited,
.solution-item:visited,
.resource-item:visited,
.more-item:visited {
    color: inherit;
}

/* Remove underlines on all link states within mega menu */
.product-item:hover,
.solution-item:hover,
.resource-item:hover,
.more-item:hover,
.product-item:focus,
.solution-item:focus,
.resource-item:focus,
.more-item:focus {
    text-decoration: none !important;
}

/* Remove underlines from any anchor tags within mega menu */
.mega-dropdown a,
.mega-dropdown a:hover,
.mega-dropdown a:focus,
.mega-dropdown a:visited,
.mega-dropdown a:active {
    text-decoration: none !important;
}

.product-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
}

.product-title {
    color: #000044;
}

.product-description {
    margin: 0;
    color: #2B388F;
    font-size: 14px;
    line-height: 1.4;
}

/* Products Featured Section */
.products-featured-section {
    width: 280px;
    background: #2B388F;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.featured-image {
    max-height: 207px;
    background: #ECEDEF;
    display: flex;
    align-items: center;
    justify-content: center;
}

.featured-image__placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #ECEDEF 0%, #D1D5DB 100%);
}

.featured-image__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.featured-image__img img {
    width: 100%;
    height: auto;
}

.featured-content {
    padding: 24px;
}

.featured-content .mega-section-title {
    margin-bottom: 12px;
}

.featured-description {
    margin: 0;
    color: #FFFFFF;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 400;
}

/* Featured Blog Link */
.featured-blog-link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease;
}

.featured-blog-link:hover {
    transform: translateY(-2px);
}

.featured-blog-link:focus {
    outline: 2px solid #0073AA;
    outline-offset: 2px;
    border-radius: 16px;
}

.featured-title {
    margin: 8px 0 4px 0;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
}

/* Products MORE Section */
.products-more-section {
    background: #FFFFFF;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.more-grid {
    display: flex;
    gap: 20px;
    margin: -8px;
}

.more-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    margin: 0;
    border-radius: 8px;
    transition: background-color 0.2s ease;
    cursor: pointer;
    min-height: 82px;
}

.more-item:hover {
    background-color: #D5D5D5;
}

.more-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
}

.more-title {
    color: #000044;
}

.more-description {
    margin: 0;
    color: #2B388F;
    font-size: 14px;
    line-height: 1.4;
}

/* Solutions Dropdown Styles */

.solutions-grid {
    display: flex;
    gap: 24px;
    flex-wrap: nowrap;
}

.solutions-column {
    background: #FFFFFF;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex: 1;
}

.solutions-column-title {
    margin-bottom: 0;
    font-size: 16px;
    font-weight: 700;
    color: #757575;
    text-transform: none;
}

.solutions-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: -8px;
}

.solution-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    margin: 0;
    border-radius: 8px;
    transition: background-color 0.2s ease;
    cursor: pointer;
    min-height: 82px;
}

.solution-item:hover {
    background-color: #D5D5D5;
}

.solution-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
}

.solution-title {
    color: #000044;
}

.solution-description {
    margin: 0;
    color: #2B388F;
    font-size: 14px;
    line-height: 1.4;
}

/* Solution Divider */
.solution-divider {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 8px;
}

.divider-line {
    height: 1px;
    background: #8F8F8F;
    border: none;
    margin: 0;
}

.divider-title {
    margin: 0;
    color: #757575;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Resources Dropdown Styles */
.resources-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.grid-flow-main-title {
    margin-bottom: 0;
    font-size: 16px;
    font-weight: 700;
    color: #757575;
    text-transform: none;
}

.resources-container {
    background: #FFFFFF;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.resources-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin: -8px;
}

.resource-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    margin: 0;
    border-radius: 8px;
    transition: background-color 0.2s ease;
    cursor: pointer;
    min-height: 82px;
    flex: 0 0 calc(33.333% - 16px);
}

.resource-item:hover {
    background-color: #D5D5D5;
}

.resource-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
}

.resource-title {
    color: #000044;
}

.resource-description {
    margin: 0;
    color: #2B388F;
    font-size: 14px;
    line-height: 1.4;
}

/* Company Dropdown Styles */
.company-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Grid flow main title handles both resources and company */
/* Styles are defined above as .grid-flow-main-title */

.company-container {
    background: #FFFFFF;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.company-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin: -8px;
}

.company-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    margin: 0;
    border-radius: 8px;
    transition: background-color 0.2s ease;
    cursor: pointer;
    min-height: 82px;
    flex: 0 0 calc(33.333% - 16px);
}

.company-item:hover {
    background-color: #D5D5D5;
}

.company-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    color: #000044;
}

.company-description {
    margin: 0;
    color: #2B388F;
    font-size: 14px;
    line-height: 1.4;
}

/* Grid Flow Layout Styles (Standardized for Resources and Company) */
.grid-flow-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.grid-flow-container {
    background: #FFFFFF;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.grid-flow-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin: -8px;
}

.grid-flow-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    margin: 0;
    border-radius: 8px;
    transition: background-color 0.2s ease;
    cursor: pointer;
    min-height: 82px;
    flex: 0 0 calc(33.333% - 16px);
}

.grid-flow-item:hover {
    background-color: #D5D5D5;
}

.grid-flow-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    color: #000044;
}

.grid-flow-description {
    margin: 0;
    color: #2B388F;
    font-size: 14px;
    line-height: 1.4;
}

/* Language Dropdown Styles */
.workjam-language-selector {
    position: relative;
}

/* Invisible bridge for language dropdown hover */
.workjam-language-selector::before {
    content: '';
    position: absolute;
    top: 100%;
    width: 150%;
    height: 50px;
    display: none;
    pointer-events: auto;
}

.workjam-language-selector:hover::before {
    display: block;
}

.language-dropdown {
    position: absolute;
    top: 160%; /* Position flush with header menu */
    left: 50%;
    min-width: 80px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 16px;
    box-shadow: 0px 14px 24px rgba(0, 0, 0, 0.25);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(-8px);
    transition: all 0.2s ease;
    z-index: 1100;
}

.language-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.language-dropdown-content {
    padding: 8px;
    background: #ffffff;
    margin: 8px;
    border-radius: 12px;
}

.language-item {
    display: block;
    padding: 8px 12px;
    color: #121C66;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.language-item:hover {
    background-color: rgba(43, 56, 143, 0.05) !important;
    color: #EA1455;
}

.language-item.current {
    background-color: rgba(43, 56, 143, 0.05) !important;
    font-weight: 700;
}

.language-item.current:hover {
    background-color: rgba(43, 56, 143, 0.05) !important;
    color: #121C66 !important;
    transition: background-color 0.2s ease;
}

/* Mobile Overlay (for future mobile implementation) */
.workjam-mobile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.workjam-mobile-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Accessibility Improvements */
@media (prefers-reduced-motion: reduce) {
    .workjam-nav-link,
    .workjam-dropdown-icon,
    .mega-dropdown,
    .workjam-cta-button {
        transition: none;
    }
}

/* Focus States for Keyboard Navigation - Removed auto-open on focus */
.workjam-nav-item:focus-within .workjam-nav-link {
    outline: 2px solid #0073AA;
    outline-offset: 2px;
    border-radius: 4px;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .workjam-nav-link,
    .product-title a,
    .solution-title a,
    .resource-title a,
    .more-title a {
        border-bottom: 1px solid transparent;
    }
    
    .workjam-nav-link:hover,
    .product-title a:hover,
    .solution-title a:hover,
    .resource-title a:hover,
    .more-title a:hover {
        border-bottom-color: currentColor;
    }
}

/* Mobile Menu Toggle Button - Hidden on Desktop */
.workjam-mobile-toggle {
    display: none;
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    position: relative;
    z-index: 1001;
    order: 3; /* Place after right section */
}

.workjam-mobile-toggle:focus {
    outline: 2px solid #0073AA;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Hamburger Icon */
.hamburger-icon {
    display: block;
    width: 24px;
    height: 2px;
    position: relative;
    background-color: #121C66;
    transition: all 0.3s ease;
}

.hamburger-icon::before,
.hamburger-icon::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background-color: #121C66;
    transition: all 0.3s ease;
}

.hamburger-icon::before {
    top: -8px;
}

.hamburger-icon::after {
    bottom: -8px;
}

/* Toggle states */
.workjam-mobile-toggle[aria-expanded="true"] .hamburger-icon {
    display: none;
}

/* Mobile Responsive Styles */
@media (max-width: 1200px) {
    /* Show mobile toggle button */
    .workjam-mobile-toggle {
        display: block;
    }
    
    /* Header adjustments for mobile */
    .workjam-header {
        position: fixed;
    }
    
    .workjam-mega-menu {
        position: relative;
        background: transparent;
    }
    
    /* Logo adjustments for mobile */
    .workjam-logo__image {
        width: 80px !important;
        height: 40px !important;
        max-width: 80px !important;
        max-height: 40px !important;
    }
    
    /* Mobile Menu Container - Hidden by default */
    .workjam-mobile-menu-container {
        display: none;
        position: fixed;
        top: 0;
        right: -100%;
        width: 85%;
        max-width: 400px;
        height: 100vh;
        background: #FFFFFF;
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
        z-index: 1000;
        padding: 92px 32px 32px 32px;
        overflow-y: auto;
        transition: right 0.3s ease;
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
    }
    
    /* Show mobile menu when active */
    .workjam-mega-menu.mobile-active .workjam-mobile-menu-container {
        display: flex;
        right: 0;
    }
    
    /* Hide desktop navigation on mobile */
    .workjam-mega-menu__left .workjam-nav-main,
    .workjam-mega-menu__right:not(.workjam-mobile-menu-right) {
        display: none;
    }
    
    /* Mobile navigation list styling */
    .workjam-mobile-nav-main {
        flex-direction: column;
        gap: 0;
        margin: 0;
        padding: 0;
        width: 100%;
    }
    
    .workjam-nav-item {
        border-bottom: 1px solid rgba(18, 28, 102, 0.1);
    }
    
    .workjam-nav-item:last-child {
        border-bottom: none;
    }
    
    .workjam-nav-link {
        padding: 20px 0;
        font-size: 18px;
        font-weight: 500;
        justify-content: space-between;
    }
    
    /* Mobile dropdown icon adjustments */
    .workjam-dropdown-icon {
        transform: rotate(-90deg);
        transition: transform 0.3s ease;
    }
    
    .workjam-nav-item[aria-expanded="true"] .workjam-dropdown-icon {
        transform: rotate(0deg);
    }
    
    /* Mobile mega dropdown styling - Accordion style */
    .mega-dropdown {
        position: static;
        left: auto;
        right: auto;
        top: auto;
        transform: none;
        width: 100%;
        max-height: 0;
        overflow: hidden;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        background: #F8F8F8;
        border-radius: 12px;
        box-shadow: none;
        margin-top: 16px;
        transition: max-height 0.3s ease;
    }
    
    .mega-dropdown.active {
        max-height: 1000px;
        padding-bottom: 16px;
    }

    .mega-dropdown-content {
        padding: 16px;
    }

    /* Mobile language dropdown styling */
    .language-dropdown {
        position: static;
        top: auto;
        right: auto;
        transform: none;
        width: 100%;
        margin-top: 8px;
        background: #F8F8F8;
        border-radius: 8px;
        box-shadow: none;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }

    .language-dropdown.active {
        transform: none;
        max-height: 200px;
    }

    /* Mobile language selector in right nav */
    .workjam-mobile-language {
        position: relative;
        z-index: 1; /* Lower z-index so submenu panels can cover it */
    }

    .workjam-mobile-language-button {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }

    .workjam-mobile-language-button[aria-expanded="true"] .workjam-mobile-chevron {
        transform: rotate(90deg);
    }

    .workjam-mobile-language-dropdown {
        max-height: 0;
        overflow: hidden;
        background: #F8F8F8;
        border-radius: 8px;
        margin-top: 8px;
        transition: max-height 0.3s ease, padding 0.3s ease;
        padding: 0;
    }

    .workjam-mobile-language-dropdown.active {
        max-height: 300px;
        padding: 8px 0;
    }

    .workjam-mobile-language-item {
        display: block;
        padding: 12px 16px;
        color: #121C66;
        font-size: 16px;
        font-weight: 500;
        text-decoration: none;
        transition: background-color 0.2s ease;
    }

    .workjam-mobile-language-item:hover {
        background-color: #E5E5E5;
    }

    .workjam-mobile-language-item.current {
        background-color: #D5D5D5;
        font-weight: 600;
    }
    
    /* Mobile dropdown content adjustments */
    .products-content,
    .solutions-content,
    .resources-content,
    .company-content,
    .grid-flow-content {
        gap: 16px;
    }
    
    .products-top-section {
        flex-direction: column;
        gap: 16px;
    }
    
    .products-grid-section,
    .products-featured-section,
    .products-more-section,
    .solutions-column,
    .resources-container,
    .company-container,
    .grid-flow-container {
        width: 100%;
        padding: 16px;
        margin-bottom: 16px;
    }
    
    .products-featured-section {
        order: -1; /* Move featured section to top on mobile */
    }
    
    /* Mobile grid adjustments */
    .products-grid,
    .solutions-grid,
    .resources-grid,
    .company-grid,
    .grid-flow-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .more-grid {
        flex-direction: column;
        gap: 12px;
    }
    
    .product-item,
    .solution-item,
    .resource-item,
    .more-item,
    .grid-flow-item {
        width: 100%;
        padding: 12px;
        margin: 0;
    }
    
    /* Mobile right section styling */
    .workjam-mega-menu__right {
        gap: 16px;
        padding-top: 24px;
        border-top: 1px solid rgba(18, 28, 102, 0.1);
    }
    
    .workjam-language-selector,
    .workjam-support-link,
    .workjam-signin-link {
        padding: 16px 0;
        font-size: 16px;
        border-bottom: 1px solid rgba(18, 28, 102, 0.1);
    }
    
    .workjam-language-selector {
        border-bottom: none;
    }
    
    .workjam-cta-button {
        width: 100%;
        text-align: center;
        margin-top: 16px;
        padding: 18px 24px;
        font-size: 16px;
    }
    
    /* Mobile overlay */
    .workjam-mobile-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }
    
    .workjam-mobile-overlay.active {
        opacity: 1;
        visibility: visible;
    }
    
    /* Prevent body scroll when mobile menu is open */
    body.mobile-menu-open {
        overflow: hidden;
    }
    
    /* Mobile body padding adjustment */
    body {
        padding-top: 80px; /* Smaller header height on mobile */
    }

    /* Remove mobile body padding when header is transparent */
    body:has(.workjam-header--transparent) {
        padding-top: 0;
    }

    .workjam-header {
        min-height: 80px;
    }
    
    .workjam-mega-menu {
        min-height: 80px;
        padding: 16px 0;
    }
}

/* Tablet adjustments */
@media (max-width: 1200px) and (min-width: 768px) {
    .workjam-mega-menu__left .workjam-nav-main,
    .workjam-mega-menu__right {
        width: 50%;
        max-width: 500px;
    }
}

/* Small mobile adjustments */
@media (max-width: 480px) {
    .workjam-container {
        padding: 0 20px;
    }

    .workjam-mega-menu__left .workjam-nav-main,
    .workjam-mega-menu__right {
        width: 90%;
        padding: 80px 20px 20px 20px;
    }
}

/* ========================================
   Header Style Variations
   ======================================== */

/* Transparent Header Base Styles */
.workjam-header--transparent {
    background: transparent;
    border-bottom-color: transparent;
    transition: background-color 0.3s ease, border-bottom-color 0.3s ease;
}

/* Remove body padding when header is transparent - content goes behind header */
body:has(.workjam-header--transparent) {
    padding-top: 0;
}

/* Transparent Header - Scrolled State */
.workjam-header--transparent.workjam-header--scrolled {
    background: #fff;
    border-bottom-color: rgba(18, 28, 102, 0.1);
}

/* Light Header - White logo and text */
.workjam-header--light .workjam-logo__image {
    filter: brightness(0) invert(1);
}

.workjam-header--light .workjam-mega-menu > .workjam-mega-menu__left > .workjam-nav-main > .has-mega-menu > .workjam-nav-link,
.workjam-header--light .workjam-mega-menu__right .workjam-nav-link:not(.workjam-cta-button) {
    color: #FFFFFF;
}

/* Light Header - Arrow icons */
.workjam-header--light .workjam-nav-link .workjam-nav-arrow,
.workjam-header--light .workjam-dropdown-icon {
    filter: brightness(0) invert(1);
}

/* Dark Header - Black logo and dark text */
.workjam-header--dark .workjam-logo__image {
    filter: brightness(0);
}

.workjam-header--dark .workjam-mega-menu > .workjam-mega-menu__left > .workjam-nav-main > .has-mega-menu > .workjam-nav-link,
.workjam-header--dark .workjam-mega-menu__right .workjam-nav-link:not(.workjam-cta-button) {
    color: #121C66;
}

/* When scrolled, both transparent headers show RGB logo */
.workjam-header--transparent.workjam-header--scrolled .workjam-logo__image {
    filter: none;
}

.workjam-header--light.workjam-header--scrolled .workjam-mega-menu > .workjam-mega-menu__left > .workjam-nav-main > .has-mega-menu > .workjam-nav-link,
.workjam-header--light.workjam-header--scrolled .workjam-mega-menu__right .workjam-nav-link:not(.workjam-cta-button),
.workjam-header--dark.workjam-header--scrolled .workjam-mega-menu > .workjam-mega-menu__left > .workjam-nav-main > .has-mega-menu > .workjam-nav-link,
.workjam-header--dark.workjam-header--scrolled .workjam-mega-menu__right .workjam-nav-link:not(.workjam-cta-button) {
    color: #121C66;
}

.workjam-header--light.workjam-header--scrolled .workjam-nav-link .workjam-nav-arrow,
.workjam-header--light.workjam-header--scrolled .workjam-dropdown-icon {
    filter: none;
}

/* Print Styles */
@media print {
    .workjam-header {
        position: static;
        box-shadow: none;
        border-bottom: 1px solid #000;
    }

    .mega-dropdown,
    .workjam-mobile-toggle {
        display: none;
    }

    .workjam-cta-button {
        background: #000 !important;
        color: #fff !important;
        box-shadow: none;
    }
}

/* ============================================================================
   UPDATED MEGA MENU STYLES - Dynamic Title Colors & Modern Hover States
   ============================================================================ */

/* Dynamic Title Color System - Rotating Pattern */
/* First title in each dropdown - Pink/Red */
.products-grid-section > h3.mega-section-title,
.solutions-column:nth-child(1) .mega-section-title,
.grid-flow-main-title,
.resources-content > h3:first-child,
.company-content > h3:first-child {
    color: #EA1455 !important;
}

/* Featured content - Yellow */
.products-featured-section h3.mega-section-title {
    color: #FFCC00 !important;
}

/* Solutions second column - Teal */
.solutions-column:nth-child(2) .mega-section-title {
    color: #01A893 !important;
}

/* Third title - Orange */
.products-more-section > h3.mega-section-title,
.solutions-column:nth-child(3) .mega-section-title {
    color: #FF8E00 !important;
}

/* Solution divider titles - 4th in rotation, back to pink */
.divider-title {
    color: #EA1455 !important;
}

/* Modern Hover States - Clean and Professional */
.product-item:hover,
.solution-item:hover,
.resource-item:hover,
.more-item:hover,
.company-item:hover,
.grid-flow-item:hover {
    background-color: rgba(43, 56, 143, 0.05) !important;
    transform: none; /* Remove the jarring movement */
    transition: background-color 0.2s ease;
}

/* Title color change on hover */
.product-item:hover .product-title,
.solution-item:hover .solution-title,
.resource-item:hover .resource-title,
.more-item:hover .more-title,
.company-item:hover .company-title,
.grid-flow-item:hover .grid-flow-title {
    color: #EA1455;
    transition: color 0.2s ease;
}

/* Animated underline effect for menu item titles */
.product-title,
.solution-title,
.resource-title,
.more-title,
.company-title,
.grid-flow-title {
    position: relative;
    display: inline;
    width: fit-content;
}

/* Underline animation removed per brand guidelines */

/* Featured section enhanced hover */
.products-featured-section:hover {
    box-shadow: 0px 6px 20px rgba(43, 56, 143, 0.3);
    transform: translateY(-2px);
    transition: all 0.3s ease;
}

.featured-blog-link:hover {
    transform: translateY(-2px);
    transition: transform 0.3s ease;
}

/* Enhanced focus states for accessibility */
.product-item:focus-visible,
.solution-item:focus-visible,
.resource-item:focus-visible,
.more-item:focus-visible,
.company-item:focus-visible,
.grid-flow-item:focus-visible {
    outline: 2px solid #2B388F;
    outline-offset: 2px;
    border-radius: 8px;
    transform: translateX(4px);
}

/* Grid Flow Layouts - Better Contrast on Glassmorphic Background */
.resources-content .resources-container,
.company-content .company-container,
.grid-flow-content .grid-flow-container {
    background: rgba(255, 255, 255, 0.95) !important; /* Almost opaque white */
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* ============================================================================
   MOBILE MENU STYLES - Stripe-inspired design
   ============================================================================ */

/* Mobile Menu Overlay - Full screen sliding panel */
.workjam-mobile-menu-overlay {
    position: fixed !important;
    top: 0 !important;
    right: -100%;
    width: 100% !important;
    height: 100vh !important;
    background: #ffffff;
    z-index: 9999;
    transition: right 0.3s ease-in-out;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
}

/* Show mobile menu */
.workjam-mega-menu.mobile-active .workjam-mobile-menu-overlay {
    right: 0;
}

/* Mobile Menu Header */
.workjam-mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
    min-height: 80px;
    box-sizing: border-box;
}

/* Mobile Logo */
.workjam-mobile-logo a {
    display: block;
    line-height: 0;
}

.workjam-mobile-logo__image {
    width: 80px !important;
    height: 40px !important;
    max-width: 80px !important;
    max-height: 40px !important;
    object-fit: contain;
}

/* Mobile Close Button */
.workjam-mobile-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 50%;
    transition: background-color 0.2s ease;
    padding: 0;
}

.workjam-mobile-close:focus,
.workjam-mobile-close:active {
    background-color: #f5f5f5;
}

.workjam-mobile-close-icon {
    font-size: 44px;
    color: #666;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Mobile Menu Main Panel */
.workjam-mobile-menu-main {
    padding: 0;
    height: calc(100vh - 92px);
    display: flex;
    flex-direction: column;
}

.workjam-mobile-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Mobile Navigation List */
.workjam-mobile-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
}

/* Mobile Navigation Items */
.workjam-mobile-nav-item {
    border-bottom: 1px solid #f0f0f0;
}

.workjam-mobile-nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 20px 24px;
    text-decoration: none;
    color: #1a1a1a;
    font-size: 18px;
    font-weight: 500;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.2s ease;
    font-family: 'Avenir Next', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.workjam-mobile-nav-link:focus,
.workjam-mobile-nav-link:active,
.workjam-mobile-nav-link:focus {
    background-color: #f8f9fa;
    outline: none;
}

.workjam-mobile-nav-link span {
    text-align: left;
}

/* Mobile Chevron Icon */
.workjam-mobile-chevron {
    font-size: 24px;
    color: #666;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
}

/* Mobile Menu Bottom Section */
.workjam-mobile-menu-bottom {
    border-top: 1px solid #f0f0f0;
    padding: 16px 0;
}

.workjam-mobile-menu-bottom .workjam-mobile-nav-item {
    border-bottom: none;
}

.workjam-mobile-menu-bottom .workjam-mobile-nav-link {
    padding: 16px 24px;
    font-size: 16px;
    font-weight: 400;
    color: #666;
}

.workjam-mobile-menu-bottom .workjam-mobile-nav-link:focus,
.workjam-mobile-menu-bottom .workjam-mobile-nav-link:active {
    color: #1a1a1a;
}

/* Mobile CTA Button */
.workjam-mobile-cta {
    padding: 24px;
}

.workjam-mobile-cta-button {
    display: block;
    width: 100%;
    padding: 16px 24px;
    background: #121C66;
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    transition: background-color 0.2s ease;
    border: none;
    cursor: pointer;
    font-family: 'Avenir Next', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.workjam-mobile-cta-button:focus,
.workjam-mobile-cta-button:active {
    background: #0f1752;
}

/* Mobile Submenu Panels */
.workjam-mobile-submenu-panel {
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    background: #ffffff;
    transition: left 0.3s ease-in-out;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 10; /* Base z-index for panels */
}

.workjam-mobile-submenu-panel.active {
    left: 0;
    z-index: 20; /* Higher z-index when active to cover language selector and other elements */
}

/* Mobile Submenu Header */
.workjam-mobile-submenu-header {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
    min-height: 80px;
    box-sizing: border-box;
}

.workjam-mobile-back-button {
    display: flex;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    color: #666;
    font-size: 16px;
    font-weight: 500;
    padding: 0;
    margin-right: 32px;
    font-family: 'Avenir Next', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.workjam-mobile-back-button:focus,
.workjam-mobile-back-button:active {
    color: #1a1a1a;
}

.workjam-mobile-back-icon {
    font-size: 24px;
    margin-right: 12px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.workjam-mobile-submenu-title {
    color: #1a1a1a;
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    font-family: 'Avenir Next', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Mobile Submenu Content */
.workjam-mobile-submenu-content {
    padding: 24px;
}

.workjam-mobile-submenu-items {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.workjam-mobile-submenu-section h3 {
    color: #757575;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 16px 0;
    font-family: 'Avenir Next', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.workjam-mobile-submenu-item {
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 16px;
}

.workjam-mobile-submenu-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.workjam-mobile-submenu-link {
    display: block;
    text-decoration: none;
    color: inherit;
    padding: 8px 0;
}

.workjam-mobile-submenu-link:focus,
.workjam-mobile-submenu-link:active {
    color: #121C66;
}

.workjam-mobile-submenu-link h4 {
    color: #000044;
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 8px 0;
    line-height: 1.3;
    font-family: 'Avenir Next', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.workjam-mobile-submenu-link p {
    color: #5D5D5D;
    font-size: 14px;
    line-height: 1.4;
    margin: 0;
    font-family: 'Avenir Next', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Mobile Featured Section */
.workjam-mobile-submenu-featured {
    background: #f8f9fa;
    margin: 0;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.workjam-mobile-featured-placeholder {
    width: 60px;
    height: 60px;
    background: #e9ecef;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 12px;
}

.workjam-mobile-submenu-section {
    margin-top: 32px;
}

.workjam-mobile-submenu-items .workjam-mobile-submenu-section:first-child {
    margin-top: 0;
}

.workjam-mobile-submenu-featured h3 {
    color: #757575;
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 12px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: 'Avenir Next', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.workjam-mobile-featured-post {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.2s ease;
    border-radius: 8px;
    padding: 4px;
    margin: -4px;
}

.workjam-mobile-featured-post:focus,
.workjam-mobile-featured-post:active {
    background-color: #e9ecef;
    outline: none;
}

.workjam-mobile-featured-image {
    width: 60px;
    height: 60px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
}

.workjam-mobile-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.workjam-mobile-featured-content {
    flex: 1;
    min-width: 0;
}

.workjam-mobile-featured-content h4 {
    color: #000044;
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 4px 0;
    line-height: 1.3;
    font-family: 'Avenir Next', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.workjam-mobile-featured-content p {
    color: #5D5D5D;
    font-size: 12px;
    line-height: 1.4;
    margin: 0 0 8px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: 'Avenir Next', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}


/* Body scroll lock when mobile menu is open - Use !important to override Elementor styles */
body.mobile-menu-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
}

/* Hide desktop navigation on mobile */
@media (max-width: 1200px) {
    .workjam-mega-menu__left .workjam-nav-main,
    .workjam-mega-menu__right {
        display: none;
    }
    
    .workjam-mobile-toggle {
        display: flex;
    }
}

/* Show desktop navigation on desktop */
@media (min-width: 1201px) {
    .workjam-mobile-menu-overlay,
    .workjam-mobile-toggle {
        display: none;
    }
}

/* Mobile admin bar adjustments (WordPress mobile breakpoint) */
@media (max-width: 782px) {
    body.logged-in.admin-bar .workjam-custom-header {
        top: 46px;
    }

    body.logged-in.admin-bar .mega-dropdown {
        top: 139px; /* 93px original + 46px mobile admin bar */
    }

    /* Language dropdown no longer needs admin bar adjustment - positioned relative to parent */
}

/* Mobile scroll animation (600px breakpoint only) */
@media (max-width: 600px) {
    body.logged-in.admin-bar .workjam-custom-header {
        transition: top 0.3s ease;
    }

    /* Remove admin bar spacing when scrolled on mobile */
    body.logged-in.admin-bar.scrolled .workjam-custom-header {
        top: 0;
    }

    body.logged-in.admin-bar .mega-dropdown {
        transition: top 0.3s ease;
    }

    /* Adjust mega dropdown position when scrolled on mobile */
    body.logged-in.admin-bar.scrolled .mega-dropdown {
        top: 93px;
    }
}

/* Mobile overlay background */
.workjam-mobile-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.workjam-mega-menu.mobile-active .workjam-mobile-overlay {
    display: block;
    opacity: 1;
}