/* KEMA Horeca Groep — vormgeving 1-op-1 overgenomen van de oorspronkelijke
   Divi-site (kema.nu, september 2026): crème ondergrond, amberkleurige kopbalk
   met het KEMA-logo, pill-knoppen en een zwarte voet met crème contactkaart.
   Kleuren en maten komen uit de computed styles van de oude site. */

:root {
    --kleur-creme: #fef6dd;      /* pagina-achtergrond */
    --kleur-amber: #f3ac45;      /* kopbalk */
    --kleur-accent: #fb8500;     /* knoppen, links, accenten */
    --kleur-geel: #ffb703;       /* secundair accent (blockquote-rand) */
    --kleur-donker: #0e0c19;     /* koppen */
    --kleur-tekst: #3c3a47;      /* lopende tekst */
    --kleur-tekst-zacht: #71717a;
    --kleur-wit: #ffffff;
    --kleur-vacature: #ff2600;   /* knop op vacaturekaarten (HR-plugin-stijl) */
    --kleur-rand: #e5e0d0;

    --kop: 'Oswald', Helvetica, Arial, sans-serif;
    --tekst: 'Barlow Condensed', Helvetica, Arial, sans-serif;

    --breed: 1080px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--tekst);
    font-size: 16px;
    line-height: 1.75;
    font-weight: 500;
    color: var(--kleur-tekst);
    background: var(--kleur-creme);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
    font-family: var(--kop);
    font-weight: 500;
    margin: 0 0 .5em;
    color: var(--kleur-donker);
}

h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 1.15; }
h2 { font-size: clamp(1.9rem, 4vw, 3.1rem); line-height: 1.2; }
h3 { font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.3; }
h4 { font-size: 1.5rem; line-height: 1.4; }

p { margin: 0 0 1.1em; }

a { color: var(--kleur-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; }

.omhulsel { width: 100%; max-width: var(--breed); margin: 0 auto; padding: 0 20px; }

/* --- kop: crème strook met amberkleurige balk --- */
.site-kop { background: var(--kleur-creme); padding: 12px 0 20px; }

.merk {
    display: block;
    font-family: var(--tekst);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--kleur-donker);
    margin-bottom: 8px;
}
.merk:hover { text-decoration: none; color: var(--kleur-donker); }

.kop-balk {
    background: var(--kleur-amber);
    box-shadow: 0 2px 18px rgba(0, 0, 0, .3);
    text-align: center;
    padding: 34px 20px 22px;
    position: relative;
}

.kop-logo { display: inline-block; }
.kop-logo img { width: clamp(220px, 32vw, 346px); margin: 0 auto; }

.hoofdmenu {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 44px;
    list-style: none;
    margin: 26px 0 0;
    padding: 0;
}
.hoofdmenu a {
    font-family: var(--tekst);
    font-weight: 800;
    font-size: 24px;
    letter-spacing: 1px;
    color: #000000;
}
.hoofdmenu a:hover { color: var(--kleur-wit); text-decoration: none; }

.menu-knop {
    display: none;
    background: none;
    border: 2px solid rgba(0, 0, 0, .55);
    border-radius: 6px;
    color: #000000;
    font-family: var(--tekst);
    font-weight: 800;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 8px 16px;
    margin-top: 18px;
    cursor: pointer;
}

/* --- hero (home en vacaturedetail) --- */
.hero {
    background-color: var(--kleur-donker);
    background-size: cover;
    background-position: center;
    color: var(--kleur-wit);
    position: relative;
    padding: clamp(90px, 16vw, 170px) 0;
}
.hero::after { content: ""; position: absolute; inset: 0; background: rgba(14, 12, 25, .38); }
.hero .omhulsel { position: relative; z-index: 1; max-width: calc(var(--breed) + 40px); }
.hero .bovenkop {
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--kleur-accent);
    margin-bottom: 10px;
}
.hero h1 { color: var(--kleur-wit); text-transform: uppercase; margin-bottom: .25em; }
.hero p { max-width: 640px; margin-bottom: 1.4em; }
.hero p:last-child { margin-bottom: 0; }

/* --- knoppen: afgeronde pillen, zoals op de oude site --- */
.knop {
    display: inline-block;
    background: var(--kleur-accent);
    color: var(--kleur-wit);
    font-family: var(--tekst);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .5px;
    line-height: 1.7em;
    padding: 12px 28px;
    border: 0;
    border-radius: 100px;
    cursor: pointer;
}
.knop:hover { background: #e07600; color: var(--kleur-wit); text-decoration: none; }

.knop--wit { background: var(--kleur-wit); color: var(--kleur-accent); }
.knop--wit:hover { background: var(--kleur-creme); color: var(--kleur-accent); }

/* --- inhoud --- */
.inhoud { padding: clamp(48px, 8vw, 96px) 0; }
.inhoud > .omhulsel > *:first-child { margin-top: 0; }
.inhoud ul, .inhoud ol { margin: 0 0 1.1em; padding-left: 1.3em; }
.inhoud blockquote {
    margin: 1.6em 0;
    padding: 4px 0 4px 22px;
    border-left: 3px solid var(--kleur-geel);
    font-family: var(--kop);
    color: var(--kleur-donker);
}
.inhoud table { width: 100%; border-collapse: collapse; margin: 1.4em 0; }
.inhoud th, .inhoud td { border: 1px solid var(--kleur-rand); padding: 10px 12px; text-align: left; }
.inhoud th { background: var(--kleur-wit); font-family: var(--kop); font-size: .95rem; }

/* --- tweeluik: tekst naast een grote foto --- */
.tweeluik {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(28px, 5vw, 64px);
    align-items: start;
    margin: 0 0 clamp(40px, 7vw, 80px);
}
.tweeluik figure { margin: 0; }
.tweeluik figure img { width: 100%; border-radius: 6px; }
.tweeluik .kader img { box-shadow: 0 18px 48px rgba(14, 12, 25, .18); background: var(--kleur-wit); }

/* --- partnerlogo's (pagina Onze partners) --- */
.partner-logos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-content: start;
}
.partner-logos img {
    background: var(--kleur-wit);
    border-radius: 6px;
    box-shadow: 0 6px 24px rgba(14, 12, 25, .07);
    padding: 22px;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: contain;
}

/* --- locatiekaarten op de home --- */
.locaties {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 26px;
    list-style: none;
    margin: 0 0 clamp(48px, 8vw, 90px);
    padding: 0;
}
.locaties li {
    background: var(--kleur-wit);
    border-radius: 6px;
    box-shadow: 0 6px 24px rgba(14, 12, 25, .07);
    padding: 44px 30px 36px;
}
.locatie-pijl { display: block; margin-bottom: 22px; }
.locatie-pijl svg { display: block; }
.locaties h3, .locaties h4 { font-size: 1.45rem; margin-bottom: .45em; }
.locaties h3 a, .locaties h4 a { color: var(--kleur-donker); }
.locaties h3 a:hover, .locaties h4 a:hover { color: var(--kleur-accent); text-decoration: none; }
.locaties p { margin: 0; }

/* --- fotogalerij: eerste rij van vier, daarna zes per rij --- */
.galerij {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 14px;
    margin: 0;
}
.galerij img,
.galerij p { grid-column: span 2; margin: 0; }
.galerij img:nth-child(-n+4) { grid-column: span 3; }
.galerij img {
    width: 100%;
    height: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 8px;
}

/* --- kaarten (vacatures, in de stijl van de HR-plugin op de oude site) --- */
.rooster {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 26px;
    margin: 34px 0 0;
    padding: 0;
    list-style: none;
}
.kaart {
    background: var(--kleur-wit);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(14, 12, 25, .08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.kaart img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.kaart__body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.kaart__body h3 { font-size: 1.5rem; margin: 0; }
.kaart__meta { font-size: 14px; color: var(--kleur-tekst-zacht); margin: 0; }
.kaart__actie { margin-top: auto; padding-top: 16px; margin-bottom: 0; }
.kaart__actie .knop {
    display: block;
    text-align: center;
    background: var(--kleur-vacature);
    border-radius: 8px;
    font-weight: 800;
}
.kaart__actie .knop:hover { background: #d92100; }

/* --- formulieren: invulvelden zoals op de oude contactpagina --- */
.formulier { max-width: 100%; }
.formulier-rooster {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 26px;
}
.veld { margin-bottom: 22px; }
.veld--vol { grid-column: 1 / -1; }
.veld label {
    display: block;
    font-weight: 600;
    font-size: .95rem;
    margin-bottom: 6px;
}
.veld--stil label {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.veld input[type=text], .veld input[type=email], .veld input[type=tel],
.veld input[type=password], .veld input[type=number], .veld input[type=file],
.veld select, .veld textarea {
    width: 100%;
    padding: 15px 16px;
    border: 1px solid #d9d4c3;
    border-radius: 4px;
    font: inherit;
    line-height: 1.5;
    background: var(--kleur-wit);
    color: inherit;
}
.veld textarea { min-height: 170px; resize: vertical; }
.veld input:focus, .veld select:focus, .veld textarea:focus {
    outline: 2px solid var(--kleur-accent);
    outline-offset: 1px;
    border-color: var(--kleur-accent);
}
.veld__hulp { font-size: .9rem; color: var(--kleur-tekst-zacht); margin-top: 4px; }
.veld__fout { color: #c0392b; font-size: .92rem; margin-top: 4px; }
.verplicht { color: #c0392b; }

/* honeypot: onzichtbaar voor bezoekers, wel invulbaar voor bots */
.val { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.melding {
    padding: 14px 18px;
    border-radius: 6px;
    margin-bottom: 24px;
    border-left: 4px solid;
    background: var(--kleur-wit);
}
.melding--goed { border-color: #2e7d32; color: #1b5e20; }
.melding--fout { border-color: #c0392b; color: #922b21; }

/* --- voet: zwart met crème contactkaart --- */
.site-voet {
    background: #000000;
    color: var(--kleur-wit);
    padding: clamp(48px, 8vw, 90px) 0;
}
.voet-rooster {
    display: grid;
    grid-template-columns: minmax(230px, 1fr) minmax(0, 2.1fr);
    gap: clamp(30px, 5vw, 70px);
    align-items: start;
}
.voet-logo { height: 76px; width: auto; margin-bottom: 26px; }
.voet-naam { font-family: var(--kop); font-size: 1.5rem; color: var(--kleur-wit); margin-bottom: 1.2em; }
.voet-slogan {
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 2.2em;
}
.voet-menu { display: flex; flex-wrap: wrap; gap: 10px 34px; }
.voet-menu a { color: var(--kleur-wit); font-size: 15px; }

.voet-kaart {
    background: var(--kleur-creme);
    color: var(--kleur-tekst);
    border-radius: 6px;
    padding: clamp(30px, 5vw, 58px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px clamp(24px, 4vw, 60px);
}
.voet-kaart h4 { font-size: 1.5rem; margin-bottom: .9em; }
.voet-kaart a { color: var(--kleur-accent); }
.voet-adres { text-transform: uppercase; letter-spacing: .5px; }
.voet-adres a { color: var(--kleur-tekst); }

/* --- mobiel --- */
@media (max-width: 860px) {
    .menu-knop { display: inline-block; }
    .hoofdmenu {
        display: none;
        margin-top: 16px;
        background: var(--kleur-accent);
        border-radius: 6px;
        padding: 12px 24px;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        text-align: left;
    }
    .hoofdmenu[data-open="true"] { display: flex; }
    .hoofdmenu a { display: block; padding: 10px 0; font-size: 20px; }
    .hoofdmenu li + li { border-top: 1px solid rgba(0, 0, 0, .18); }

    .tweeluik { grid-template-columns: 1fr; }
    .galerij { grid-template-columns: 1fr 1fr; gap: 10px; }
    .galerij img, .galerij img:nth-child(-n+4) { grid-column: span 1; }
    .voet-rooster { grid-template-columns: 1fr; }
    .voet-kaart { grid-template-columns: 1fr; }
    .formulier-rooster { grid-template-columns: 1fr; }
}