/* Final clarity layer for public registration calls-to-action and login copy. */
html body.auth-page[data-peso-page$="-login"] .auth-form-heading {
    width: 100% !important;
    display: grid !important;
    justify-items: center !important;
    align-items: center !important;
    text-align: center !important;
}

html body.auth-page[data-peso-page$="-login"] .auth-form-heading > p,
html body.auth-page[data-peso-page$="-login"] .auth-form-heading .auth-login-subtitle,
html body.auth-page[data-peso-page$="-login"] .auth-form-heading .admin-login-instruction {
    width: 100% !important;
    max-width: 38ch !important;
    margin: 0 auto !important;
    color: var(--auth-muted) !important;
    text-align: center !important;
    text-wrap: balance;
}

/* The landing-page registration action stays legible in both themes. */
html body[data-peso-page="index"] a.ref-button--outline[href*="jobseeker_register"] {
    border: 2px solid #087443 !important;
    color: #075f39 !important;
    background: #fff !important;
    -webkit-text-fill-color: #075f39 !important;
    text-decoration: none !important;
    box-shadow: 0 8px 20px rgba(7, 95, 57, .1) !important;
}

/* The current Job Finder landing header uses this registration control. */
html body[data-peso-page="index"].jf-site .jf-header .jf-header__actions a.jf-header__register[href*="jobseeker_register"],
html body[data-peso-page="index"].jf-site .jf-header .jf-header__actions a.jf-header__register[href*="jobseeker_register"]:visited {
    border-color: #086a48 !important;
    color: #ffffff !important;
    background: #086a48 !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: none !important;
}

html body[data-peso-page="index"].jf-site .jf-header .jf-header__actions a.jf-header__register[href*="jobseeker_register"]:is(:hover, :focus-visible) {
    border-color: #063c2d !important;
    color: #ffffff !important;
    background: #063c2d !important;
    -webkit-text-fill-color: #ffffff !important;
}

html body[data-peso-page="index"] a.ref-button--outline[href*="jobseeker_register"] :is(i,span) {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}

html body[data-peso-page="index"] a.ref-button--outline[href*="jobseeker_register"]:is(:hover,:focus-visible) {
    border-color: #075f39 !important;
    color: #fff !important;
    background: #075f39 !important;
    -webkit-text-fill-color: #fff !important;
}

html[data-theme="dark"] body[data-peso-page="index"] a.ref-button--outline[href*="jobseeker_register"],
html body.dark-mode[data-peso-page="index"] a.ref-button--outline[href*="jobseeker_register"] {
    border-color: #8ed8b4 !important;
    color: #f4fff8 !important;
    background: #123a2b !important;
    -webkit-text-fill-color: #f4fff8 !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .2) !important;
}

html[data-theme="dark"] body[data-peso-page="index"] a.ref-button--outline[href*="jobseeker_register"]:is(:hover,:focus-visible),
html body.dark-mode[data-peso-page="index"] a.ref-button--outline[href*="jobseeker_register"]:is(:hover,:focus-visible) {
    border-color: #f0c735 !important;
    color: #062b1e !important;
    background: #f0c735 !important;
    -webkit-text-fill-color: #062b1e !important;
}

@media (max-width: 560px) {
    html body.auth-page[data-peso-page$="-login"] .auth-form-heading > p { max-width: 30ch !important; }
    html body[data-peso-page="index"] a.ref-button--outline[href*="jobseeker_register"] { min-height: 50px !important; }

    html body.auth-page[data-peso-page="employer-login"] .role-login-card {
        width: 100% !important;
        padding-inline: 0 !important;
    }

    html body.auth-page[data-peso-page="employer-login"] .auth-form-wrap {
        width: 100% !important;
        max-width: none !important;
        padding: 32px 24px 28px !important;
    }

    html body.auth-page[data-peso-page="employer-login"] :is(.auth-form, .auth-field, .auth-input-wrap, .auth-submit) {
        width: 100% !important;
        max-width: none !important;
    }
}