/* =========================
   THEME TOKENS
   ========================= */
:root {
    color-scheme: light dark; /* helpt browser met native controls */

    /* Basis */
    --bg: #ffffff;
    --text: #222222;
    --text-muted: #999999;

    /* Oppervlakken */
    --surface-1: #f8f8f8;   /* lichte secties */
    --surface-2: #f7f7f7;   /* testimonial */
    --card-bg: #ffffff;
    --card-border: #e0e0e0;
    --card-border-hover: #bbbbbb;

    /* Overlays/shadows */
    --overlay-dark: rgba(0, 0, 0, 0.75);
    --modal-backdrop: rgba(0, 0, 0, 0.3);
    --shadow-soft: 0 4px 20px rgba(0,0,0,0.12);
    --shadow-card-hover: 0 4px 16px rgba(0,0,0,0.08);

    /* Tekst accenten */
    --heading-on-card: #2c3e50;
    --sollicitatie: rgb(30, 115, 190);
    --h5: rgb(255, 42, 42);

    /* Meta/iconen */
    --meta: #555555;
    --meta-icon: #444444;
    --divider: rgb(225, 225, 225);

    /* Links/footer */
    --footer-link: #ffffff;
    --footer-link-opacity: .86;

    /* Specifiek */
    --checkmark: rgb(76, 175, 80);
    --star: #f5c518;

    /* Header assets */
    --header-bg-image: url(/assets/images/header_bg.png);
}
:root[data-bs-theme="dark"] {
  --bg: #121212;
  --text: #e6e6e6;
}
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #121212;
        --text: #e6e6e6;
        --text-muted: #b8b8b8;

        --surface-1: #1b1b1b;
        --surface-2: #1f1f1f;
        --card-bg: #1e1e1e;
        --card-border: #333333;
        --card-border-hover: #4a4a4a;

        --overlay-dark: rgba(0, 0, 0, 0.75);
        --modal-backdrop: rgba(0, 0, 0, 0.6);
        --shadow-soft: 0 4px 20px rgba(0,0,0,0.45);
        --shadow-card-hover: 0 4px 16px rgba(0,0,0,0.45);

        --heading-on-card: #f1f1f1;
        --sollicitatie: #7ab8ff;
        --h5: #ff7a7a;

        --meta: #bdbdbd;
        --meta-icon: #bdbdbd;
        --divider: #3a3a3a;

        --footer-link: #f1f1f1;
        --footer-link-opacity: .95;

        --header-bg-image: background-color: #777
    }
    .bg-white {background-color: #777 !important; }
}

body {
    padding-top: 80px;
    font-family: Arial,Helvetica,sans-serif;
    background-color: var(--bg);
    color: var(--text);
}
div.alternate-logo {
    position: fixed;
    top: -10px;
    left: 0;
    height: 90px;
    background-image: url("/assets/images/alternate_logo_met_sub.png");
    background-repeat: no-repeat;
}

header.navbar {
    padding: 0px !important;
    background: var(--header-bg-image);
    background-repeat: no-repeat;
    height: 80px;
}

.navbar-brand {
    position: relative;
}

.navbar-brand span {
    font-size: 0.63rem;
    text-transform: uppercase;
}

@media (max-width: 991px) {
    header.navbar {
        padding: 0px !important;
        background: var(--header-bg-image);
        background-repeat: no-repeat;
    }
}

@media (max-width: 767px) {
    header.navbar {
        padding: 0px !important;
        background: none;
        background-repeat: no-repeat;
    }
}

@media (min-width: 992px) {
    .navbar-brand {
        left: 80px;
    }
}

@media (min-width: 768px) {
    .navbar-brand {
        left: 80px;
    }
}

a.navbar-brand, a.navbar-brand:link, a.navbar-brand:visited, a.navbar-brand:hover, a.navbar-brand:active {
    text-decoration: none;
}

.video {
    position: relative;
    width: 100%;
    height: 100vh; /* volledig scherm */
    overflow: hidden;
}
.video img, .video iframe {
    width:100%;
    height:auto;
}
.video-overlay {
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    text-align: center;
    background: var(--overlay-dark);
    padding: 40px 60px;
    z-index: 2;
}
.video-overlay h2 {
    font-weight:600;
    font-size: 65px;

    white-space: nowrap;
}
.video-overlay .btn {
    margin-top:10px;
    background:#fff;
    color:#000;
}

.video-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 177.78vh; /* 16:9 verhouding op basis van hoogte */
    height: 56.25vw; /* 16:9 verhouding op basis van breedte */
    min-width: 100%;
    min-height: 100%;
}
.video-bg iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    pointer-events: none; /* voorkomt klikken op video */
}
@media (max-width: 991px) {
    .video-overlay h2 {
        font-size: 25px;
    }
}

.locatie-sectie {
    padding: 10px 0;
    background: var(--surface-1);
}

.map-wrapper {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    width: 100%;
}

.social-icons-wrapper {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 50px 0;
}

.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    color: #fff;
    font-size: 2rem;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Pulse animatie bij hover */
@keyframes pulse {
    0%   {
        box-shadow: 0 0 0 0 rgba(255,255,255,0.5);
    }
    70%  {
        box-shadow: 0 0 0 10px rgba(255,255,255,0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255,255,255,0);
    }
}

.social-icon:hover {
    animation: pulse 0.6s ease;
    transform: scale(1.1);
}

/* Merkkleur per platform */
.social-icon.facebook  {
    background: #1877f2;
}

.social-icon.instagram {
    background: radial-gradient(circle at 30% 110%, #f09433, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888);
}

.social-icon.twitter   {
    background: #000;
}

.social-icon.youtube   {
    background: #ff0000;
}

.social-icon.tiktok    {
    background: #010101;
}

.social-icon.linkedin  {
    background: #0a66c2;
}

.textwidget {
    color: var(--text-muted);
    text-align: center;
}

.contactinfo {
    list-style-type: none;
    padding-top: 30px;
    line-height: 30px;
}

#media_image-3 {
    text-align: center;
}

footer {
    padding: 10px;
}

footer.footer.footer-black a {
    color: var(--footer-link);
    opacity: var(--footer-link-opacity);
}

#custom_html-3 li {
    line-height: 33px;
}

.top {
    position: relative;
    width: 100%;
    overflow: hidden;
    display: block;
}

.top img {
    width:100%;
    height:auto;
    display: block;
    position: relative;
}

.top-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0);
    padding: 20px 40px;
    text-align: center;
    color: #fff;
}

.video-overlay h1 {
    font-weight:700;
    font-size: 42px;
    white-space: nowrap;
}
.top-overlay h2 {
    font-weight:700;
    font-size: 42px;
}

@media (max-width: 991px) {
    .top-overlay h2 {
        font-size: 22px;
    }
}

.center-text {
    text-align: center;
}

.star-text {
    max-width: 500px;
    margin: 0 auto;
    text-align: left;
}

.star-text > div {
    display: grid;
    grid-template-columns: 120px 1fr;
    align-items: center;
    margin-bottom: 8px;
    column-gap: 15px;
}

.star-text .fa-solid,
.star-text .fa-regular {
    color: var(--star);
    margin-right: 3px;
    font-size: 16px;
}

.testimonial-box {
    background: var(--surface-2);
    border-radius: 0;
    color: var(--text);
    font-size: 23px;
}

.testimonial-box h3 {
    color: var(--heading-on-card);
}

.testimonial-box .readmore {
    color: var(--heading-on-card);
    text-decoration: none;
    font-weight: 600;
}

.vacature-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 18px 24px;
    max-width: 856px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 12px;
    margin-bottom: 12px;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
    color: var(--text);
}

.vacature-card:hover {
    box-shadow: var(--shadow-card-hover);
    border-color: var(--card-border-hover);
    color: var(--text);
}

.vacature-titel {
    font-size: 1rem;
    font-weight: 500;
}

.vacature-meta {
    font-size: 0.9rem;
    color: var(--meta);
    white-space: nowrap;
}

.vacature-meta i {
    color: var(--meta-icon);
}

.empty-space-top {
    padding-top: 50px;
}

h3.sollicitatie {
    color: var(--sollicitatie); 
    font-size: 17px;
    font-weight: 700;
    line-height: 19px;
    margin-top:17px;
    margin-bottom:17px;
}

.sollicitatieForm {
    display: none;
}

.pulse {
    animation: pulse 1.2s infinite;
}

@keyframes pulse {
    0%   {
        box-shadow: 0 0 0 0 rgba(13,110,253,.7);
    }
    70%  {
        box-shadow: 0 0 0 15px rgba(13,110,253,0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(13,110,253,0);
    }
}

#sollicitatieForm label {
    white-space: nowrap;
}

#sollicitatieForm .card {
    margin-bottom: 16px;
}

.vacature-categorie{
    display:flex;
    align-items:stretch;   /* beide even hoog */
}

.vacature-categorie > div:first-child{
    width:200px;
    border-right: 1px solid var(--divider);
    padding:8px 12px;
}

.vacature-categorie > div:last-child{
    flex:1;
    padding:8px 12px;
}

.droombaan {
    padding-top: 50px;
}

section.vacature-text {
    padding-bottom: 20px;
}

section.vacature-text ul{
    list-style-type: none;
}
section.vacature-text ul li:before {
    color: var(--checkmark);
    content: '✓ ';
}
@media (max-width: 991px) {
    section.vacature-text ul li:before {
        color: rgb(76, 175, 80);
        content: '✓';
        left: 35px;
        position: absolute;
    }
}

.modal {
    background: var(--modal-backdrop);
}

.over-alternate {
    padding-top: 10px;
}

h5 {
    color: var(--h5);
    font-size:26px;
    font-weight: 400;
    height: 28px;
    line-height: 29px;
}

.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    padding-right: calc(var(--bs-gutter-x) * 1);
    padding-left: calc(var(--bs-gutter-x) * 1);
}

.errorField {
    border: 1px solid red;
}

.checkAvailability {
    align-items: center;
}

.checkAvailability div:nth-child(3){
    justify-items: end;
}