/* ==========================================================================
   Marvel Cake — Login Page
   ========================================================================== */

/* ── Variables ────────────────────────────────────────────────────────────── */
:root {
    --lc-gold:   #c9a96e;
    --lc-brown:  #3b2a1a;
    --lc-cream:  #f7f4ef;
    --lc-border: #e4ddd3;
    --lc-white:  #ffffff;
    --lc-muted:  #8a7a6a;
    --lc-error:  #c0392b;
    --lc-font:   'DM Sans', system-ui, sans-serif;
}

/* ── Reset WP body ────────────────────────────────────────────────────────── */
html, body.login, body.mc-login-page {
    height: 100%;
    margin: 0;
    padding: 0;
}

body.login,
body.mc-login-page {
    background-color: var(--lc-cream);
    font-family: var(--lc-font);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

/* ── Strip WP chrome ──────────────────────────────────────────────────────── */
body.login div#login {
    width: 100%;
    max-width: 420px;
    padding: 0 24px 40px;
    box-sizing: border-box;
}

/* ── Brand header ─────────────────────────────────────────────────────────── */
#login h1 {
    margin-bottom: 0;
    text-align: center;
}

/* Base reset — the login_head inline style handles logo dimensions */
#login h1 a {
    text-shadow: none;
    text-decoration: none;
    display: block;
    margin: 0 auto;
}

/* Text fallback (no logo uploaded): site name in brand italic */
#login h1 a::before {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: 2.4rem;
    color: var(--lc-brown);
    letter-spacing: -0.01em;
    line-height: 1.1;
    text-indent: 0;
}

/* Gold divider under logo */
#login h1 a::after {
    content: '';
    display: block;
    width: 48px;
    height: 1px;
    background: var(--lc-gold);
    margin: 14px auto 0;
}

/* ── Card ─────────────────────────────────────────────────────────────────── */
#loginform,
#lostpasswordform,
#registerform {
    background: var(--lc-white);
    border: 1px solid var(--lc-border);
    border-radius: 0;
    box-shadow: 0 4px 24px rgba(59, 42, 26, 0.07);
    padding: 36px 40px 32px;
    margin-top: 0;
}

/* ── Labels ───────────────────────────────────────────────────────────────── */
#loginform label,
#lostpasswordform label {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--lc-brown);
    display: block;
    margin-bottom: 4px;
}

/* ── Inputs ───────────────────────────────────────────────────────────────── */
#loginform input[type="text"],
#loginform input[type="password"],
#loginform input[type="email"],
#lostpasswordform input[type="text"],
#lostpasswordform input[type="email"] {
    width: 100%;
    border: 1px solid var(--lc-border);
    border-radius: 0;
    box-shadow: none;
    font-family: var(--lc-font);
    font-size: 0.9375rem;
    padding: 11px 14px;
    color: var(--lc-brown);
    background: var(--lc-cream);
    transition: border-color 0.2s, background 0.2s;
    box-sizing: border-box;
}

#loginform input[type="text"]:focus,
#loginform input[type="password"]:focus,
#lostpasswordform input:focus {
    border-color: var(--lc-gold);
    background: var(--lc-white);
    box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.15);
    outline: none;
}

/* ── Submit button ────────────────────────────────────────────────────────── */
#loginform #wp-submit,
#lostpasswordform #wp-submit {
    background: var(--lc-gold);
    border: 1px solid var(--lc-gold);
    border-radius: 0;
    box-shadow: none;
    font-family: var(--lc-font);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-shadow: none;
    color: var(--lc-white);
    padding: 14px 24px;
    height: auto;
    width: 100%;
    float: none;
    transition: background 0.2s, border-color 0.2s;
    cursor: pointer;
    margin-top: 4px;
}

#loginform #wp-submit:hover,
#lostpasswordform #wp-submit:hover {
    background: var(--lc-brown);
    border-color: var(--lc-brown);
}

/* ── Remember me ──────────────────────────────────────────────────────────── */
#loginform .forgetmenot {
    float: none;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

#loginform .forgetmenot label {
    font-size: 0.8rem;
    letter-spacing: 0;
    text-transform: none;
    font-weight: 400;
    color: var(--lc-muted);
    margin-bottom: 0;
}

#loginform input[type="checkbox"] {
    accent-color: var(--lc-gold);
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

/* ── Error / notice messages ──────────────────────────────────────────────── */
#login .message,
#login .notice {
    border-left: 3px solid var(--lc-gold);
    border-radius: 0;
    background: var(--lc-white);
    padding: 12px 16px;
    font-size: 0.875rem;
    box-shadow: none;
}

#login #login_error {
    border-left: 3px solid var(--lc-error);
    background: #fff8f8;
    border-radius: 0;
    padding: 12px 16px;
    font-size: 0.875rem;
    box-shadow: none;
}

/* ── Nav links (Lost password / Back to site) ─────────────────────────────── */
#nav {
    text-align: center;
    font-size: 0.8rem;
    margin-top: 16px;
}

#nav a {
    color: var(--lc-muted);
    text-decoration: none;
    transition: color 0.2s;
}

#nav a:hover {
    color: var(--lc-gold);
}

/* Hide "← Back to [site]" — this is WP-native chrome we don't need */
#backtoblog {
    display: none !important;
}

/* ── Google OAuth section (sits between logo and form card) ───────────────── */
.mc-oauth-wrap {
    margin-top: 28px;
}

.mc-oauth-buttons {
    margin-bottom: 0;
}

.mc-oauth-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 13px 16px;
    border: 1px solid var(--lc-border);
    background: var(--lc-white);
    font-family: var(--lc-font);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--lc-brown);
    text-decoration: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    cursor: pointer;
    box-sizing: border-box;
}

.mc-oauth-btn:hover {
    border-color: #c0c0c0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    color: var(--lc-brown);
}

/* ── Divider ──────────────────────────────────────────────────────────────── */
.mc-oauth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0 18px;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lc-muted);
}

.mc-oauth-divider::before,
.mc-oauth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--lc-border);
}

/* ── Custom login page (page-login.php template) ─────────────────────────── */
.mc-lp-wrap {
    width: 100%;
    max-width: 420px;
    padding: 0 24px 40px;
    box-sizing: border-box;
}

.mc-lp-card {
    width: 100%;
}

/* Logo */
.mc-lp-logo {
    text-align: center;
    margin-bottom: 28px;
}

.mc-lp-logo a {
    display: inline-block;
    text-decoration: none;
}

.mc-lp-logo__img {
    display: block;
    max-width: 200px;
    max-height: 90px;
    width: auto;
    height: auto;
    object-fit: contain;
    margin: 0 auto;
}

.mc-lp-logo__text {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: 2.4rem;
    color: var(--lc-brown);
}

.mc-lp-divider {
    width: 48px;
    height: 1px;
    background: var(--lc-gold);
    margin: 14px auto 0;
}

/* Messages */
.mc-lp-notice {
    border-left: 3px solid var(--lc-gold);
    background: var(--lc-white);
    padding: 12px 16px;
    font-size: 0.875rem;
    margin-bottom: 20px;
    color: var(--lc-brown);
}

.mc-lp-error {
    border-left: 3px solid var(--lc-error);
    background: #fff8f8;
    padding: 12px 16px;
    font-size: 0.875rem;
    margin-bottom: 20px;
    color: var(--lc-error);
}

/* The wp_login_form() card */
#mc-loginform {
    background: var(--lc-white);
    border: 1px solid var(--lc-border);
    box-shadow: 0 4px 24px rgba(59, 42, 26, 0.07);
    padding: 36px 40px 32px;
    box-sizing: border-box;
}

#mc-loginform label {
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--lc-brown);
    margin-bottom: 4px;
}

#mc-loginform input[type="text"],
#mc-loginform input[type="password"] {
    width: 100%;
    border: 1px solid var(--lc-border);
    box-shadow: none;
    font-family: var(--lc-font);
    font-size: 0.9375rem;
    padding: 11px 14px;
    color: var(--lc-brown);
    background: var(--lc-cream);
    transition: border-color 0.2s, background 0.2s;
    box-sizing: border-box;
    border-radius: 0;
}

#mc-loginform input[type="text"]:focus,
#mc-loginform input[type="password"]:focus {
    border-color: var(--lc-gold);
    background: var(--lc-white);
    box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.15);
    outline: none;
}

#mc-loginform .forgetmenot {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}

#mc-loginform .forgetmenot label {
    font-size: 0.8rem;
    letter-spacing: 0;
    text-transform: none;
    font-weight: 400;
    color: var(--lc-muted);
    margin-bottom: 0;
}

#mc-loginform input[type="checkbox"] {
    accent-color: var(--lc-gold);
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

#mc-loginform .submit input[type="submit"],
#mc-loginform #wp-submit {
    display: block;
    width: 100%;
    background: var(--lc-gold);
    border: 1px solid var(--lc-gold);
    border-radius: 0;
    box-shadow: none;
    font-family: var(--lc-font);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-shadow: none;
    color: var(--lc-white);
    padding: 14px 24px;
    height: auto;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

#mc-loginform .submit input[type="submit"]:hover,
#mc-loginform #wp-submit:hover {
    background: var(--lc-brown);
    border-color: var(--lc-brown);
}

/* Lost password link */
.mc-lp-links {
    text-align: center;
    margin-top: 16px;
    font-size: 0.8rem;
}

.mc-lp-links a {
    color: var(--lc-muted);
    text-decoration: none;
    transition: color 0.2s;
}

.mc-lp-links a:hover {
    color: var(--lc-gold);
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    body.login div#login,
    .mc-lp-wrap {
        padding: 0 16px 32px;
    }

    #loginform,
    #lostpasswordform,
    #mc-loginform {
        padding: 28px 24px 24px;
    }
}