/* ═══════════════════════════════════════════════════════════════
   Not Even Delta – Custom Login Page
   ═══════════════════════════════════════════════════════════════ */

/* Import theme fonts */
@import url('fonts.css');

/* ── Color variables from theme ───────────────────────────────── */
:root {
    --clr-black:   #0d0d0d;
    --clr-dark:    #1a1a1a;
    --clr-grey:    #2e2e2e;
    --clr-mid:     #555;
    --clr-light:   #f5f5f5;
    --clr-white:   #ffffff;
    --clr-accent:  #c0392b;
    --clr-accent2: #e74c3c;
    --ff-heading:  'Oswald', 'Arial Narrow', Arial, sans-serif;
    --ff-body:     'Open Sans', Arial, sans-serif;
    --radius:      4px;
    --transition:  0.25s ease;
}

/* ── Full page background (dark theme) ────────────────────────── */
body.login {
    background: 
        linear-gradient(to bottom right, rgba(13,13,13,0.85) 40%, rgba(192,57,43,0.25)),
        var(--clr-black);
    font-family: var(--ff-body);
}

/* ── Login form container ─────────────────────────────────────── */
#login {
    padding: 8vh 0 0;
}

/* ── Logo area ────────────────────────────────────────────────── */
.login h1 a {
    background-image: none !important;
    width: auto !important;
    height: auto !important;
    text-indent: 0 !important;
    font-family: var(--ff-heading);
    font-size: 2.5rem;
    letter-spacing: 0.06em;
    color: var(--clr-white);
    text-transform: uppercase;
    text-align: center;
    padding-bottom: 1.5rem;
}

/* ── Login form box ───────────────────────────────────────────── */
#loginform,
#registerform,
#lostpasswordform {
    background: rgba(26, 26, 26, 0.85);
    backdrop-filter: blur(10px);
    border: 2px solid var(--clr-accent);
    border-radius: var(--radius);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    padding: 2rem;
}

/* ── Form labels ──────────────────────────────────────────────── */
#loginform label,
#registerform label,
#lostpasswordform label {
    color: var(--clr-light);
    font-size: 0.95rem;
    letter-spacing: 0.03em;
}

/* ── Input fields ─────────────────────────────────────────────── */
#loginform input[type="text"],
#loginform input[type="password"],
#registerform input[type="text"],
#registerform input[type="email"],
#lostpasswordform input[type="text"] {
    background: var(--clr-grey);
    border: 1px solid var(--clr-mid);
    border-radius: var(--radius);
    color: var(--clr-white);
    padding: 0.75rem;
    font-family: var(--ff-body);
    font-size: 1rem;
    transition: border-color var(--transition), background var(--transition);
}

#loginform input[type="text"]:focus,
#loginform input[type="password"]:focus,
#registerform input[type="text"]:focus,
#registerform input[type="email"]:focus,
#lostpasswordform input[type="text"]:focus {
    background: var(--clr-dark);
    border-color: var(--clr-accent);
    outline: none;
    box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.2);
}

/* ── Submit button ────────────────────────────────────────────── */
#loginform .button-primary,
#registerform .button-primary,
#lostpasswordform .button-primary {
    background: var(--clr-accent) !important;
    border: 2px solid var(--clr-accent) !important;
    border-radius: var(--radius) !important;
    color: var(--clr-white) !important;
    font-family: var(--ff-heading) !important;
    font-size: 1rem !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    padding: 0.75rem 2rem !important;
    height: auto !important;
    line-height: 1.5 !important;
    transition: background var(--transition), border-color var(--transition) !important;
    box-shadow: none !important;
    text-shadow: none !important;
    width: 100%;
    margin-top: 0.5rem;
}

#loginform .button-primary:hover,
#registerform .button-primary:hover,
#lostpasswordform .button-primary:hover {
    background: var(--clr-accent2) !important;
    border-color: var(--clr-accent2) !important;
}

#loginform .button-primary:focus,
#registerform .button-primary:focus,
#lostpasswordform .button-primary:focus {
    box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.3) !important;
}

/* ── Remember me checkbox ─────────────────────────────────────── */
.login .forgetmenot {
    margin-bottom: 1rem;
}

.login .forgetmenot label {
    color: var(--clr-light);
    font-size: 0.9rem;
}

.login input[type="checkbox"] {
    accent-color: var(--clr-accent);
}

/* ── Links below form ─────────────────────────────────────────── */
#nav,
#backtoblog {
    text-align: center;
}

#nav a,
#backtoblog a {
    color: var(--clr-light) !important;
    font-size: 0.9rem;
    text-decoration: none;
    transition: color var(--transition);
}

#nav a:hover,
#backtoblog a:hover {
    color: var(--clr-accent) !important;
}

/* ── Error messages ───────────────────────────────────────────── */
#login_error,
.login .message {
    background: rgba(26, 26, 26, 0.9);
    border-left: 4px solid var(--clr-accent);
    color: var(--clr-light);
    border-radius: var(--radius);
    padding: 1rem;
}

.login .message {
    border-left-color: #46b450;
}

/* ── Privacy policy link ──────────────────────────────────────── */
.privacy-policy-page-link {
    text-align: center;
}

.privacy-policy-page-link a {
    color: var(--clr-mid) !important;
    font-size: 0.85rem;
}

.privacy-policy-page-link a:hover {
    color: var(--clr-light) !important;
}

/* ── Language switcher (if present) ───────────────────────────── */
.language-switcher {
    text-align: center;
    margin-top: 1rem;
}

/* ── Responsive adjustments ───────────────────────────────────── */
@media screen and (max-width: 480px) {
    .login h1 a {
        font-size: 2rem;
    }
    
    #loginform,
    #registerform,
    #lostpasswordform {
        padding: 1.5rem;
    }
}