/**
 * Group Two login screen.
 *
 * Rebuilds wp-login.php as the Group Two hero: the navy geometry full bleed,
 * the wordmark in the top-left corner, the monogram bleeding off the bottom
 * right, and the form sitting on the left third the way the hero copy does.
 *
 * Authored as plain CSS and served straight from source. It is a single
 * screen with no shared tokens, so putting it through the Sass build would buy
 * nothing and would hide the file behind a compile step — see assets/scss for
 * the parts that still need one.
 *
 * Loaded by Inc\Base\Login, which also swaps the logo link and adds the
 * greeting above the form.
 */

body.login {
    /* Sampled from the artwork so the fallback matches if the image is slow. */
    --g2-navy: #042a3e;
    --g2-deep: #052335;
    --g2-mist: #b6d6de;

    /* Matches the hero's left inset, collapsing to a plain gutter on phones. */
    --g2-inset: clamp(1.5rem, 7vw, 8.5rem);
    --g2-line: rgb(255 255 255 / 0.14);

    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;

    /* WordPress sets height:100%, which would clip a tall reset screen. */
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    padding-block: 8rem 3rem;
    padding-inline-end: var(--g2-inset);

    background-color: var(--g2-navy);
    background-image: url('../images/login-background.webp');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;

    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/*
 * The monogram, clipped by the viewport edge exactly as it is on the site.
 * Decorative, so it is drawn in a pseudo-element and kept out of the tab and
 * pointer order entirely.
 *
 * Fixed rather than absolute for two reasons: it can bleed past the edges
 * without ever adding a scrollbar, and z-index:-1 drops it behind the form
 * without needing a stacking context on #login — which, being positioned,
 * would otherwise capture the absolutely positioned wordmark below.
 */
body.login::after {
    content: '';
    position: fixed;
    right: -4vw;
    bottom: -10vh;
    width: min(46vw, 38rem);
    aspect-ratio: 1668 / 1356; /* The artwork's own ratio. */
    background: url('../images/g2-monogram.webp') right bottom / contain no-repeat;

    /*
     * Full opacity on purpose: the file is already a near-transparent mark
     * rather than a solid white one, so dimming it further erases it.
     */
    opacity: 1;
    pointer-events: none;
    z-index: -1;
}

/*
 * Hold the form to the left, like the hero copy.
 *
 * Width is left to the flex container to stretch — an explicit 100% resolves
 * against the full body box and then the inset margins push it off the right
 * edge, which is exactly what happens on a phone.
 */
body.login #login {
    /* Releases WordPress's fixed 320px so the flex row can stretch it. */
    width: auto;
    max-width: 26rem;
    margin: 0;
    padding: 0;
    margin-inline-start: var(--g2-inset);
}

/* ---------------------------------------------------------------- wordmark */

/*
 * Pinned to the corner rather than left above the form, so the composition
 * reads as the hero. Absolute against the body, not fixed, so it scrolls away
 * on a short viewport instead of sitting on top of the fields.
 */
body.login h1.wp-login-logo {
    position: absolute;
    top: clamp(2rem, 5.5vh, 3.75rem);
    left: var(--g2-inset);
    margin: 0;
    text-align: left;
    z-index: 2;
}

body.login h1.wp-login-logo a {
    display: block;
    width: 150px;
    height: 27px;
    margin: 0;
    padding: 0;
    background: url('../images/g2-wordmark.svg') left center / contain no-repeat;
    text-indent: -9999px;
    overflow: hidden;
    outline: 0;
    opacity: 1;
    transition: opacity 200ms ease;
}

body.login h1.wp-login-logo a:hover,
body.login h1.wp-login-logo a:focus-visible {
    opacity: 0.75;
}

body.login h1.wp-login-logo a:focus-visible {
    outline: 2px solid var(--g2-mist);
    outline-offset: 6px;
}

/* ----------------------------------------------------------------- heading */

.g2-login-greeting {
    margin: 0 0 2rem;
}

.g2-login-greeting__site {
    display: block;
    margin: 0;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: clamp(1.75rem, 3.4vw, 2.5rem);
    font-weight: 400;
    line-height: 1.15;
    color: #fff;
}

.g2-login-greeting__label {
    display: block;
    margin: 0.85rem 0 0;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgb(255 255 255 / 0.62);
}

/* -------------------------------------------------------------------- form */

body.login form {
    margin: 0;
    padding: 2.25rem 2rem 2rem;
    background: rgb(255 255 255 / 0.05);
    border: 1px solid var(--g2-line);
    border-radius: 0;
    box-shadow: none;
    overflow: visible;

    /*
     * Progressive: the panel already reads without it, and Firefox users with
     * the flag off just get the flat translucent fill.
     */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

body.login label,
body.login form .input,
body.login form input[type='text'],
body.login form input[type='password'],
body.login form input[type='email'] {
    color: #fff;
}

body.login label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgb(255 255 255 / 0.72);
}

body.login form .input,
body.login form input[type='text'],
body.login form input[type='password'],
body.login form input[type='email'],
body.login input[type='text'] {
    width: 100%;
    margin: 0.5rem 0 0;
    padding: 0.75rem 0.875rem;
    background: rgb(255 255 255 / 0.07);
    border: 1px solid var(--g2-line);
    border-radius: 0;
    box-shadow: none;
    font-size: 1rem;
    line-height: 1.4;
    transition:
        border-color 200ms ease,
        background-color 200ms ease;
}

body.login form .input::placeholder {
    color: rgb(255 255 255 / 0.4);
}

body.login form .input:focus,
body.login form input[type='text']:focus,
body.login form input[type='password']:focus,
body.login form input[type='email']:focus,
body.login input[type='checkbox']:focus {
    background: rgb(255 255 255 / 0.1);
    border-color: var(--g2-mist);
    box-shadow: 0 0 0 1px var(--g2-mist);
    outline: 2px solid transparent; /* Kept for forced-colors mode. */
}

/*
 * Chrome paints autofilled fields with an opaque near-white it will not let
 * background-color override. A long inset shadow is the one property it does
 * respect, so the field keeps its dark fill.
 */
body.login form .input:-webkit-autofill,
body.login form .input:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff;
    -webkit-box-shadow: 0 0 0 60rem #0c3247 inset;
    caret-color: #fff;
}

body.login .user-pass-wrap {
    margin-top: 1.25rem;
}

body.login .wp-pwd {
    position: relative;
}

body.login .wp-pwd .button.wp-hide-pw {
    top: 0.5rem;
    right: 0;
    height: calc(100% - 0.5rem);
    color: rgb(255 255 255 / 0.62);
    background: transparent;
    border: 0;
    box-shadow: none;
}

body.login .wp-pwd .button.wp-hide-pw:hover,
body.login .wp-pwd .button.wp-hide-pw:focus {
    color: #fff;
    background: transparent;
}

body.login .forgetmenot {
    margin: 1.25rem 0 0;
    float: none;
}

body.login .forgetmenot label {
    letter-spacing: 0.12em;
}

/*
 * WordPress 7.0 puts a help toggletip beside "Remember Me". The bubble is a
 * popover, so it renders in the top layer where the panel's styling cannot
 * reach it — it needs colours of its own or it inherits white text on white.
 */
body.login .wp-tooltip__toggle {
    color: rgb(255 255 255 / 0.55);
    background: transparent;
    border: 0;
    box-shadow: none;
    transition: color 200ms ease;
}

body.login .wp-tooltip__toggle:hover,
body.login .wp-tooltip__toggle:focus {
    color: #fff;
    background: transparent;
}

body.login .wp-tooltip__toggle:focus-visible {
    outline: 2px solid var(--g2-mist);
    outline-offset: 2px;
}

body.login .wp-tooltip__bubble {
    max-width: 22rem;
    padding: 0.9rem 2.25rem 0.9rem 1rem;
    background: #0c3247;
    border: 1px solid var(--g2-line);
    border-radius: 0;
    box-shadow: 0 12px 32px rgb(0 0 0 / 0.35);
    color: #fff;
    font-size: 0.8125rem;
    line-height: 1.5;
    text-transform: none;
    letter-spacing: normal;
}

body.login .wp-tooltip__close {
    color: rgb(255 255 255 / 0.62);
    background: transparent;
    border: 0;
    box-shadow: none;
}

body.login .wp-tooltip__close:hover,
body.login .wp-tooltip__close:focus {
    color: #fff;
    background: transparent;
}

body.login input[type='checkbox'] {
    background: rgb(255 255 255 / 0.07);
    border: 1px solid rgb(255 255 255 / 0.32);
    border-radius: 0;
    box-shadow: none;
}

body.login input[type='checkbox']:focus {
    border-color: var(--g2-mist);
    box-shadow: 0 0 0 1px var(--g2-mist);
}

body.login input[type='checkbox']:checked::before {
    /* The dashicon tick is drawn in a font, so only colour needs changing. */
    color: var(--g2-mist);
}

body.login .submit {
    margin: 1.75rem 0 0;
    padding: 0;
    float: none;
    clear: both;
}

/* The hero's pill button, in its own palette. */
body.login .wp-core-ui .button-primary,
body.login #wp-submit {
    display: inline-block;

    /*
     * WordPress floats this right, which both misaligns it and — now that the
     * panel no longer clips its overflow — drops it out of the panel's height.
     */
    float: none;
    width: auto;
    min-width: 11.5rem;
    height: auto;
    padding: 0.9rem 2.25rem;
    background: var(--g2-mist);
    border: 1px solid var(--g2-mist);
    border-radius: 999px;
    color: var(--g2-deep);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    line-height: 1;
    text-transform: uppercase;
    text-shadow: none;
    box-shadow: none;
    cursor: pointer;
    transition:
        background-color 200ms ease,
        color 200ms ease;
}

body.login .wp-core-ui .button-primary:hover,
body.login .wp-core-ui .button-primary:focus {
    background: #fff;
    border-color: #fff;
    color: var(--g2-deep);
}

body.login .wp-core-ui .button-primary:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* Secondary buttons — the "Get New Password" screen reuses the primary. */
body.login .wp-core-ui .button,
body.login .wp-core-ui .button-secondary {
    border-radius: 0;
}

/* --------------------------------------------------------- links & notices */

body.login #nav,
body.login #backtoblog {
    margin: 1.5rem 0 0;
    padding: 0;
    text-align: left;
}

body.login #backtoblog {
    margin-top: 0.75rem;
}

body.login #nav a,
body.login #backtoblog a,
body.login .privacy-policy-page-link a {
    color: rgb(255 255 255 / 0.72);
    font-size: 0.8125rem;
    text-decoration: none;
    transition: color 200ms ease;
}

body.login #nav a:hover,
body.login #backtoblog a:hover,
body.login .privacy-policy-page-link a:hover,
body.login #nav a:focus,
body.login #backtoblog a:focus {
    color: var(--g2-mist);
}

body.login #nav a:focus-visible,
body.login #backtoblog a:focus-visible {
    outline: 2px solid var(--g2-mist);
    outline-offset: 3px;
}

body.login .privacy-policy-page-link {
    margin: 1.5rem 0 0;
    text-align: left;
}

body.login #login_error,
body.login .notice,
body.login .message,
body.login .success {
    margin: 0 0 1.5rem;
    padding: 0.9rem 1rem;
    background: rgb(255 255 255 / 0.07);
    border: 1px solid var(--g2-line);
    border-left: 3px solid var(--g2-mist);
    border-radius: 0;
    box-shadow: none;
    color: #fff;
    font-size: 0.875rem;
}

body.login #login_error {
    /* Amber rather than red: it still reads as a warning against the navy. */
    border-left-color: #e0a458;
}

body.login #login_error a,
body.login .message a {
    color: var(--g2-mist);
}

body.login .language-switcher {
    margin-top: 1.5rem;
}

body.login .language-switcher label,
body.login .language-switcher select {
    color: #fff;
}

/* ------------------------------------------------------------ interim login */

/*
 * The re-authentication modal renders inside a small iframe in wp-admin. The
 * hero composition makes no sense at that size, so it keeps the palette and
 * drops the artwork and the absolute positioning.
 */
body.login.interim-login {
    display: block;
    min-height: 0;
    padding: 0;
    background-image: none;
}

body.login.interim-login::after {
    content: none;
}

body.login.interim-login #login {
    max-width: none;
    margin: 0;
    padding: 1rem;
}

body.login.interim-login h1.wp-login-logo {
    position: static;
    margin: 0 0 1rem;
}

body.login.interim-login .g2-login-greeting {
    display: none;
}

/* ------------------------------------------------------------- small screens */

@media (max-width: 782px) {
    body.login {
        padding-block: 7rem 2.5rem;
        padding-inline: 0;
    }

    /*
     * Keeps the 26rem cap — a tablet is wide enough to stretch the panel to
     * an unreadable 660px otherwise. The inset margins alone narrow it on a
     * phone.
     */
    body.login #login {
        margin-inline: var(--g2-inset);
    }

    body.login::after {
        right: -12vw;
        bottom: -5vh;
        width: 76vw;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.login *,
    body.login *::before,
    body.login *::after {
        transition-duration: 0.01ms !important;
    }
}