/* Dependable - formulier 5 (ondernemers) - smalle-kolom layout.
   Plakken in: Bit Form -> formulier 5 -> Settings -> Custom CSS/JS -> CSS tab.

   WAAROM DIT BESTAAT
   Formulier 5 is een duplicaat van 4, inclusief het probleem. De gegenereerde
   stylesheet zet in @media (max-width:960px) alle 28 velden op volle breedte.
   De drawer geeft het formulier ~470px, dus zonder dit staat alles gestapeld.

   Stap 1 is geometrisch identiek aan formulier 4, dus die kolommen zijn
   overgenomen uit de bewezen versie. Stap 2 heeft eigen rijen, want er zitten
   twee extra velden in (b5-35 en b5-37).

   ALS JE OOIT HET TELEFOON-BREEKPUNT IN BIT FORM ZELF TEKENT, GOOI DIT WEG.
   Twee bronnen voor één layout is hoe een formulier stilletjes stukgaat.

   GEEN PIXELMATEN. Het grid is 60 kolommen van 1fr, dus elk getal is een
   percentage. Hoogtes staan er niet in: de container is grid-auto-rows: auto.

   ELK VELD VAN EEN STAP MOET HIERIN STAAN. Velden die je weglaat vallen terug
   op Bit Form's eigen rijnummers, en twee stelsels in één grid laten velden
   over elkaar heen vallen. Voeg je een veld toe, voeg het hier ook toe. */

@media (min-width: 450px) and (max-width: 960px) {

  /* Stap 1 */
  .b5-bit-form .b5-2  { grid-area: 1/1/88/61; }      /* Voornaam */
  .b5-bit-form .b5-13 { grid-area: 88/1/172/20; }    /* Tussenvoegsel */
  .b5-bit-form .b5-6  { grid-area: 88/21/175/61; }   /* Achternaam */
  .b5-bit-form .b5-14 { grid-area: 175/1/259/37; }   /* Geboortedatum */
  .b5-bit-form .b5-15 { grid-area: 175/38/247/61; }  /* Aanhef */
  .b5-bit-form .b5-17 { grid-area: 259/2/288/21; }   /* Adresgegevens */
  .b5-bit-form .b5-16 { grid-area: 259/21/290/61; }  /* streep */
  .b5-bit-form .b5-20 { grid-area: 290/1/374/61; }   /* Straatnaam */
  .b5-bit-form .b5-21 { grid-area: 374/1/458/18; }   /* Huisnummer */
  .b5-bit-form .b5-22 { grid-area: 374/19/458/61; }  /* Postcode */
  .b5-bit-form .b5-18 { grid-area: 458/2/487/32; }   /* Contact & Legitimatie */
  .b5-bit-form .b5-19 { grid-area: 458/27/489/61; }  /* streep */
  .b5-bit-form .b5-5  { grid-area: 489/1/576/31; }   /* Email */
  .b5-bit-form .b5-9  { grid-area: 489/32/576/61; }  /* Telefoonnummer */
  .b5-bit-form .b5-23 { grid-area: 576/1/660/61; }   /* Kopie identiteitsbewijs */
  .b5-bit-form .b5-11 { grid-area: 660/1/705/61; }
  .b5-bit-form .b5-12 { grid-area: 705/1/730/61; }

  /* Stap 2 - eigen rijen, twee velden meer dan formulier 4 */
  .b5-bit-form .b5-35 { grid-area: 1/1/85/61; }      /* Abonnement */
  .b5-bit-form .b5-24 { grid-area: 85/1/169/61; }    /* Ingangsdatum */
  .b5-bit-form .b5-25 { grid-area: 169/1/274/61; }
  .b5-bit-form .b5-26 { grid-area: 274/2/303/32; }   /* kop */
  .b5-bit-form .b5-27 { grid-area: 274/33/305/61; }  /* streep */
  .b5-bit-form .b5-28 { grid-area: 305/1/410/61; }   /* Betaalmethode */
  .b5-bit-form .b5-37 { grid-area: 410/1/515/61; }   /* Betaalmethode (2e - zie notitie) */
  .b5-bit-form .b5-29 { grid-area: 515/1/599/61; }   /* IBAN */
  .b5-bit-form .b5-30 { grid-area: 599/1/683/61; }   /* Ten name van */

  /* Stap 3 */
  .b5-bit-form .b5-34 { grid-area: 1/1/75/61; }
  .b5-bit-form .b5-32 { grid-area: 75/1/138/61; }
  .b5-bit-form .b5-33 { grid-area: 138/1/183/61; }
  .b5-bit-form .b5-1  { grid-area: 183/1/243/61; }
}


/* TELEFOON - dezelfde paren, opnieuw uitgesneden voor een formulier van ~311px.
   Geboortedatum en Aanhef krijgen elk een hele rij: het datumveld heeft ~160px
   nodig en Aanhef ~158px, samen 318px in een rij van 305px. Dat past niet, bij
   geen enkele kolomverdeling. */

@media (max-width: 449px) {

  /* Stap 1 */
  .b5-bit-form .b5-2  { grid-area: 1/1/88/61; }
  .b5-bit-form .b5-13 { grid-area: 88/1/172/25; }
  .b5-bit-form .b5-6  { grid-area: 88/26/175/61; }
  .b5-bit-form .b5-14 { grid-area: 175/1/259/61; }   /* hele rij */
  .b5-bit-form .b5-15 { grid-area: 259/1/331/61; }   /* hele rij */
  .b5-bit-form .b5-17 { grid-area: 331/2/360/38; }
  .b5-bit-form .b5-16 { grid-area: 331/38/362/61; }
  .b5-bit-form .b5-20 { grid-area: 362/1/446/61; }
  .b5-bit-form .b5-21 { grid-area: 446/1/530/24; }
  .b5-bit-form .b5-22 { grid-area: 446/25/530/61; }
  .b5-bit-form .b5-18 { grid-area: 530/2/559/47; }
  .b5-bit-form .b5-19 { grid-area: 530/47/561/61; }
  .b5-bit-form .b5-5  { grid-area: 561/1/648/31; }
  .b5-bit-form .b5-9  { grid-area: 561/32/648/61; }
  .b5-bit-form .b5-23 { grid-area: 648/1/732/61; }
  .b5-bit-form .b5-11 { grid-area: 732/1/777/61; }
  .b5-bit-form .b5-12 { grid-area: 777/1/802/61; }

  /* Stap 2 */
  .b5-bit-form .b5-35 { grid-area: 1/1/85/61; }
  .b5-bit-form .b5-24 { grid-area: 85/1/169/61; }
  .b5-bit-form .b5-25 { grid-area: 169/1/274/61; }
  .b5-bit-form .b5-26 { grid-area: 274/2/303/38; }
  .b5-bit-form .b5-27 { grid-area: 274/38/305/61; }
  .b5-bit-form .b5-28 { grid-area: 305/1/410/61; }
  .b5-bit-form .b5-37 { grid-area: 410/1/515/61; }
  .b5-bit-form .b5-29 { grid-area: 515/1/599/61; }
  .b5-bit-form .b5-30 { grid-area: 599/1/683/61; }

  /* Stap 3 */
  .b5-bit-form .b5-34 { grid-area: 1/1/75/61; }
  .b5-bit-form .b5-32 { grid-area: 75/1/138/61; }
  .b5-bit-form .b5-33 { grid-area: 138/1/183/61; }
  .b5-bit-form .b5-1  { grid-area: 183/1/243/61; }
}


/* SECTIEPAUZES
   Bit Form laat nul ruimte tussen veldrijen, dus een sectiekop plakt tegen de
   rij erboven. Kop en streep krijgen allebei de marge, anders staan ze niet
   meer op gelijke hoogte. */

@media (max-width: 960px) {
  .b5-bit-form .b5-17,
  .b5-bit-form .b5-16,
  .b5-bit-form .b5-18,
  .b5-bit-form .b5-19,
  .b5-bit-form .b5-26,
  .b5-bit-form .b5-27 {
    margin-block-start: 2rem;
  }
}


/* STAPPENBALK OP TELEFOON - drie stappen op een rij houden.
   De balk is flex-wrap: wrap en elke stap claimt ~156px, dus stap 3 valt
   anders op een eigen regel en de balk wordt 154px hoog in plaats van 69px. */

@media (max-width: 449px) {
  .b5-bit-form ._frm-b5-stp-hdr-wrpr { flex-wrap: nowrap; }
  .b5-bit-form ._frm-b5-stp-hdr { flex: 1 1 0; min-width: 0; width: auto; }
  .b5-bit-form ._frm-b5-stp-hdr-lbl { font-size: 0.8rem; line-height: 1.25; }
}


/* GEBOORTEDATUM OP iOS
   iOS Safari tekent input[type=date] met zijn eigen bediening: grijze vulling,
   gecentreerde tekst, hoger vak. appearance:none haalt die laag eraf. */

.b5-bit-form input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  text-align: left;
  min-height: 0;
}

.b5-bit-form input[type="date"]::-webkit-date-and-time-value {
  text-align: left;
  margin: 0;
}