/*
Datei:        login.css  (Child-Theme Twenty Twenty)
Zweck:        Anpassungen der Anmeldeseite /bc-login (wp-login.php)
Eingebunden:  functions.php, Abschnitt 01, per login_enqueue_scripts
Version:      1.0

Hintergrund
-----------
style.css wird auf wp-login.php NICHT geladen, deshalb diese eigene
Datei. Das Custom-CSS-Feld des Colorlib Login Customizer wird hier
bewusst nicht benutzt: ein Klick auf eine Vorlage unter Templates
setzt es zurueck (loadTemplate('default') in clc-customizer.js),
geschuetzt ist dort nur das Logo.

Grundgestaltung (Bild, Farben, Beschriftungen, Spaltenbreiten) bleibt
im Customizer unter Colorlib Login Customizer. Hier steht nur, was
sich dort nicht einstellen laesst.

INHALT / GLIEDERUNG
-------------------
01) Mobil: Links auf die weiße Karte holen (unter 577px)
*/

/* =============================================================
   01) MOBIL: LINKS AUF DIE WEISSE KARTE HOLEN (unter 577px)
   -------------------------------------------------------------
   Unter 577px schaltet das Plugin die Zwei-Spalten-Ansicht ab und
   legt die Bildspalte (.ml-extra-div) als position:absolute ueber
   den ganzen Bildschirm — siehe clc-login.css, Zeile 316.
   Weiße Karte war bisher nur das Formular selbst, deshalb standen
   "Passwort vergessen?" (#nav), "Zurueck zu ..." (#backtoblog) und
   "Datenschutzerklaerung" (.privacy-policy-page-link) direkt auf
   dem Foto und waren kaum zu lesen.

   Loesung: #login wird zur Karte, das Formular gibt Rahmen, feste
   Hoehe und eigenen Hintergrund ab. Logo, Felder und alle drei
   Links sitzen dann auf einer gemeinsamen weißen Flaeche.

   Zwei Stolpersteine:
   - Der Praefix body.login ist noetig, nicht nur .login. Diese Datei
     wird vor clc-login.css geladen, und dort steht
     .ml-container #login { padding:0; width:100%; max-width:320px }.
     Bei gleicher Spezifitaet gewinnt die spaeter geladene Regel, das
     zusaetzliche body verschiebt das Gewicht auf unsere Seite.
     Anders als eine Abhaengigkeit beim Einbinden haelt das auch,
     wenn das Plugin seinen Handle-Namen aendert.
   - min-height:0 haengt die im Customizer gesetzte feste
     Formularhoehe (297px) aus, sonst bleibt unter "ANMELDEN" eine
     leere Flaeche stehen.

   Ab 577px aendert sich nichts: dort hat die Formularspalte ihren
   eigenen grauen Hintergrund, die Links sind lesbar.
   ============================================================= */
@media only screen and (max-width: 576px) {

  body.login #login {
    box-sizing: border-box;
    width: 92%;
    max-width: 340px;
    margin: 0 auto;
    padding: 22px 18px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.13);
  }

  body.login #login form {
    width: auto;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
  }

  body.login #login h1 a { margin-bottom: 16px; }

  body.login #nav,
  body.login #backtoblog { padding: 0; margin: 12px 0 0; }

  body.login .privacy-policy-page-link { margin: 18px 0 0; }
}