#site-header {
    position: fixed;
    top: 0;
    background-color: white;
    z-index: 999;
    padding-top: var(--spacer);
    padding-bottom: 0.5rem;
}

@media screen and (max-width: 991px) {
    #site-header.active {
        border-bottom: 1px solid var(--jfi-blue);
    }

    #site-header.active .primary-menu-container {
        margin: 1rem auto;
    }
}

div.site-logo img.icon{
    margin-bottom: -0.4rem;
}

input[type="search"]::-webkit-search-cancel-button {

  /* Remove default */
  -webkit-appearance: none;

  /* Now your own custom styles */
  height: 24px;
  width: 24px;
  background-size: contain;
  background: transparent;
  display: block;
  background-repeat: no-repeat;
  background-position: center center;
  /* background-image: url('../icons/backspace.svg'); */
  margin-right: 0px;
  background-color: var(--jfi-blue);
  -webkit-mask-image: url('../icons/backspace.svg');
  mask-image: url('../icons/backspace.svg');
  -webkit-mask-size: contain;
  mask-size: contain;
  /* Will place small red box on the right of input (positioning carries over) */
}


div.site-logo{
    position:relative;
    position: relative;
}

div.site-logo a,
div.site-logo a *{
    font-size: 2rem;
    font-family: var(--font-family-sans-serif);
    color: var(--jfi-blue);
    font-weight: normal;
    text-decoration: none !important;
    border-bottom: none !important;

}

@media screen and (max-width: 991px) {
    div.site-logo a,
    div.site-logo a *{
        font-size:1.5rem
    }

    div.site-logo img.icon {
        height: 1.125rem;
        margin-bottom: -0.125rem;
    }
}

#menu-toggle {
    min-width: 65px;
}

#site-header .menu-item {
    white-space: nowrap;
    height: 32px !important;

}

#menu-toggle,
#primary-menu-list li a,
input[type="search"],
input[type="submit"] {
    font-size: 1.75rem;
    font-family: var(--font-family-sans-serif);
    color: var(--jfi-red);
    font-weight: normal;
    text-decoration: none;
    border-bottom: 1px transparent;
}

@media screen and (max-width: 991px) {
    #menu-toggle,
    #primary-menu-list li a,
    input[type="search"],
    input[type="submit"] {
        font-size: 1.5rem;
    }
}


@media screen and (min-width: 992px) {


    #site-header .custom-logo {
        height: 2rem;
    }

}

#primary-menu-list:not(.active) {
    display: none;
}

#primary-menu-list.active {
    display: flex;
}

#primary-menu-list .menu-item {
    margin-right: 2rem;
}

form.search-form {
    position: relative;
    width: 0px;
    max-width: 100%;
    overflow: hidden;
    display: inline-flex;
}

form.search-form::after {
    content: '';
    left: -2rem;
    background-image: url('../assets/icons/arrow-blue.svg');
    position: absolute;
}

input.search-field:focus-visible {
    border: none;
    outline-width: 0px;
    border-bottom: 1px solid var(--jfi-blue);
}

input.search-field:focus-visible::before {
    content:"";
    position:relative;
    display:inline-block;
    vertical-align:top;
    width:27px;
    height:100%;
    background-image: url('../assets/icons/arrow-blue.svg');
}

form.search-form .search-submit {
    display: none;
}

input[type="search"],
input[type="submit"] {
    margin: 0;
    padding: 0;
    background: none;
    color: var(--jfi-blue);
    -webkit-appearance: none;
}

input[type="search"] {
    border-width: 0 0 1px 0;
    border-style: solid;
    border-color: var(--jfi-blue);
}

input[type="search"]::placeholder {
    color: var(--jfi-blue);
}

input[type="submit"] {
    border: none;
}

.search-icon {
    height: 1.125rem;
}

@media screen and (max-width: 991px) {
    .search-icon {
        height: 0.9rem;
    }
}

@media screen and (max-width: 991px) {
    .search-wrapper {
        position: absolute;
        background-color: var(--white);
    }

    .primary-menu-container {
        order: 1;
    }
}

/* reorder contents when desktop header menu is open*/
/* #site-header .site-logo{
    order:-1;
}

#site-header  .menu-toggle-wrapper{
    position: absolute;
    right: 2rem;
}

#menu-toggle {
    min-width: 65px;
}

#site-header .primary-menu-container{
    order:0;
}

}




    #site-header #primary-menu-list {
        display: none;

    }

    #site-header #primary-menu-list.active {
    display: flex;
    flex-direction: row;
    margin-right: 10vw;
    gap: 2rem;


    }

    #site-header #primary-menu-list a:hover{
        border-bottom: 1px var(--jfi-blue) solid;
    }

    #site-header .menu-item {
        padding: 0;
    } */



     /* media query for mobile */

/*
    @media screen and (max-width: 991px) {

        div.site-logo a,
        div.site-logo a *{
            font-size: 1.5rem !important;
            font-family: var(--font-family-sans-serif);
            color: var(--jfi-blue);
            font-weight: normal;
            text-decoration: none !important;
            border-bottom: none !important;

        }

        #menu-toggle {
            min-width: 50px;
        }


        div.site-logo img.icon{
            height: 1.125rem !important;
            margin-bottom: -.125rem;

        }


        #menu-toggle,  #primary-menu-list li a {
        font-size: 1.25rem !important;

        }


        input[type="search"],
        input::placeholder  {

            font-size: 1.25rem !important;

                }


        .search-field {

        background-size: 15px 15px !important;
        margin: 0 !important;
        -webkit-transition: none !important;
        transition: width none !important;

        } */


    /* Hiding site content on header open (mobile) */
    /* #page-wrapper.hidden{
        display:none;
    }

    #footer.menu-open{
        padding-top:30vh;
    }

    #site-header #primary-menu-list.active {
        display: block !important;

    }

    #site-header #primary-menu-list.active .search-form{
        display:none;
    }

    #header-container{
        display: flex;
        flex-direction:column !important;

    }



    #primary-menu-list li {
        height:32px !important;
    }

    .search-field:focus {
        width: 75vw !important;
    }




 } */




/*------------------------------------------*/
/*search form*/

/* .search-form {
	position: relative;

}

.search-field {
    background-color: transparent;
    background-image: url(../assets/icons/search-blue.svg);
    background-repeat: no-repeat;
    background-size: 22px 22px;
    border: none;
    cursor: pointer;
    padding: 0 0 0 22px;
    margin: 0 0.5rem 0 0;
    position: relative;
    -webkit-transition: width 400ms ease, background 400ms ease;
    transition: width 400ms ease, background 400ms ease;
    width: 0;
}

.search-field:focus {
	background-color: #fff;
	border-bottom: 1px var(--jfi-blue) solid;
	cursor: text;
	outline: 0;
	width: 30vw;
}

.search-submit {
  display: none;
}

input[type="search"] {
    -webkit-appearance: textfield;
    color: var(--jfi-blue);
    font-family: var(--font-family-sans-serif);
    font-size: 1.75rem;

}

input::placeholder {
    font-family: var(--font-family-sans-serif);
    color: var(--jfi-red);
    font-size: 1.75rem;
    padding-left: 6px;


  }

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance:none;
}

  #search-clear{
      display:none;
  } */