/* ==========================================================================
   Guild Login — wp-login.php skin
   Brings WordPress's built-in login / lostpassword / register screens into
   visual parity with the rest of the site (Heebo, brand teal + accent gold,
   guild-radius). Loads on the login_enqueue_scripts hook so it stacks AFTER
   wp-admin/css/login.css and reliably overrides the core defaults.
   ========================================================================== */

:root {
    --gl-bg:           #f5f3ee;             /* warm site-wide page wash      */
    --gl-card:         #ffffff;
    --gl-text:         #2e404a;
    --gl-muted:        #6b7280;
    --gl-border:       rgba(10, 70, 80, .35);
    --gl-border-focus: #f9c466;
    --gl-focus-ring:   rgba(249, 196, 102, .25);
    --gl-accent:       #f9c466;             /* gold submit                   */
    --gl-accent-hover: #f7b84a;
    --gl-accent-text:  #003944;             /* dark teal text on gold        */
    --gl-brand:        #0a4650;             /* heading + link colour         */
    --gl-brand-hover:  #225D73;
    --gl-radius:       0.625rem;            /* matches --guild-radius        */
    --gl-radius-card:  1rem;
    --gl-field-h:      3rem;
    --gl-shadow:       0 10px 40px rgba(10, 70, 80, .12),
                       0 2px 6px  rgba(10, 70, 80, .06);
}

/* ── Page wash + centring ──────────────────────────────────────────────── */
html, body.login {
    background: var(--gl-bg);
    height: 100%;
}

body.login {
    font-family: "Heebo", "Rubik", "Assistant", system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important;
    color: var(--gl-text);
    /* Push the form to vertical centre on tall screens, but allow scroll
       below it on short / mobile viewports. */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px 16px;
    box-sizing: border-box;
    margin: 0;
}

/* WP wraps everything in #login (default 320px). Override + cap on mobile. */
#login {
    width: 100%;
    max-width: 460px;
    padding: 0;
    margin: 0;
}

/* ── Site-name / logo header ───────────────────────────────────────────── */
/* Default core puts an <h1><a> at the top, repurposed by login_headertext
   to display the bloginfo name. We hide the WP "W" sprite background and
   either show the custom logo (injected as <img>) or styled site name.   */
#login h1 a,
.login h1 a {
    background-image: none !important;
    background: transparent !important;
    width: auto !important;
    height: auto !important;
    text-indent: 0 !important;
    display: block;
    font-family: inherit;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0.01em;
    color: var(--gl-brand) !important;
    text-decoration: none !important;
    padding: 0 0 24px;
    margin: 0;
    text-align: center;
    outline: none;
    box-shadow: none !important;
}

#login h1 a:hover,
#login h1 a:focus {
    color: var(--gl-brand-hover) !important;
}

/* ── Form card ─────────────────────────────────────────────────────────── */
#loginform,
#registerform,
#lostpasswordform,
#resetpassform {
    background: var(--gl-card);
    border: 0;
    border-radius: var(--gl-radius-card);
    box-shadow: var(--gl-shadow);
    padding: 32px 28px;
    margin: 0 0 20px;
    overflow: hidden;
}

/* WP labels — branded but kept light to match Heebo's natural weight. */
#loginform label,
#registerform label,
#lostpasswordform label,
#resetpassform label,
.login form label {
    color: var(--gl-text);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.3;
    margin-bottom: 8px;
    display: block;
}

/* "Remember me" label sits inline with the checkbox — same regular weight. */
.login form .forgetmenot label {
    font-weight: 400;
}

/* Field rows */
#loginform p,
#registerform p,
#lostpasswordform p,
#resetpassform p,
.login form p {
    margin-bottom: 18px;
}

/* "Remember me" row */
.login form .forgetmenot {
    margin-bottom: 22px;
    font-weight: 500;
}

.login form .forgetmenot label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    margin-bottom: 0;
    cursor: pointer;
}

/* ── Inputs ────────────────────────────────────────────────────────────── */
.login form .input,
.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
    width: 100%;
    height: var(--gl-field-h);
    box-sizing: border-box;
    margin: 0;
    padding: 0 14px;
    border: 1px solid var(--gl-border);
    border-radius: var(--gl-radius);
    background: #fff;
    color: var(--gl-text);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.3;
    box-shadow: none;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.login form .input:focus,
.login input[type="text"]:focus,
.login input[type="password"]:focus,
.login input[type="email"]:focus {
    border-color: var(--gl-border-focus);
    box-shadow: 0 0 0 3px var(--gl-focus-ring);
}

.login input::placeholder { color: var(--gl-muted); }

/* The password-visibility eye button WP injects inside the password
   field on the resetpass form. WP's own login.css positions this
   button as a 100%-height bar wedged into the inline-end edge — under
   our brand styling the resulting hit-target looks off and is hard
   to align with the input value. Repaint it as a circular icon-only
   button matching the toggles we use elsewhere on the site
   (member-portal change-password + member-portal login).

   inset-inline-end: 6px → visual LEFT in RTL, which is the inline-end
   of the input — the side where the password text ends and where the
   show/hide affordance is conventionally placed. */
.login .wp-pwd { position: relative; }
.login .wp-pwd input[type="password"],
.login .wp-pwd input[type="text"] {
    padding-inline-end: 48px !important;
}
.login .wp-pwd .button,
.login .wp-pwd button.button {
    position: absolute !important;
    inset-inline-end: 6px;
    inset-inline-start: auto !important;
    inset-block-start: 50%;
    transform: translateY(-50%);
    height: 36px !important;
    width: 36px !important;
    min-width: 36px;
    min-height: 36px;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--gl-muted);
    cursor: pointer;
    border-radius: 50%;
    line-height: 1;
}
.login .wp-pwd .button:hover,
.login .wp-pwd button.button:hover,
.login .wp-pwd .button:focus,
.login .wp-pwd button.button:focus {
    background: rgba(10, 70, 80, .08) !important;
    color: var(--gl-brand);
    outline: none;
}
.login .wp-pwd .button .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
    line-height: 1;
}

/* ── Submit button ─────────────────────────────────────────────────────── */
.login .button.button-primary,
.login .button-primary,
.login #wp-submit {
    width: 100%;
    height: 54px;
    margin: 6px 0 0;
    padding: 0;
    border: 0;
    border-radius: var(--gl-radius);
    background: var(--gl-accent);
    color: var(--gl-accent-text);
    font-family: inherit;
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: normal;
    text-shadow: none;
    box-shadow: none;
    cursor: pointer;
    transition: background .15s ease, transform .12s ease, box-shadow .15s ease;
}

.login .button.button-primary:hover,
.login #wp-submit:hover,
.login .button.button-primary:focus,
.login #wp-submit:focus {
    background: var(--gl-accent-hover);
    color: var(--gl-accent-text);
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(249, 196, 102, .35);
    outline: none;
}

.login .button.button-primary:active,
.login #wp-submit:active {
    transform: translateY(0);
    box-shadow: none;
}

/* ── Helper links below the card ───────────────────────────────────────── */
.login #nav,
.login #backtoblog {
    margin: 0;
    padding: 12px 4px;
    text-align: center;
    text-shadow: none;
    background: transparent;
}

.login #nav a,
.login #backtoblog a,
.login .privacy-policy-page-link a {
    color: var(--gl-brand);
    font-weight: 600;
    text-decoration: none;
    transition: color .15s ease;
}

.login #nav a:hover,
.login #nav a:focus,
.login #backtoblog a:hover,
.login #backtoblog a:focus,
.login .privacy-policy-page-link a:hover {
    color: var(--gl-brand-hover);
    text-decoration: underline;
}

.login .privacy-policy-page-link {
    margin-top: 8px;
    text-align: center;
}

.login .privacy-policy-page-link a {
    font-weight: 500;
    text-decoration: underline;
    opacity: .85;
}

/* ── Language switcher (WP renders a small <form> at the bottom) ───────── */
.login .language-switcher {
    margin-top: 22px;
    padding: 0;
    text-align: center;
    background: transparent;
}

.login .language-switcher form {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.login .language-switcher select {
    height: 40px;
    border: 1px solid var(--gl-border);
    border-radius: var(--gl-radius);
    background: #fff;
    padding: 0 12px;
    font-family: inherit;
    font-size: 0.9375rem;
    color: var(--gl-text);
    cursor: pointer;
}

.login .language-switcher .button {
    height: 40px;
    padding: 0 16px;
    border: 1px solid var(--gl-border);
    background: #fff;
    color: var(--gl-text);
    border-radius: var(--gl-radius);
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

.login .language-switcher .button:hover {
    background: rgba(10, 70, 80, .06);
    border-color: var(--gl-brand);
}

/* ── Error / message banners (wrong password, lost-password, etc.) ─────── */
.login .message,
.login .notice,
.login #login_error {
    border: 0;
    border-inline-start: 4px solid var(--gl-brand);
    border-radius: var(--gl-radius);
    background: #fff;
    box-shadow: var(--gl-shadow);
    padding: 14px 16px;
    margin: 0 0 18px;
    color: var(--gl-text);
    font-weight: 500;
}

.login #login_error {
    border-inline-start-color: #dc2626;
}

.login .message a,
.login #login_error a {
    color: var(--gl-brand);
    font-weight: 700;
}

/* ── Mobile polish ─────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    body.login {
        padding: 16px 12px;
        justify-content: flex-start;
        padding-top: 32px;
    }

    #login h1 a,
    .login h1 a {
        font-size: 1.25rem;
        padding-bottom: 18px;
    }

    #loginform,
    #registerform,
    #lostpasswordform,
    #resetpassform {
        padding: 24px 20px;
        border-radius: var(--gl-radius-card);
    }

    .login .button.button-primary,
    .login #wp-submit {
        height: 50px;
        font-size: 1rem;
    }
}