/*
    Partner Login — standalone split-screen route (/login).

    Imports the shared chrome from components/auth-shell.css (reset, grid, image panel, font
    vars, field recipe, button recipe, links, banner, motion). This file holds ONLY what is
    unique to this route: the vertically-centred panel with its pinned terms line, the
    password field's label/forgot row, the reveal toggle, and the login stagger.

    Deliberately OFF-THEME — see the header of auth-shell.css for why (including the
    --primary hijack in styles/app.css that these routes avoid by staying standalone).
*/

/*
    Every piece of text on this route is Poppins. Poppins is one family with a real weight axis
    (unlike Josefin's one-face-per-weight), so redefining the shell's three font vars here is
    enough — font-weight now reaches the right face instead of synthesizing. The title sets its
    family directly (not via a var), so it is overridden separately below.
*/
.login-page {
    --page-font-heading: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
    --page-font-body: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
    --page-font-body-strong: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
}

/*
    ---- Brand panel (left) ----
    Placed by explicit grid-column, not DOM order: the form stays first in the source so tab
    order and screen-reader flow reach the form before the brand panel. Hidden below 860px (the
    responsive block), where the form takes the whole width.
*/
.login-page .auth-page__panel--image { grid-column: 1; grid-row: 1; }
.login-page .login-page__panel--form { grid-column: 2; grid-row: 1; }

/* The shared 1fr/0.7fr skew favours the FIRST column; with the brand panel first it would starve
   the form. Flip it so the form (column 2) keeps the room. */
@media (max-width: 1023px) {
    .login-page .auth-page__grid { grid-template-columns: 0.7fr 1fr; }
}

/*
    Brand image (login-bg.png), no scrim overlay (per design). background-size:cover /
    position:center / no-repeat are inherited from the shell rule. --button-pressed is the base
    behind it, so a slow/failed image never flashes white.
    ⚑ White panel text now sits directly on the image — legibility depends on the image being
    dark enough in the text zones (see contrast flag).
*/
.login-page .auth-page__panel--image {
    background-color: var(--button-pressed);
    background-image: url('/images/login-bg.png');
    display: flex;
    flex-direction: column;
    padding: 44px 52px;
    color: var(--white);
}

/* The shell's foot scrim is a pseudo-element; the gradients above already carry the scrim. */
.login-page .auth-page__panel--image::after { content: none; }

/* Headline block pinned to the bottom; the footer row sits under it. */
.login-page__brand-body { margin-top: auto; }

.login-page__brand-headline {
    font-family: var(--page-font-heading);
    font-weight: 600;
    font-size: 46px;
    line-height: 1.06;
    letter-spacing: -0.02em;
    color: var(--white);
    margin: 0 0 20px;
}

.login-page__brand-lede {
    font-family: var(--page-font-body);
    font-weight: 500;
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.82); /* --white @ 82% */
    margin: 0 0 28px;
}

.login-page__brand-points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.login-page__brand-points li {
    position: relative;
    padding-left: 20px;
    font-family: var(--page-font-body);
    font-weight: 500;
    font-size: 15px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9); /* --white @ 90% */
}

.login-page__brand-points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--primary-30);
}

/* ---- Brand footer: one horizontal row — copyright + legal, each hugging its content ---- */
.login-page__brand-footer {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.16); /* --white @ 16% */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
}

.login-page__brand-copy {
    width: fit-content;
    font-family: var(--page-font-body);
    font-weight: 400;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6); /* --white @ 60% */
    margin: 0;
}

.login-page__brand-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    width: fit-content;
}

.login-page__brand-legal a {
    font-family: var(--page-font-body-strong);
    font-weight: 600;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.72); /* --white @ 72% */
    transition: color 150ms ease;
}

.login-page__brand-legal a:hover { color: var(--white); }

.login-page__brand-legal a:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.4); /* --white @ 40% */
    border-radius: var(--page-radius-link);
}

/*
    ---- Form panel ----
    Spacer / form / spacer, both spacers 1fr, so the form in row 2 sits optically centred.
    Deliberately NOT place-items:center — a centred single row overflows in both directions
    when the form outgrows the viewport, putting the logo above the scroll origin where it
    can't be reached. 1fr rows collapse to zero instead, so tall content only ever grows down.
*/
/*
    Optical centring. The bottom spacer is deliberately lighter than the top one, so the block
    settles a couple of percent below true centre — the logo/heading cluster carries more visual
    weight than the footer link, and mathematical centring therefore reads high.

    Still spacer/form/spacer rather than place-items:center: a centred single row overflows in
    BOTH directions once the form outgrows the viewport (the OTP step, or an open error banner),
    putting the logo above the scroll origin where it can't be reached. Fractional-fr rows still
    collapse to zero, so tall content only ever grows downward.
*/
.login-page__panel--form {
    display: grid;
    grid-template-rows: 1fr auto 0.85fr;
    /* The 440px column is centred in the right section; its own content (logo, heading, labels,
       inputs) stays left-aligned inside it. */
    justify-items: center;
    padding: 48px 64px;
}

/* 360px: a narrow column reads deliberate — it is what makes this feel considered rather than
   stretched. The fields fill it and never grow past it. */
.login-page__form-col {
    grid-row: 2;
    align-self: center;
    width: 100%;
    max-width: 440px;
}

/*
    ---- Field rhythm ----
    Same rhythm as the register pages: the error slot takes no space until it has a message, and
    the 20px field-to-field gap sits AFTER it. A reserved slot used to BE the gap, so a message
    filled it and sat flush against the next label. Now the form opens up by the message's height.
*/
.login-page .auth-field__error {
    margin-top: 6px;
}

.login-page .auth-field__error:empty {
    min-height: 0;
    margin-top: 0;
}

.auth-field + .auth-field {
    margin-top: 20px;
}

/* ---- Top-right helper on the form section ---- */
/* The section is position:relative (auth-shell), so this pins to the right panel's top-right. */
.login-page__help {
    position: absolute;
    top: 28px;
    right: 48px;
    z-index: 2;
    margin: 0;
    font-family: var(--page-font-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--text-3);
}

.login-page__help-link {
    font-size: 12px;
    font-weight: 500;
    margin-left: 5px;
}

/* ---- Header rhythm ---- */
.login-page .auth-page__logo {
    margin-bottom: 34px;
}

.login-page .auth-page__title {
    margin-top: 24px;
    margin-bottom: 6px;
}

.login-page .auth-page__subtitle {
    margin-bottom: 36px;
}

/* The reveal sits inside the field (the theme's .input-icon-right), whose own right padding keeps a
   long value from running under it. The button reset lives in components/buttons.css. */

/* Hide Edge's native reveal control so only our toggle shows. */
.login-field__input--password::-ms-reveal,
.login-field__input--password::-ms-clear {
    display: none;
}

/*
    ---- Password field: recovery link shares a row with the error text ----
    Grid areas place both under the control while they stay AFTER it in the DOM, so the tab
    order is input -> reveal -> forgot (never forgot -> input). Placement is visual only;
    focus order follows the DOM. error/forgot occupy the same row, error hugging the left edge
    and forgot the right, so an inline error never pushes the link down onto its own line.
*/
.auth-field--password {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "label   label"
        "control control"
        "error   forgot";
    align-items: center;
    column-gap: 12px;
}

.auth-field--password .auth-field__label {
    grid-area: label;
}

.auth-field--password .auth-field__control {
    grid-area: control;
}

/* Reserved slot restored (18px), matching every other auth page's error rhythm: without it, an
   error message sat flush against the password input's border with no breathing room above it. */
.auth-field--password .auth-field__error {
    grid-area: error;
    margin-top: 0;
    min-height: 18px;
}

.login-field__forgot {
    grid-area: forgot;
    justify-self: end;
    /* Restores the gap between the password input and this row — matches the other auth pages'
       field rhythm, and is what gives an error message breathing room above it once it appears. */
    margin-top: 8px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}
/* ---- Submit ----
   Full width and the gap above it come from the theme's w-100 and mt-10 utilities in the markup.
   A margin-top set here never applied: the shared .btn rule in components/buttons.css sets
   margin: 0 at a higher specificity. .login-form__submit stays only as the script's hook. */

/* ---- Header ---- */
/*
    Scoped to .login-page, not written bare: .auth-page__title / __subtitle come from auth-shell
    and are shared with /register/individual and /register/organisation, which are not changing.

    The italic is the real face (a woff2), not 'Times New Roman' obliqued by the browser, and
    font-style must be stated alongside the family — the @font-face declares font-style: italic,
    so without it the request doesn't match the descriptor and a slant gets synthesized on top.
    Weight 500 because that face ships a single 400 weight; 600 would ask for a faux-bold smear.
*/
.login-page .auth-page__title {
    font-family: var(--page-font-heading);
    font-style: normal;
    font-size: 40px;
    /* Poppins carries a real weight axis, so 600 renders the true SemiBold face (no synthesis). */
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--heading);
}

/* One uniform colour across the whole line — there is no per-word colouring in the markup. */
.login-page .auth-page__subtitle {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--text-3);
    max-width: 360px;
}

/* ---- Field type ---- */
/* 13px labels against a 15px value: the label is the quieter of the pair. */
.login-page .auth-field__label {
    font-size: 14px;
    font-weight: var(--fw-600);
    color: var(--text-2);
}

/* ---- Form type ---- */
/*
    14px is the form's base. Almost every descendant carries its own explicit size from
    auth-shell, so this alone would change nothing visible — the input is the one piece of
    form text the user actually reads and types into, and it shipped at 15px, so it is
    brought down explicitly to match rather than left contradicting the base.
*/
.login-page .login-form {
    font-size: 15px;
}
/* ---- Footer: one journey, clearly separated from the task above it ---- */
.login-form__footer {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--light-border);
}

.login-form__footer-prefix {
    font-family: var(--page-font-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--text-3);
}

/* Sentence case: the tracking above exists to stop Josefin's geometric caps crowding, so with
   the uppercase gone the letter-spacing goes with it. The submit button keeps both. */
.login-link--signup {
    font-size: 12px;
    font-weight: 500;
    margin-left: 4px;
}

/* ---- Motion: the column assembles rather than appears ---- */
/*
    Delays are bound to named rows, not nth-child: the form's first child is the hidden
    antiforgery input, so positional selectors would silently reindex if it ever moves.
*/
.auth-page__logo,
.auth-page__title,
.auth-page__subtitle,
.auth-page__banner,
.auth-field--email,
.auth-field--password,
.auth-field--code,
.login-form__submit,
.login-form__footer {
    animation: auth-rise 300ms var(--page-ease) backwards;
}

.auth-page__logo       { animation-delay: 0ms; }
.auth-page__title      { animation-delay: 40ms; }
.auth-page__subtitle   { animation-delay: 80ms; }
.auth-page__banner     { animation-delay: 120ms; }
.auth-field--email     { animation-delay: 120ms; }
.auth-field--password  { animation-delay: 160ms; }
.login-form__submit    { animation-delay: 200ms; }
.login-form__footer    { animation-delay: 240ms; }

/*
    ---- "Become a member" chooser: Bootstrap-free shell ----
    This route loads no Bootstrap, so the fixed overlay, vertical centring and backdrop
    positioning it would provide are declared here. The surface, cards, transitions, close
    button and (below) the font all come from modal-base.css + apply-modal.css via .wp-modal.
*/
.login-page .apply-modal.modal {
    position: fixed;
    inset: 0;
    z-index: 1055;
    display: none; /* the controller flips this to block on open */
    overflow-x: hidden;
    overflow-y: auto;
    padding: 16px;
}

.login-page .apply-modal .modal-dialog-centered {
    display: flex;
    align-items: center;
    min-height: calc(100% - 32px);
    margin: 0 auto;
}

/*
    Backdrop: same navy tint + 6px blur as the site's landing-page modal. Declared here (not
    left to modal-base's `body.wp-modal-open .modal-backdrop.show`) because THIS rule carries an
    id, so it out-specifies that class-only rule — leaving the tint/blur to inheritance kept the
    backdrop pinned at opacity:0 and the blur never painted. The shown state is scoped to the id
    too, so both states win consistently.
*/
.login-page #wp-apply-backdrop.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background-color: rgba(7, 20, 55, 0.55); /* --heading at 55% */
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 200ms ease;
}

.login-page #wp-apply-backdrop.modal-backdrop.show {
    opacity: 1;
}

.login-page #wp-apply-backdrop[hidden] {
    display: none;
}

/*
    The Apply-as modal keeps the site-wide Times + Josefin treatment here too, matching the
    marketing pages exactly, even though the rest of this route is Poppins. No font override:
    modal-base.css's --modal-font-heading/--modal-font-body/--modal-font-body-strong and
    .wp-modal__title stand as-is.
*/

/* ---- Responsive ---- */
/* Brand panel hidden below 860px (not stacked) — the form takes the whole width. */
@media (max-width: 860px) {
    .login-page .auth-page__panel--image { display: none; }
    .login-page .auth-page__grid { grid-template-columns: 1fr; }

    .login-page__help { top: 20px; right: 24px; }

    /*
        No leading spacer: with the brand panel gone the form starts at the top rather than
        floating in the middle of a tall single column.
    */
    .login-page__panel--form {
        grid-template-rows: auto 1fr;
        padding: 40px 24px;
        grid-column: 1;
    }

    .login-page__form-col {
        grid-row: 1;
    }
}

/* ---- Motion is dropped; the states themselves stay ---- */
@media (prefers-reduced-motion: reduce) {
    .auth-page__logo,
    .auth-page__title,
    .auth-page__subtitle,
    .auth-page__banner,
    .auth-field--email,
    .auth-field--password,
    .auth-field--code,
    .login-form__submit,
    .login-form__footer {
        animation-name: auth-fade;
    }
}