/*
    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 ----
    0, not 20px. Each field carries a permanently reserved error slot below it (18px min-height
    + 6px margin = 24px) so a validation message never shifts the form. That slot already spends
    the field-to-field gap; adding 20px on top would push the real gap to ~44px, which is looser
    than where this started rather than tighter.
*/
/*
    Every gap below is the gap you actually SEE, which is why the numbers here look smaller than
    the spec: each field ends in a permanently reserved error slot (so a validation message never
    shifts the form), and that slot is part of the field. The slot is tuned to 20px total
    (18px min-height + 2px margin) and IS the field-to-field gap; margins then top it up.
*/
.login-page .auth-field__error {
    margin-top: 2px;
}

/* Field -> field = the 20px slot alone. */
.auth-field + .auth-field {
    margin-top: 0;
}

/* ---- 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: 14px;
    font-weight: var(--fw-600);
    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;
}

/* Clears the reveal toggle so a long value never runs under it. Double-class so it out-specifies
   the .login-page .auth-field__input padding recipe (which sets padding-right:16 otherwise). */
.login-page .auth-field__input.auth-field__input--password {
    padding-right: 48px;
}

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

/*
    ---- Password field: label and recovery share the row above the input ----
    The recovery path sits exactly where the eye already is when it reaches the field it
    recovers, and it costs zero vertical space.

    Grid areas place the link top-right while it stays AFTER the control in the DOM, so the
    tab order is input -> reveal -> forgot (never forgot -> input). Placement is visual only;
    focus order follows the DOM.
*/
.auth-field--password {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "label   forgot"
        "control control"
        "error   error";
    column-gap: 16px;
}

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

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

.auth-field--password .auth-field__error {
    grid-area: error;
}

.login-field__forgot {
    grid-area: forgot;
    align-self: baseline;
    justify-self: end;
    font-size: 14px;
    font-weight: var(--fw-600);
}

/*
    ---- Field focus ----
    The shell deliberately gives inputs no ring — the border swap alone carries focus there. This
    route adds one, so the focused field is unmistakable against a two-field form. It is bound to
    :focus (not :focus-visible): putting a caret in a text field is always a deliberate act, and
    the rest state is untouched, so both fields stay identical until one is actually focused.
*/
.login-page .auth-field__input:focus {
    background-color: var(--white);
    border-color: var(--primary);
    /* Ring appears only on :focus — the rest state stays ring-free and identical for both fields. */
    box-shadow: var(--page-focus-ring); /* 0 0 0 3px rgba(98,0,238,.12) — --primary @ 12% */
}

/* ---- Password reveal: a real button with a real hit area and a real state ---- */
.login-field__reveal {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: var(--page-radius-icon);
    background-color: transparent;
    color: var(--text-4);
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
}

/* 32px visual box, 44px hit area — expanded with an overlay so the paint doesn't grow. */
.login-field__reveal::after {
    content: "";
    position: absolute;
    inset: -6px;
}

.login-field__reveal:hover {
    background-color: var(--light-border);
    color: var(--text-2);
}

.login-field__reveal:active {
    background-color: var(--dark-bg);
}

.login-field__reveal:focus {
    outline: none;
}

.login-field__reveal:focus-visible {
    box-shadow: var(--page-focus-ring);
}

/* Single Iconsax eye; it inherits the button's colour and tints --primary when the password is
   revealed (aria-pressed), so the control's state is visible without swapping glyphs. */
.login-field__reveal-icon {
    transition: color 150ms ease;
}

.login-field__reveal[aria-pressed="true"] {
    color: var(--primary);
}

/* ---- Submit: full width here; the shell owns every colour and state ---- */
/* Sentence case, like every other control in the product — all-caps reads as a banner, not a
   button. The tracking went with the uppercase; it only existed to stop Josefin's caps crowding. */
/* 8px, not 28: the password field's 20px error slot sits between its input and this button, so
   8px on top lands the visible input-to-button gap at 28px. */
.login-form__submit {
    width: 100%;
    height: 48px;
    margin-top: 8px;
    padding: 0 16px;
    border-radius: 9px;
    font-size: 15px;
}

/* ---- 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);
}

/*
    Design-system input recipe (components/form-controls.css): white with a 1px --dark-border at
    rest, --primary border on focus, --text-5 on hover — not the shell's grey --input-bg fill. A
    grey fill reads as disabled; white-with-a-border reads as ready.
*/
.login-page .auth-field__input {
    height: 44px;
    padding: 0 16px;
    border-radius: 8px;
    font-family: var(--page-font-body);
    font-size: 15px;
    font-weight: 500;
    color: var(--text-1);
    background-color: var(--white);
    border: 1px solid var(--dark-border);
}

.login-page .auth-field__input:hover {
    border-color: var(--text-5);
}

.login-page .auth-field__input::placeholder {
    color: var(--text-4);
}

/* ---- 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;
}

.login-page .auth-field__input {
    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: 14px;
    font-weight: var(--fw-600);
    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--code      { 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;
}

/*
    Poppins, here only — the site modal is Times + Josefin; on this route every word is Poppins
    to match the rest of the page. Redefining the three modal font vars covers body/label text;
    the title sets its family directly, so it is overridden below.
*/
.login-page .wp-modal {
    --modal-font-heading: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
    --modal-font-body: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
    --modal-font-body-strong: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
}

.login-page .wp-modal__title {
    font-family: var(--modal-font-heading);
    font-style: normal;
    font-weight: 600;
}

/* ---- 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;
    }
}