/*
 * Velominati — Login Page
 * Dark background, V-cog logo, branded form
 */

/* ── Page ──────────────────────────────────────────────────────── */

html,
body.login {
    background: #111111;
}

body.login {
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ── Logo ──────────────────────────────────────────────────────── */

#login h1 a {
    background-image: url( images/v-cog.svg );
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 72px;
    height: 72px;
    filter: invert(1);             /* SVG is dark; invert to white on dark bg */
    opacity: 0.9;
    margin-bottom: 12px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#login h1 a:focus {
    box-shadow: 0 0 0 3px rgba(200, 50, 26, 0.5);
    outline: none;
    border-radius: 50%;
}

/* Wordmark beneath logo */
#login h1 a::after {
    content: 'VELOMINATI';
    display: block;
    text-align: center;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    color: rgba(255,255,255,0.45);
    margin-top: 8px;
    background: none;
    width: 100%;
}

/* ── Form container ────────────────────────────────────────────── */

#login {
    padding-top: 0;
    width: 340px;
}

#loginform,
#lostpasswordform,
#registerform {
    background: #ffffff;
    border: none;
    border-radius: 8px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45);
    padding: 32px 36px 28px;
    margin-top: 16px;
}

/* ── Labels & inputs ───────────────────────────────────────────── */

#loginform label,
#lostpasswordform label {
    color: #444;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin-bottom: 4px;
    display: block;
}

#loginform input[type="text"],
#loginform input[type="password"],
#lostpasswordform input[type="text"] {
    background: #F8F8F7;
    border: 1px solid #DDDDD9;
    border-radius: 4px;
    color: #111;
    padding: 10px 12px;
    font-size: 0.95rem;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-shadow: none;
}

#loginform input[type="text"]:focus,
#loginform input[type="password"]:focus,
#lostpasswordform input[type="text"]:focus {
    border-color: #C8321A;
    box-shadow: 0 0 0 2px rgba(200, 50, 26, 0.18);
    outline: none;
    background: #fff;
}

/* ── Remember me ───────────────────────────────────────────────── */

.forgetmenot label {
    text-transform: none !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    color: #666 !important;
    font-size: 0.85rem !important;
}

.login .forgetmenot input[type="checkbox"]:checked {
    background-color: #C8321A;
    border-color: #C8321A;
}

/* ── Submit button ─────────────────────────────────────────────── */

#loginform #wp-submit,
#lostpasswordform #wp-submit {
    background: #C8321A;
    border: none;
    border-radius: 4px;
    box-shadow: none;
    color: #fff;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 10px 20px;
    text-shadow: none;
    text-transform: uppercase;
    transition: background 0.15s;
    cursor: pointer;
    float: right;
}

#loginform #wp-submit:hover,
#lostpasswordform #wp-submit:hover {
    background: #A52817;
}

#loginform #wp-submit:focus {
    background: #A52817;
    outline: 2px solid #C8321A;
    outline-offset: 2px;
    box-shadow: none;
}

/* ── Bottom links ──────────────────────────────────────────────── */

#nav,
#backtoblog {
    text-align: center;
    margin-top: 20px;
}

#nav a,
#backtoblog a {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.82rem;
    text-decoration: none;
    transition: color 0.15s;
}

#nav a:hover,
#backtoblog a:hover {
    color: rgba(255, 255, 255, 0.85);
}

/* ── Error / success notices ───────────────────────────────────── */

#login_error,
.message {
    border-radius: 4px;
    border-left-width: 4px;
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 0.88rem;
}

#login_error  { border-left-color: #C8321A; background: #fff0ee; color: #7a1a0a; }
.message      { border-left-color: #2E7D32; background: #f0faf2; color: #1a4f20; }

/* ── Privacy policy / language chooser ────────────────────────── */

.login .privacy-policy-page-link,
.login #language-switcher {
    color: rgba(255,255,255,0.35);
    font-size: 0.78rem;
}

.login #language-switcher select {
    background: #1A1A1A;
    border-color: #2D2D2D;
    color: rgba(255,255,255,0.6);
    border-radius: 3px;
}