/*
 * `[turgee_login]` - sign in, lost password, and reset password screens.
 *
 * SAME RULE AS course-page.css: inherits the theme's own type; the only
 * declared colours are semantic (success/error) rather than a brand palette,
 * because a notice needs to read as good or bad news on any theme.
 */

.tg-login form p {
    margin: 0 0 1em;
}

.tg-login label {
    display: block;
    margin-bottom: 0.35em;
    font-weight: 600;
}

.tg-login input[type="text"],
.tg-login input[type="password"],
.tg-login input[type="email"] {
    width: 100%;
    max-width: 24rem;
    box-sizing: border-box;
}

.tg-login__lost {
    margin-top: 0.5em;
    font-size: 0.9em;
}

.tg-login__notice {
    padding: 0.75em 1em;
    margin: 0 0 1em;
    border-radius: 6px;
    border: 1px solid transparent;
}

.tg-login__notice p {
    margin: 0;
}

.tg-login__notice--success {
    color: #0a7c33;
    background: color-mix(in srgb, #0a7c33 12%, transparent);
    border-color: color-mix(in srgb, #0a7c33 30%, transparent);
}

.tg-login__notice--error {
    color: #b32d2e;
    background: color-mix(in srgb, #b32d2e 12%, transparent);
    border-color: color-mix(in srgb, #b32d2e 30%, transparent);
}

/* Shared by the [turgee_login] page and the popup. */
/* The honeypot: present for scripts, invisible to people. */
.tg-auth__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.tg-auth__social {
    margin-top: 1em;
}

.tg-auth__switch {
    margin-top: 0.5em;
    font-size: 0.9em;
}

.tg-auth-form input[type="text"],
.tg-auth-form input[type="password"],
.tg-auth-form input[type="email"] {
    width: 100%;
    box-sizing: border-box;
}

/* ---------------------------------------------------------------
   Form polish
   ---------------------------------------------------------------
   Same accent as the rest of the front end (--tg-brand, then the theme's
   primary colour, then a neutral blue). Zero-specificity tokens, so a theme
   or the Customizer can override any of it. */

:where(.tg-login, .tg-auth-form, .tg-auth-dialog) {
    --tg-accent: var(--tg-brand, var(--wp--preset--color--primary, #2563eb));
    --tg-on-accent: var(--tg-brand-contrast, #fff);
    --tg-danger: #b3261e;
    font-family: var(--tg-font, inherit);
}

.tg-login {
    box-sizing: border-box;
    width: 100%;
    max-width: 26rem;
    margin: 1.5rem auto;
    padding: 1.5rem;
    border: 1px solid color-mix(in srgb, currentColor 15%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, currentColor 3%, transparent);
}

.tg-login input[type="text"],
.tg-login input[type="password"],
.tg-login input[type="email"],
.tg-auth-form input[type="text"],
.tg-auth-form input[type="password"],
.tg-auth-form input[type="email"] {
    max-width: none;
    padding: 0.7em 0.85em;
    border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font: inherit;
}

.tg-login input[type="text"]:focus-visible,
.tg-login input[type="password"]:focus-visible,
.tg-login input[type="email"]:focus-visible,
.tg-auth-form input[type="text"]:focus-visible,
.tg-auth-form input[type="password"]:focus-visible,
.tg-auth-form input[type="email"]:focus-visible {
    outline: 2px solid var(--tg-accent);
    outline-offset: 1px;
    border-color: var(--tg-accent);
}

/* :user-invalid, not :invalid - a required field is "invalid" while still
   empty, and red borders on a form nobody has touched is a scolding. */
.tg-login input:user-invalid,
.tg-auth-form input:user-invalid {
    border-color: var(--tg-danger);
}

.tg-login button[type="submit"],
.tg-login .button,
.tg-auth-form button[type="submit"],
.tg-auth-form .button {
    display: block;
    width: 100%;
    padding: 0.75em 1em;
    border: 0;
    border-radius: 8px;
    background: var(--tg-accent);
    color: var(--tg-on-accent);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.15s ease;
}

.tg-login button[type="submit"]:hover,
.tg-login button[type="submit"]:focus-visible,
.tg-login .button:hover,
.tg-login .button:focus-visible,
.tg-auth-form button[type="submit"]:hover,
.tg-auth-form button[type="submit"]:focus-visible,
.tg-auth-form .button:hover,
.tg-auth-form .button:focus-visible {
    filter: brightness(1.1);
    background: var(--tg-accent);
    color: var(--tg-on-accent);
}

.tg-login button[type="submit"]:focus-visible,
.tg-auth-form button[type="submit"]:focus-visible {
    outline: 2px solid var(--tg-accent);
    outline-offset: 2px;
}

/* "Remember me" sits beside its box, not above it like the other labels. */
.tg-login label:has(input[type="checkbox"]),
.tg-auth-form label:has(input[type="checkbox"]) {
    display: flex;
    gap: 0.5em;
    align-items: center;
    font-weight: 400;
}

.tg-login__lost,
.tg-auth__switch {
    text-align: center;
}

.tg-login__lost a,
.tg-auth__switch a {
    color: color-mix(in srgb, var(--tg-accent) 70%, currentColor);
    font-weight: 600;
}

.tg-login--in {
    text-align: center;
}

/* Show / hide password (assets/password-toggle.js) */

.tg-pw {
    position: relative;
    display: block;
}

.tg-pw input {
    padding-right: 5.5em !important;
}

.tg-pw__toggle {
    position: absolute;
    top: 50%;
    right: 0.4em;
    transform: translateY(-50%);
    padding: 0.25em 0.6em;
    border: 0;
    border-radius: 6px;
    background: color-mix(in srgb, currentColor 10%, transparent);
    color: inherit;
    font: inherit;
    font-size: 0.8em;
    font-weight: 600;
    cursor: pointer;
}

.tg-pw__toggle:focus-visible {
    outline: 2px solid var(--tg-accent);
    outline-offset: 1px;
}