/* ═══════════════════════════════════════════════════════════════════
   HOLLANDER, AANVRAAGFORMULIER
   ═══════════════════════════════════════════════════════════════════

   Aanvulling op de bestaande modalstijlen die per pagina inline staan.
   Alleen wat de nieuwe velden nodig hebben; de bestaande vormgeving
   van .form-group, .form-row en .form-error-msg blijft ongemoeid.

   Dit bestand wordt in de <head> gekoppeld ná het inline <style>-blok,
   zodat deze regels altijd winnen van wat er per pagina nog staat.
   ═══════════════════════════════════════════════════════════════════ */

/* Organisatievelden verschijnen pas bij de doelgroep die erom vraagt.
   .form-group zet display:flex, dus zonder deze regel zou het
   hidden-attribuut niets doen. */
.form-group[hidden],
.form-row[hidden] {
  display: none !important;
}

/* Korte toelichting boven de adresvelden. */
.form-hint {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--gray-text);
}

/* Het adresblok hoort visueel bij elkaar. */
.form-adres {
  margin-bottom: 2px;
}

/* Postcode is smaller dan plaats; op mobiel vallen ze onder elkaar,
   net als de overige .form-row-paren. */
.form-row--adres {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 12px;
}

@media (max-width: 600px) {
  .form-row--adres {
    grid-template-columns: 1fr;
  }
}

/* ── Compacte maatvoering van de modal ───────────────────────────── */

/* Het formulier en de bevestiging namen te veel ruimte in. Hieronder
   staat de volledige maatvoering van beide, op één plek, zodat de
   afmetingen op alle 44 pagina's gelijk zijn. Dit bestand wordt ná het
   inline <style>-blok geladen, dus deze regels winnen van wat daar nog
   per pagina staat.

   Alles hangt aan .contact-modal: het sollicitatieformulier en andere
   formulieren veranderen niet mee. Er wordt verkleind met opmaak, niet
   met transform of zoom, zodat tekst scherp blijft en de invoervelden
   op mobiel groot genoeg blijven om op te tikken. */

#contact-overlay {
  padding: 24px;
}

.contact-modal {
  width: 100%;
  max-width: 520px;
  padding: 24px;
  /* Nooit hoger dan het scherm. dvh houdt rekening met het geopende
     toetsenbord op mobiel; de vh-regel ervoor is de terugval. */
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  display: flex;
  flex-direction: column;
}

.contact-modal h2 {
  font-size: 26px;
  line-height: 1.2;
  margin-bottom: 4px;
  padding-right: 44px;   /* ruimte voor het kruisje */
}
.contact-modal > p {
  font-size: 15px;
  line-height: 1.5;
  margin-bottom: 16px;
}

/* Het formulier is het deel dat schuift als het niet past. De knoppen
   onderaan blijven zo bereikbaar, en het kruisje staat vast in de hoek
   van de modal. */
.contact-modal form {
  overflow-y: auto;
  min-height: 0;
  margin: 0 -24px -24px;
  padding: 0 24px 24px;
}

/* Klikgebied van het kruisje op 44 x 44. */
.contact-modal .contact-modal-close {
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
}

/* ── Velden ──────────────────────────────────────────────────────── */

.contact-modal .form-group {
  gap: 4px;
  margin-bottom: 12px;
}
.contact-modal .form-group label {
  font-size: 14px;
}
.contact-modal .form-row,
.contact-modal .form-row--adres {
  gap: 12px;
}
.contact-modal .form-group input,
.contact-modal .form-group select,
.contact-modal .form-group textarea {
  /* 16px voorkomt dat iOS bij het focussen inzoomt. */
  font-size: 16px;
  line-height: 1.3;
  padding: 11px 13px;
  min-height: 46px;
}
.contact-modal .form-group textarea {
  height: 90px;
  min-height: 90px;
  padding-top: 10px;
}

.contact-modal .form-adres {
  margin-top: 2px;
}
.contact-modal .form-hint {
  margin: 0 0 8px;
  font-size: 13px;
}

/* De statusregel is meestal leeg. Zonder deze regel houdt hij toch
   ruimte bezet tussen het berichtveld en de verzendknop. */
.contact-modal .form-status:empty {
  display: none;
  margin: 0;
}
.contact-modal .form-status {
  font-size: 14px;
  line-height: 1.5;
  margin: 2px 0 8px;
}

.contact-modal .btn-send {
  margin-top: 2px;
  min-height: 46px;
  padding: 13px 20px;
}

@media (max-width: 600px) {
  #contact-overlay {
    padding: 16px;
  }
  .contact-modal {
    padding: 20px;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
  }
  .contact-modal form {
    margin: 0 -20px -20px;
    padding: 0 20px 20px;
  }
  .contact-modal h2 {
    font-size: 24px;
  }
  /* De kolommen vallen hier onder elkaar. Zonder deze regel komt de
     rijafstand van het raster bovenop de marge van het veld erboven,
     waardoor er grotere gaten vallen tussen juist die twee velden. */
  .contact-modal .form-row,
  .contact-modal .form-row--adres {
    gap: 0;
  }
}

/* ── Afronding van de aanvraag ───────────────────────────────────── */

/* Het bevestigingspaneel stond eerder maar op een deel van de pagina's,
   met de opmaak in het inline <style>-blok van die pagina's. Het paneel
   staat nu overal, dus hoort de opmaak hier: op de pagina's zonder dat
   blok viel het terug op 'display:flex' zonder richting, waardoor titel,
   tekst, adres en knop naast elkaar kwamen te staan en het icoon geen
   vorm had.

   Alles hieronder hangt aan .contact-modal en .sol-modal, zodat de
   bevestiging van een aanvraag en die van een sollicitatie er gelijk
   uitzien en op één plek worden onderhouden. Andere modals en de
   formulieren zelf veranderen er niet door. Dit bestand wordt ná het
   inline blok geladen, dus deze regels winnen van wat daar nog staat. */

/* Na een geslaagde verzending verdwijnen de inleiding, de velden en de
   verzendknop; alleen de bevestiging blijft staan. De modal blijft
   open, zodat de bezoeker de bevestiging kan lezen. In de
   sollicitatiemodal heten die onderdelen anders, vandaar de tweede
   reeks selectors. */
.contact-modal.is-verzonden > h2,
.contact-modal.is-verzonden > p,
.contact-modal.is-verzonden > form,
.sol-modal.is-verzonden > .sol-vacancy-tag,
.sol-modal.is-verzonden > .sol-title,
.sol-modal.is-verzonden > .sol-sub,
.sol-modal.is-verzonden > .sol-form-wrap {
  display: none;
}

/* De bevestiging heeft een eigen, smallere maat dan het formulier en
   geen vaste minimumhoogte: hij is zo hoog als zijn inhoud. */
.contact-modal.is-verzonden,
.sol-modal.is-verzonden {
  max-width: 400px;
  padding: 28px;
  display: block;
}

/* Het paneel verschijnt uitsluitend na een geslaagde verzending. */
.contact-modal .form-success,
.sol-modal .form-success {
  display: none;
}
.contact-modal.is-verzonden .form-success,
.sol-modal.is-verzonden .form-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0;
  padding: 0;
}

/* De focus springt hierheen; een eigen rand zou dubbelop zijn, de
   modal is al afgebakend. */
.contact-modal .form-success:focus,
.sol-modal .form-success:focus {
  outline: none;
}

/* Groene cirkel met wit vinkje. De afmeting staat vast, anders rekt
   de cirkel mee met de inhoud ernaast. */
.contact-modal .form-success-icon,
.sol-modal .form-success-icon {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #17803d;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 14px;
}
.contact-modal .form-success-icon svg,
.sol-modal .form-success-icon svg {
  display: block;
  width: 22px;
  height: 22px;
  stroke: #ffffff;
  fill: none;
}

.contact-modal .form-success h3,
.sol-modal .form-success h3 {
  margin: 0 0 8px;
  max-width: 100%;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--black);
  /* Normale woordafbreking: alleen afbreken waar het echt moet. */
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}

.contact-modal .form-success > p,
.sol-modal .form-success > p {
  margin: 0;
  max-width: 320px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--gray-text);
}

/* Regel over de bevestigingsmail. Staat er alleen als Bird die heeft
   aangenomen. */
.contact-modal .form-success-extra,
.sol-modal .form-success-extra {
  margin: 14px 0 0;
  max-width: 100%;
  font-size: 15px;
  line-height: 1.5;
}
.contact-modal .form-success-extra-tekst,
.sol-modal .form-success-extra-tekst {
  display: block;
  color: #17803d;
}
.contact-modal .form-success-email,
.sol-modal .form-success-email {
  display: block;
  margin-top: 2px;
  color: var(--black);
  /* Een lang adres breekt binnen het venster af in plaats van eroverheen. */
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Zelfde stijl als de overige knoppen op de site: donker vlak, witte
   tekst, volledig afgeronde hoeken. Expliciet gezet, zodat de knop
   nergens terugvalt op de standaardopmaak van de browser. */
.contact-modal .form-success-close,
.sol-modal .form-success-close {
  -webkit-appearance: none;
  appearance: none;
  margin: 16px 0 0;
  width: 140px;
  min-width: 0;
  min-height: 44px;
  padding: 0 20px;
  background: var(--black);
  color: var(--white);
  border: none;
  border-radius: 100px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 1.2;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.contact-modal .form-success-close:hover,
.sol-modal .form-success-close:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

/* Het kruisje van de sollicitatiemodal staat verder van de rand dan
   dat van het contactvenster; in de bevestiging krijgt het dezelfde
   plaats, zodat beide panelen gelijk ogen. */
.sol-modal.is-verzonden .sol-close {
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
}

@media (max-width: 600px) {
  .contact-modal.is-verzonden,
  .sol-modal.is-verzonden {
    padding: 24px;
  }
  .contact-modal .form-success h3,
  .sol-modal .form-success h3 {
    font-size: 23px;
  }
}