<?php
/**
 *  For Displaying Single Careers Posts 
 *
 *
 * @package Felicityhealth
 * @since Felicityhealth 1.0
 */
?>
<?php 
    get_header();
 ?>

<?php
$categories = get_categories( array(
    'orderby' => 'name',
    'order'   => 'ASC',
) );

$args = array(
    'post_type' => 'careers',
    'order' => 'ASC',
    'orderby' => 'ID',
);
$services = new WP_Query($args);
?>
          

<style>
    .global-hero.with-image {
        background-color: #000;
        border: none;
        color: #fff;
        margin-bottom: 0;
        padding-bottom: 70px;
        padding-top: 310px;
        text-align: center;
    }
    /* .global-hero.with-image:before {
        background: linear-gradient(180deg,rgba(21,22,36,.7),rgba(21,22,36,0));
        content: "";
        display: block;
        height: 160px;
        left: 0;
        position: absolute;
        top: 49px;
        width: 100%;
        z-index: 2;
    } */
    .global-hero.with-image:after {
        background: linear-gradient(180deg,rgba(21,22,36,0),rgba(21,22,36,.8));
        bottom: 0;
        content: "";
        display: block;
        height: 160px;
        left: 0;
        position: absolute;
        width: 100%;
        z-index: 2;
    }
    .global-hero.with-image .background-image {
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: cover;
        height: 100%;
        left: 0;
        opacity: .85;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 0;
    }
    /* .global-hero.with-image .background-image:before {
        background: #151624;
        content: "";
        display: block;
        height: 49px;
        left: 0;
        opacity: .7;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 2;
    } */
    .global-hero.with-image .background-image:after {
        background: #3c3c3c;
        content: "";
        display: block;
        height: 100%;
        left: 0;
        opacity: .15;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 2;
    }
    .global-hero.with-image h6 {
        color: #fff;
        font-family: inherit;
         font-size: 13px;
        letter-spacing: .08em;
        line-height: 1.45em;
        margin: 0 0 1em;
        text-transform: uppercase;
        font-weight: 600;
    }
    .global-hero .pretitle {
        margin-bottom: 10px;
    }
    .global-hero.with-image h1 {
        color: #fff;
        font-family: inherit;
        font-size: 40px;
        letter-spacing: .02em;
        line-height: 1.2em;
        margin: 0 0 1em;
    }

    .global-hero .page-title {
        margin-bottom: 0;
    }

    .global-hero .meta-lower {
        margin-top: 40px;
    }

    @media (min-width: 768px){
        .global-hero.with-image h1 {
            font-size: 54px;
        }
    }

    @media (min-width: 1170px){
        .global-hero.with-image h1 {
            font-size: 60px;
        }
    }

</style>
 
<section class="global-hero with-image ">
    <div class="background-image" style="background-image:url(<?php echo site_url()?>/wp-content/uploads/2022/10/careers-scaled.webp)">&nbsp;</div>	
        <div class="container">
            <h6 class="pretitle"><?php echo __( 'Join Our Team', 'felicityhealth' );?></h6>
            <h1 class="page-title"><?= the_archive_title() ?></h1>
            <div class="meta-lower">  </div>
        </div>
</section>

<style>
    
    section.padding-top-large {
        padding-top: 100px;
    }
   section.padding-bottom-large {
        padding-bottom: 100px;
    }
    section.color-white {
        background-color: #fff;
    }
    .normal_content .content-styled {
        text-align: left;
    }
    .normal_content h2 {
        color: #4e4e4e;
        font-family: inherit;
        font-size: 28px;
        font-weight: 400;
        line-height: 1.5em;
        margin: 0 0 1em;
    }
    @media (min-width: 768px){
        .center-md {
            justify-content: center;
            text-align: center;
        }
    }


</style>
<section class="normal_content padding-top-large padding-bottom-large color-white" style="">
    <div class="container">
        <div class="row center-md">
            <div class="col-md-10">
                <div class="content-styled">
                    <h2>Felicity&nbsp;is a more than 10-year old nonprofit financial lending institution with a strong social mission. As a nationally recognized innovator in the financing of economic and neighborhood revitalization,&nbsp;Felicity attracts enormous talent. Felicity offers its staff an unrivaled platform to combine business acumen and financial skills with social mission.</h2>
                </div>
            </div>
        </div>
    </div>
</section>

<style>
    section.color-grey {
        background-color: #f9f9f9;
        padding-bottom: 30px;
    }
    .split_column .image {
        background-position: 50%;
        background-size: cover;
        height: auto;
        margin-bottom: 40px;
        min-height: 300px;
        position: relative;
        width: 100%;
    }
    

    .split_column .image .inner-image {
        height: auto;
        width: auto;
    }

    .split_column .image.height-fill .inner-image {
        display: none;
    }

    .split_column .content-wrapper {
        padding-bottom: 0;
        padding-top: 0;
        position: relative;
        text-align: left;
    }

    .split_column h4 {
        color: #7e57c2;
        font-family: inherit;
        font-size: 27px;
        line-height: 1.25em;
        margin: 0 0 1em;
    }

    section .section-title {
        padding-bottom: 25px;
        position: relative;
    }
    section .section-title:after {
        background-color: #7e57c2;
        bottom: 0;
        content: "";
        display: block;
        height: 2px;
        position: absolute;
        width: 50px;
    }

    .split_column .content-styled {
        text-align: left;
    }

    .split_column p {
        color: #4e4e4e;
        font-family: inherit;
        font-size: 17px;
        letter-spacing: 0;
        line-height: 1.6em;
        margin: 0 0 30px;
    }


    @media (min-width: 768px){
        .split_column .image.height-fill {
            width: 50%;
        }
        .split_column .image.height-fill.columns-40 {
            width: calc(50% - 120px);
        }
        .split_column .image .inner-image {
            max-width: calc(41.667% - 60px);
        }
        .split_column .image {
            height: 100%;
            left: 0;
            margin: 0;
            position: absolute;
        }
        .end-md {
            justify-content: flex-end;
            text-align: end;
        }
        .split_column .content-wrapper {
            padding-bottom: 100px;
            padding-top: 100px;
        }
        .split_column h4 {
            font-size: 29px;
        }
        .split_column p {
            font-size: 18px;
        }
    }

    @media (min-width: 1170px){
        .split_column h4 {
            font-size: 36px;
        }
        .split_column p {
            font-size: 20px;
        }

    }

</style>

<section class="split_column padding-top-none padding-bottom-none color-grey" style="">
    <div class="inner">
        <div class="image animate side-left height-fill columns-40 visible" style="background-image: url('<?php echo site_url()?>/wp-content/uploads/2022/10/hero2.jpeg');">
            <div class="container">
                    <img class="inner-image" src="<?php echo site_url()?>/wp-content/uploads/2022/10/hero2.jpeg">
            </div>
        </div>
        <div class="container">
            <div class="row end-md">
                <div class="col-md-6 content-wrapper image-height-fill">
                    <h4 class="section-title">Current Openings</h4>
                    <div class="content-styled">
                            <p>A career at Felicity is a chance to learn, train and contribute to this work with some of the best in the community development field. It offers opportunities for knowledge and skill enhancement that is uncommon for a company of its size. If you are looking for a career that is both rewarding and challenging, Felicity could be the place for you.</p>

                            <a class="button_button__Yaq9u button_large__xOVkf button_primary__aMXk2" href="/careers/apply"><?php echo __( 'Apply for a Position' );?> </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>


<style>
    .career_listing h5 {
        color: #4e4e4e;
        font-family: inherit;
        font-size: 17px;
        font-weight: 600;
        letter-spacing: .05em;
        line-height: 1.15em;
        margin: 0 0 1em;
        text-transform: uppercase;
    }
    .career_listing .career-post {
        align-content: center;
        align-items: center;
        border-top: 1px solid #e6e6e6;
        display: flex;
        justify-content: space-between;
        padding-bottom: 25px;
        padding-top: 20px;
        color: #7e57c2;
        text-decoration: none;
        transition: .3s;
    }
 
    .career_listing .career-post:hover .content-wrapper .career-title {
        color: #949494;
        text-decoration: underline;
    }

    .career_listing .career-post .content-wrapper .career-title {
        color: #3c3c3c;
        font-family: inherit;
        font-size: 21px;
        font-weight: 700;
        letter-spacing: -.01em;
        line-height: 1.45em;
        margin-bottom: 4px;
        transition: .3s ease-out;
    }
    
    .career_listing .career-post .content-wrapper .location {
        color: #949494;
        font-family: inherit;
        font-size: 13px;
        letter-spacing: .05em;
        line-height: 1.45em;
        font-weight: 600;
        margin: 0;
        text-transform: uppercase;
        transition: .3s ease-out;
    }

 
    @media (min-width: 768px){
        .career_listin h5 {
            font-size: 18px;
        }
    }

    @media (min-width: 1170px){
        .career_listin h5 {
            font-size: 20px;
        }
    }

</style>

<section class="career_listing padding-top-large padding-bottom-large color-white" style="">
    <div class="container">
        <div class="row">
            <div class="col-md-5">
                <h5 class="career-type-label"><?php echo __( 'Employment Openings', 'felicityhealth' );?></h5>
            </div>
            <div class="col-md-7">
                <!-- loop items -->
                <?php  if ( $services->have_posts() ) : ?>
                    <?php while ( $services->have_posts() )  : $services->the_post(); ?>
                        <a class="career-post" href="<?= esc_url( get_permalink() )?>">
                            <div class="content-wrapper">
                                <p class="career-title"><?= the_title()?></p>
                                <h6 class="location"><?= the_field('location'); ?></h6>
                            </div>
                             <!-- <svg  xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right" viewBox="0 0 16 16">
                                <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
                            </svg> -->
                            <svg version="1.1" id="Layer_1" style="width: 30px;" fill="currentColor" class="bi bi-arrow-right" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"  viewBox="0 0 476.213 476.213" style="enable-background:new 0 0 476.213 476.213;" xml:space="preserve">
                                <polygon points="345.606,107.5 324.394,128.713 418.787,223.107 0,223.107 0,253.107 418.787,253.107 324.394,347.5 
                                345.606,368.713 476.213,238.106 "/>
                            </svg>

                        </a>
                    <?php endwhile; ?>
                
                <?php else: ?>  
                    <p> <?php echo __( 'No Jobs Found:  We are sorry, Job Opennings are temporarily unavailable', 'felicityhealth' );?></p>   
                <?php endif; ?>     
            </div>
        </div>
    </div>
</section>

<style>
    .fe-vs4u5r {
        padding-top: 70px;
        padding-bottom: 70px;
        background: var(--legoBackgroundColor);
        color: var(--legoForegroundColor);
        --legoForegroundColor: #282828;
        --legoBackgroundColor: #ecdcff;
    }
    .fe-1guqad4 {
        --gutterWidth: 32px;
        padding-left: var(--gutterWidth);
        padding-right: var(--gutterWidth);
        max-width: 752px;
        margin: 0px auto;
    }
    .fe-xrjjjd {
        text-align: center;
        margin: 0px auto 24px;
        max-width: 700px;
    }
    .fe-bktj99 {
        font-size: 32px;
        font-weight: 700;
        line-height: 1.2;
        margin-top: 0px;
        margin-bottom: min(0.555em, 30px);
    }
    .fe-1uaaaus {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 32px;
        margin: 50px auto 30px;
    }
    .fe-s5xdrg {
        display: flex;
        -webkit-box-align: center;
        align-items: center;
    }
    .fe-1e7cvhf {
        width: 24px;
        object-fit: contain;
        margin-right: 24px;
        display: block;
    }
    @media (max-width: 800px){
        .fe-vs4u5r {
            padding-top: 48px;
            padding-bottom: 48px;
        }
        .fe-1guqad4 {
            --gutterWidth: 24px;
        }
    }
    @media (max-width: 670px){
        .fe-1uaaaus {
            grid-template-columns: 1fr;
            max-width: 360px;
        }
    }
 

</style>
<section class="fe-vs4u5r">
    <div class="fe-1guqad4">
        <div class="fe-xrjjjd"><h2 class="fe-bktj99">Benefits</h2></div>
        <div class="fe-1uaaaus">
            <div class="fe-s5xdrg">
                <img src="https://cdn.sanity.io/images/599r6htc/localized/0fa9b3ff924b1d706ac052a840a8f626f4452e66-24x24.svg?q=75&amp;fit=max&amp;auto=format" alt="" class="fe-1e7cvhf" loading="lazy" />Competitive salary &amp; equity
            </div>
            <div class="fe-s5xdrg">
                <img src="https://cdn.sanity.io/images/599r6htc/localized/a21e22031a1cacebc2b5088d87346bd5e837f3e1-24x24.svg?q=75&amp;fit=max&amp;auto=format" alt="" class="fe-1e7cvhf" loading="lazy" />Health, Dental, &amp; Vision
            </div>
            <div class="fe-s5xdrg">
                <img src="https://cdn.sanity.io/images/599r6htc/localized/e03a9e2ed6f4be108c77bf73825de31712dfd566-24x24.svg?q=75&amp;fit=max&amp;auto=format" alt="" class="fe-1e7cvhf" loading="lazy" />Retirement with company
                contribution
            </div>
            <div class="fe-s5xdrg">
                <img src="https://cdn.sanity.io/images/599r6htc/localized/5bfc705fb59c110a61c94167aae54b5aab93742a-17x17.svg?q=75&amp;fit=max&amp;auto=format" alt="" class="fe-1e7cvhf" loading="lazy" />Parental leave &amp; fertility
                support
            </div>
            <div class="fe-s5xdrg">
                <img src="https://cdn.sanity.io/images/599r6htc/localized/da14eca14eea753ca4e7efc728dc0824419d1efe-24x24.svg?q=75&amp;fit=max&amp;auto=format" alt="" class="fe-1e7cvhf" loading="lazy" />Mental health and wellness benefits
            </div>
            <div class="fe-s5xdrg">
                <img src="https://cdn.sanity.io/images/599r6htc/localized/44e4f0b4fc16920336004b68a9bda87f1dd13f3c-24x24.svg?q=75&amp;fit=max&amp;auto=format" alt="" class="fe-1e7cvhf" loading="lazy" />Generous PTO
            </div>
            <div class="fe-s5xdrg">
                <img src="https://cdn.sanity.io/images/599r6htc/localized/8383c259d90c7ec645ec7d934d9570981eb1a6c8-24x24.svg?q=75&amp;fit=max&amp;auto=format" alt="" class="fe-1e7cvhf" loading="lazy" />Company recharge days
            </div>
            <div class="fe-s5xdrg">
                <img src="https://cdn.sanity.io/images/599r6htc/localized/2e5604934f1fb26d42ee08c82c643593d546189d-24x24.svg?q=75&amp;fit=max&amp;auto=format" alt="" class="fe-1e7cvhf" loading="lazy" />Learning &amp; development stipend
            </div>
            <div class="fe-s5xdrg">
                <img src="https://cdn.sanity.io/images/599r6htc/localized/634d67f9ae1656d78bafa57098a4a0e13cb04414-24x24.svg?q=75&amp;fit=max&amp;auto=format" alt="" class="fe-1e7cvhf" loading="lazy" />Work from home stipend
            </div>
            <div class="fe-s5xdrg">
                <img src="https://cdn.sanity.io/images/599r6htc/localized/5c3e2412c64b903166bee735bcdb8522530f8cf2-24x24.svg?q=75&amp;fit=max&amp;auto=format" alt="" class="fe-1e7cvhf" loading="lazy" />Cell phone reimbursement
            </div>
        </div>
    </div>
</section>

<?php get_template_part( 'template-parts/snippets/support' ); ?>
 
<?php get_footer(); ?>
 