/* Layout adjustments for the decommissioned page; everything else comes from the login page styles. */

/* The heading holds only the brand name, so it is larger than the login page's "Welcome to MyOpayo". */
.login-box.decommissioned-box > .login-box__welcome {
    font-size: 2.5em;
    line-height: 1.2;
}

/* The larger heading needs less padding than the login box's 1.25em; the border and radius are unchanged. */
@media (min-width: 768px) {
    .login-box.decommissioned-box > .login-box__welcome {
        padding: 0.5em;
    }
}

.decommissioned-content {
    text-align: left;
}

.decommissioned-content p {
    margin-bottom: 15px;
}

/* The form panel supplies its own padding; no space may be left below it, or the page background shows through. */
.decommissioned-content p:last-child {
    margin-bottom: 0;
}

.decommissioned-steps {
    margin-bottom: 15px;
    padding-left: 20px;
}

/* The heading is an h1 for document structure, but keeps the weight of the login page's welcome line. */
.login-box.decommissioned-box > .login-box__welcome {
    font-weight: normal;
}

/* The key message, so it reads before the instructions. */
.decommissioned-lead {
    font-size: 1.15em;
    font-weight: bold;
}

/* Full-width button as the last element, matching the login page's submit button. */
.decommissioned-action {
    margin: 5px 0 0;
}

/*
 * The login box sits at a fixed offset from the top that suits its height. This box is taller and its
 * height depends on the environment, so the page is a full-height column and the box takes the free
 * space above and below it, which centres it between the banners and the cookie notice.
 */
body.route--decommissioned {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body.route--decommissioned > .container {
    margin-top: auto;
    margin-bottom: auto;
    padding-top: 20px;
    padding-bottom: 20px;
}

.login-box.decommissioned-box {
    margin-top: 0;
}