/**
 * StaffNow Job Opening Search — front-end styles.
 */

.staffnow-jos {
    --sjos-navy: #14172c;
    --sjos-teal: #126460;
    --sjos-contract: #67a593;
    --sjos-accent: #e4973d;
    --sjos-accent-hover: #d08529;
    --sjos-error: #e56765;
    --sjos-bar: #efefef;
    --sjos-border: var(--sjos-teal);
    --sjos-card-border: #e6e6e6;
    --sjos-ink: #000;
    --sjos-gutter: clamp(1.25rem, 6%, 6rem);

    margin: 0 0 2rem;
    color: var(--sjos-ink);
}

.staffnow-jos [hidden] {
    display: none;
}

/* Form */
.staffnow-jos__form {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem 1.5rem;
    margin: 0 0 4rem;
    padding: 2.5rem var(--sjos-gutter);
    background-color: var(--sjos-bar);
}

.staffnow-jos__fields {
    display: contents;
}

.staffnow-jos__field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.staffnow-jos__label {
    margin: 0 0 0.4rem;
    font-size: 0.9375rem;
    font-weight: 700;
}

.staffnow-jos__select,
.staffnow-jos__input,
.staffnow-jos__multiselect-toggle,
.staffnow-jos__date-display {
    font-family: inherit;
    font-size: 1rem;
    line-height: normal;
}

.staffnow-jos__select,
.staffnow-jos__input,
.staffnow-jos__multiselect-toggle {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem !important;
    box-sizing: border-box !important;
    color: var(--sjos-ink) !important;
    background-color: #fff !important;
    border: 1px solid var(--sjos-border) !important;
    border-radius: 4px !important;
}

.staffnow-jos__select:focus-visible,
.staffnow-jos__input:focus-visible,
.staffnow-jos__multiselect-toggle:focus-visible {
    outline: 2px solid var(--sjos-border);
    outline-offset: 2px;
}

.staffnow-jos__select:not([multiple]) {
    appearance: none;
    padding-right: 2rem !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1.25rem;
}

.staffnow-jos__select[multiple] {
    min-height: 7rem;
}

.staffnow-jos__select[disabled],
.staffnow-jos__multiselect-toggle[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Multi-select enhanced into a dropdown with checkboxes. The native select
   stays in the form (hidden, still submitted) so it works without JavaScript,
   and its hint stays available to screen readers without taking up space. */
.staffnow-jos__select--enhanced,
.staffnow-jos__hint--assistive {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
}

.staffnow-jos__multiselect {
    position: relative;
}

/* Border and padding are mirrored from a sibling native select at runtime
   so the toggle matches the theme's own controls; these are the fallbacks. */
.staffnow-jos__multiselect-toggle {
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.staffnow-jos__multiselect-toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0.85rem;
    width: 0.4rem;
    height: 0.4rem;
    margin-top: -0.3rem;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(45deg);
}

.staffnow-jos__multiselect-panel {
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    max-height: 14rem;
    margin: 0.125rem 0 0;
    padding: 0.25rem;
    overflow-y: auto;
    background-color: #fff;
    border: 1px solid var(--sjos-border);
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.staffnow-jos__multiselect-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.375rem;
    cursor: pointer;
}

.staffnow-jos__multiselect-option:hover {
    background-color: rgba(0, 0, 0, 0.06);
}

.staffnow-jos__date {
    position: relative;
    display: block;
}

.staffnow-jos__date .staffnow-jos__input {
    padding-right: 2rem !important;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23126460'%3E%3Cpath d='M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    background-size: 1.15rem;
}

.staffnow-jos__date .staffnow-jos__input::-webkit-calendar-picker-indicator {
    display: none;
}

.staffnow-jos__date-display {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding-left: calc(0.75rem + 1px);
    white-space: nowrap;
    overflow: hidden;
    color: var(--sjos-ink);
    pointer-events: none;
}

.staffnow-jos__input--date-masked {
    color: transparent !important;
}

.staffnow-jos__hint {
    margin: 0.25rem 0 0;
    font-size: 0.75rem;
    opacity: 0.8;
}

.staffnow-jos__actions {
    grid-column: span 2;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
}

.staffnow-jos__submit,
.staffnow-jos__clear {
    min-height: 2.75rem;
    padding: 0.5rem 2rem !important;
    font-weight: 700 !important;
    border-radius: 4px !important;
    cursor: pointer !important;
}

.staffnow-jos__submit {
    color: #fff !important;
    background-color: var(--sjos-navy) !important;
    border: 0;
}

.staffnow-jos__submit:hover,
.staffnow-jos__submit:focus-visible {
    background-color: #22263f !important;
}

.staffnow-jos__clear {
    color: var(--sjos-navy) !important;
    background-color: transparent !important;
    border: 1px solid var(--sjos-navy);
}

.staffnow-jos__clear:hover,
.staffnow-jos__clear:focus-visible {
    color: #fff !important;
    background-color: var(--sjos-navy) !important;
}

.staffnow-jos__submit[disabled],
.staffnow-jos__clear[disabled] {
    opacity: 0.6;
    cursor: default !important;
}

/* Status (aria-live) */
.staffnow-jos__status {
    min-height: 1.7rem;
    margin: 0 0 0.5rem;
    text-align: center;
}

/* Results */
.staffnow-jos__results-wrap {
    padding: 0 var(--sjos-gutter);
}

.staffnow-jos__count {
    margin: 0 0 1.75rem;
}

.staffnow-jos__count strong,
.staffnow-jos__all-results strong,
.staffnow-jos__card-ref strong {
    font-weight: 700;
}

.staffnow-jos__results {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.staffnow-jos__results[aria-busy="true"] {
    opacity: 0.6;
}

.staffnow-jos__card {
    display: flex;
    flex-direction: column;
    padding: 1.2rem;
    font-size: 0.85rem;
    background-color: #fff;
    border: 1px solid var(--sjos-card-border);
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
}

.staffnow-jos .staffnow-jos__card-title,
.staffnow-jos .staffnow-jos__status,
.staffnow-jos .staffnow-jos__count,
.staffnow-jos .staffnow-jos__no-results,
.staffnow-jos .staffnow-jos__unavailable,
.staffnow-jos .staffnow-jos__error,
.staffnow-jos .staffnow-jos__all-results {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.2;
}

.staffnow-jos .staffnow-jos__count,
.staffnow-jos .staffnow-jos__all-results {
    font-weight: 400;
}

.staffnow-jos .staffnow-jos__card-title,
.staffnow-jos .staffnow-jos__status {
    color: var(--sjos-teal);
}

.staffnow-jos .staffnow-jos__error,
.staffnow-jos .staffnow-jos__status--error {
    color: var(--sjos-error);
    text-align: center;
}

.staffnow-jos .staffnow-jos__card-title {
    margin: 0.9rem 0;
    text-wrap: wrap;
}

.staffnow-jos__chips {
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0 0 1.35rem;
    padding: 0;
}

.staffnow-jos__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 100%;
    padding: 0.1rem 0.8rem;
    font-weight: 700;
    line-height: 1.35;
    border: 1px solid currentColor;
    border-radius: 999px;
    margin: 5px 0 !important;
}

.staffnow-jos .staffnow-jos__chips > .staffnow-jos__chip:not(.staffnow-jos__chip--pin) {
    box-sizing: border-box;
    width: 100%;
}

.staffnow-jos__chip--contract {
    color: var(--sjos-contract);
}

.staffnow-jos__chip--maintenance {
    color: var(--sjos-accent);
}

.staffnow-jos .staffnow-jos__card-time-left {
    align-self: center;
    color: #fff;
    text-align: center;
    font-size: small;
}

.staffnow-jos .staffnow-jos__chip--time-left-open {
    background-color: #e4973d;
    border-color: #e4973d;
    color: #000;
}

.staffnow-jos__chip--time-left-closed {
    background-color: #dc3545;
    border-color: #dc3545;
}

.staffnow-jos__chip-value {
    font-weight: 800;
}

.staffnow-jos__chip--pin::before,
.staffnow-jos__chip--sun::before {
    content: "";
    flex: 0 0 auto;
    width: 0.9em;
    height: 0.9em;
    background-color: currentColor;
    -webkit-mask: center / contain no-repeat var(--sjos-chip-icon);
    mask: center / contain no-repeat var(--sjos-chip-icon);
}

.staffnow-jos__chip--pin {
    --sjos-chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7Zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5Z'/%3E%3C/svg%3E");
}

.staffnow-jos__chip--sun {
    --sjos-chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 7a5 5 0 1 0 0 10 5 5 0 0 0 0-10Zm0-6 2.2 3.3h-4.4L12 1Zm0 22-2.2-3.3h4.4L12 23ZM1 12l3.3-2.2v4.4L1 12Zm22 0-3.3 2.2V9.8L23 12ZM4.2 4.2l3.9 1-2.9 2.9-1-3.9Zm15.6 15.6-3.9-1 2.9-2.9 1 3.9Zm0-15.6-1 3.9-2.9-2.9 3.9-1ZM4.2 19.8l1-3.9 2.9 2.9-3.9 1Z'/%3E%3C/svg%3E");
}

.staffnow-jos__card-logo {
    display: block;
    width: auto;
    max-width: 80%;
    max-height: 48px;
    margin: 0 auto 0.7rem;
    object-fit: contain;
    object-position: center;
    border-radius: 8%;
}

.staffnow-jos__card-description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
    margin: 1rem 0;
    line-height: 1.5;
}

.staffnow-jos__card-ref {
    margin: auto 0 0.9rem;
}

.staffnow-jos__card-cta {
    display: block;
    padding: 0.7rem 1rem;
    color: var(--sjos-ink);
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    background-color: var(--sjos-accent);
    border-radius: 3px;
}

.staffnow-jos__card-cta:hover,
.staffnow-jos__card-cta:focus-visible {
    color: var(--sjos-ink);
    background-color: var(--sjos-accent-hover);
}

.staffnow-jos__no-results,
.staffnow-jos__unavailable,
.staffnow-jos__error {
    margin: 1rem 0;
}

/* Load more */
.staffnow-jos__load-more-wrap {
    margin: 3.5rem 0 0;
    padding: 0 var(--sjos-gutter);
    text-align: center;
}

.staffnow-jos__load-more-wrap .staffnow-jos__status {
    min-height: 0;
    margin: 0.75rem 0 0;
}

.staffnow-jos__load-more-wrap .staffnow-jos__status:empty {
    margin: 0;
}

.staffnow-jos__load-more {
    display: inline-block;
    padding: 0.75rem 2rem;
    color: #fff !important;
    font-weight: 600;
    text-decoration: none;
    background-color: var(--sjos-navy);
    border-radius: 4px;
    cursor: pointer;
}

.staffnow-jos__load-more:hover,
.staffnow-jos__load-more:focus-visible {
    color: #fff !important;
    background-color: #22263f;
}

.staffnow-jos__load-more[aria-disabled="true"] {
    opacity: 0.6;
    pointer-events: none;
}

.staffnow-jos__all-results {
    margin: 0;
}

@media (max-width: 1100px) {
    .staffnow-jos__form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .staffnow-jos__form {
        grid-template-columns: minmax(0, 1fr);
        margin-bottom: 2.5rem;
        padding: 1.75rem var(--sjos-gutter);
    }

    .staffnow-jos__actions {
        grid-column: auto;
    }

    .staffnow-jos__results {
        grid-template-columns: minmax(0, 1fr);
    }
}