/* Landing page styles at bottom of file */

header {
    background-color: transparent;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    border-bottom: 1px solid transparent;
    transition: background-color var(--animation1), border-bottom var(--animation1);
    .page-scrolled & {
        background-color: var(--white);
        border-bottom: 1px solid var(--gray1);
    }

    .top-navigation {
        background-color: var(--action1);
        color: var(--white);
        position: relative;
        z-index: 1;

        .section-inner {
            min-height: 40px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 30px;
            max-width: var(--center);
            margin: 0 auto;
            padding: 0 20px;
            box-sizing: border-box;
            transition: var(--animation2);
            @media (max-width: 1024px) {
                padding-left:1px;
            }
        }
        .left-content {
            .segments {
                
                display: flex;
                align-items: center;
                text-align:center;
                justify-content: center;
                .segment {
                    padding: 8px 20px;
                    font-size: 14px;
                    font-weight:bold;
                    text-decoration: none;
                    border-bottom: 1px solid var(--action1);
                    p,a {
                        margin:0;
                    }
                    &.active-segment {
                        color: var(--black);
                        background-color: var(--white);
                        position: relative;
                        &:after {
                            content: '';
                            position:absolute;
                            bottom:0;
                            left:50%;
                            transform: translateX(-50%);
                            width: 0;
                            height: 0;
                            border-left: 6px solid transparent; 
                            border-right: 6px solid transparent;
                            border-bottom: 8px solid var(--action1);  
                        }
                    }
                    &.additional-segment {
                        color: var(--white);
                        background-color: transparent;
                        &:last-of-type {
                            border-right: 1px solid var(--white);
                        }
                        
                        a {
                            color: var(--white);
                            text-decoration: none;
                            &:hover, &:focus {
                                color: var(--action2);
                            }   
                        }
                    }
                }
            }
        }

        .right-content {
            display: flex;
            align-items: center;
            gap: 20px;
            .signin-menu {
                .hs-menu-wrapper.flyouts {
                    > ul {
                        display: flex;
                        align-items: center;
                        gap: 20px;
                        margin: 0;
                        padding: 0;
                        list-style: none;
                    }

                    li {
                        margin: 0;
                        line-height: normal;
                        letter-spacing: normal;
                        list-style: none;
                    }

                    a {
                        color: var(--white);
                        text-decoration: none;
                        font-size: 15px;
                        font-weight: 600;
                        padding-bottom: 20px;
                        margin-bottom:-20px;

                        &:hover, &:focus {
                            color: var(--action2);
                        }
                    }

                    li.hs-item-has-children {
                        position: relative;

                        > a {
                            &:after {
                                content: '';
                                width: 10px;
                                height: 6px;
                                background-image:url('/hubfs/concora-credit_unified5/elements/top-nav-chevron_black.svg');
                                background-size: contain;
                                background-repeat: no-repeat;
                                background-position: center;
                                position:relative;
                                display:inline-block;
                                margin-left: 4px;
                                top:-1px;
                                /* turning black chevron to white by default*/
                                filter: brightness(0) invert(1);
                            }
                        }

                        &:hover > a,
                        &:focus-within > a {
                            color: var(--action2);

                            &:after {
                                /* changing the black chevron to orange when hovering */
                                filter: invert(67%) sepia(90%) saturate(2253%) hue-rotate(334deg) brightness(101%) contrast(91%);
                            }
                        }
                    }

                    ul.hs-menu-children-wrapper {
                        display: none;
                        position: absolute;
                        top: 100%;
                        left: 50%;
                        transform: translateX(-50%);
                        margin: 15px 0 0 0;
                        padding:  0;
                        list-style: none;
                        background: var(--white);
                        border: 1px solid var(--action2);
                        border-radius: var(--border2);
                        box-shadow: var(--shadow3);
                        z-index: 1002;
                        overflow: hidden;
                    }

                    li.hs-item-has-children:hover > ul.hs-menu-children-wrapper,
                    li.hs-item-has-children:focus-within > ul.hs-menu-children-wrapper {
                        display: block;
                    }

                    li.hs-menu-depth-2 a {
                        display: block;
                        padding: 10px 20px;
                        color: var(--action1);
                        white-space: nowrap;
                        margin:0;
                        font-size: 14px;
                        font-weight: 500;
                        color:var(--black);
                        transition: var(--animation1);
                        cursor: pointer;
                        &:hover, &:focus {
                            color: var(--concora-blue);
                            background: var(--concora-blue-light);
                        }
                    }
                }
            }

            .search-trigger {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                border: 0;
                padding: 8px;
                margin: 0;
                background: transparent;
                color: var(--white);
                cursor: pointer;
                line-height: 0;
                border-radius: 4px;
                svg {
                    transition: var(--animation2);
                }
                
                &:hover,&:focus {
                    svg path {
                        fill: var(--action2);
                    }
                }
                &:focus-visible {
                    outline: 2px solid var(--white);
                    outline-offset: 2px;
                }
            }
        }
    }

    .hd-inr {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 100px;
        padding: 20px;
        gap: 30px;
        flex-wrap: wrap;
        @media (max-width: 1280px) {
            gap: 20px;
        }

        .mobile-menu {
            display: none;
        }

        @media (max-width: 1024px) {
            .mobile-menu {
                display: block;
            }
        }

        .hd-logo {
            min-width: 150px;
        }

        .hd-menu {
            flex: 1;
            .main-nav-li {
                position: relative;
            }
            @media (min-width: 1025px) {
                .main-nav-li.is-open {
                    &:after {
                        content: '';
                        position: absolute;
                        width: 0;
                        border-left: 6px solid transparent;
                        border-right: 6px solid transparent;
                        border-bottom: 8px solid var(--action2);
                        left: 50%;
                        transform: translateX(-50%);
                        bottom: -23px;
                    }
                }
            }

            .megamenu-inr>ul {
                display: flex;
                list-style: none;
                align-items: center;
                margin: 0;
                padding: 0;
                gap: 20px;
                justify-content: flex-end;
                position: relative;

                &>li {
                    letter-spacing: normal;
                    margin: 0;
                    line-height: normal;

                    @media (min-width: 1025px) {
                        &.single-column-menu {
                            position: relative;

                            &>.child-wrapper {
                                width: max-content;
                                position: absolute;
                                top: 20px;
                                padding: 30px;

                                .child_inner {
                                    max-width: 250px;
                                    width: auto;
                                }
                            }
                        }

                        &.has-megamenu.multi-column-menu {
                            &>.child-wrapper {
                                position: fixed;
                                top: 92px;
                                padding: 50px;
                            }
                        }

                        &.has-megamenu.is-open>.child-wrapper {
                            display: block;
                            visibility: visible;
                            opacity: 1;
                            pointer-events: auto;
                        }

                        &.has-megamenu>.child-wrapper {
                            pointer-events: none;
                        }
                    }

                    &.has-megamenu.is-open > .parent-item {
                        color: var(--action1);
                    }
                    &.has-megamenu.is-open {
                        .icon {
                            /* transform: rotateX(180deg); */
                            svg {
                                path {
                                    fill: var(--action1);
                                }
                            }
                        }
                    }

                    .child-trigger {
                        display: none;
                        align-items: center;
                        justify-content: center;
                        border: 0;
                        padding: 0;
                        margin: 0;
                        background: transparent;
                        cursor: pointer;
                        font: inherit;
                        color: inherit;
                        line-height: 0;

                        &:focus-visible {
                            outline: 2px solid var(--action2);
                            outline-offset: 3px;
                            border-radius: 2px;
                        }
                    }

                    @media (max-width: 1024px) {
                        .child-trigger {
                            display: inline-flex;
                        }
                    }

                    &>.parent-item {
                        color: var(--action1);
                        display: flex;
                        align-items: center;
                        gap: 5px;
                        text-decoration: none;
                        font-size: 15px;

                        &.parent-link-text {
                            padding: 8px 15px;
                            border-radius: var(--border1);
                            border: 1px solid transparent;
                            margin: 0;
                            background: transparent;
                            cursor: pointer;
                            text-align: inherit;
                        }

                        &.parent-link-url {
                            padding: 8px 15px;
                            border-radius: var(--border1);
                            border: 1px solid transparent;
                        }

                        .icon {
                            display: block;
                            width: 10px;
                            height: 10px;
                            transition: all 0.2s ease-in;
                            position: relative;
                            top:3px;
                            svg {
                                fill: var(--action1);
                                display: block;
                                path {
                                    fill: var(--action1);
                                }
                            }
                        }

                        &:hover {
                         
                        }
                    }

                    @media (min-width: 1025px) and (hover: hover) {
                        &:hover > .parent-item,
                        &.is-open > .parent-item,
                        &:focus-within > .parent-item {
                            border: 1px solid var(--action2);
                            background-color: var(--white);
                        }
                    }
                }
            }

            .child-wrapper {
                @media (min-width: 1025px) {
                    visibility: hidden;
                    opacity: 0;
                    position: absolute;
                    padding: 50px;
                    margin: 38px auto 0;
                    border: var(--orange-stroke-border);
                    background: var(--orange-stroke-background);
                    border-radius: var(--border3);
                    top: 20px;
                    z-index: 1;
                    transition: all 0.3s linear;
                    max-width: calc(100vw - 40px);
                    width: max-content;
                    left: 0;
                    right: 0;
                    box-shadow: var(--shadow3);

                    &::before {
                        content: "";
                        display: block;
                        position: absolute;
                        width: 100%;
                        height: 40px;
                        top: -39px;
                        right: 0;
                        left: 0;
                    }
                }

                .bt-row {
                    padding-top: 30px;
                    border-top: 1px solid var(--gray2);
                    margin-top: 30px;
                    @media (min-width: 1024px) {
                        margin-bottom: -20px;
                    }
                    @media (max-width: 1024px) {
                        padding-top: 36px;
                        margin-top: 36px;
                        padding-bottom: 0;
                        border-bottom: none;
                    }
                }

                .child_flex {
                    display: flex;
                    gap: 40px;

                    .child_col {
                        &.child2 {
                            width: 50%;
                        }

                        &.child3 {
                            width: 33.3%;
                        }

                        .ttl {
                           padding: 10px;
                           border-radius: var(--border1);
                           border: 1px solid transparent;

                            @media (min-width: 1025px) and (hover: hover) {
                                &:has(.is-link):hover {
                                    /* border: 1px solid var(--action2);
                                    background-color: var(--white); */
                                    color: var(--black);
                                    text-decoration: underline;

                                    .is-link {
                                        color: var(--black);
                                        text-decoration: underline;
                                    }
                                }
                            }
                        }

                            .ttl-text {
                                color: var(--black);
                                font-size: 15px;
                                font-weight: 800;
                                text-decoration: none;
                                display: block;
                                &.is-link {
                                    &:hover {
                                        color: var(--action1);
                                    }
                                }
                                @media (max-width: 1024px) {
                                    font-size: 16px;
                                    margin-bottom: 24px;
                                }
                            }
                        }

                        .child-menus:not(:last-of-type) {
                            /* margin-bottom: 18px; */
                            margin-bottom:0;
                        }

                        .child-menuitems>a {
                            color: var(--concora-body-color);
                            text-decoration: none;
                            transition: color 0.2s ease;
                            padding: 8px 10px;
                            border-radius: var(--border1);
                            border: 1px solid transparent;
                            display:inline-block;
                            &>div {
                                display: flex;
                                gap: 5px;
                            }

                            div.menu-text {
                                font-size: 14px;
                                font-weight: 400;
                                transition: var(--animation1);
                            }

                            .menu-description {
                                color: var(--black);
                                opacity:.7;
                                transition: var(--animation1);
                                font-weight: normal;
                                font-size: 14px;
                                margin-top: 5px;
                                margin-bottom: 0;
                                &:empty {
                                    display: none;
                                }
                            }

                            @media (min-width: 1025px) and (hover: hover) {
                                &:hover {
                                    border: 1px solid var(--action2);

                                    .menu-text {
                                        text-decoration: none;
                                        color: var(--action1);
                                    }

                                    .menu-description {
                                        text-decoration: none;
                                        opacity: 1;
                                    }
                                }
                            }
                        }

                        .child-card {
                            position: relative;
                            max-width: 310px;
                            border-radius: var(--border3);
                            background-color: var(--gray1);
                            padding: 30px;
                            .hdcard_img {
                                margin-bottom: 16px;
                                border-radius: var(--border2);
                                overflow: hidden;
                               
                                                               
                            }
                            .eyebrow {
                                display:block;
                                margin-bottom: 8px;
                                font-size: 12px;
                                letter-spacing: 1.5px;
                            }
                            .card-title {
                                color: var(--black);
                                letter-spacing: 0;
                                line-height: 22px;
                                text-decoration: none; 
                                font-size: 16px;
                                font-weight: 600;
                                margin:0;    
                                transition: var(--animation1);                                
                                opacity:1;                           
                            }
                            .hdcard_cnt p {
                                margin: 5px 0 0 0;
                                transition: var(--animation1);
                                color: var(--concora-body-color);
                                font-size: 14px;
                                text-decoration: none;
                            }
                            .child_btn {
                                a {
                                    &:before {
                                        content:'';
                                        position:absolute;
                                        top:0;
                                        left:0;
                                        width: 100%;
                                        height: 100%;
                                    }
                                }
                            }
                            &:hover {
                                .card-title {
                                    text-decoration: none;
                                    opacity: 1;
                                }
                                .hdcard_cnt p {
                                    opacity: 1;
                                }
                            }
                            
                        }

                        

                        
                    }

                    .child_btn {
                        display: flex;
                        margin-top: 20px;

                        a {
                            display: flex;
                            align-items: center;
                        }
                    }
                }
            }
        }

        .hd-right {
            display: flex;
            align-items: center;
            gap: 30px;
            margin-right: 0;
            margin-left: auto;
            position: relative;
            @media (max-width: 1280px) {
                gap: 20px;
            }

            .hd-links {
                ul {
                    margin: 0;
                    padding: 0;
                    display: flex;
                    list-style: none;
                    align-items: center;
                    gap: 30px;

                    &::before,
                    &::after {
                        display: none;
                    }

                    li {
                        letter-spacing: normal;
                        margin: 0;
                        line-height: normal;

                        a {
                            color: var(--white);
                            letter-spacing: 0.15px;
                            padding: 0;

                            &:hover {
                                color: var(--action2);
                            }
                        }
                    }
                }
            }

            .hd-btn {
                .hs-button {
                    @media (max-width: 1280px) {
                        display: inline-block;
                    }
                }
                @media (max-width: 1024px) {
                    a {
                        display:block;
                        width:100%;
                    }
                }
                &.dsk {
                    @media (max-width: 1280px) {
                        a {
                            padding:10px 20px;
                            font-size: 13px;
                        }
                    }
                }
            }
        }

        @media (max-width: 1024px) {
            .dsk {
                display: none;
            }

            .mobile-menu {
                .trigger {
                    cursor: pointer;
                    display: inline-block;
                    height: auto;
                    width: auto;
                    border: 0;
                    background: transparent;
                    padding: 0;
                    font: inherit;
                    color: inherit;
                    &[aria-expanded="true"] {
                        i {
                            transform:rotate(45deg);
                            &:before {opacity:0;}
                            &:after {transform: rotate(-90deg);top:0;}
                        }
                        
                    }

                    i {
                        background-color: var(--action1);
                        border-radius: 1px;
                        display: inline;
                        display: inline-block;
                        height: 3.5px;
                        position: relative;
                        top: -5px;
                        width: 33px;
                        transition: all 0.3s ease;
                        &:before {
                            background-color: var(--action1);
                            border-radius: 1px;
                            content: "";
                            display: inline-block;
                            height: 3.5px;
                            position: absolute;
                            top: -9px;
                            width: 33px;
                            left:0;
                        }

                        &:after {
                            left:0;
                            background-color: var(--action1);
                            border-radius: 1px;
                            content: "";
                            display: inline-block;
                            height: 3.5px;
                            position: absolute;
                            top: 9px;
                            width: 33px;
                        }
                    }
                }

                .mb-menu-wrap {
                    position: absolute;
                    width: 100%;
                    left: 0;
                    right: 0;
                    top: 100%;
                    z-index: 999;
                    background-color: var(--gray1);
                    display: none;
                    overflow-y: auto;
                    max-height: calc(100vh - 140px);

                    .mb-menu-inr {
                        padding: 40px 20px;
                    }

                    .hd-right {
                        display: block;

                        .hd-links ul {
                            display: block;

                            &>li {
                                margin-bottom: 20px;
                                float: none;
                            }
                        }
                    }

                    .hd-menu .megamenu-inr>ul {
                        display: block;

                        .main-nav-li.is-open:after {
                            display: none;
                        }

                        li.is-open {
                            .child-trigger {
                                svg {
                                    transform: rotateX(180deg);
                                }
                            }
                        }

                        &>li {
                            margin-bottom: 20px;
                            display: flex;
                            justify-content: space-between;
                            flex-wrap: wrap;
                            position: relative;

                            &:hover > .parent-item,
                            &.is-open > .parent-item,
                            &:focus-within > .parent-item {
                                border: none;
                                background: transparent;
                            }

                            .child_inner {
                                margin-top: 10px;
                                margin-bottom: 20px;
                            }

                            &.has-megamenu.is-open > .parent-item {
                                color: var(--action1);
                            }

                            &>.parent-item {
                                display: flex;
                                align-items: center;
                                width: 100%;
                                min-height: 44px;
                                font-weight: 600;
                                font-size: 18px;
                                line-height: 1.2;
                                padding: 0 36px 24px 0;
                                box-sizing: border-box;
                                color: var(--action1);
                                border: none;
                                background: transparent;

                                .icon {
                                    display: none;
                                }
                            }

                            .child-trigger {
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                height: 44px;
                                width: 44px;
                                position: absolute;
                                right: 0;
                                top: 0;
                                z-index: 99;
                                transition: none;
                                cursor: pointer;
                                pointer-events: auto;

                                svg {
                                    height: 20px;
                                    width: 20px;
                                    fill: var(--action1);

                                    path {
                                        fill: var(--action1);
                                    }
                                }
                            }

                            &:not(.is-open)>.child-wrapper {
                                display: none;
                            }

                            &.is-open>.child-wrapper {
                                display: block;
                                padding: 36px 0;
                                margin: 0 0 36px;
                                border: none;
                                border-bottom: 1px solid var(--gray2);
                                border-radius: 0;
                            }

                            &.single-column-menu > .child-wrapper,
                            &.has-megamenu.multi-column-menu > .child-wrapper,
                            .child-wrapper {
                                position: static;
                                top: auto;
                                left: auto;
                                right: auto;
                                width: 100%;
                                max-width: none;
                                opacity: 1;
                                visibility: visible;
                                margin: 0;
                                padding: 0;
                                transition: none;
                                background: transparent;
                                border: none;
                                border-radius: 0;
                                box-shadow: none;

                                &::before {
                                    display: none;
                                }

                                .child_flex {
                                    display: flex;
                                    gap: 24px;
                                    flex-wrap: wrap;
                                    flex-direction: column;

                                    .child_col {
                                        width: 100%;
                                    }

                                    .ttl {
                                        padding:0;
                                        border: none;
                                        background: transparent;
                                    }

                                    .ttl-text {
                                        margin-bottom: 8px;
                                    }

                                    .child-menuitems > a {
                                        display: block;
                                        padding: 10px 0;
                                        border: none;
                                        border-radius: 0;

                                        &:hover,
                                        &:focus {
                                            border: none;
                                            background: transparent;
                                            .menu-text {
                                                text-decoration: underline;
                                            }
                                        }

                                        &:active {
                                            background: var(--concora-blue-light);
                                        }
                                    }

                                    .child-card {
                                        max-width: none;
                                        border: 1px solid var(--action1);
                                        background-color: rgba(255, 255, 255, 0.3);
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    .search-menu {
        &:not(.is-open) {
            visibility: hidden;
            pointer-events: none;

            .search-menu__backdrop,
            .search-menu__panel {
                opacity: 0;
            }

            .search-menu__panel {
                transform: translateY(-12px);
            }
        }

        &.is-open {
            visibility: visible;
            pointer-events: auto;

            .search-menu__backdrop {
                opacity: 1;
            }

            .search-menu__panel {
                opacity: 1;
                transform: translateY(0);
            }
        }
    }

    .search-menu__backdrop {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: 100px;
        z-index: 1000;
        margin: 0;
        padding: 0;
        border: 0;
        background: rgba(0, 0, 0, 0.9);
        cursor: pointer;
        transition: opacity 0.2s ease;
    }

    .search-menu__panel {
        position: fixed;
        left: 0;
        right: 0;
        top: 100px;
        z-index: 1001;
        padding: 16px 20px;
        background-color: var(--dark-gray);
        box-shadow: var(--shadow3);
        transition: opacity 0.2s ease, transform 0.25s ease;
    }

    .search-menu__inner {
        display: flex;
        align-items: stretch;
        gap: 12px;
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
    }

    .search-menu__inner .hs-search-field {
        flex: 1 1 auto;
        min-width: 0;
        width: 100%;

        .hs-search-field__bar form {
            width: 100%;
        }

        .hs-search-field__input {
            flex: 1 1 auto;
            min-width: 0;
            max-width: none;
        }
    }

    .search-menu__close {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        min-height: 48px;
        margin: 0;
        padding: 0;
        border: 1px solid var(--black);
        border-radius: 6px;
        background: var(--black);
        color: var(--white);
        font-size: 28px;
        line-height: 1;
        cursor: pointer;
        span {
            transition: all 0.2s ease;
            position: relative;
            top:-2px;
        }

        &:hover, &:focus {
            color: var(--white);
            background: var(--black);
            border-color: var(--black);
            span {
                transform:scale(1.5);
                transform-origin: center;
            }
        }

        &:focus-visible {
            outline: 2px solid var(--action1);
            outline-offset: 2px;
        }
    }

    @media (min-width: 1025px) {
        .hd-right {
            z-index: 2;
        }

        &:has(.main-nav-li.is-open) .hd-right {
            z-index: 3;
        }

        .top-navigation:has(.signin-menu .hs-item-has-children:hover),
        .top-navigation:has(.signin-menu .hs-item-has-children:focus-within) {
            z-index: 4;
        }
    }
}


body.hs-landing-page.hs-page header {
    position: absolute;
    .megamenu-mdl,.hd-right,.mobile-menu,.search-menu {
        display:none;
    }
}