/* =====================================================================
   maasstad-child: zoekveld (.msc-zoeken) en zoekresultaten (.msc-zoekpagina),
   CONTRACTEN §14 en §17. In de stijl van de site (gemeten waarden: zie
   msc-vacature.css): velden zoals de formulieren van de Kit (Inter 16px,
   rechthoekig), zoekknop zoals de headerknoppen (rand 2px #357DC0, hoofdletters,
   hoek 8px), blauwe gecentreerde koppen, zwarte tekst. Geen pills, schaduw
   of afgeronde vlakken. De resultatenpagina (search.php) staat buiten een
   Elementor-container en neemt daarom de Kit-breedte (1434px), gecentreerd.
   ===================================================================== */

.msc-zoeken {
  --mscz-blauw: var(--e-global-color-primary, #357DC0);
  --mscz-groen: var(--e-global-color-50aace6, #49B46A);
  --mscz-tekst: var(--e-global-color-text, #000000);
  --mscz-wit: var(--e-global-color-a983356, #FFFFFF);
  --mscz-lijn: #cccccc;
  position: relative;
  box-sizing: border-box;
  margin: 0;
  font-family: var(--e-global-typography-text-font-family, "Roboto"), Helvetica, sans-serif;
  font-size: 17px;
  letter-spacing: normal;
  color: var(--mscz-tekst);
}
.msc-zoeken *,
.msc-zoeken *::before,
.msc-zoeken *::after { box-sizing: inherit; }
.msc-zoeken .msc-zoeken__label { display: block; margin-bottom: 8px; font-family: var(--e-global-typography-accent-font-family, "Inter"), Helvetica, sans-serif; font-size: 16px; font-weight: 500; color: var(--mscz-blauw); }
.msc-zoeken .msc-zoeken__sr {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.msc-zoeken .msc-zoeken__veld { display: flex; gap: 8px; }
.msc-zoeken .msc-zoeken__invoer {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid var(--mscz-lijn);
  border-radius: 0;
  background: var(--mscz-wit);
  color: var(--mscz-tekst);
  font-family: var(--e-global-typography-accent-font-family, "Inter"), Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
}
.msc-zoeken .msc-zoeken__invoer:focus { border-color: var(--mscz-blauw); outline: 2px solid var(--mscz-blauw); outline-offset: 0; }
.msc-zoeken .msc-zoeken__knop {
  flex: none;
  padding: 12px 24px;
  border: 2px solid var(--mscz-blauw);
  border-radius: 8px;
  background: transparent;
  color: var(--mscz-blauw);
  font-family: var(--e-global-typography-accent-font-family, "Inter"), Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1em;
  letter-spacing: -0.2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}
.msc-zoeken .msc-zoeken__knop:hover,
.msc-zoeken .msc-zoeken__knop:focus { background: var(--mscz-blauw); color: var(--mscz-wit); }
.msc-zoeken .msc-zoeken__knop:focus-visible { outline: 2px solid var(--mscz-tekst); outline-offset: 2px; }

.msc-zoeken .msc-zoeken__suggesties {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 60vh;
  overflow-y: auto;
  border: 1px solid var(--mscz-lijn);
  border-top: 0;
  border-radius: 0;
  background: var(--mscz-wit);
}
.msc-zoeken .msc-zoeken__suggesties[hidden] { display: none; }
.msc-zoeken .msc-zoeken__suggestie { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 10px 14px; border-bottom: 1px solid #eeeeee; cursor: pointer; }
.msc-zoeken .msc-zoeken__suggestie[aria-selected="true"],
.msc-zoeken .msc-zoeken__suggestie:hover { background: var(--mscz-blauw); color: var(--mscz-wit); }
.msc-zoeken .msc-zoeken__suggestie-titel { font-weight: 500; }
.msc-zoeken .msc-zoeken__suggestie-soort { flex: none; font-size: 14px; }
.msc-zoeken .msc-zoeken__suggestie--alle { justify-content: flex-start; font-weight: 600; color: var(--mscz-blauw); border-bottom: 0; }
.msc-zoeken .msc-zoeken__suggestie--alle[aria-selected="true"],
.msc-zoeken .msc-zoeken__suggestie--alle:hover { color: var(--mscz-wit); }

/* ---------- resultatenpagina */
.msc-zoekpagina {
  --mscz-blauw: var(--e-global-color-primary, #357DC0);
  --mscz-tekst: var(--e-global-color-text, #000000);
  --mscz-wit: var(--e-global-color-a983356, #FFFFFF);
  --mscz-lijn: #e5e5e5;
  box-sizing: border-box;
  max-width: 1434px;
  margin-inline: auto;
  padding: 40px 20px 64px;
  font-family: var(--e-global-typography-text-font-family, "Roboto"), Helvetica, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: normal;
  color: var(--mscz-tekst);
}
.msc-zoekpagina .msc-zoekpagina__kop { max-width: 760px; margin: 0 auto; text-align: center; }
.msc-zoekpagina .msc-zoekpagina__kop .msc-zoeken { text-align: left; }
.msc-zoekpagina .msc-zoekpagina__titel { margin: 0 0 24px; font-family: var(--e-global-typography-primary-font-family, "Roboto"), Helvetica, sans-serif; font-size: 50px; line-height: 56px; font-weight: 500; letter-spacing: -0.3px; color: var(--mscz-blauw); }
.msc-zoekpagina .msc-zoekpagina__term { color: var(--mscz-tekst); }
.msc-zoekpagina .msc-zoekpagina__subtitel { margin: 48px 0 16px; font-size: 37px; line-height: 41px; font-weight: 600; color: var(--mscz-blauw); text-align: center; }
.msc-zoekpagina .msc-vacature--overzicht { padding: 24px 0 0; }
.msc-zoekpagina .msc-zoekpagina__resultaten,
.msc-zoekpagina .msc-zoekpagina__leeg { max-width: 900px; margin: 0 auto; }
.msc-zoekpagina .msc-zoekpagina__lijst { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--mscz-lijn); }
.msc-zoekpagina .msc-zoekpagina__resultaat { padding: 20px 0; border-bottom: 1px solid var(--mscz-lijn); }
.msc-zoekpagina .msc-zoekpagina__soort { display: block; margin-bottom: 4px; font-size: 14px; font-weight: 600; text-transform: uppercase; color: var(--mscz-blauw); }
.msc-zoekpagina .msc-zoekpagina__resultaat-titel { margin: 0; font-size: 21px; line-height: 1.3; font-weight: 600; }
.msc-zoekpagina .msc-zoekpagina__resultaat-titel a { color: var(--mscz-blauw); text-decoration: none; }
.msc-zoekpagina .msc-zoekpagina__resultaat-titel a:hover { text-decoration: underline; }
.msc-zoekpagina .msc-zoekpagina__pad { margin: 2px 0 6px; font-size: 15px; color: var(--mscz-tekst); overflow-wrap: anywhere; }
.msc-zoekpagina .msc-zoekpagina__fragment { margin: 0; }
.msc-zoekpagina mark { padding: 0; background: none; color: var(--mscz-blauw); font-weight: 600; }
.msc-zoekpagina .msc-zoekpagina__paginering { margin-top: 24px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.msc-zoekpagina .msc-zoekpagina__paginering .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px; border: 2px solid var(--mscz-blauw); border-radius: 8px; color: var(--mscz-blauw); text-decoration: none; font-weight: 500; }
.msc-zoekpagina .msc-zoekpagina__paginering .page-numbers.current { background: var(--mscz-blauw); color: var(--mscz-wit); }
.msc-zoekpagina .msc-zoekpagina__leeg { text-align: center; }
.msc-zoekpagina .msc-zoekpagina__leeg p { margin: 0 0 16px; }
.msc-zoekpagina .msc-zoekpagina__suggesties { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; list-style: none; margin: 0; padding: 0; }
.msc-zoekpagina .msc-zoekpagina__suggesties a { display: inline-block; padding: 12px 24px; border: 2px solid var(--mscz-blauw); border-radius: 8px; color: var(--mscz-blauw); font-family: var(--e-global-typography-accent-font-family, "Inter"), Helvetica, sans-serif; font-size: 15px; font-weight: 500; line-height: 1em; text-transform: uppercase; text-decoration: none; }
.msc-zoekpagina .msc-zoekpagina__suggesties a:hover { background: var(--mscz-blauw); color: var(--mscz-wit); }
.msc-zoekpagina a:focus-visible { outline: 2px solid var(--mscz-tekst); outline-offset: 2px; }

@media (max-width: 767px) {
  .msc-zoekpagina .msc-zoekpagina__titel { font-size: 30px; line-height: 1.15; }
  .msc-zoekpagina .msc-zoekpagina__subtitel { font-size: 26px; line-height: 1.1em; }
}

/* 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-zoekpagina.msc-zoekpagina h1,
.msc-zoekpagina.msc-zoekpagina h2,
.msc-zoekpagina.msc-zoekpagina h3 { text-transform: none; }   /* Kit-capitalize uit */