/*
 * Job search bar (Partials/Search/FormBar.html), layout after the designer's draft:
 * grey bar over the full width, white rounded drop-downs (ul.navbar-nav) with red arrow, text field, red round
 * search button, link to the employer services; number of jobs in red below.
 */

 .section:has(.frame-type-pbjobportal_jobsearch){margin-top:-2px}
body:not(.pagelevel-0 ) .frame-type-pbjobportal_jobsearch{padding-top:0 !important}

body.pagelevel-0 .frame-type-pbjobportal_jobsearch{border-top: 1px solid #C4C4C4;
border-bottom: 1px solid #C4C4C4;
background: #F2F2F2;
margin-top: 3rem;
margin-bottom:3rem;
}

.c-jobsearchbar {
    --jobsearchbar-red: #e40422;
    --jobsearchbar-grey: #F2F2F2;;
    --jobsearchbar-border: #c4c4c4;
    --jobsearchbar-field-text: #a0a0a0;
    --jobsearchbar-field-height: 60px;
    --jobsearchbar-field-radius: 20px;
    --jobsearchbar-text: #4a4a4a;
    position: relative;
    z-index: 20;
    padding: 1.4rem 0;
}

/* grey background over the full width of the window (without clipping the open drop-down lists) */
.c-jobsearchbar::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    z-index: -1;
    width: 100vw;
    background: var(--jobsearchbar-grey);
    transform: translateX(-50%);
    border-bottom: 1px solid #C4C4C4;
}

.c-jobsearchbar__layout {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
}

/* "All": same design as the drop-downs, highlighted if no filter is set */
.c-jobsearchbar__all {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    height: var(--jobsearchbar-field-height);
    padding: 0 1.4rem;
    border: 1px solid var(--jobsearchbar-border);
    border-radius: var(--jobsearchbar-field-radius);
    background: #fff;
    color: var(--jobsearchbar-field-text);
    font-size: 1rem;
    line-height: 1.2;
    text-decoration: none;
    font-weight: bold;
}

.c-jobsearchbar__all:hover,
.c-jobsearchbar__all:focus-visible {
    border-color: #b5b5b5;
    color: #1a1a1a;
}

.c-jobsearchbar__all--active {
    border-color: var(--jobsearchbar-red);
    color: var(--jobsearchbar-red);
    font-weight: bold;
}

.c-jobsearchbar__all--active:hover,
.c-jobsearchbar__all--active:focus-visible {
    border-color: var(--jobsearchbar-red);
    color: var(--jobsearchbar-red);
}

/* drop-downs */
.c-jobsearchbar__dropdown {
    position: relative;
    flex: 0 1 auto;
}

.c-jobsearchbar__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    min-width: 8.75rem;
    max-width: 16rem;
    height: var(--jobsearchbar-field-height);
    padding: 0 1.4rem;
    border: 1px solid var(--jobsearchbar-border);
    border-radius: var(--jobsearchbar-field-radius);
    background: #fff;
    color: var(--jobsearchbar-field-text);
    font-size: 1rem;
    line-height: 1.2;
    cursor: pointer;
    font-weight: bold;
}

.c-jobsearchbar__toggle-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.c-jobsearchbar__toggle::after {
    content: "";
    flex: 0 0 auto;
    width: .55rem;
    height: .55rem;
    margin-top: -.25rem;
    border-right: 2px solid var(--jobsearchbar-red);
    border-bottom: 2px solid var(--jobsearchbar-red);
    transform: rotate(45deg);
    transition: transform .15s ease;
}

.c-jobsearchbar__dropdown--open .c-jobsearchbar__toggle::after {
    margin-top: .25rem;
    transform: rotate(-135deg);
}

.c-jobsearchbar__toggle:hover,
.c-jobsearchbar__toggle:focus-visible,
.c-jobsearchbar__dropdown--open .c-jobsearchbar__toggle {
    border-color: #b5b5b5;
    color: #1a1a1a;
}

.c-jobsearchbar__dropdown--selected .c-jobsearchbar__toggle,
.c-jobsearchbar__dropdown--selected .c-jobsearchbar__toggle:hover,
.c-jobsearchbar__dropdown--selected .c-jobsearchbar__toggle:focus-visible {
    border-color: var(--jobsearchbar-red);
    color: var(--jobsearchbar-red);
}

/* list of a drop-down */
.c-jobsearchbar .c-jobsearchbar__list {
    position: absolute;
    top: calc(100% + .5rem);
    left: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    min-width: 17rem;
    max-height: 22rem;
    margin: 0;
    padding: .5rem;
    overflow-y: auto;
    list-style: none;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 .5rem 2rem rgba(0, 0, 0, .18);
}

.c-jobsearchbar .c-jobsearchbar__list[hidden] {
    display: none;
}

.c-jobsearchbar .c-jobsearchbar__list .nav-item {
    margin: 0;
}

.c-jobsearchbar .c-jobsearchbar__option {
    display: block;
    width: 100%;
    padding: .5rem .9rem;
    border: 0;
    border-radius: .6rem;
    background: none;
    color: var(--jobsearchbar-text);
    font-size: 1rem;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
    font-weight: bold;
}

.c-jobsearchbar .c-jobsearchbar__option:hover,
.c-jobsearchbar .c-jobsearchbar__option:focus-visible {
    background: #f2f2f2;
    color: #1a1a1a;
    outline: none;
}

.c-jobsearchbar .c-jobsearchbar__option.active {
    color: var(--jobsearchbar-red);
    font-weight: bold;
}

/*
 * The lists are ul.navbar-nav: neutralise the styles and the hover slider of the main navigation of the theme
 * (talent_sitepackage main.css / main.js act on every .navbar-nav)
 */
.c-jobsearchbar .c-jobsearchbar__list > .nav-item {
    flex: 0 0 auto;
    position: static;
    text-align: left;
    background: none;
}

.c-jobsearchbar .c-jobsearchbar__list > .nav-item::before,
.c-jobsearchbar .c-jobsearchbar__list > .navbar-slider {
    display: none;
}

.c-jobsearchbar .c-jobsearchbar__list > .nav-item > .nav-link {
    position: static;
    justify-content: flex-start;
    text-transform: none;
}

.c-jobsearchbar .c-jobsearchbar__list > .nav-item.slider-red > .nav-link {
    color: var(--jobsearchbar-text) !important;
}

.c-jobsearchbar .c-jobsearchbar__list > .nav-item.slider-red > .nav-link.active {
    color: var(--jobsearchbar-red) !important;
}

/* free text and search button */
.c-jobsearchbar__text {
    flex: 0 1 15rem;
}

.c-jobsearchbar__input {
    width: 100%;
    height: var(--jobsearchbar-field-height);
    padding: 0 1.4rem;
    border: 1px solid var(--jobsearchbar-border);
    border-radius: var(--jobsearchbar-field-radius);
    background: #fff;
    color: var(--jobsearchbar-field-text);
    font-size: 1rem;
    font-weight: bold;
}

.c-jobsearchbar__input::placeholder {
    color: var(--jobsearchbar-field-text);
    font-weight: bold;
}

.c-jobsearchbar__input:focus {
    border-color: #b5b5b5;
    outline: none;
}

.c-jobsearchbar__submit {
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: 50%;
    background: var(--jobsearchbar-red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='4.6' fill='none' stroke='%23fff' stroke-width='2'/%3E%3Cpath d='m10.5 10.5 3 3' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 1rem;
    cursor: pointer;
}

.c-jobsearchbar__submit:hover,
.c-jobsearchbar__submit:focus-visible {
    box-shadow: 0 0 0 .2rem rgba(228, 4, 34, .25);
    outline: none;
}

/* employer services */
.c-jobsearchbar__employer {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-left: auto;
    color: #1a1a1a;
    font-size: 1rem;
    text-decoration: none;
    font-weight: bold;
}

.c-jobsearchbar__employer::before {
    content: "";
    width: .85rem;
    height: .85rem;
    background: url("/typo3conf/ext/talent_sitepackage/Resources/Public/Icons/building.svg") no-repeat center / contain;
}

.c-jobsearchbar__employer:hover,
.c-jobsearchbar__employer:focus-visible {
    color: #1a1a1a;
    text-decoration: underline;
}

/* number of jobs below the bar */
.c-jobsearchbar__count {
    margin: 3rem 0 2.5rem;
    color: #e40422;
    font-size: 1rem;
    font-weight: bold;
    letter-spacing: .02em;
    text-align: center;
    text-transform: uppercase;
}

.c-jobsearchbar__count b {
    font-weight: inherit;
}

.c-jobsearch-teaser--bar {
    padding: 0;
    background: none;
}

@media (max-width: 767.98px) {
    /* "All" and both drop-downs in one row */
    .c-jobsearchbar__dropdown {
        flex: 1 1 0;
        min-width: 0;
    }

    .c-jobsearchbar__all,
    .c-jobsearchbar__toggle {
        padding: 0 .9rem;
    }

    .c-jobsearchbar__toggle {
        width: 100%;
        max-width: none;
        min-width: 0;
    }

    .c-jobsearchbar__text {
        flex: 1 1 calc(100% - 3rem);
    }

    .c-jobsearchbar__employer {
        flex: 1 1 100%;
        margin-left: 0;
    }

    .c-jobsearchbar .c-jobsearchbar__list {
        min-width: 100%;
    }
}

/*
 * start page (Templates/Job/Search.html, settings.formLayout = teaser): number of jobs above the bar, filters centred,
 * no grey bar of its own (the content element has the background)
 */
.c-jobsearch-teaser--home {
    padding-bottom: 1rem;
}

.c-jobsearchbar__intro {
    margin: 0 0 2rem;
    color: #1a1a1a;
    font-size: 1rem;
    text-align: center;
}

.c-jobsearchbar--home {
    padding: 0;
}

.c-jobsearchbar--home::before {
    display: none;
}

.c-jobsearchbar--home .c-jobsearchbar__layout {
    justify-content: center;
}

/* job detail page: no number of jobs between the search bar and the job (designer's draft) */
.frame:has(+ .frame .c-jobdetail) .c-jobsearchbar__count {
    display: none;
}

/* layer while the search is executed (class --active set by JobSearchForm.js) */
.c-jobsearch-teaser__overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .85);
}

.c-jobsearch-teaser__overlay.--active {
    display: flex;
}

.c-jobsearch-teaser__loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    padding: 2rem 2.5rem;
    border-radius: 1.5rem;
    background: #fff;
    box-shadow: 0 .5rem 2rem rgba(0, 0, 0, .15);
}

.c-jobsearch-teaser__spinner {
    width: 3rem;
    height: 3rem;
    border: .3rem solid #ececec;
    border-top-color: #e40422;
    border-radius: 50%;
    animation: c-jobsearch-spin .8s linear infinite;
}

.c-jobsearch-teaser__loader-text {
    margin: 0;
    color: #1a1a1a;
    font-size: 1rem;
    font-weight: bold;
}

@keyframes c-jobsearch-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .c-jobsearch-teaser__spinner {
        animation-duration: 2.4s;
    }
}