/* =========================================================================
   Familienhilfe — Login (wp-login.php)
   Warmer, persönlicher Look (Kinder- & Jugendhilfe), Mobile-first.
   ========================================================================= */

:root {
    --fh-bg-start:  #ffffff;
    --fh-bg-end:    #ffffff;
    --fh-card:      #ffffff;
    --fh-text:      #2d2520;
    --fh-text-soft: #6b5e52;
    --fh-line:      #e7d9c6;
    --fh-line-soft: #f1e6d4;
    --fh-primary:   #e07a1f;
    --fh-primary-d: #c5651a;
    --fh-primary-x: #a85412;
    --fh-focus:     rgba(224, 122, 31, 0.20);
    --fh-error:     #c83a2d;
    --fh-error-bg:  #fdecea;
    --fh-success:   #2e8b4a;
    --fh-success-bg:#e6f4ea;
}

html, body.login {
    background: linear-gradient(135deg, var(--fh-bg-start) 0%, var(--fh-bg-end) 100%);
    background-attachment: fixed;
    min-height: 100vh;
}

body.login {
    color: var(--fh-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
                 "Helvetica", Arial, "Liberation Sans", sans-serif;
    font-size: 16px;
    line-height: 1.5;
    padding: 32px 16px 64px;
    box-sizing: border-box;
}

/* WordPress' eigene H1-Lupen-Logo entfernen — wir branden selbst */
body.login #login h1 {
    display: none;
}

#login {
    margin: 0 auto !important;
    padding-top: 0 !important;
    width: 100%;
    max-width: 440px;
    box-sizing: border-box;
}

/* ===== Markenbereich ===== */
.fh-login-brand {
    text-align: center;
    margin-bottom: 24px;
}
.fh-login-brand .fh-login-logo {
    display: block;
    margin: 0 auto 14px;
    width: 140px;
    height: 96px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
.fh-login-brand .fh-login-title {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 700;
    color: var(--fh-text);
    letter-spacing: -0.01em;
}
.fh-login-brand .fh-login-tagline {
    margin: 0;
    color: var(--fh-text-soft);
    font-size: 14px;
}

/* ===== Karte mit Form ===== */
body.login form {
    background: var(--fh-card);
    border: 1px solid var(--fh-line-soft);
    border-radius: 18px;
    box-shadow:
        0 1px 2px rgba(45, 37, 32, 0.05),
        0 12px 32px rgba(45, 37, 32, 0.10);
    padding: 28px 24px 24px;
    margin: 0 0 16px;
    overflow: visible;
}

body.login form p {
    margin: 0 0 14px;
}

body.login form label {
    display: block;
    color: var(--fh-text);
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 6px;
}

/* Input-Felder */
body.login form .input,
body.login input[type="text"],
body.login input[type="email"],
body.login input[type="password"] {
    width: 100%;
    box-sizing: border-box;
    padding: 13px 14px;
    font-size: 16px;          /* >= 16px verhindert iOS-Zoom beim Fokus */
    line-height: 1.4;
    background: #fff;
    border: 1.5px solid var(--fh-line);
    border-radius: 10px;
    color: var(--fh-text);
    box-shadow: none;
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 120ms, box-shadow 120ms;
}

body.login form .input:focus,
body.login input[type="text"]:focus,
body.login input[type="email"]:focus,
body.login input[type="password"]:focus {
    border-color: var(--fh-primary);
    box-shadow: 0 0 0 4px var(--fh-focus);
    outline: none;
}

body.login form .input::placeholder {
    color: #bca996;
}

/* Augen-Icon (Passwort-Show/Hide) — WP-Standard, anpassen */
body.login .wp-pwd { position: relative; }
body.login .wp-pwd button.wp-hide-pw {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--fh-text-soft);
}
body.login .wp-pwd button.wp-hide-pw:hover,
body.login .wp-pwd button.wp-hide-pw:focus {
    color: var(--fh-primary);
    background: transparent;
}

/* Remember-me */
body.login form .forgetmenot {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--fh-text-soft);
    font-size: 14px;
    margin: 0 0 6px;
    float: none;
    width: 100%;
}
body.login form .forgetmenot label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--fh-text-soft);
    font-weight: 500;
    cursor: pointer;
    margin: 0;
}
body.login form .forgetmenot input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--fh-primary);
}

/* Submit-Button */
body.login form .submit {
    float: none;
    text-align: center;
    margin-top: 8px;
}
body.login .wp-core-ui .button-primary,
body.login input#wp-submit,
body.login input[type="submit"].button-primary,
body.login input[type="submit"]#wp-submit {
    background: var(--fh-primary) !important;
    border: 1px solid var(--fh-primary-d) !important;
    color: #fff !important;
    width: 100%;
    min-height: 50px;
    padding: 13px 18px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 12px;
    text-transform: none;
    letter-spacing: 0.01em;
    text-shadow: none !important;
    box-shadow: 0 4px 14px rgba(224, 122, 31, 0.30) !important;
    cursor: pointer;
    float: none;
    line-height: 1.2;
    transition: background 120ms, box-shadow 120ms, transform 120ms;
}
body.login .wp-core-ui .button-primary:hover,
body.login .wp-core-ui .button-primary:focus,
body.login input#wp-submit:hover,
body.login input#wp-submit:focus,
body.login input[type="submit"].button-primary:hover,
body.login input[type="submit"].button-primary:focus {
    background: var(--fh-primary-d) !important;
    border-color: var(--fh-primary-x) !important;
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(224, 122, 31, 0.40) !important;
    transform: translateY(-1px);
}
body.login .wp-core-ui .button-primary:active,
body.login input#wp-submit:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(224, 122, 31, 0.30) !important;
}

/* Links unter dem Formular ("Passwort vergessen", "Zurück zu …") */
body.login #nav,
body.login #backtoblog {
    text-align: center;
    padding: 0;
    margin: 8px 0 0;
    font-size: 14px;
}
body.login #nav a,
body.login #backtoblog a {
    color: var(--fh-text-soft);
    text-decoration: none;
    padding: 8px 6px;
    display: inline-block;
}
body.login #nav a:hover,
body.login #nav a:focus,
body.login #backtoblog a:hover,
body.login #backtoblog a:focus {
    color: var(--fh-primary);
    text-decoration: underline;
}

/* Sprach-Switcher */
body.login .language-switcher {
    text-align: center;
    margin-top: 10px;
}

/* Notices / Fehler / Success */
body.login .notice,
body.login #login_error,
body.login .message,
body.login .login .success {
    border-radius: 12px !important;
    border: none !important;
    border-left: 4px solid var(--fh-error) !important;
    background: var(--fh-error-bg) !important;
    color: var(--fh-text);
    box-shadow: none !important;
    padding: 14px 16px !important;
    margin: 0 0 16px !important;
    font-size: 15px;
    line-height: 1.45;
}
body.login .message,
body.login .login .success {
    border-left-color: var(--fh-success) !important;
    background: var(--fh-success-bg) !important;
}
body.login #login_error a { color: var(--fh-error); font-weight: 600; }

/* Privacy-Hinweise klein und neutral */
body.login .privacy-policy-page-link {
    text-align: center;
    margin-top: 20px;
}
body.login .privacy-policy-page-link a {
    color: var(--fh-text-soft);
    font-size: 13px;
}

/* ===== Mobile-Anpassungen ===== */
@media (max-width: 480px) {
    body.login {
        padding: 16px 12px 48px;
    }
    body.login form {
        padding: 22px 18px 20px;
        border-radius: 14px;
    }
    .fh-login-brand .fh-login-logo {
        width: 110px;
        height: 76px;
    }
    .fh-login-brand .fh-login-title {
        font-size: 20px;
    }
}

/* iPad Portrait & co. */
@media (min-width: 481px) and (max-width: 900px) {
    #login {
        max-width: 460px;
    }
}

/* Vertikal sehr kleine Bildschirme (Landscape-Handy) */
@media (max-height: 580px) {
    body.login {
        padding-top: 12px;
    }
    .fh-login-brand {
        margin-bottom: 14px;
    }
    .fh-login-brand .fh-login-logo {
        width: 80px;
        height: 56px;
        margin-bottom: 8px;
    }
}

/* Dark-Mode-Sympathie (nur leichte Anpassung — wir bleiben warm hell, weil
   das näher am rs-familienhilfe.de-Look ist; nur Touch-Highlight anpassen) */
@media (prefers-reduced-motion: reduce) {
    body.login .wp-core-ui .button-primary { transition: none; }
}

/* RS-Familienhilfe logo as <img> */
.fh-login-brand .fh-login-logo-img {
    display: block;
    max-width: 200px;
    max-height: 100px;
    margin: 0 auto 16px;
}

/* Hide WP default login footer (nav links) and WPML language switcher */
#login_error + p,
.privacy-policy-page-link,
#backtoblog,
#nav,
.language-switcher,
#language-switcher {
    display: none !important;
}

/* Tagline below logo */
.fh-login-tagline {
    text-align: center;
    font-size: 13px;
    color: #888;
    margin-bottom: 8px;
}