/* ===========================================================================
   hsb-contact.css — de contactpagina (contact.php)

   Naar het ontwerp op het canvas. Dezelfde vormtaal als de rest van de site:

     hoeken    40px 2px 40px 2px  (het formulierblok)
               24px 2px 24px 2px  (de kaarten rechts)
               13px               (de invoervelden)
               12px               (de knoppen)
     breedte   .container van site.css, dus var(--container-max-width) = 1440
     koppen    Museo700 via hsb-koppen.css, niet de Bitter uit het canvas

   De blauwe kop zelf komt uit includes/pagina-hero.php en staat in
   hsb-paginahero.css; die is op alle subpagina's gelijk.
   =========================================================================== */

.hsb-ct {
  --blauw: #103856;
  --blauw-diep: #0b2940;
  --oranje: #c24d16;
  --oranje-donker: #a63f0f;
  --lijn: #e3e8ee;
  --rand: #c3d4e2;
  --vlak: #f6f8fa;
  --tekst: #1d2733;
  --grijs: #5b6b7c;
}

/* ===========================================================================
   DE TWEE KOLOMMEN
   =========================================================================== */

.hsb-ct__rij {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  align-items: flex-start;
  padding: 56px 0 0;
}

/* Een hoge flex-grow links en een vaste breedte rechts: de kaarten houden
   hun maat tot er geen ruimte meer is, en zakken dan onder het formulier. */
.hsb-ct__links { flex: 999 1 560px; min-width: 0; }
.hsb-ct__rechts {
  flex: 1 1 340px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.hsb-ct__kop {
  margin: 0 0 10px;
  font-size: 30px;
  line-height: 1.15;
  color: var(--blauw);
}
.hsb-ct__lead {
  margin: 0 0 26px;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--grijs);
  max-width: 44em;
}


/* ===========================================================================
   HET FORMULIER
   =========================================================================== */

.hsb-ct__kaartform {
  border: 1px solid var(--lijn);
  border-radius: 40px 2px 40px 2px;
  padding: 30px 32px 32px;
}

.hsb-ct__velden {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Twee velden naast elkaar; onder de ~520px vallen ze onder elkaar doordat
   flex-wrap met een basis van 220px niet meer past. */
.hsb-ct__duo {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.hsb-ct__veld { flex: 1 1 220px; min-width: 0; }

/* De labels stonden als zwevende tekst IN het veld (form-floating). Die
   verdwijnt zodra je begint te typen. Nu staan ze erboven, zoals in het
   ontwerp en zoals op het aanvraagformulier. */
.hsb-ct__label {
  display: block;
  margin-bottom: 7px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--blauw);
}

.hsb-ct__invoer {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border: 1px solid var(--rand);
  border-radius: 13px;
  font-size: 16px;
  font-family: inherit;
  color: var(--tekst);
  background: #fff;
  transition: border-color .2s, box-shadow .2s;
}
textarea.hsb-ct__invoer {
  height: auto;
  padding: 13px 16px;
  line-height: 1.6;
  resize: vertical;
}
.hsb-ct__invoer:focus {
  outline: none;
  border-color: var(--blauw);
  box-shadow: 0 0 0 3px rgba(16, 56, 86, .12);
}

.hsb-ct__akkoord {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--grijs);
  cursor: pointer;
}
.hsb-ct__akkoord input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--blauw);
}
.hsb-ct__akkoord a { color: var(--blauw); font-weight: 600; }

.hsb-ct__verstuur {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 0 30px;
  border: 0;
  border-radius: 12px;
  background: var(--oranje);
  color: #fff;
  font-size: 16.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background-color .2s, transform .1s;
}
.hsb-ct__verstuur:hover { background: var(--oranje-donker); }
.hsb-ct__verstuur:active { transform: translateY(1px); }
.hsb-ct__verstuur svg { transition: transform .25s cubic-bezier(.22,.61,.36,1); }
.hsb-ct__verstuur:hover svg { transform: translateX(4px); }

.hsb-ct__geenrecaptcha {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--grijs);
}


/* ===========================================================================
   DE KAARTEN RECHTS
   =========================================================================== */

.hsb-ct__kaart {
  border: 1px solid var(--lijn);
  border-radius: 24px 2px 24px 2px;
  padding: 26px 28px 20px;
}

.hsb-ct__kaartkop {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.hsb-ct__kaartico {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--vlak);
  color: var(--blauw);
}
.hsb-ct__kaart h2 {
  margin: 0;
  font-size: 19px;
  color: var(--blauw);
}

/* Elk gegeven een eigen regel met een lijntje erboven. */
.hsb-ct__gegeven {
  padding: 14px 0;
  border-top: 1px solid var(--lijn);
}
.hsb-ct__etiket {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--grijs);
}
.hsb-ct__waarde {
  display: block;
  font-size: 16px;
  line-height: 1.55;
  color: var(--tekst);
}
.hsb-ct__waarde--groot {
  font-size: 20px;
  font-weight: 700;
  color: var(--blauw);
  text-decoration: none;
}
a.hsb-ct__waarde--groot:hover { color: var(--oranje); }
.hsb-ct__bijschrift {
  display: block;
  margin-top: 6px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--grijs);
}

/* Het etiket met het WhatsApp-icoontje ervoor. */
.hsb-ct__etiket--wa {
  display: flex;
  align-items: center;
  gap: 7px;
}
.hsb-ct__etiket--wa svg { color: #25d366; }

.hsb-ct__wa {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  border: 1px solid #bfe6cd;
  border-radius: 12px;
  background: #f1faf4;
  color: var(--blauw);
  font-weight: 700;
  font-size: 15.5px;
  text-decoration: none;
  transition: background-color .2s, border-color .2s;
}
.hsb-ct__wa:hover { background: #e4f5ea; border-color: #9fd9b5; color: var(--blauw); }
.hsb-ct__wa svg { color: #25d366; }

.hsb-ct__maps {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 4px;
  padding: 12px 20px;
  border: 1px solid var(--lijn);
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--blauw);
  text-decoration: none;
  transition: background-color .2s, border-color .2s;
}
.hsb-ct__maps:hover { background: var(--vlak); border-color: #c6d0da; color: var(--blauw); }


/* ===========================================================================
   FORMALITEITEN  (website_omschrijving_4 uit het CMS)
   =========================================================================== */

.hsb-ct__formaliteiten { padding: 56px 0 0; }

.hsb-ct__blok {
  border: 1px solid var(--lijn);
  border-radius: 40px 2px 40px 2px;
  padding: 40px 44px;
  font-size: 16.5px;
  line-height: 1.7;
  color: #44525f;
}
.hsb-ct__blok h2 {
  margin: 0 0 16px;
  font-size: 26px;
  line-height: 1.2;
  color: var(--blauw);
}
.hsb-ct__blok h3 {
  margin: 26px 0 8px;
  font-size: 20px;
  color: var(--blauw);
}
.hsb-ct__blok h2:first-child,
.hsb-ct__blok h3:first-child { margin-top: 0; }
.hsb-ct__blok p { margin: 0 0 14px; }
.hsb-ct__blok p:last-child { margin-bottom: 0; }
.hsb-ct__blok ul { margin: 0 0 16px; padding-left: 0; list-style: none; }
.hsb-ct__blok li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 9px;
}
/* Het bolletje als vinkje in de huisstijlkleur, in plaats van een standaard
   opsommingsteken. */
.hsb-ct__blok li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .52em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--oranje);
}
.hsb-ct__blok a { color: var(--blauw); font-weight: 600; }


/* ===========================================================================
   ZELF SPREKER OF DAGVOORZITTER?
   =========================================================================== */

.hsb-ct__aanmelden { padding: 56px 0 80px; }

.hsb-ct__meld {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 32px;
  background: var(--vlak);
  border-radius: 40px 2px 40px 2px;
  padding: 40px 44px;
}
.hsb-ct__meldico {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #fff;
  color: var(--oranje);
}

/* Met foto erbij: beeld links, tekst rechts. De foto krijgt dezelfde
   asymmetrische hoeken als de kaarten, en een vaste verhouding zodat het
   blok niet van hoogte verspringt als er ooit een ander beeld in komt. */
.hsb-ct__meld--foto { gap: 40px; padding: 36px 40px; }
.hsb-ct__meldbeeld {
  flex: 0 0 300px;
  max-width: 100%;
  border-radius: 24px 2px 24px 2px;
  overflow: hidden;
}
.hsb-ct__meldbeeld img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
}
.hsb-ct__meldtekst {
  flex: 999 1 420px;
  min-width: 0;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--grijs);
}
.hsb-ct__meldtekst h2 {
  margin: 0 0 8px;
  font-size: 26px;
  line-height: 1.2;
  color: var(--blauw);
}
.hsb-ct__meldtekst p { margin: 0 0 12px; }
.hsb-ct__meldtekst p:last-child { margin-bottom: 0; }

/* De knop "Meld je nu aan" staat in de CMS-tekst, met de bootstrap-klassen
   die het CMS eraan hangt. Die krijgt hier de huisvorm, zodat je in het CMS
   niets hoeft te veranderen. !important omdat bootstrap zijn eigen
   .btn-regels met !important meelevert bij de afronding. */
.hsb-ct__meldtekst .btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  margin-top: 8px;
  padding: 0 30px;
  border: 0;
  border-radius: 12px !important;
  background: var(--blauw);
  color: #fff;
  font-size: 16.5px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color .2s;
}
.hsb-ct__meldtekst .btn:hover { background: var(--blauw-diep); color: #fff; }


/* ===========================================================================
   SMALLERE SCHERMEN
   =========================================================================== */

@media (max-width: 991px) {
  .hsb-ct__rij { gap: 32px; padding-top: 40px; }
  .hsb-ct__kop { font-size: 26px; }
  .hsb-ct__kaartform { padding: 26px 24px 28px; }
  .hsb-ct__blok,
  .hsb-ct__meld { padding: 32px 28px; }
  .hsb-ct__meld--foto { gap: 28px; padding: 28px; }
  .hsb-ct__meldbeeld { flex: 1 1 260px; }
}

@media (max-width: 575px) {
  .hsb-ct__kaartform,
  .hsb-ct__blok,
  .hsb-ct__meld { border-radius: 28px 2px 28px 2px; }
  .hsb-ct__kaart { border-radius: 20px 2px 20px 2px; padding: 22px 20px 16px; }
  .hsb-ct__kaartform { padding: 22px 20px 24px; }
  .hsb-ct__blok, .hsb-ct__meld { padding: 26px 20px; }
  .hsb-ct__verstuur { width: 100%; justify-content: center; }
  .hsb-ct__kop { font-size: 23px; }
  .hsb-ct__blok h2, .hsb-ct__meldtekst h2 { font-size: 22px; }
}