/*
 * Pfeifer & Langen IT Solutions Stellenanzeigen – Frontend-Styles
 *
 * Farb-Referenz: Karriereseiten-Vorlage des Kunden (Listen-/Detailansicht).
 *   --plits-primary        Navyblau – Titel, Section-Überschriften, Buttons
 *   --plits-primary-hover   dunkleres Navy für Hover-Zustände
 *   --plits-card-bg         helles Grau für Listen-Karten
 *   --plits-text-muted      Grauton für Meta-Angaben
 *   --plits-border          Trennlinien
 *
 * Fließtext-Vorgabe des Kunden: Open Sans, 20px, Zeilenabstand 24px – gilt in
 * Listen- und Detailansicht. Überschriften bleiben in ihrer eigenen (vom
 * Theme geerbten) Größe, werden aber explizit fett gesetzt.
 */

:root {
    --plits-primary: #143c89;
    --plits-primary-hover: #0f2f6e;
    --plits-card-bg: #f5f5f5;
    --plits-text-muted: #6e6e6e;
    --plits-border: #d9d9d9;
    --plits-font: 'Open Sans', sans-serif;
    --plits-font-size: 20px;
    --plits-line-height: 24px;
    /* Höhe des Website-Headers – Abstand über dem Detailseiten-Titel muss
       mindestens so groß sein, sonst verschwindet der Titel darunter. */
    --plits-header-height: 120px;
    /* Höhe des einheitlichen Header-Bildes auf Detailseiten – bewusst
       niedrig ("dezenter Header"), per „Eigenes CSS" anpassbar. */
    --plits-header-image-height: 160px;
}

.plits-jobs {
    color: inherit;
}

/* Fließtext in Listen-, Debug- und Backend-Vorschau sowie Detailansicht */
.plits-jobs__filter,
.plits-jobs__empty,
.plits-jobs__debug-meta,
.plits-jobs__debug-notice,
.plits-job-section,
.plits-jobs-preview__content,
.plits-job-single {
    font-family: var(--plits-font);
    font-size: var(--plits-font-size);
    line-height: var(--plits-line-height);
}

/* Fett ausgezeichneter Text INNERHALB des SmartRecruiters-Stellentexts
   (<strong>/<b> in Fließtext-Absätzen) – ohne diese Regel fällt der Browser
   auf sein Default-Bold (700) zurück, das von den übrigen 600er-Werten
   abweicht. */
.plits-job-section strong,
.plits-job-section b,
.plits-jobs-preview__content strong,
.plits-jobs-preview__content b {
    font-weight: 600;
}

/* Backend-Vorschau: „Klick auf Zum Jobangebot" (Detailansicht im Settings-Screen) */
.plits-jobs-preview__title {
    color: var(--plits-primary);
    font-weight: 600;
    margin: 0 0 1rem;
}

.plits-jobs__count {
    color: var(--plits-primary);
    font-weight: 600;
    margin: 0 0 1.25rem;
}

/* Abteilungs-Filter */
.plits-jobs__filter {
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.plits-jobs__filter select {
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--plits-primary);
    border-radius: 999px;
    color: var(--plits-primary);
    background: #fff;
}

/* Stellenliste */
.plits-jobs__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.plits-jobs__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: var(--plits-card-bg);
    padding: 1.5rem 2rem;
    margin-bottom: 0.4rem;
}

.plits-jobs__info {
    flex: 1 1 auto;
    min-width: 240px;
}

.plits-jobs__link {
    text-decoration: none;
}

.plits-jobs__title {
    color: var(--plits-primary);
    font-weight: 600;
    font-family: var(--plits-font);
    font-size: var(--plits-font-size);
    line-height: var(--plits-line-height);
}

.plits-jobs__link:hover .plits-jobs__title,
.plits-jobs__link:focus .plits-jobs__title {
    text-decoration: underline;
}

/* Absichtlich kleiner als der Jobtitel (eigene, engere Schriftgröße statt
   der Fließtext-Vorgabe) – Metadaten sind sekundär zum Titel. */
.plits-jobs__meta {
    color: var(--plits-text-muted);
    margin-top: 0.4rem;
}

/* Rechte Spalte der Kachel: Adresse/Arbeitsmodell über dem Bewerben-Button. */
.plits-jobs__side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.6rem;
    flex-shrink: 0;
}

.plits-jobs__location-block {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    text-align: right;
    color: var(--plits-text-muted);
}

.plits-jobs__location-line {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
}

.plits-jobs__location-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    fill: currentColor;
}

/* „Zum Jobangebot" – Outline-Pill, verlinkt intern zur Detailseite */
.plits-jobs__cta,
.plits-jobs__cta:visited {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.6rem 1.4rem;
    border: 2px solid var(--plits-primary);
    border-radius: 999px;
    color: var(--plits-primary);
    background: #fff;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 150ms ease, color 150ms ease;
}

.plits-jobs__cta:hover,
.plits-jobs__cta:focus {
    background: var(--plits-primary);
    color: #fff;
}

/* „Jetzt bewerben" – gefüllte Pill, verlinkt extern zu SmartRecruiters */
.plits-jobs__apply-wrap {
    margin: 2rem 0;
}

.plits-jobs__apply,
.plits-jobs__apply:visited {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.7rem 1.6rem;
    background-color: var(--plits-primary);
    color: #fff;
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 150ms ease;
}

.plits-jobs__apply:hover,
.plits-jobs__apply:focus {
    background-color: var(--plits-primary-hover);
    color: #fff;
}

/* Einheitliches Header-Bild oberhalb des Titels (volle Breite, schmal
   zugeschnitten – unabhängig von den Original-Bildmaßen). Übernimmt die
   Sticky-Header-Clearance (margin-top), damit es nicht selbst unter der
   Navigation verschwindet; der Titel braucht dann nur noch normalen Abstand
   (siehe Sibling-Regel weiter unten). Ohne Bild trägt der Titel die volle
   Clearance wie zuvor. */
.plits-job-single__header-image {
    display: block;
    width: 100%;
    height: var(--plits-header-image-height);
    object-fit: cover;
    margin-top: var(--plits-header-height);
}

/* Fallback-Detailseite (templates/single-plits_job.php) */
.plits-job-single {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 1rem 2rem;
}

.plits-job-single__title {
    /* Standardfall (kein Header-Bild): Titel selbst räumt den Sticky-Header
       frei (--plits-header-height oben in :root anpassen oder per „Eigenes
       CSS" im Backend überschreiben). */
    padding-top: var(--plits-header-height);
    font-weight: 600;
    text-align: left;
}

/* Ist ein Header-Bild vorhanden, übernimmt DAS die Clearance – der Titel
   braucht dann nur noch normalen Abstand zum Bild. */
.plits-job-single__header-image + .plits-job-single .plits-job-single__title {
    padding-top: 2rem;
}

/* Stellentext-Sektionen (Unternehmensbeschreibung, Qualifikationen, …) */
.plits-job-section-heading {
    color: var(--plits-primary);
    font-weight: 600;
    text-align: left;
    margin: 2.5rem 0 1rem;
}

/* Direkt nach Titel/Bewerben-Button reicht ein kleinerer Abstand. */
.plits-job-single__title ~ .plits-job-section-heading:first-of-type {
    margin-top: 1.5rem;
}

.plits-job-section ul {
    list-style: none;
    padding-left: 1.4em;
    margin: 0 0 1em;
}

.plits-job-section li {
    position: relative;
    margin-bottom: 0.4em;
}

.plits-job-section li::before {
    content: "\2192";
    position: absolute;
    left: -1.4em;
    color: var(--plits-primary);
}

.plits-jobs__empty {
    color: var(--plits-text-muted);
    font-style: italic;
}

/* Debug-Ansicht (nur Admins) */
.plits-jobs__debug-notice {
    background: #fff8e1;
    border-left: 4px solid #f0b429;
    padding: 0.6rem 0.9rem;
    margin-bottom: 1rem;
    color: #5c4708;
}

.plits-jobs__debug-meta {
    color: var(--plits-text-muted);
    margin: 0 0 0.5rem;
}

.plits-jobs__badge {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    white-space: nowrap;
}

.plits-jobs__badge--public {
    background: #2e7d32;
    color: #fff;
}

.plits-jobs__badge--nonpublic {
    background: #e0e0e0;
    color: #444;
}

.plits-jobs__ref {
    color: var(--plits-text-muted);
    font-variant-numeric: tabular-nums;
}

.plits-jobs__debug-link {
    color: var(--plits-primary);
}

.plits-jobs__debug-link--missing {
    color: var(--plits-text-muted);
    font-style: italic;
}

/* Debug-Liste hat kein .plits-jobs__info-Wrapper – eigenes Meta-Layout */
.plits-jobs--debug .plits-jobs__item {
    display: block;
    background: var(--plits-card-bg);
}

.plits-jobs--debug .plits-jobs__meta {
    margin-top: 0.3rem;
}