/* ============================================================
   SIMA Vacancy Module — stylesheet
   Gebaseerd op aceg_vacancy_module/public/style.css
   + de vacancy-styling die op de ACEG-site in de Customizer
   "Additional CSS" (wp-custom-css) stond — hier gebundeld
   zodat de SIMA-module self-contained is.
   ============================================================ */

/* ---- SIMA HUISSTIJL — pas deze variabelen aan ---- */
:root {
    --primary: #DB2525;                                              /* SIMA-rood (uit Elementor kit) */
    --sima-gradient: #DB2525;                                        /* effen SIMA-rood */
    --white: #fff;
    --medium-grey: #f1f1f1;
    --light-grey: #f9f9f9;
    --grey: #808080;
    --black: #000;
    --small-spacing: 0.5rem;
    --medium-spacing: 1rem;
    --large-spacing: 1.5rem;
    --big-spacing: 2rem;
}

/* ============================================================
   DEEL 1 — basis (uit style.css van de ACEG-module)
   ============================================================ */
h1 {
    font-size: 3.563rem;
    font-weight: bold;
}
.vacancy-template > .container-fluid {
    padding: 0px;
}
.vacancy .rc-vacancy-item h3 {
    font-size: 57px;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 0px;
}
.vacancy .rc-vacancy-item.m-40 {
    margin-bottom: var(--big-spacing);
}
.vacancy :is(h1, h2, h3, h4, h5, h6) span {
    color: var(--primary);
}
.vacancy .rc-vacancy-actions {
    display: flex;
    list-style: none;
    gap: 1rem;
    font-weight: bold;
    margin-top: auto;
}
.vacancy .rc-vacancy-actions .icon-wrapper {
    margin: 0px;
}
.vacancy .icon-wrapper .icon {
    margin: auto 0px;
}
.vacancy .rc-vacancy-actions a.action {
    margin-right: var(--big-spacing);
    color: var(--primary);
}
.vacancy .rc-vacancy-actions a.action:hover {
    opacity: 0.7;
}
.vacancy .rc-vacancy-actions li a img {
    margin-right: var(--small-spacing);
}
.vacancy .rc-vacancy-item .content {
    padding: var(--big-spacing) calc(var(--big-spacing) * 2);
    display: flex;
    flex-direction: column;
}
.vacancy .rc-vacancy-item .content :is(h1, h2, h3, h4, h5, h6)  {
    margin-bottom: calc(var(--big-spacing) * 2);
}
.vacancy .rc-vacancy-item .content .card :is(h1, h2, h3, h4, h5, h6)  {
    margin-bottom: var(--big-spacing);
}
.vacancy .no-margin {
    margin: 0px!important;
}
.vacancy-wrapper:nth-child(odd) {
    background: var(--light-grey);
}
.vacancy .rc-vacancy-item .content p.desc {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.vacancy .flex-image {
    display: flex;
    align-items: center;
    justify-content: center;
}
.vacancy .flex-image img {
    width: 100%;
    margin: auto;
}
.container-fluid.vacancy {
    padding: 0px;
}
/* Detail page */
.vacancy .gradient {
    background: var(--sima-gradient);
    color: white;
}
.vacancy .rc-vacancy-item .content .card {
    background: white;
    padding: var(--big-spacing);
    color: black;
    border-radius: 0px;
}
.vacancy .function-requirements .rc-vacancy-item .content.left {
    padding: calc( var(--big-spacing) * 2 ) var(--big-spacing);
}
.vacancy ul {
    margin-left: 20px;
}
.vacancy .icon-wrapper {
    display: flex;
    font-weight: bold;
    color: var(--grey);
    gap: var(--small-spacing);
    margin-top: var(--small-spacing);
}
.detail .vacancy-wrapper {
    padding: calc(var(--big-spacing) * 2);
}
.custom-required-label{
    color: var(--primary);
    font-weight: bold;
}
/* Apply form */
.vacancy .apply .row {
    border-radius: 15px;
    background: var(--light-grey);
    margin: calc(var(--big-spacing) * 2 ) 0px;
}
.vacancy .apply .left {
    border-radius: 15px;
    display:flex;
    justify-content: center;
}
.vacancy .apply .left h3 {
    font-size: 36px;
    border-bottom: 1px solid var(--medium-grey);
    font-weight: 400;
    line-height: 1.2;
    padding-bottom: calc(var(--big-spacing) * 2 );
    margin-bottom: calc(var(--big-spacing) * 2 );
}
.vacancy .vac-btn {
    background: var(--white);
    color: var(--black);
    font-weight: bold;
    border-radius: 40px;
    padding: var(--small-spacing) var(--big-spacing);
    text-align: center;
    width: fit-content;
    cursor: pointer;
    font-size: 1.063rem;
    border: 0px;
    display:flex;
    justify-content: center;
}
.vacancy label:not(.custom-file-label) {
    font-weight: bold;
    margin-bottom: var(--medium-spacing);
}
.vacancy input, .vacancy textarea, .vacancy select {
    height: 50px;
    border-radius: 0px;
    margin-bottom: var(--medium-spacing);
}
.vacancy select, .vacancy .custom-file {
    height: 50px!important;
}
.vacancy .custom-file, .vacancy .custom-file input, .vacancy .custom-file label {
    cursor: pointer;
}
.vacancy *::-webkit-file-upload-button {
    -webkit-appearance: none;
    display: none;
}
.vacancy .custom-file-label {
    height: 50px;
    display: flex;
    align-items: center;
}
.vacancy .custom-file-label::after {
    height: 100%;
    display: flex;
    align-items: center;
    cursor: pointer;
}
.vacancy .rc-vacancy-item {
    min-height: 500px;
}
.vacancy.detail .info-caption-hero span {
    color: white !important;
}
@media (max-width: 768px) {
    h1 {
        font-size: 1.625rem;
    }
    .vacancy .rc-vacancy-item .content {
        padding: var(--big-spacing) var(--medium-spacing);
    }
    .vacancy .apply .rc-vacancy-item .content {
        padding: var(--big-spacing);
    }
    .vacancy .rc-vacancy-item .content :is(h1, h2, h3, h4, h5, h6) {
        margin-bottom: var(--medium-spacing);
    }
    .vacancy .function-requirements .rc-vacancy-item .content.left {
        padding: var(--big-spacing);
    }
    .detail .vacancy-wrapper {
        padding: var(--big-spacing) 0px;
    }
    .vacancy .rc-vacancy-item h3 {
        font-size: 26px;
    }
    .vacancy .rc-vacancy-actions {
        flex-direction: column;
        gap: 0;
        margin-top: var(--small-spacing);
    }
    .vacancy .rc-vacancy-item {
        min-height: 0px;
    }
    .vacancy.list-view .rc-vacancy-item .content {
        order: 1;
    }
    .vacancy.list-view .rc-vacancy-item .flex-image {
        order: 2;
    }
}
@media (min-width: 767px) and (max-width: 1200px) {
    h1 {
        font-size: 2.25rem;
    }
    .vacancy .rc-vacancy-item .content {
        padding: var(--big-spacing);
    }
    .vacancy .apply .rc-vacancy-item .content {
        padding: var(--big-spacing);
    }
    .vacancy .rc-vacancy-item .content :is(h1, h2, h3, h4, h5, h6) {
        margin-bottom: var(--big-spacing);
    }
    .vacancy .function-requirements .rc-vacancy-item .content.left {
        padding: var(--big-spacing);
    }
    .vacancy .rc-vacancy-item h3 {
        font-size: 32px;
    }
}
@media (min-width: 1199px) and (max-width: 1400px) {
    h1 {
        font-size: 2.5rem;
    }
    .vacancy .rc-vacancy-item .content {
        padding: var(--big-spacing);
    }
    .detail .vacancy-wrapper {
        padding: var(--big-spacing);
    }
    .vacancy .apply .rc-vacancy-item .content {
        padding: var(--big-spacing);
    }
}

/* ============================================================
   DEEL 2 — voorheen Customizer "Additional CSS" op ACEG
   (container/flex-herstel + typografie + detailpagina-layout)
   ============================================================ */

/* 1. Herstel Container & Flex-layout voor Elementor i.p.v. Bootstrap */
.vacancy .container {
    width: 100% !important;
    max-width: 1200px !important;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    box-sizing: border-box;
}
.vacancy .row, .vacancy-wrapper .row, .vacancy .form-row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
    box-sizing: border-box;
}
.vacancy .col-md-6, .vacancy .col-lg-5, .vacancy .col-lg-7 {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    box-sizing: border-box;
}
@media (min-width: 768px) {
    .vacancy .col-md-6 { flex: 0 0 50%; max-width: 50%; }
}
@media (min-width: 992px) {
    .vacancy .col-lg-5 { flex: 0 0 41.666%; max-width: 41.666%; }
    .vacancy .col-lg-7 { flex: 0 0 58.333%; max-width: 58.333%; }
}

/* 2. Typografie fix voor de vacature titels */
.vacancy .rc-vacancy-item h3.no-margin {
    font-size: 42px !important;
    line-height: 1.1 !important;
    margin-bottom: 5px !important;
    color: #000000 !important;
}
.vacancy .rc-vacancy-item h3:not(.no-margin) {
    font-size: 20px !important;
    line-height: 1.3 !important;
    margin-top: 5px !important;
    margin-bottom: 15px !important;
}
.vacancy .rc-vacancy-item h3 a,
.vacancy .rc-vacancy-item h3 a span {
    font-size: 20px !important;
    line-height: 1.3 !important;
    color: var(--primary) !important;
    text-decoration: none !important;
}
.vacancy .rc-vacancy-item p.desc {
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: #555555 !important;
    margin-bottom: 20px !important;
}

/* ==========================================================
   VACATURE DETAILPAGINA STYLING
   ========================================================== */
.vacancy.detail .vacancy-wrapper {
    padding: 50px 0;
    background-color: transparent !important;
}
.vacancy.detail .vacancy-wrapper .rc-vacancy-item {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}
/* Afbeeldingen perfect uitgelijnd bovenaan */
.vacancy.detail .rc-vacancy-item.left {
    align-items: flex-start !important;
}
.vacancy.detail .rc-vacancy-item.left .content h1 {
    margin-top: 0 !important;
}
@media (min-width: 768px) {
    .vacancy.detail .rc-vacancy-item.left .flex-image {
        margin-top: 58px !important;
    }
}
/* Typografie Detailpagina */
.vacancy.detail h1 {
    font-size: 38px !important;
    font-weight: 800 !important;
    color: #000000;
    margin-bottom: 12px !important;
    line-height: 1.2;
}
.vacancy.detail p, .vacancy.detail li {
    font-size: 16px;
    line-height: 1.7;
    color: #444444;
    margin-bottom: 12px !important;
}
.vacancy.detail ul {
    padding-left: 20px;
}
/* Loze witruimtes (enters uit Recruitee) wissen */
.vacancy.detail .content p:empty,
.vacancy.detail .content p > br:first-child:last-child {
    display: none !important;
}
/* Locatie icoontje */
.vacancy.detail .icon-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 0px !important;
    font-size: 14px;
    font-weight: 700;
    color: #666;
}
.vacancy.detail .icon-wrapper img {
    width: 18px;
    height: auto;
}
/* Afbeeldingen rechte hoeken */
.vacancy.detail .flex-image img {
    border-radius: 0px !important;
    width: 100%;
    height: auto;
    object-fit: cover;
}
/* Gekleurde midden-sectie (Taken & Profiel) */
.vacancy.detail .wrapper.gradient.function-requirements {
    background: var(--sima-gradient);
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: 70px 0;
}
.vacancy.detail .function-requirements .container {
    max-width: 1200px !important;
    margin: 0 auto;
}
.vacancy.detail .function-requirements .content.left h1,
.vacancy.detail .function-requirements .content.left p,
.vacancy.detail .function-requirements .content.left li {
    color: #ffffff !important;
}
/* Rechter 'Jouw Profiel' wit kaartje */
.vacancy.detail .function-requirements .content.right .card {
    background-color: #ffffff;
    padding: 40px;
    border-radius: 0px !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    height: 100%;
}
.vacancy.detail .function-requirements .content.right .card h1 {
    color: #000000 !important;
}
.vacancy.detail .function-requirements .content.right .card p,
.vacancy.detail .function-requirements .content.right .card li {
    color: #444444 !important;
}
/* Sollicitatieformulier Layout */
.vacancy.detail .container.apply {
    margin-top: 60px;
    margin-bottom: 80px;
}
.vacancy.detail .container.apply .rc-vacancy-item {
    border-radius: 0px !important;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
    background: #fafafa;
}
.vacancy.detail .apply .content.left.gradient {
    background: var(--sima-gradient);
    padding: 60px 50px;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.vacancy.detail .apply .content.left.gradient h3 {
    color: #ffffff !important;
    font-size: 32px !important;
    line-height: 1.3 !important;
    font-weight: 300 !important;
    border-bottom: 1px solid rgba(255,255,255,0.4) !important;
    padding-bottom: 30px !important;
    margin-bottom: 30px !important;
}
.vacancy.detail .apply .content.left.gradient h3 strong {
    font-weight: 800 !important;
}
.vacancy.detail .apply .content.left.gradient h3::after,
.vacancy.detail .apply .content.left.gradient h3::before,
.vacancy.detail .apply .content.left.gradient hr {
    display: none !important;
}
/* Verzenden-knop */
.vacancy.detail .apply .content.left.gradient .vac-btn {
    font-weight: bold !important;
    font-size: 16px !important;
    padding: 15px 30px !important;
    border-radius: 30px !important;
    border: none !important;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-block;
    text-align: center;
    background-color: #ffffff !important;
    color: #000000 !important;
    align-self: flex-start;
}
.vacancy.detail .apply .content.left.gradient .vac-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
/* Formulier invulvelden */
.vacancy.detail .apply .content.right.grey {
    padding: 60px 50px;
}
.vacancy.detail .form-group label {
    font-weight: 800;
    color: #000000;
    margin-bottom: 8px;
    display: inline-block;
    font-size: 14px;
}
.vacancy.detail .custom-required-label {
    color: var(--primary);
    font-weight: bold;
    margin-left: 3px;
}
.vacancy.detail .form-control {
    border: 1px solid #d1d1d1 !important;
    border-radius: 0px !important;
    padding: 14px 15px !important;
    font-size: 15px !important;
    background-color: #ffffff !important;
    width: 100% !important;
    margin-bottom: 25px !important;
    color: #333 !important;
    box-sizing: border-box;
}
.vacancy.detail .form-control:focus {
    border-color: var(--primary) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(0, 132, 186, 0.1) !important;
}
/* CV VELD FIX (mobiel en desktop) */
.vacancy.detail .custom-file-input {
    width: 0.1px !important;
    height: 0.1px !important;
    opacity: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    z-index: -1 !important;
}
.vacancy.detail .custom-file-label {
    display: flex !important;
    align-items: center;
    border: 1px solid #d1d1d1 !important;
    border-radius: 0px !important;
    padding: 14px 15px !important;
    font-size: 15px !important;
    background-color: #ffffff !important;
    width: 100% !important;
    margin-bottom: 25px !important;
    color: #777777 !important;
    box-sizing: border-box;
    cursor: pointer;
    min-height: 50px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.3s ease;
}
.vacancy.detail .custom-file-label:hover,
.vacancy.detail .custom-file-input:focus + .custom-file-label {
    border-color: var(--primary) !important;
    background-color: #f8fbfd !important;
    color: #333333 !important;
}
/* Hero Text (Altijd Wit) */
.vacancy.detail .job-intro-box,
.vacancy.detail .job-intro-box * {
    color: #ffffff !important;
}
/* Mobiele marges & opsommingstekens */
@media (max-width: 767px) {
    .vacancy.detail .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box;
    }
    .vacancy.detail ul {
        padding-left: 20px !important;
    }
    .vacancy.detail .wrapper.gradient.function-requirements .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    .vacancy.detail .apply .content.left.gradient,
    .vacancy.detail .apply .content.right.grey {
        padding: 40px 25px !important;
    }
}