/*
 * contactPanel — de contactgegevens met de kaart, en het aanvraagformulier in
 * een witte kaart ernaast.
 *
 * Maten 1-op-1 van samdesign.nl (R9), gemeten op 1440 / 1024 / 767 / 390px.
 */

.contactPanel {
  margin: 50px 0 100px;
}

/*
 * Twee kolommen met hun eigen maximum en de ruimte ertussen verdeeld, precies
 * zoals de bestaande site het doet: niet 50/50, maar 585 en 640 met wat
 * overblijft ertussen.
 */
.contactPanelInner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  column-gap: 20px;
  row-gap: 50px;
}

.contactPanelAside {
  width: 100%;
  max-width: 585px;
}

.contactPanelCard {
  width: 100%;
  max-width: 640px;

  /*
   * De kaart wordt 314px omhoog getrokken en ligt daarmee over de donkerblauwe
   * band heen. De sectie houdt de hoogte van de linkerkolom, want de kaart
   * steekt er alleen bovenuit.
   */
  margin-top: -314px;
  padding: 51px 53px 41px;
  background: var(--colorWhite);
  box-shadow: 0 3px 40px rgba(6, 19, 39, 0.08);
}

/* ==================================================================
   De contactgegevens
   ================================================================== */

.contactPanelDetails {
  display: flex;
  flex-wrap: wrap;
  column-gap: 80px;
  row-gap: 40px;
  margin: 0 0 33px;
}

/*
 * Het item springt 40px in: de ruimte waar het icoon in ligt (22px breed met
 * 18px erna). Het icoon zelf hangt aan de term en niet aan dit item — zie
 * .contactPanelIcon.
 */
.contactPanelItem {
  padding-left: 40px;
}

/*
 * Het streepje tussen de twee gegevens: een rand op het tweede item met 80px
 * lucht aan weerszijden. De 120px is die 80 plus de 40 waar het icoon staat.
 *
 * Die 80 kan niet als marge: een marge komt vóór de rand, en dan schuift het
 * streepje 80px op in plaats van de inhoud erachter. Het icoon hangt daarom aan
 * de tekst en niet aan deze padding — zie .contactPanelIcon.
 */
.contactPanelItem + .contactPanelItem {
  border-left: 1px solid rgba(169, 177, 189, 0.5);
  padding-left: 120px;
}

/* Het ankerpunt van het icoon; zie .contactPanelIcon. */
.contactPanelTerm {
  position: relative;
  font-size: 16px;
  font-weight: 400;
  line-height: 19px;
  letter-spacing: -0.04em;
}

/*
 * De term is een link naar hetzelfde adres als de waarde eronder, maar ziet er
 * uit als de tekst die er stond: geen kleur en geen streep. Onder de muis krijgt
 * hij de streep, zodat het zichtbaar een link is.
 */
.contactPanelTermLink {
  color: inherit;
  text-decoration: none;
}

.contactPanelTermLink:hover {
  text-decoration: underline;
}

/*
 * Het icoon staat 40px links van de tekst: 22px breed met 18px erna, zoals op
 * samdesign.nl (`column-gap: 18px` in een flexrij).
 *
 * Het hangt aan de term en niet aan het item, want de linkerpadding van het
 * item is niet overal 40px: het tweede item springt 120px in om ruimte te maken
 * voor het streepje. Met `left: 0` op het item stond de telefoon daardoor tegen
 * dat streepje aan en 98px van "Bel ons" — de scheve uitlijning op /contact/ en
 * /offerte-aanvraag/. Gemeten vanaf de tekst blijft die afstand per definitie
 * gelijk, ook als de padding van een item ooit weer verandert.
 *
 * De tekening staat in `inc/icons.php` met `fill="#fff"`, want daar is hij
 * gemaakt voor het donkere uitschuifpaneel in de header. Op dit witte vlak was
 * hij daarmee wit op wit: onzichtbaar op /contact/ én /offerte-aanvraag/.
 *
 * `currentColor` in plaats van een vaste waarde, zodat dezelfde tekening op een
 * donkere en op een lichte achtergrond klopt. Het komt hier op #092041 uit — de
 * kleur van de term erboven — en dat is precies wat samdesign.nl daar zet
 * (`fill="#092041"` in `.contactGegevens`, tegen wit in
 * `.menuContactGegevens`). CSS wint van het `fill`-attribuut op de path, dus
 * hoeft de icoonbron niet aangeraakt te worden.
 */
.contactPanelIcon {
  position: absolute;
  top: 5px;
  left: -40px;
  flex: none;
  width: 22px;
  height: auto;
}

.contactPanelIcon path {
  fill: currentColor;
}

.contactPanelValue {
  margin: 0;
  font-size: 16px;
  line-height: 25px;
}

.contactPanelValue a {
  color: var(--colorNavy);
  opacity: 0.35;
  text-decoration: none;
  transition: opacity 0.3s;
}

.contactPanelValue a:hover {
  opacity: 1;
}

/* ==================================================================
   De kaart van Google
   ------------------------------------------------------------------
   Het enige verzoek naar een derde partij op deze pagina's; waarom hij er
   ondanks §9 en R6 toch staat: docs/beslissingen.md. De vaste hoogte houdt
   CLS op nul.
   ================================================================== */

.contactPanelMap {
  width: 100%;
  height: 330px;
}

/* ==================================================================
   Het formulier
   ------------------------------------------------------------------
   De velden staan in een flexrij met 15px lucht aan elke kant; de rij
   compenseert die lucht met een negatieve marge, zodat de buitenste velden
   op de rooilijn van de kaart staan.
   ================================================================== */

.requestFormFields {
  display: flex;
  flex-wrap: wrap;
  margin-inline: -15px;
  margin-bottom: -20px;
}

/*
 * De lettermaat op het veld zelf is die van de lopende tekst en niet die van de
 * body. Dat is geen sier: label en aanvulling zetten hun eigen maat op een span
 * erbinnen, en dan bepaalt de maat van het veld eromheen mee hoe hoog de regel
 * wordt. Zonder deze regel is de aanvulling twee pixels te laag en schuift alles
 * eronder mee.
 */
.requestFormField {
  width: 100%;
  margin-bottom: 20px;
  padding-inline: 15px;
  font-size: var(--textSize);
  line-height: var(--textLine);
}

.requestFormFieldHalf {
  width: 50%;
}

.requestFormLabel {
  display: block;
  padding-bottom: 14.5px;
  font-size: 16px;
  line-height: 19px;
}

/*
 * Puur rood, niet de roze van de site: zo staat het op samdesign.nl, waar de
 * regel letterlijk `color: red` is. De 3,2px is de 0,2em die daar staat.
 */
.requestFormRequired {
  padding-left: 3.2px;
  color: #ff0000;
}

.requestFormInput {
  width: 100%;
  padding: 20px 29px;
  border: 0;
  border-radius: 0;
  background: #f3f3f5;
  color: var(--colorNavy);
  font-family: inherit;
  font-size: 14px;
  line-height: 30px;
}

.requestFormInput::placeholder {
  color: inherit;
  opacity: 0.6;
}

.requestFormTextarea {
  display: block;
}

/* ------------------------------------------------------------------
   De aankruisvakjes
   ------------------------------------------------------------------
   De legend houdt de lettermaat van de kaart en de span erin die van het
   ontwerp: zo valt de regelhoogte precies zo uit als op samdesign.nl, waar
   de tekst ook in een span binnen een blok van 17px staat.
   ------------------------------------------------------------------ */

.requestFormGroup {
  margin-bottom: 10px;
}

.requestFormLegend {
  display: block;
}

.requestFormLegend span {
  font-size: 15px;
  line-height: 39px;
}

.requestFormOptions {
  display: flex;
  flex-wrap: wrap;
}

.requestFormOption {
  display: flex;
  align-items: center;
  padding-right: 15px;
}

.requestFormOption label {
  font-size: 15px;
  line-height: 20px;
}

/*
 * Het vakje ís het aankruisvakje: appearance: none haalt de tekening van de
 * browser weg en zet die van het ontwerp ervoor. Op samdesign.nl staat de input
 * op display:none met een plaatje naast zich — dan is hij niet met het
 * toetsenbord te bereiken (§6). Zie docs/beslissingen.md.
 *
 * 19 bij 20: het vierkantje van samdesign.nl is 19 bij 19 en wordt daar door een
 * hoogte van 20px een pixel uitgerekt.
 */
.requestFormCheckbox {
  flex: none;
  width: 19px;
  height: 20px;
  margin: 0 9px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  appearance: none;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 19 19'%3E%3Cg fill='%23fff' stroke='%231a223e' stroke-width='0.5'%3E%3Crect width='19' height='19' stroke='none'/%3E%3Crect x='0.25' y='0.25' width='18.5' height='18.5' fill='none'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 19px 20px no-repeat;
}

.requestFormCheckbox:checked {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 19 19'%3E%3Cg fill='%23fff' stroke='%231a223e' stroke-width='0.5'%3E%3Crect width='19' height='19' stroke='none'/%3E%3Crect x='0.25' y='0.25' width='18.5' height='18.5' fill='none'/%3E%3C/g%3E%3Cg transform='translate(3 3)' fill='%231a223e' stroke='%231a223e' stroke-width='0.5'%3E%3Crect width='13' height='13' stroke='none'/%3E%3Crect x='0.25' y='0.25' width='12.5' height='12.5' fill='none'/%3E%3C/g%3E%3C/svg%3E");
}

.requestFormHint {
  margin: 0;
}

.requestFormHint span {
  font-size: 10px;
  line-height: 39px;
}

/* ------------------------------------------------------------------
   De knop en de meldingen
   ------------------------------------------------------------------ */

/*
 * flex en niet blok: een inline-flex knop zou in een regelbox staan en die
 * onder de knop nog een stukje regelhoogte meegeven.
 */
.requestFormActions {
  display: flex;
}

.requestFormSubmit {
  padding: 17.5px 42px;
  border-radius: 0;
  line-height: 20px;
}

/* Op deze knop staat het pijltje 10px van de tekst in plaats van 5px. */
.requestFormSubmit .buttonIcon {
  margin-left: 10px;
}

.requestFormError {
  margin: 6px 0 0;
  color: var(--colorPink);
  font-size: 14px;
  line-height: 20px;
}

.requestFormBlocked,
.requestFormDone {
  margin: 0 0 20px;
  font-size: var(--textSize);
  font-weight: 500;
  line-height: var(--textLine);
}

.requestFormBlocked {
  color: var(--colorPink);
}

.requestFormDone {
  margin: 0;
}

/*
 * Het honeypot-veld staat buiten beeld en niet op display:none: bots slaan
 * verborgen velden soms juist over.
 */
.requestFormTrap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ==================================================================
   Tablet — de kolommen wisselen van plek
   ================================================================== */

@media (max-width: 1024px) {
  .contactPanelInner {
    max-width: 840px;
  }

  /*
   * Het formulier eerst en de gegevens eronder. Met order en niet met een
   * andere volgorde in de markup: in de leesrichting van het document horen de
   * gegevens vóór het formulier (§6).
   */
  .contactPanelAside {
    order: 2;
    max-width: 100%;
  }

  .contactPanelCard {
    order: 1;
    max-width: 100%;
    margin-top: 0;
  }
}

/* ==================================================================
   Mobiel
   ================================================================== */

@media (max-width: 767px) {
  .contactPanel {
    margin: 30px 0 50px;
  }

  /* 440 = de 400px van samdesign.nl plus de 20px lucht aan weerszijden. */
  .contactPanelInner {
    justify-content: flex-start;
    max-width: 440px;
  }

  .contactPanelCard {
    padding: 20px;
  }

  /* Onder elkaar, en dan is er geen streepje tussen. */
  .contactPanelItem {
    width: 100%;
  }

  .contactPanelItem + .contactPanelItem {
    border-left: 0;
    padding-left: 40px;
  }

  .requestFormFieldHalf {
    width: 100%;
  }

  .requestFormOptions {
    flex-direction: column;
  }

  .requestFormOption {
    margin-bottom: 3px;
    padding-right: 0;
    padding-bottom: 15px;
  }

  .requestFormLegend span {
    line-height: 28px;
  }
}