/* =========================================================
   TSCB UTILITY-SYSTEEM — formulieren
   Onderdeel van het tscb-systeem, zie basis/kleur.css voor
   de kleur-bridge en het versie-/hergebruikbeleid.
   Un-layered laten, dan wint dit van de Bricks-defaults.
   ---------------------------------------------------------
   WERKVERDELING (om zoekwerk te besparen):
   - het randverloop rondom staat in onderdelen/gradient.css,
     naast het header-verloop waar het van is afgeleid
   - de submit-knop staat in onderdelen/button.css, die loopt
     mee met .brxe-button — hier dus bewust niet aanraken
   - dit bestand doet alleen de vorm van het paneel
   ========================================================= */

/* ---------------------------------------------------------
   1. HET FORMULIER-PANEEL
   De achtergrond loopt exact gelijk met de contentkolom; de
   padding duwt de velden naar binnen. Dat kan zonder negatieve
   marges omdat Bricks box-sizing: border-box zet: de padding
   gaat naar binnen en het formulier blijft even breed als de
   tekst erboven.

   LET OP bij de radius: --tscb_btn_radius wordt in button.css
   BINNEN .brxe-button gedeclareerd, niet op :root. Die scope
   erft hier niet naartoe, dus zonder de fallback valt de hele
   border-radius weg. Dit is inmiddels de tweede plek met die
   fallback (navigatie.css is de andere) — pas je de waarde in
   button.css aan, dan volgen deze twee niet mee. Eén regel
   lost dat op: die declaratie naar :root in basis/kleur.css.
   --------------------------------------------------------- */
.brxe-form {
  --tscb_form_pad: clamp(2rem, 5vw, 4.5rem);

  border-radius: var(--tscb_btn_radius, 2.6rem);
  padding: var(--tscb_form_pad);

  /* Zelfde schaduw als de headerbar (.tscb_shadow_medium_1).
     Wil je 'm platter: deze regel eruit. */
  box-shadow: var(--tscb_shadow_medium_1);
}

/* ---------------------------------------------------------
   2. INVOERVELDEN — kleine verdieping
   Zelfde idee als de knoppen in layout/navigatie.css, maar een
   stuk zachter: donkere inslag langs de bovenrand naar binnen,
   een lichte lip langs de binnen-onderrand, en een lichte
   streep net buiten de onderrand waar het paneel weer omhoog
   komt. Samen leest het veld als een ondiepe uitsparing.

   Bricks zet in z'n reset `box-shadow: none` op inputs; dat is
   een gelayerde regel, dus deze un-layered regel wint zonder
   !important. --tscb_form_veld_diepte is de enige knop: focus
   zet 'm hoger en alle drie de lagen schalen mee.

   Achtergrond en randkleur staan hier BEWUST niet: die komen
   van Bricks zelf (wit vlak, #dddedf rand). Dit bestand doet
   alleen de verdieping.
   --------------------------------------------------------- */
.brxe-form :is(input:not([type="submit"]), textarea, select) {
  --tscb_form_veld_diepte: 1;

  /* Geen lijn: de rand van het veld IS de schaduw hieronder. Bricks zet
     standaard een vlakke border-color, en die legt zich als grijze streep
     over het reliëf heen — dan zie je de verdieping niet meer. */
  border: 0;

  box-shadow:
    inset 0 calc(2px * var(--tscb_form_veld_diepte))
            calc(4px * var(--tscb_form_veld_diepte)) 0
      color-mix(in srgb, var(--tscb_shadow_color)
        calc(11% * var(--tscb_form_veld_diepte) * var(--tscb_shadow_strength) / 100), transparent),
    inset 0 calc(-1px * var(--tscb_form_veld_diepte)) 0 0
      color-mix(in srgb, var(--tscb_white) 55%, transparent),
    0 1px 0 0
      color-mix(in srgb, var(--tscb_white) 50%, transparent);

  transition: box-shadow var(--tscb_anim_hover) var(--tscb_anim_ease);
}

/* Actief veld zakt een fractie dieper weg */
.brxe-form :is(input:not([type="submit"]), textarea, select):focus {
  --tscb_form_veld_diepte: 1.6;
}

/* ---------------------------------------------------------
   3. FOCUS ZICHTBAAR MAKEN
   Bricks' reset zet `outline: none` op input, select, textarea
   én button. Daardoor had het formulier met toetsenbord GEEN
   enkele zichtbare focus — nagemeten: bij een echte Tab matcht
   :focus-visible wel, maar outline komt uit op `none 0px`.
   Dat is hier hersteld.

   Bewust outline en geen box-shadow: die property is hierboven
   al bezet door de verdieping, en een outline blijft ook staan
   in forced-colors/hoog-contrast, waar schaduwen wegvallen.
   --tscb_primary_2 haalt 3.68:1 op wit — ruim boven de 3:1 die
   voor niet-tekst-elementen geldt.
   --------------------------------------------------------- */
.brxe-form :is(input, textarea, select, button):focus-visible {
  outline: 1px solid #218ffd63;
  outline-offset: 1px;
}