/* =====================================================================
   maasstad-child: vacaturepagina en vacatureoverzicht (CONTRACTEN §10, §17).
   In de stijl van de bestaande site, alleen onder .msc-vacature. Laadt alleen
   op pagina's met msc-vacature-pagina of msc-vacature-kaarten (en search.php).

   Gemeten op maasstadcleaning.nl (27 okt, Kit 11 /post-11.css, header 26,
   /onze-diensten/ 414, /mvo/ 624):
   - kleuren: primary/secondary/accent #357DC0, tekst #000000, extra groen #49B46A (50aace6);
   - paginatitel = Kit primary-typografie: Roboto 500, 50px/56px, blauw, gecentreerd (mobiel 30px);
   - sectiekop = Kit secondary-typografie: Roboto 600, 37px/41px, blauw, gecentreerd (mobiel 26px/1.1em);
   - subkop zoals /mvo/: Roboto 600 21px hoofdletters, blauw;
   - broodtekst = Kit text-typografie: Roboto 400, 17px/1.5em, zwart;
   - knoppen zoals de headerknoppen (95d4d4c, 8771d3b) en /onze-diensten/ (3312e394): Inter 500 15px,
     hoofdletters, regelhoogte 1em, letter-spacing -0.2px, rand 2px blauw, transparant met blauwe tekst,
     hover blauw vlak met witte tekst, hoek 8px (de enige afronding op de site), Elementor-padding 12px 24px;
   - accentblok: volle-breedte blauw vlak met witte tekst (/onze-diensten/ 77a5909, padding 5%).
   Geen afgeronde kaarten, geen schaduw, geen pills, geen tegels: kerngegevens zijn een gewone lijst.
   Het blok volgt de breedte van de kolom waar het in staat (de migratie zet het in een kloon van de
   buursectie, Kit-container 1434px); geen eigen buitenbreedte. Selectors .msc-vacature .x (0,2,0)
   winnen van de Kit-regels .elementor-kit-11 h1/h2/a (0,1,1).
   ===================================================================== */

.msc-vacature {
  --mscv-blauw: var(--e-global-color-primary, #357DC0);
  --mscv-groen: var(--e-global-color-50aace6, #49B46A);
  --mscv-tekst: var(--e-global-color-text, #000000);
  --mscv-wit: var(--e-global-color-a983356, #FFFFFF);
  --mscv-lijn: #e5e5e5;
  --mscv-rond: 0;
  --mscv-knoprond: 8px;
  --mscv-letter: var(--e-global-typography-text-font-family, "Roboto"), Helvetica, sans-serif;
  --mscv-kopletter: var(--e-global-typography-primary-font-family, "Roboto"), Helvetica, sans-serif;
  --mscv-knopletter: var(--e-global-typography-accent-font-family, "Inter"), Helvetica, sans-serif;

  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 40px 0;
  font-family: var(--mscv-letter);
  font-size: var(--e-global-typography-text-font-size, 17px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: normal;
  color: var(--mscv-tekst);
  background: transparent;
}
.msc-vacature *,
.msc-vacature *::before,
.msc-vacature *::after { box-sizing: inherit; }
.msc-vacature ul,
.msc-vacature ol { margin: 0; padding: 0; list-style: none; }
.msc-vacature p { margin: 0 0 16px; }

/* ---------- koppen */
.msc-vacature .msc-vacature__titel,
.msc-vacature .msc-vacature__overzicht-titel {
  margin: 0 0 16px;
  font-family: var(--mscv-kopletter);
  font-size: var(--e-global-typography-primary-font-size, 50px);
  font-weight: 500;
  line-height: 56px;
  letter-spacing: -0.3px;
  color: var(--mscv-blauw);
  text-align: center;
}
.msc-vacature .msc-vacature__blok-titel,
.msc-vacature .msc-vacature__cta-titel {
  margin: 0 0 16px;
  font-family: var(--e-global-typography-secondary-font-family, "Roboto"), Helvetica, sans-serif;
  font-size: var(--e-global-typography-secondary-font-size, 37px);
  font-weight: 600;
  line-height: 41px;
  letter-spacing: 0;
  color: var(--mscv-blauw);
  text-align: center;
}
.msc-vacature .msc-vacature__boven {
  margin: 0 0 8px;
  font-family: var(--mscv-kopletter);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--mscv-blauw);
  text-align: center;
}
.msc-vacature .msc-vacature__samenvatting,
.msc-vacature .msc-vacature__overzicht-intro { max-width: 760px; margin: 0 auto 24px; text-align: center; }
.msc-vacature .msc-vacature__gesloten { margin: 0 0 24px; padding: 12px 0; border-top: 2px solid var(--mscv-blauw); border-bottom: 2px solid var(--mscv-blauw); text-align: center; font-weight: 600; }

/* ---------- kop en kerngegevens (eenvoudige lijst, geen tegels) */
.msc-vacature__kop { padding: 0 0 8px; text-align: center; }
.msc-vacature .msc-vacature__chips { display: grid; gap: 4px; max-width: 760px; margin: 0 auto 24px; text-align: center; }
.msc-vacature .msc-vacature__chip { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }
.msc-vacature .msc-vacature__chip-label { font-weight: 600; color: var(--mscv-blauw); }
.msc-vacature .msc-vacature__chip-label::after { content: ":"; }
.msc-vacature .msc-vacature__chip-waarde { font-weight: 400; color: var(--mscv-tekst); }
.msc-vacature .msc-vacature__chip-toelichting { color: var(--mscv-tekst); }
.msc-vacature .msc-vacature__chip-toelichting::before { content: "("; }
.msc-vacature .msc-vacature__chip-toelichting::after { content: ")"; }

/* ---------- knoppen (zoals OFFERTE en SOLLICITEREN in de header) */
.msc-vacature .msc-vacature__acties { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0 0 8px; }
.msc-vacature a.msc-vacature__knop,
.msc-vacature button.msc-vacature__filter {
  display: inline-block;
  padding: 12px 24px;
  border: 2px solid var(--mscv-blauw);
  border-radius: var(--mscv-knoprond);
  background: transparent;
  color: var(--mscv-blauw);
  font-family: var(--mscv-knopletter);
  font-size: 15px;
  font-weight: 500;
  line-height: 1em;
  letter-spacing: -0.2px;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: none;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}
.msc-vacature a.msc-vacature__knop:hover,
.msc-vacature a.msc-vacature__knop:focus,
.msc-vacature button.msc-vacature__filter:hover,
.msc-vacature button.msc-vacature__filter[aria-pressed="true"] { background: var(--mscv-blauw); color: var(--mscv-wit); }
.msc-vacature a.msc-vacature__knop--rustig { border-color: var(--mscv-blauw); }
.msc-vacature a.msc-vacature__knop--klein { padding: 10px 20px; }
.msc-vacature a:focus-visible,
.msc-vacature button:focus-visible,
.msc-vacature summary:focus-visible { outline: 2px solid var(--mscv-tekst); outline-offset: 3px; }

/* ---------- inhoud */
.msc-vacature .msc-vacature__blokken { display: block; }
.msc-vacature .msc-vacature__blok,
.msc-vacature .msc-vacature__faq,
.msc-vacature .msc-vacature__contact,
.msc-vacature .msc-vacature__andere { max-width: 900px; margin: 48px auto 0; padding: 0; border: 0; border-radius: 0; background: none; }
.msc-vacature .msc-vacature__blok p:last-child { margin-bottom: 0; }
.msc-vacature .msc-vacature__lijst { margin: 0 0 16px; padding-left: 22px; list-style: disc; }
.msc-vacature .msc-vacature__lijst li { margin: 0 0 6px; padding: 0; }
.msc-vacature .msc-vacature__lijst li::marker { color: var(--mscv-blauw); }
.msc-vacature .msc-vacature__lijst strong { font-weight: 600; }

/* ---------- vragen (zoals de uitklapregels van de site: lijnen, geen kaarten) */
.msc-vacature .msc-vacature__vraag { border-bottom: 1px solid var(--mscv-lijn); }
.msc-vacature .msc-vacature__vraag:first-of-type { border-top: 1px solid var(--mscv-lijn); }
.msc-vacature .msc-vacature__vraag summary { padding: 14px 32px 14px 0; position: relative; cursor: pointer; font-weight: 600; color: var(--mscv-tekst); list-style: none; }
.msc-vacature .msc-vacature__vraag summary::-webkit-details-marker { display: none; }
.msc-vacature .msc-vacature__vraag summary::after { content: "+"; position: absolute; right: 4px; top: 12px; font-size: 22px; line-height: 1; color: var(--mscv-blauw); }
.msc-vacature .msc-vacature__vraag[open] summary::after { content: "\2212"; }
.msc-vacature .msc-vacature__antwoord { padding: 0 0 16px; }
.msc-vacature .msc-vacature__antwoord ul { list-style: disc; padding-left: 22px; }

/* ---------- afsluiter: volle-breedte blauw vlak zoals "Onze diensten" */
.msc-vacature .msc-vacature__cta { margin: 48px 0 0; padding: 5%; border-radius: 0; background: var(--mscv-blauw); color: var(--mscv-wit); text-align: center; }
.msc-vacature .msc-vacature__cta .msc-vacature__cta-titel { color: var(--mscv-wit); }
.msc-vacature .msc-vacature__cta p { max-width: 760px; margin: 0 auto 24px; color: var(--mscv-wit); }
.msc-vacature .msc-vacature__cta a.msc-vacature__knop { border-color: var(--mscv-wit); color: var(--mscv-wit); }
.msc-vacature .msc-vacature__cta a.msc-vacature__knop:hover,
.msc-vacature .msc-vacature__cta a.msc-vacature__knop:focus { background: var(--mscv-wit); color: var(--mscv-blauw); }
.msc-vacature .msc-vacature__cta a:focus-visible { outline-color: var(--mscv-wit); }

/* ---------- contact */
.msc-vacature .msc-vacature__contact { text-align: center; }
.msc-vacature .msc-vacature__contact ul { display: grid; gap: 4px; }
.msc-vacature .msc-vacature__contactpersoon { font-weight: 600; }
.msc-vacature .msc-vacature__contact a,
.msc-vacature .msc-vacature__andere a,
.msc-vacature .msc-vacature__antwoord a { color: var(--mscv-blauw); text-decoration: underline; text-underline-offset: 3px; }
.msc-vacature .msc-vacature__contact .msc-vacature__chip-label { margin-right: 4px; }

/* ---------- andere vacatures: tekstregels */
.msc-vacature .msc-vacature__andere ul { display: grid; gap: 0; }
.msc-vacature .msc-vacature__andere li { border-bottom: 1px solid var(--mscv-lijn); }
.msc-vacature a.msc-vacature__andere-link { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 12px 0; text-decoration: none; color: var(--mscv-tekst); }
.msc-vacature .msc-vacature__andere-titel { font-weight: 600; color: var(--mscv-blauw); }
.msc-vacature .msc-vacature__andere-pijl { margin-left: auto; color: var(--mscv-blauw); }

/* ---------- vacatureoverzicht: lijst met scheidingslijnen, geen kaarten */
.msc-vacature--overzicht { padding: 40px 0; }
.msc-vacature .msc-vacature__filters { display: grid; gap: 12px; margin: 0 0 24px; }
.msc-vacature .msc-vacature__filters[hidden] { display: none; }
.msc-vacature .msc-vacature__filtergroep { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.msc-vacature .msc-vacature__teller { margin: 0 0 12px; text-align: center; }
.msc-vacature .msc-vacature__kaarten { display: grid; gap: 0; border-top: 1px solid var(--mscv-lijn); }
.msc-vacature .msc-vacature__kaart { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 24px; padding: 20px 0; border: 0; border-bottom: 1px solid var(--mscv-lijn); border-radius: 0; background: none; box-shadow: none; }
.msc-vacature .msc-vacature__kaart[hidden] { display: none; }
.msc-vacature .msc-vacature__kaart-titel { grid-column: 1; margin: 0; font-family: var(--mscv-kopletter); font-size: 21px; font-weight: 600; line-height: 1.3; color: var(--mscv-blauw); }
.msc-vacature .msc-vacature__kaart .msc-vacature__chips { grid-column: 1; display: flex; flex-wrap: wrap; gap: 4px 16px; max-width: none; margin: 0; text-align: left; }
.msc-vacature .msc-vacature__kaart a.msc-vacature__knop { grid-column: 2; grid-row: 1 / span 2; }
.msc-vacature .msc-vacature__leeg { margin: 24px 0 0; text-align: center; }
.msc-vacature .msc-vacature__leeg[hidden] { display: none; }

/* ---------- mobiel (Kit: primary 30px, secondary 26px/1.1em onder 767px) */
@media (max-width: 767px) {
  .msc-vacature .msc-vacature__titel,
  .msc-vacature .msc-vacature__overzicht-titel { font-size: 30px; line-height: 1.15; }
  .msc-vacature .msc-vacature__blok-titel,
  .msc-vacature .msc-vacature__cta-titel { font-size: 26px; line-height: 1.1em; }
  .msc-vacature .msc-vacature__kaart { grid-template-columns: 1fr; }
  .msc-vacature .msc-vacature__kaart a.msc-vacature__knop { grid-column: 1; grid-row: auto; justify-self: start; }
  .msc-vacature .msc-vacature__cta { padding: 8% 6% 11%; }
}

@media (prefers-reduced-motion: reduce) {
  .msc-vacature * { transition: none !important; }
}

/* koppen zoals ingevoerd: de Kit zet h3 op "capitalize" (typografie 02da0e9), dat doen wij niet (0,2,1 wint van .elementor-kit-11 h3) */
.msc-vacature.msc-vacature h1,
.msc-vacature.msc-vacature h2,
.msc-vacature.msc-vacature h3,
.msc-vacature.msc-vacature h4 { text-transform: none; }   /* Kit-capitalize uit */