/**
 * Login-Seite (wp-login.php) im SV-Layout.
 *
 * Wirkt nur auf der Login-/Lost-Password-/Register-Seite, weil das
 * CSS ausschliesslich ueber den Hook `login_enqueue_scripts` geladen
 * wird (siehe loader.php). Das WordPress-Default-Login-CSS bleibt
 * geladen; wir ueberschreiben gezielt mit hoeherer Specificity
 * (`body.login …`), sodass der !important-Hammer nicht noetig ist.
 *
 * Farbpalette und Schriften kommen aus dem Theme:
 *   - Primaerfarbe (SV-Akademie-Gruen): #5a9e33
 *   - Akzent (Cyan-Blau aus Suchfeld):  #37AAE1
 *   - Schrift Body:                      'Roboto'
 *   - Schrift Buttons/Headings:          'Roboto Slab' Bold
 *
 * @package welpentheme
 * @author  Jörn Gorres
 * @version 1.0.0
 */

/* ------------------------------------------------------------------
 *  Seite / Hintergrund
 * ------------------------------------------------------------------ */

body.login {
    background:  #f5f5f5;
    font-family: 'Roboto', sans-serif;
    color:       #555;
}

/* ------------------------------------------------------------------
 *  Logo (ersetzt das WordPress-Logo durch das SV-Logo)
 * ------------------------------------------------------------------ */

body.login #login h1 a,
body.login .login h1 a {
    background-image:    url( '../layoutelemente/logo-mit-claim.svg' );
    background-size:     contain;
    background-position: center;
    background-repeat:   no-repeat;
    width:               320px;
    height:              140px;
    margin:              0 auto 12px;
    padding-bottom:      12px;
    /* Text "Powered by WordPress" akustisch erhalten, optisch ausblenden */
    text-indent:         -9999px;
    outline:             none;
    overflow:            hidden;
}

/* ------------------------------------------------------------------
 *  Form-Container
 * ------------------------------------------------------------------ */

body.login #login form,
body.login .login form {
    background:    #fff;
    border:        1px solid #c3c4c7;
    border-radius: 4px;
    box-shadow:    0 4px 12px rgba( 0, 0, 0, 0.06 );
    padding:       26px 24px;
    margin-top:    20px;
}

/* ------------------------------------------------------------------
 *  Eingabefelder – analog zum SV-Kontaktformular
 * ------------------------------------------------------------------ */

body.login #login form .input,
body.login #login form input[type="text"],
body.login #login form input[type="password"],
body.login #login form input[type="email"] {
    background:    #fafafa;
    border:        1px solid #898989;
    border-radius: 3px;
    padding:       0.65rem 0.85rem;
    font-size:     16px;
    font-family:   inherit;
    color:         #1d2327;
    width:         100%;
    box-sizing:    border-box;
    line-height:   1.4;
    transition:    border-color 0.2s ease, box-shadow 0.2s ease;
}

body.login #login form .input:focus,
body.login #login form input[type="text"]:focus,
body.login #login form input[type="password"]:focus,
body.login #login form input[type="email"]:focus {
    outline:      none;
    border-color: #37AAE1;
    box-shadow:   -3px  0 5px -2px rgba( 55, 170, 225, 0.4 ),
                   3px  0 5px -2px rgba( 55, 170, 225, 0.4 ),
                   0   -3px 5px -2px rgba( 55, 170, 225, 0.4 ),
                   0    3px 5px -2px rgba( 55, 170, 225, 0.4 );
}

/* Labels */
body.login #login form label {
    color:     #1d2327;
    font-size: 14px;
}

/* "Angemeldet bleiben"-Reihe */
body.login #login form .forgetmenot {
    margin: 0 0 14px;
}

/* ------------------------------------------------------------------
 *  Submit-Button – SV-Gruen, Roboto Slab Bold
 * ------------------------------------------------------------------ */

body.login #login form .button-primary,
body.login #login #wp-submit {
    background:     #5a9e33;
    border:         1px solid transparent;
    color:          #fff;
    border-radius:  4px;
    padding:        0.85rem 1.5rem;
    height:         auto;
    /* Volle Form-Breite – WP-Default fuer den Login-Submit. */
    width:          100%;
    box-sizing:     border-box;
    display:        block;
    font-family:    'Roboto Slab', serif;
    font-weight:    700;
    font-size:      20px;
    letter-spacing: 0.03em;
    text-shadow:    none;
    box-shadow:     none;
    cursor:         pointer;
    transition:     background 0.2s ease;
}

body.login #login form .button-primary:hover,
body.login #login form .button-primary:focus,
body.login #login #wp-submit:hover,
body.login #login #wp-submit:focus {
    background: #4a8528;
    color:      #fff;
    outline:    none;
}

/* ------------------------------------------------------------------
 *  Links unter dem Formular ("Passwort vergessen?", "Zur Site")
 * ------------------------------------------------------------------ */

body.login #login #nav,
body.login #login #backtoblog {
    text-align: center;
    margin:     16px auto;
    padding:    0 24px;
}

body.login #login #nav a,
body.login #login #backtoblog a {
    color:           #555;
    text-decoration: none;
    font-size:       14px;
    transition:      color 0.2s ease;
}

body.login #login #nav a:hover,
body.login #login #nav a:focus,
body.login #login #backtoblog a:hover,
body.login #login #backtoblog a:focus {
    color:           #5a9e33;
    text-decoration: underline;
}

/* ------------------------------------------------------------------
 *  Hinweise und Fehlermeldungen
 * ------------------------------------------------------------------ */

body.login #login .message,
body.login #login .notice {
    border-left-color: #5a9e33;
}

body.login #login #login_error {
    border-left-color: #d63638;
}

/* ------------------------------------------------------------------
 *  Mobile
 * ------------------------------------------------------------------ */

@media ( max-width: 480px ) {
    body.login #login h1 a,
    body.login .login h1 a {
        width:  260px;
        height: 110px;
    }
    body.login #login form,
    body.login .login form {
        margin: 20px 16px 0;
        padding: 22px 18px;
    }
}