/* =========================================================
   SIGN IN

   Loaded by login.php, forgot_password.php and
   reset_password.php, after custom.css, so these rules win
   where they overlap.

   A navy ground drawn in CSS, the logo in a bar across the
   top, and the form centred on a pale blue panel. White
   fields with an icon inside each one.

   Nothing here loads an image, so there is no photograph to
   source, nothing to license and nothing for a church to get
   wrong.

   The old .login-page and .login-brand rules are left in
   custom.css. Overriding is reversible; deleting is not.
========================================================= */

.login-page {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    /* No menu bar on these three pages, so the ground gets
       the whole window. */
    min-height: 100vh;
    /* Was 108px at the top to clear the logo floating in the
       corner. The logo is inside the panel now, so the panel
       can sit where it belongs - centred. */
    padding: 40px 20px 56px;

    /* The ground itself is painted on <body>, below. Put it
       here as well and any strip of page the flex container
       does not cover shows as a seam. */
    background: transparent;
}


/* =========================================================
   THE LOGO, ABOVE THE WELCOME

   It used to sit in the top-left corner of the page, which
   read as a watermark rather than as the thing you are
   signing in to. Centred above the heading it is the first
   thing you look at, which is what a church's own mark
   should be on its own sign-in page.

   Same position on desktop and phone - there is no layout
   here that would justify moving it.
========================================================= */

.login-mark {
    /* Was absolutely positioned against the page. Now it is
       simply the first thing in the panel. */
    position: static;

    display: flex;
    justify-content: center;

    margin: 0 0 22px;
    padding: 0;
    border: 0;
}

.login-mark img {
    display: block;

    /* Height drives it and width follows, because the
       artwork is wider than it is tall and a fixed width
       would crop differently if the file is ever replaced. */
    height: 100px;
    width: auto;

    /* Never wider than the panel it sits in, whatever
       artwork a church drops in. */
    max-width: 100%;

    /* The logo is navy on transparent, so on a navy ground
       it would disappear. Knocked out to white. */
    filter: brightness(0) invert(1);
    opacity: .95;
}


/* =========================================================
   THE PANEL

   A pale blue haze rather than a card: enough to lift the
   form off the ground and hold it together, not so much
   that it becomes a box.
========================================================= */

.login-page > .login-container {
    position: relative;

    width: 100%;
    max-width: 466px;

    padding: 38px 40px 34px;

    background: rgba(173, 196, 255, .10);
    border: 1px solid rgba(188, 206, 255, .20);
    border-radius: 20px;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    box-shadow: 0 24px 60px rgba(4, 8, 30, .28);
}

/* The card itself has no styling left to do - the panel is
   the ground now. */
.login-page .login-card {
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}


/* =========================================================
   THE WELCOME
========================================================= */

.login-page .login-card h3 {
    margin: 0;

    color: #ffffff;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -.02em;
    text-align: center;
}

.login-page .login-subtitle {
    margin: 7px 0 0;

    color: rgba(255, 255, 255, .72);
    font-size: 15px;
    text-align: center;
}

.login-rule {
    width: 46px;
    height: 3px;
    margin: 15px auto 26px;

    background: #eb6834;
    border-radius: 2px;
}


/* =========================================================
   THE FIELDS

   White and solid. These get used on an office computer in
   a bright room, often by somebody who is not young, so
   contrast matters more than style here.
========================================================= */

.login-page .login-field {
    margin-bottom: 16px;
}

.login-page .login-field label {
    display: block;
    margin: 0 0 7px;

    color: rgba(255, 255, 255, .82);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
}

.login-page .login-input-wrap {
    position: relative;
}

.login-field-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);

    color: #8b93a8;
    font-size: 15px;

    /* Clicking the icon should put the cursor in the field,
       not swallow the click. */
    pointer-events: none;
    z-index: 2;
}

.login-page .login-input-wrap input {
    width: 100%;
    height: 54px;

    padding: 0 46px;

    background: #ffffff;
    border: 1px solid transparent;
    border-radius: 9px;

    color: #1b2130;
    font-size: 15px;

    box-shadow: 0 1px 3px rgba(5, 12, 40, .2);
}

.login-page .login-input-wrap input::placeholder {
    color: #9aa0b0;
}

.login-page .login-input-wrap input:focus {
    outline: none;
    border-color: #8d96f0;
    box-shadow: 0 0 0 3px rgba(141, 150, 240, .45);
}

/* The password field has no icon on the right, so it does
   not need the room. */
.login-page .login-field input[type="text"],
.login-page .login-field input[type="email"] {
    padding-right: 16px;
}

.login-page .login-field input[type="password"] {
    padding-right: 48px;
}

.login-password-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);

    width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: none;
    border: 0;
    border-radius: 7px;

    color: #6b7382;
    cursor: pointer;
    z-index: 2;
}

.login-password-toggle:hover {
    background: #f1f2f7;
    color: #1b2130;
}


/* ---------- forgot password ---------- */

.login-page .login-forgot {
    margin-top: 10px;
    text-align: right;
}

.login-page .login-forgot a {
    color: #a9b4ff;
    font-size: 14px;
    text-decoration: none;
}

.login-page .login-forgot a:hover {
    color: #ffffff;
    text-decoration: underline;
}


/* ---------- the button ---------- */

.login-page .login-button {
    width: 100%;
    height: 54px;
    margin-top: 20px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    background: #4b56d2;
    border: 0;
    border-radius: 9px;

    color: #ffffff;
    font-size: 16.5px;
    font-weight: 700;
    letter-spacing: .01em;

    cursor: pointer;
    box-shadow: 0 8px 22px rgba(40, 52, 170, .5);
}

.login-page .login-button:hover {
    background: #3f49c4;
}


/* =========================================================
   MESSAGES

   Both sit on the panel, so they carry their own ground
   rather than borrowing the white of a card.
========================================================= */

.login-page .login-error,
.login-page .login-success {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    margin-bottom: 18px;
    padding: 13px 15px;

    border-radius: 9px;
    font-size: 14.5px;
    line-height: 1.5;
    text-align: left;
}

.login-page .login-error {
    background: rgba(220, 70, 70, .18);
    border: 1px solid rgba(255, 140, 140, .4);
    color: #ffd4d4;
}

.login-page .login-success {
    background: rgba(45, 180, 120, .18);
    border: 1px solid rgba(110, 231, 183, .4);
    color: #c8f5e1;
}

.login-page .login-error i,
.login-page .login-success i {
    margin-top: 2px;
}

/* "Back to login" and the like, under the form. */
.login-page .login-card > a,
.login-page .login-back a {
    color: #a9b4ff;
    text-decoration: none;
}


/* =========================================================
   THE FOOT

   The lavender copyright bar sat under a full-height page
   and looked like a second footer, so it is hidden on these
   three pages only.

   The version number stays. "Which version are you on" is
   the first question about any bug.
========================================================= */

.login-page ~ .foot_copy {
    display: none;
}

.login-page ~ .app-version {
    position: absolute;
    right: 0;
    left: 0;
    bottom: 20px;

    margin: 0;

    color: rgba(255, 255, 255, .45);
    font-size: 12px;
    text-align: center;
}

.login-page ~ .app-version a {
    color: rgba(255, 255, 255, .45);
    text-decoration: none;
}

.login-page ~ .app-version a:hover {
    color: rgba(255, 255, 255, .85);
}

/* The version line is positioned against the page, so the
   page has to be the thing it is positioned against.

   The background colour is the first stop of the gradient
   above. This stylesheet only loads on the three sign-in
   pages, so nothing else is affected - and it means any gap
   above or below the page is navy rather than a white strip. */
body {
    position: relative;

    /* Three shafts of light across a navy field, with a warm
       cast in one corner and the church's orange in the
       other. Drawn rather than photographed, so there is no
       image to source and nothing to download.

       It lives on <body> rather than on .login-page so that
       it covers the whole window however tall the form is.
       This stylesheet only loads on the three sign-in pages,
       so nothing else in the app is touched. */
    min-height: 100vh;

    background:
        linear-gradient(104deg, transparent 18%, rgba(255,255,255,.055) 23%, transparent 28%),
        linear-gradient(104deg, transparent 34%, rgba(255,255,255,.075) 41%, transparent 47%),
        linear-gradient(104deg, transparent 56%, rgba(255,255,255,.05)  61%, transparent 66%),
        radial-gradient(120% 90% at 22% 0%,   rgba(104,122,255,.42), transparent 58%),
        radial-gradient(100% 80% at 92% 100%, rgba(235,104,52,.20),  transparent 60%),
        linear-gradient(162deg, #0a1440 0%, #132a6e 54%, #09102f 100%);

    background-attachment: fixed;
}


/* =========================================================
   SMALL SCREENS
========================================================= */

@media (max-width: 575px) {

    .login-page {
        align-items: flex-start;
        /* Also had 92px of clearance for the floating logo. */
        padding: 34px 16px 56px;
    }

    /* Fixed attachment judders on iOS and costs nothing to
       drop at this width. */
    body { background-attachment: scroll; }

    /* The top/left/right offsets here were positioning the
       logo against the page. It is centred inside the panel
       on every width now, so there is nothing left to say -
       only the size changes. */
    .login-mark {
        margin-bottom: 18px;
    }

    .login-mark img {
        height: 68px;
    }

    .login-page > .login-container {
        padding: 28px 22px 26px;
        border-radius: 16px;
    }

    .login-page .login-card h3 { font-size: 25px; }

    .login-rule { margin: 13px auto 22px; }
}