/**
 * @file
 * Styling voor het inlogformulier in blok 2.
 */

/* "Wachtwoord vergeten?" midden tussen veld en knop (Richard 12-10-2026).
   Was 13px boven en 3px onder; zonder bovenmarge en met .25rem onder is het
   7px aan beide kanten (gemeten op 1280, 800 en 390). */
.ozk-account-login__na {
  margin: 0 0 0.25rem;
  font-size: 0.925rem;
}

/* Grijs in plaats van paars: een naregel, die niet met de groene knop moet
   concurreren. #5a5a59 is de uitlegtekstkleur van de inlogkaarten en haalt
   ruim 4,5:1 op wit. Twee klassen extra tegen de paarse linkregel van
   .ozk-account-dashboard in account-dashboard.css (ozk_intranet). */
.ozk-account-dashboard.ozk-account-login .ozk-account-login__na a.ozk-wachtwoord-vergeten {
  color: #5a5a59;
}
.ozk-account-dashboard.ozk-account-login .ozk-account-login__na a.ozk-wachtwoord-vergeten:hover,
.ozk-account-dashboard.ozk-account-login .ozk-account-login__na a.ozk-wachtwoord-vergeten:focus {
  color: #222;
}

/* Zorg dat op alle schermbreedtes (ook mobiel < 576px) het formulier strekt
   en de actieknoppen onderaan blijven. */
.ozk-account-card,
.ozk-account-card > .ozk-paneel,
.ozk-account-login .ozk-paneel {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.ozk-account-card .ozk-paneel__body,
.ozk-account-login .ozk-paneel > .ozk-paneel__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.ozk-account-card .ozk-paneel__body > form,
.ozk-account-login .ozk-paneel__body > form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  margin-bottom: 0;
}

.ozk-account-card .ozk-paneel__body .form-actions,
.ozk-account-login .ozk-paneel__body .form-actions {
  margin-top: auto !important;
}

/* Kortstondige markering van de inloglink-kaart nadat iemand in de foutmelding
   op "Vraag dan een eenmalige inloglink aan" heeft geklikt (ozk-login.js).
   Op desktop staat die kaart al in beeld, dus zonder dit signaal lijkt de klik
   niets te doen. Paars is de vastgestelde aandacht-/focuskleur (ozk-knoppen.css,
   besluit 29-09-2026); prefers-reduced-motion krijgt dezelfde rand zonder
   overgang. */
.ozk-inloglink--aangewezen > .ozk-account-card {
  box-shadow: 0 0 0 3px var(--ozk-paars, #663399);
  transition: box-shadow .25s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .ozk-inloglink--aangewezen > .ozk-account-card {
    transition: none;
  }
}