/*
 * LSO Registration 2026
 *
 * The font is loaded from a <link> in registration.php, not with @import here.
 * An @import inside a stylesheet is discovered only after that stylesheet has
 * been downloaded and parsed, so it serialises two render-blocking round trips
 * where a <link> in the head issues them in parallel. On a 1.3KB stylesheet
 * that difference is most of the page's perceived load time.
 *
 * Source Sans 3, not Source Sans Pro: Adobe renamed the family at version 3 and
 * Google Fonts retired the old name. The previous @import for "Source Sans Pro"
 * no longer resolves to a served family, so the page has silently been
 * rendering in the sans-serif fallback.
 */

body {
    font-family: 'Source Sans 3', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
                 'Segoe UI', Helvetica, Arial, sans-serif;
    background-color: #f8f9fa;
}

.container {
    max-width: 450px;
    margin: auto;
}

.registration-form {
    width: 100%;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

.logo {
    display: block;
    margin: 0 auto 20px;
    max-width: 100%;
    height: auto;
}

.reg-heading {
    font-size: 1.5rem;
    font-weight: 700;
    color: #6A0032;
}

/*
 * ---------------------------------------------------------------------------
 * Scoping
 * ---------------------------------------------------------------------------
 * These were previously bare `label` and `input` element selectors. Being
 * unscoped, they applied to every label and input on the page — including the
 * ones inside the Bootstrap modal and anything added later — and they beat
 * Bootstrap's own component styles by virtue of load order, not specificity.
 *
 * That is what the `!important` flags on .modal-body-text and .modal-title-text
 * were compensating for. With the selectors scoped to the form, the leak is
 * gone and so is the need for the flags: there is no longer a specificity
 * fight to win.
 */
.registration-form label {
    color: #6A0032;
    font-weight: bold;
    font-size: 1.11875rem;
}

.registration-form input {
    color: #505050;
    border: .0625rem solid #cacaca;
    border-radius: .3125rem;
    width: 100%;
    height: 39px;
    font-size: 1rem;
    margin-top: 5px;
    transition: border-color 0.3s ease-in-out;
}

.registration-form input:focus {
    border-color: #9d004a;
}

/*
 * :focus-visible, in addition to :focus.
 *
 * The border-colour change alone is a ~1px colour shift, which does not meet
 * the 3:1 non-text contrast requirement for a focus indicator (WCAG 2.2 SC
 * 1.4.11 / 2.4.11). An outline with an offset is unambiguous. :focus-visible
 * means a mouse click does not paint a ring, only keyboard navigation does.
 */
.registration-form input:focus-visible,
.btn-lso:focus-visible,
.btn-close:focus-visible {
    outline: 2px solid #9d004a;
    outline-offset: 2px;
}

/* Bootstrap's .is-invalid, restated so it wins against the scoped rule above. */
.registration-form input.is-invalid {
    border-color: #B21E5E;
}

.field-error {
    color: #B21E5E;
    font-size: .875rem;
    line-height: 1.25rem;
    min-height: 0;
    margin-top: .25rem;
}

.field-error:empty {
    margin-top: 0;
}

.reg-alert {
    background-color: #FDF2F6;
    border: 1px solid #B21E5E;
    border-radius: .3125rem;
    color: #6A0032;
    font-size: .9375rem;
    line-height: 1.4;
    margin-bottom: 1rem;
    padding: .75rem 1rem;
    text-align: left;

    /* pre-wrap so the multi-line BOOT_DEBUG detail on a 500 stays readable.
       Normal single-line messages are unaffected. */
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/*
 * ---------------------------------------------------------------------------
 * Honeypot
 * ---------------------------------------------------------------------------
 * Positioned off-screen, NOT display:none and NOT visibility:hidden.
 *
 * Form-filling bots have adapted: skipping fields that are display:none,
 * visibility:hidden, opacity:0 or type="hidden" is cheap and now common,
 * because those are the four tells everyone used. A field that is laid out
 * normally and merely painted outside the viewport still reads as a live,
 * visible text input to anything short of a full rendering engine doing
 * geometry checks.
 *
 * Keep the 1px box rather than a 0px one — some heuristics treat zero-size
 * elements as hidden too.
 */
.hp-field {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.btn-lso {
    color: #fff;
    background-color: #6A0032;
    border: .0625rem solid #B21E5E;
    cursor: pointer;
    display: inline-block;
    line-height: 1.5rem;
    margin: .25rem;
    padding: .5rem 3rem;
    transition: background-color 300ms ease-in-out;
    border-radius: .2rem;
    background-clip: padding-box;
}

.btn-lso:hover:not(:disabled) {
    background-color: #9d004a;
    color: #fff;
}

.btn-lso:disabled {
    background-color: #9b7386;
    border-color: #9b7386;
    cursor: not-allowed;
    opacity: 1;
}

/*
 * The !important flags are gone from these two. They existed only to outrank
 * the unscoped `label` / `input` selectors above, which no longer reach into
 * the modal.
 */
.modal-body-text {
    font-size: 20px;
}

.modal-title-text {
    font-size: 24px;
    font-weight: bold;
}

/*
 * ---------------------------------------------------------------------------
 * Reduced motion
 * ---------------------------------------------------------------------------
 * Honours the OS-level "reduce motion" setting, which people set because
 * animation triggers migraine, nausea or vestibular symptoms. The !important
 * here is legitimate and is the documented pattern: a user's accessibility
 * preference must outrank both our styles and Bootstrap's modal fade.
 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}