/* =========================================================
   SOCIALPOINT NAVIGATION
   Desktop + Mobile
   ========================================================= */

:root {
    --sp-orange: #ff5100;
    --sp-orange-dark: #e84900;
    --sp-blue: #002169;
    --sp-peach: #fcc7a778;
    --sp-menu-bg: #fafafa;
    --sp-text: #333;
}


/* =========================================================
   SHARED LOGIN STATE
   ========================================================= */

/* Logged OUT — hide Account */
body:not(.logged-in)
:is(.sp-desktop-menu, .sp-mobile-menu)
.e-n-menu-item:has(
    :is(
        #sp-desktop-account,
        #sp-mobile-account
    ).e-n-menu-title
) {
    display: none !important;
}


/* Logged IN — hide Log In */
body.logged-in
:is(.sp-desktop-menu, .sp-mobile-menu)
.e-n-menu-item:has(
    :is(
        #sp-desktop-login,
        #sp-mobile-login
    ).e-n-menu-title
) {
    display: none !important;
}


/* =========================================================
   DESKTOP MENU
   ========================================================= */


/* ---------------------------------------------------------
   DEMO BUTTON — DESKTOP
   --------------------------------------------------------- */

#demo-nav {
    position: relative;
    padding: 0;
    margin: 0 12px;
}

#demo-nav .e-n-menu-title-container {
    position: relative;
    z-index: 1;
    padding: 0;
}

/* Orange button background */
#demo-nav .e-n-menu-title-container::before {
    content: "";
    position: absolute;

    top: 50%;
    left: 50%;

    width: calc(100% + 28px);
    height: 52px;

    transform: translate(-50%, -50%);

    background: var(--sp-orange);
    border-radius: 8px;

    z-index: -1;
}

#demo-nav .e-n-menu-title-text {
    position: relative;
    color: #fff;
}

#demo-nav .e-n-menu-title-container:hover::before {
    background: var(--sp-orange-dark);
}


/* ---------------------------------------------------------
   SIMPLE DROPDOWNS
   Pricing / Demo / Log In / Account
   --------------------------------------------------------- */

.sp-desktop-menu .e-n-menu-item:has(.sp-small-menu) {
    position: relative !important;
}

/* Default centered dropdown */
.sp-desktop-menu
.e-n-menu-item:has(.sp-small-menu)
> .e-n-menu-content {
    position: absolute !important;

    top: 100% !important;
    left: 50% !important;
    right: auto !important;

    transform: translateX(-50%) !important;

    z-index: 9999;
}

/* Reset generated dropdown wrappers */
.sp-desktop-menu
.e-n-menu-item:has(.sp-small-menu)
:is(.sp-small-menu, .sp-small-dropdown) {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}


/* Dropdown widths */

.sp-desktop-menu
.e-n-menu-item:has(.sp-dropdown-large)
> .e-n-menu-content {
    width: 375px !important;
}

.sp-desktop-menu
.e-n-menu-item:has(.sp-dropdown-small)
> .e-n-menu-content {
    width: 250px !important;
}


/* Right-align final dropdown */

.sp-desktop-menu
.e-n-menu-item:has(.sp-small-menu-right)
> .e-n-menu-content {
    left: auto !important;
    right: 0 !important;
    transform: none !important;
}


/* ---------------------------------------------------------
   POINTER CURSOR
   --------------------------------------------------------- */

.sp-desktop-menu .e-n-menu-title-text,
.sp-desktop-menu .e-n-menu-title-text *,
.sp-desktop-menu .e-n-menu-title-text *::before,
.sp-desktop-menu .e-n-menu-title-text *::after {
    cursor: pointer !important;
}


/* ---------------------------------------------------------
   ICON LIST — PEACH HOVER
   --------------------------------------------------------- */

.sp-desktop-menu .elementor-icon-list-item {
    display: flex !important;
    align-items: center !important;

    width: 100% !important;
    padding: 5px 10px !important;

    box-sizing: border-box !important;

    border-radius: 8px !important;

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.sp-desktop-menu .elementor-icon-list-item:hover {
    background-color: var(--sp-peach) !important;
}

.sp-desktop-menu
.elementor-icon-list-item > a:hover
.elementor-icon-list-text {
    color: var(--sp-orange) !important;
}

.sp-desktop-menu
.elementor-icon-list-item:hover
.elementor-icon-list-icon {
    color: var(--sp-peach) !important;
}

.sp-desktop-menu
.sp-menu-icon-list
.elementor-icon-list-text {
    transition: color 0.2s ease;
}


/* ---------------------------------------------------------
   MAIN NAV UNDERLINE
   --------------------------------------------------------- */

.sp-desktop-menu .e-n-menu-title {
    border-bottom: 0 !important;
}

.sp-desktop-menu .e-n-menu-title-text {
    position: relative;
}

.sp-desktop-menu .e-n-menu-title-text::after {
    content: "";
    position: absolute;

    left: 0;
    right: 0;
    bottom: -12px;

    height: 3px;

    background: var(--sp-orange);

    opacity: 0;
    transition: opacity 0.2s ease;
}

.sp-desktop-menu
.e-n-menu-title:not(#demo-nav):hover
.e-n-menu-title-text::after {
    opacity: 1;
}


/* =========================================================
   MOBILE MENU
   ========================================================= */

.sp-mobile-menu .e-n-menu-item {
    background-color: var(--sp-menu-bg);
}


/* ---------------------------------------------------------
   TOP LEVEL TITLE LAYOUT
   --------------------------------------------------------- */

.sp-mobile-menu .e-n-menu-title {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;

    width: 100% !important;
}

.sp-mobile-menu .e-n-menu-title-container {
    display: flex !important;
    align-items: center !important;
}

.sp-mobile-menu .e-n-menu-title-text {
    display: block !important;

    flex: 1 1 auto !important;

    width: auto !important;
}

.sp-mobile-menu .e-n-menu-dropdown-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 auto !important;

    width: auto !important;
    margin-left: auto !important;
}


/* =========================================================
   MOBILE TOP-LEVEL ICONS
   Exact Font Awesome artwork
   ========================================================= */

/* Shared icon styling */
.sp-mobile-menu .e-n-menu-title-container::before {
    content: "";
    display: block;

    width: 24px;
    height: 24px;
    flex: 0 0 24px;

    margin-right: 5px;

    background-color: var(--sp-orange);

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-position: center;
    mask-position: center;

    -webkit-mask-size: contain;
    mask-size: contain;
}


/* ---------------------------------------------------------
   EVENT GAMES
   Font Awesome Classic Solid — Gamepad
   --------------------------------------------------------- */

#sp-nav-games.e-n-menu-title
.e-n-menu-title-container::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M448 64c106 0 192 86 192 192S554 448 448 448l-256 0C86 448 0 362 0 256S86 64 192 64l256 0zM192 176c-13.3 0-24 10.7-24 24l0 32-32 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l32 0 0 32c0 13.3 10.7 24 24 24s24-10.7 24-24l0-32 32 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-32 0 0-32c0-13.3-10.7-24-24-24zm240 96a32 32 0 1 0 0 64 32 32 0 1 0 0-64zm64-96a32 32 0 1 0 0 64 32 32 0 1 0 0-64z'/%3E%3C/svg%3E");

    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M448 64c106 0 192 86 192 192S554 448 448 448l-256 0C86 448 0 362 0 256S86 64 192 64l256 0zM192 176c-13.3 0-24 10.7-24 24l0 32-32 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l32 0 0 32c0 13.3 10.7 24 24 24s24-10.7 24-24l0-32 32 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-32 0 0-32c0-13.3-10.7-24-24-24zm240 96a32 32 0 1 0 0 64 32 32 0 1 0 0-64zm64-96a32 32 0 1 0 0 64 32 32 0 1 0 0-64z'/%3E%3C/svg%3E");
}


/* ---------------------------------------------------------
   SOLUTIONS
   Font Awesome Classic Regular — Lightbulb
   --------------------------------------------------------- */

#sp-nav-solutions.e-n-menu-title
.e-n-menu-title-container::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M296.5 291.1C321 265.2 336 230.4 336 192 336 112.5 271.5 48 192 48S48 112.5 48 192c0 38.4 15 73.2 39.5 99.1 21.3 22.4 44.9 54 53.3 92.9l102.4 0c8.4-39 32-70.5 53.3-92.9zm34.8 33C307.7 349 288 379.4 288 413.7l0 18.3c0 44.2-35.8 80-80 80l-32 0c-44.2 0-80-35.8-80-80l0-18.3C96 379.4 76.3 349 52.7 324.1 20 289.7 0 243.2 0 192 0 86 86 0 192 0S384 86 384 192c0 51.2-20 97.7-52.7 132.1zM144 184c0 13.3-10.7 24-24 24s-24-10.7-24-24c0-48.6 39.4-88 88-88 13.3 0 24 10.7 24 24s-10.7 24-24 24c-22.1 0-40 17.9-40 40z'/%3E%3C/svg%3E");

    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M296.5 291.1C321 265.2 336 230.4 336 192 336 112.5 271.5 48 192 48S48 112.5 48 192c0 38.4 15 73.2 39.5 99.1 21.3 22.4 44.9 54 53.3 92.9l102.4 0c8.4-39 32-70.5 53.3-92.9zm34.8 33C307.7 349 288 379.4 288 413.7l0 18.3c0 44.2-35.8 80-80 80l-32 0c-44.2 0-80-35.8-80-80l0-18.3C96 379.4 76.3 349 52.7 324.1 20 289.7 0 243.2 0 192 0 86 86 0 192 0S384 86 384 192c0 51.2-20 97.7-52.7 132.1zM144 184c0 13.3-10.7 24-24 24s-24-10.7-24-24c0-48.6 39.4-88 88-88 13.3 0 24 10.7 24 24s-10.7 24-24 24c-22.1 0-40 17.9-40 40z'/%3E%3C/svg%3E");
}


/* ---------------------------------------------------------
   PRICING
   Font Awesome Classic Solid — Tag
   --------------------------------------------------------- */

#sp-nav-pricing.e-n-menu-title
.e-n-menu-title-container::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M0 80V229.5c0 17 6.7 33.3 18.7 45.3l176 176c25 25 65.5 25 90.5 0l144-144c25-25 25-65.5 0-90.5l-176-176C241.3 28.3 225 21.5 208 21.5H58.5C26.2 21.5 0 47.7 0 80zm112 32a32 32 0 1 1 0 64 32 32 0 1 1 0-64z'/%3E%3C/svg%3E");

    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M0 80V229.5c0 17 6.7 33.3 18.7 45.3l176 176c25 25 65.5 25 90.5 0l144-144c25-25 25-65.5 0-90.5l-176-176C241.3 28.3 225 21.5 208 21.5H58.5C26.2 21.5 0 47.7 0 80zm112 32a32 32 0 1 1 0 64 32 32 0 1 1 0-64z'/%3E%3C/svg%3E");
}


/* ---------------------------------------------------------
   RESOURCES
   Font Awesome Classic Regular — File Lines
   --------------------------------------------------------- */

#sp-nav-resources.e-n-menu-title
.e-n-menu-title-container::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M64 0C28.7 0 0 28.7 0 64v384c0 35.3 28.7 64 64 64h256c35.3 0 64-28.7 64-64V160L224 0H64zm160 48 112 112H256c-17.7 0-32-14.3-32-32V48zM64 48h112v80c0 44.2 35.8 80 80 80h80v240c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16zm64 224c-13.3 0-24 10.7-24 24s10.7 24 24 24h128c13.3 0 24-10.7 24-24s-10.7-24-24-24H128zm0 96c-13.3 0-24 10.7-24 24s10.7 24 24 24h128c13.3 0 24-10.7 24-24s-10.7-24-24-24H128z'/%3E%3C/svg%3E");

    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M64 0C28.7 0 0 28.7 0 64v384c0 35.3 28.7 64 64 64h256c35.3 0 64-28.7 64-64V160L224 0H64zm160 48 112 112H256c-17.7 0-32-14.3-32-32V48zM64 48h112v80c0 44.2 35.8 80 80 80h80v240c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16zm64 224c-13.3 0-24 10.7-24 24s10.7 24 24 24h128c13.3 0 24-10.7 24-24s-10.7-24-24-24H128zm0 96c-13.3 0-24 10.7-24 24s10.7 24 24 24h128c13.3 0 24-10.7 24-24s-10.7-24-24-24H128z'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------
   NO ICON ON MOBILE CTA BUTTONS
   --------------------------------------------------------- */

:is(
    #sp-mobile-demo,
    #sp-mobile-login,
    #sp-mobile-account
).e-n-menu-title
.e-n-menu-title-container::before {
    content: none !important;
    display: none !important;
}

/* =========================================================
   MOBILE SUBMENU LINKS — RIGHT CHEVRONS
   ========================================================= */

.sp-mobile-links .elementor-icon-list-item > a {
    display: flex !important;
    align-items: center;

    width: 100%;
}

.sp-mobile-links .elementor-icon-list-icon {
    flex-shrink: 0;
}

.sp-mobile-links .elementor-icon-list-text {
    flex: 1;
}

.sp-mobile-links .elementor-icon-list-item > a::after {
    content: "›";

    margin-left: auto;
    padding-left: 15px;

    font-size: 28px;
    font-weight: 300;
    line-height: 1;

    color: var(--sp-text);
}


/* =========================================================
   MOBILE ICON BOX LINKS — RIGHT CHEVRONS
   ========================================================= */

.sp-mobile-iconbox-link .elementor-icon-box-wrapper {
    display: flex !important;
    align-items: center !important;

    width: 100%;
}

.sp-mobile-iconbox-link .elementor-icon-box-content {
    flex: 1 1 auto;
}

.sp-mobile-iconbox-link .elementor-icon-box-wrapper::after {
    content: "›";

    flex: 0 0 auto;

    margin-left: auto;
    padding-left: 15px;

    font-size: 28px;
    font-weight: 300;
    line-height: 1;

    color: var(--sp-text);
}


/* =========================================================
   MOBILE CTA BUTTONS
   Demo / Log In / Account
   ========================================================= */

:is(
    #sp-mobile-demo,
    #sp-mobile-login,
    #sp-mobile-account
).e-n-menu-title {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: calc(100% - 20px) !important;
    min-height: 45px;

    box-sizing: border-box !important;

    padding: 0 20px !important;

    margin-left: 10px !important;
    margin-right: 10px !important;

    border-radius: 9px !important;
}


/* Demo */

#sp-mobile-demo.e-n-menu-title {
    margin-top: 10px !important;

    background: var(--sp-orange) !important;
    border: 1px solid var(--sp-orange) !important;
}


/* Login / Account */

:is(
    #sp-mobile-login,
    #sp-mobile-account
).e-n-menu-title {
    margin-top: 8px !important;
    margin-bottom: 20px !important;

    background: var(--sp-blue) !important;
    border: 1px solid var(--sp-blue) !important;
}


/* Reduce lower gap when Login/Account dropdown is open */

:is(
    #sp-mobile-login,
    #sp-mobile-account
).e-n-menu-title:has(
    button[aria-expanded="true"]
) {
    margin-bottom: 6px !important;
}


/* ---------------------------------------------------------
   CTA TEXT + DROPDOWN ARROW
   --------------------------------------------------------- */

:is(
    #sp-mobile-demo,
    #sp-mobile-login,
    #sp-mobile-account
).e-n-menu-title
.e-n-menu-title-container {
    flex: 0 0 auto !important;
    width: auto !important;
}

:is(
    #sp-mobile-demo,
    #sp-mobile-login,
    #sp-mobile-account
).e-n-menu-title
.e-n-menu-title-text {
    flex: 0 0 auto !important;

    width: auto !important;

    font-weight: 700 !important;
    color: #fff !important;
}

:is(
    #sp-mobile-demo,
    #sp-mobile-login,
    #sp-mobile-account
).e-n-menu-title
.e-n-menu-dropdown-icon {
    flex: 0 0 auto !important;

    width: auto !important;

    /* Overrides standard margin-left:auto */
    margin-left: -25px !important;

    color: #fff !important;
}

:is(
    #sp-mobile-demo,
    #sp-mobile-login,
    #sp-mobile-account
).e-n-menu-title
.e-n-menu-dropdown-icon svg {
    fill: currentColor !important;
    stroke: currentColor !important;
}


/* =========================================================
   TABLET / MOBILE — 1024px AND BELOW
   Desktop widget responsive adjustments
   ========================================================= */

@media (max-width: 1024px) {

    /* -----------------------------------------------------
       DESKTOP WIDGET DEMO — FULL-WIDTH ORANGE ROW
       ----------------------------------------------------- */

    #demo-nav {
        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        flex-wrap: nowrap;

        background: var(--sp-orange) !important;
        border-radius: 0 !important;
    }

    #demo-nav .e-n-menu-title-container::before {
        display: none !important;
    }

    #demo-nav .e-n-menu-title-container {
        display: flex !important;
        align-items: center !important;

        width: 100% !important;
        min-height: 58px;

        padding: 16px !important;

        background: transparent !important;
        border-radius: 0 !important;
    }

    #demo-nav .e-n-menu-title-text {
        color: #fff !important;
    }

    #demo-nav:hover,
    #demo-nav:focus-within {
        background: var(--sp-orange-dark) !important;
    }


    /* -----------------------------------------------------
       RESET DESKTOP SMALL DROPDOWN POSITIONING
       ----------------------------------------------------- */

    .sp-desktop-menu
    .e-n-menu-item:has(.sp-small-menu)
    > .e-n-menu-content {
        position: static !important;

        top: auto !important;
        left: auto !important;
        right: auto !important;

        transform: none !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;

        margin: 0 !important;
    }

    .sp-desktop-menu
    .e-n-menu-item:has(.sp-small-menu)
    :is(.sp-small-menu, .sp-small-dropdown) {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;

        margin: 0 !important;
    }


    /* Remove desktop underline */

    .sp-desktop-menu .e-n-menu-title-text::after {
        display: none !important;
    }
}