/* OMS Jobs — styles for the markup this plugin generates.
   Card and detail layout come from the theme; only the plugin's own
   elements are styled here. */

.job-search-filter {
    display: none;
    gap: 1rem;
    flex-wrap: wrap;
}

#job-listing.loading {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.15s ease-in-out;
}

.oms-jobs-empty,
.oms-jobs-error {
    margin: 2rem 0;
    text-align: center;
}

/* Tags rendered by [oms-tags] */
.oms-job-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
}

.oms-job-tags .oms-job-tag {
    display: inline-block;
    margin: 0;
    padding: 0.15em 0.7em;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 0.8em;
    line-height: 1.6;
    opacity: 0.75;
    white-space: nowrap;
}

/* Recruitee rich text arrives as its own block markup, so the wrapper must
   not add paragraph spacing of its own. */
.tm-job-text > :first-child { margin-top: 0; }
.tm-job-text > :last-child  { margin-bottom: 0; }

/* ---------------------------------------------- PLZ / Ort autocomplete ---
   Visual language borrowed from oms-standorte's location search: white
   rounded panel, charcoal hairline border, brand accent on the active row.
   Theme variables with fallbacks, so it degrades if the theme changes. */

.job-search-input-wrapper {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.job-search-input-wrapper input {
    width: 100%;
    box-sizing: border-box;
}

.job-search-suggestions {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 120;
    margin: 0;
    padding: 0.4em;
    list-style: none;
    max-height: 20rem;
    overflow-y: auto;
    background-color: var(--color-white, #fff);
    border: 1px solid var(--color-charcoal-200, #e2e2e2);
    border-radius: 20px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}

.job-search-suggestion {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1em;
    margin: 0;
    padding: 0.55em 1em;
    border-radius: 999px;
    cursor: pointer;
    line-height: 1.4;
}

.job-search-suggestion:hover,
.job-search-suggestion.is-active {
    background-color: var(--color-charcoal-100, #f2f2f2);
}

.job-search-suggestion-label {
    font-weight: 600;
}

.job-search-suggestion-count {
    flex: 0 0 auto;
    font-size: 0.85em;
    opacity: 0.6;
    white-space: nowrap;
}

.job-search-suggestion-branch {
    display: block;
    font-weight: 400;
    font-size: 0.82em;
    opacity: 0.6;
}

.job-search-suggestion-branch::before {
    content: "→ ";
}

/* ------------------------------------------------- Job meta pills ---
   Salary / hours on the listing card and the detail page. The card's
   other pills (.tm-job-ort, .tm-job-branche, .tm-job-arbeitszeit) are
   styled in the theme's Customizer CSS; these follow the same shape. */

.tm-job-meta {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    margin: 12px 0 0;
}

.tm-job-meta .text p,
#tm-job-listing #tm-job-tags .tm-job-gehalt p {
    font-size: 12px;
    font-weight: 400;
    margin: 0;
}

.tm-job-meta .text {
    padding: 5px 10px;
    border-radius: 8px;
    color: #5f7e91;
    background-color: #5f7e9115;
    white-space: nowrap;
}

.tm-job-meta .tm-job-arbeitszeit {
    color: #3C7CDC;
    background-color: #3C7CDC10;
}

.tm-job-meta .tm-job-branche {
    color: #A15DE4;
    background-color: #A15DE410;
}

.tm-job-meta .tm-job-gehalt,
#tm-job-listing #tm-job-tags .tm-job-gehalt {
    color: #1B9E77;
    background-color: #1B9E7715;
    white-space: nowrap;
}

/* ------------------------------------------- Recruitee text blocks ---
   The text arrives with its own headings (h2 "Deine Aufgaben", "Das
   bringst du mit" …). They are kept as real headings but sized like the
   template's own h5 so they do not compete with the job title. */

#tm-job-detail .tm-job-text h1,
#tm-job-detail .tm-job-text h2,
#tm-job-detail .tm-job-text h3,
#tm-job-detail .tm-job-text h4 {
    font-size: 1.44rem;
    font-weight: 400;
    line-height: 1.3;
    margin: 1.4em 0 0.5em;
}

#tm-job-detail .tm-job-text h5,
#tm-job-detail .tm-job-text h6 {
    font-size: 1.2rem;
    font-weight: 400;
    margin: 1.2em 0 0.4em;
}

#tm-job-detail .tm-job-text ul,
#tm-job-detail .tm-job-text ol {
    margin-bottom: 1.3em;
}

#tm-job-detail .tm-job-text li {
    margin-bottom: 0.35em;
}