/* ==========================================================================
   Login and password recovery (S5.2)

   Loaded through printCSSHeader(['login.css']) by _aca_Login.php and
   PasswordRecovery.php — the only two pages that render this markup. Every
   value here comes from css/aca-tokens.css; no rule is forced, and the only
   breakpoints are 991px and 576px.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Page shell
   -------------------------------------------------------------------------- */

/* The school's navy with the lattice over it - painted green into orange, the
   two brand colours the old gradient used - and the card as the one light surface. */
.login-container {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    padding-top: var(--aca-navbar-h);
    background: var(--aca-chrome);
}

.login-container::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background: linear-gradient(160deg, var(--aca-green) 0%, var(--aca-orange) 100%);
    opacity: .22;
    -webkit-mask-image: var(--aca-pattern-star);
    mask-image: var(--aca-pattern-star);
    -webkit-mask-size: 56px 56px;
    mask-size: 56px 56px;
    pointer-events: none;
}

.login-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - var(--aca-navbar-h));
    padding: var(--aca-space-5);
}

/* --------------------------------------------------------------------------
   2. Card
   -------------------------------------------------------------------------- */

/* Paired with .aca-card in the markup: aca-base supplies the border and the
   surface, this rule supplies the card's own radius, shadow and width. */
.login-card {
    width: 100%;
    max-width: 900px;
    margin: 0;
    overflow: hidden;
    border-radius: var(--aca-radius-lg);
    background: var(--aca-surface);
    box-shadow: var(--aca-shadow-lg);
}

/* The card's inner row is .no-gutters so the logo panel can bleed to the
   edge; the two panels put their own gutter back. Scoped to the card so the
   Bootstrap utility keeps its meaning everywhere else on the page. */
.login-card .row.no-gutters > [class*="col-"] {
    padding-right: 15px;
    padding-left: 15px;
}

/* --------------------------------------------------------------------------
   3. Logo panel
   -------------------------------------------------------------------------- */

.logo-section {
    position: relative;
    min-height: 450px;
    padding: 40px 20px;
    background: linear-gradient(135deg, var(--aca-orange-line) 0%, var(--aca-orange-soft) 100%);
}

.logo-section::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: var(--aca-orange);
    opacity: .12;
    -webkit-mask-image: var(--aca-pattern-star);
    mask-image: var(--aca-pattern-star);
    -webkit-mask-size: 56px 56px;
    mask-size: 56px 56px;
    pointer-events: none;
}

.login-logo {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 150px;
    height: auto;
    animation: acaLoginFloat 3s ease-in-out infinite;
}

@keyframes acaLoginFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* --------------------------------------------------------------------------
   4. Form panel
   -------------------------------------------------------------------------- */

.form-section {
    padding: 50px 40px;
}

/* The form column is capped so the fields stay a comfortable measure inside
   the 900px card. */
.login-form-wrapper {
    max-width: 380px;
    margin: 0 auto;
}

.login-title {
    margin-bottom: var(--aca-space-3);
    color: var(--aca-ink);
    font-size: var(--aca-text-2xl);
    font-weight: 700;
    text-align: center;
}

.login-subtitle {
    margin-bottom: var(--aca-space-6);
    color: var(--aca-muted);
    font-size: var(--aca-text-sm);
    text-align: center;
}

/* --------------------------------------------------------------------------
   5. Fields
   --------------------------------------------------------------------------
   All three forms carry .aca-form and print their fields through the form
   kit (FormFieldFunctions.php): the visible labels, the field rhythm, the
   password group with its Show toggle and the one error look all come from
   css/aca-forms.css. Only the roomier field and the gap between the last
   field and the message region / buttons that follow it live here.
   -------------------------------------------------------------------------- */

.login-form .form-control {
    height: auto;
    padding: 12px 15px;
}

.login-form .aca-form__grid {
    row-gap: var(--aca-space-4);
    margin-bottom: var(--aca-space-4);
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */

.login-btn {
    margin-top: var(--aca-space-3);
    padding: 12px 30px;
    border: none;
    border-radius: var(--aca-radius-sm);
    background: var(--aca-green);
    color: var(--aca-on-brand);
    font-size: var(--aca-text);
    font-weight: 600;
}

.login-btn:hover,
.login-btn:focus,
.login-btn:not(:disabled):not(.disabled):active {
    background: var(--aca-green-strong);
    color: var(--aca-on-brand);
    box-shadow: var(--aca-shadow);
}

.login-btn:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.login-btn.loading::after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: var(--aca-space-2);
    border: 2px solid var(--aca-on-brand);
    border-top-color: transparent;
    border-radius: 50%;
    animation: acaLoginSpin .8s linear infinite;
}

@keyframes acaLoginSpin {
    to {
        transform: rotate(360deg);
    }
}

/* The full-width Reset password button; the password group's Show toggle keeps
   the kit's size. */
.login-form .btn-block.btn-outline-secondary {
    padding: 10px 30px;
    border-radius: var(--aca-radius-sm);
    font-size: var(--aca-text-sm);
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   7. Divider and links
   -------------------------------------------------------------------------- */

.divider-text {
    position: relative;
    margin: var(--aca-space-5) 0;
    text-align: center;
}

.divider-text::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    height: 1px;
    background: var(--aca-line);
}

.divider-text span {
    position: relative;
    padding: 0 var(--aca-space-4);
    background: var(--aca-surface);
    color: var(--aca-muted);
    font-size: var(--aca-text-xs);
}

.create-account-link {
    color: var(--aca-orange);
    font-size: var(--aca-text-sm);
    font-weight: 500;
    text-decoration: none;
    transition: color var(--aca-transition);
}

.create-account-link:hover,
.create-account-link:focus {
    color: var(--aca-orange-strong);
    text-decoration: none;
}

.create-account-link i {
    transition: transform var(--aca-transition);
}

.create-account-link:hover i {
    transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   8. Help footer
   -------------------------------------------------------------------------- */

.login-help-text {
    padding: var(--aca-space-5);
    border-top: 1px solid var(--aca-line);
    background: var(--aca-surface-2);
    color: var(--aca-muted);
    font-size: var(--aca-text-xs);
}

.help-link {
    color: var(--aca-orange);
    font-weight: 500;
    text-decoration: none;
}

.help-link:hover,
.help-link:focus {
    color: var(--aca-orange-strong);
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   9. Message regions

   Every page has its own message region id (loginError, passwordRecoveryError,
   passwordRecoveryChangePasswordError). The JS toggles the
   `hidden` attribute and swaps the Bootstrap .alert-* modifier; nothing here
   sets `display`, so `hidden` keeps working.
   -------------------------------------------------------------------------- */

.login-alert {
    margin-bottom: var(--aca-space-4);
    animation: acaLoginFadeIn .25s ease;
}

.login-alert:empty {
    padding: 0;
    border: 0;
}

@keyframes acaLoginFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* The server's own notice for ?error= - why an emailed link sent the visitor
   here. Info tone, apart from #loginError, which the script owns. */
.login-notice {
    display: flex;
    align-items: flex-start;
    gap: var(--aca-space-2);
    margin-bottom: var(--aca-space-4);
    padding: var(--aca-space-3) var(--aca-space-4);
    border: 1px solid var(--aca-info-line);
    border-left: 4px solid var(--aca-info);
    border-radius: var(--aca-radius);
    background: var(--aca-info-soft);
    color: var(--aca-info);
    font-size: var(--aca-text-sm);
    line-height: 1.5;
}

.login-notice i {
    flex-shrink: 0;
    margin-top: .25em;
}

/* The "this may take a few seconds" line under the reset button. */
.login-status {
    margin-top: var(--aca-space-2);
    color: var(--aca-muted);
    font-size: var(--aca-text-xs);
    text-align: center;
}

.login-status:empty {
    margin-top: 0;
}

/* --------------------------------------------------------------------------
   10. Responsive — 991px layout switch, 576px phone type scale
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
    .login-wrapper {
        padding: var(--aca-space-3);
    }

    .login-card {
        margin: var(--aca-space-3) 0;
        max-width: 600px;
    }

    .logo-section {
        min-height: 120px;
        padding: var(--aca-space-5) var(--aca-space-3);
    }

    .login-logo {
        max-width: 80px;
    }

    .form-section {
        padding: var(--aca-space-5) var(--aca-space-4);
    }

    .login-form-wrapper {
        max-width: 100%;
    }

    .login-title {
        margin-bottom: var(--aca-space-2);
        font-size: var(--aca-text-xl);
    }

    .login-subtitle {
        margin-bottom: var(--aca-space-5);
        font-size: var(--aca-text-sm);
    }

    .login-form .form-control {
        padding: 10px 12px;
    }

    .login-btn {
        margin-top: var(--aca-space-1);
        padding: 10px 20px;
        font-size: var(--aca-text-sm);
    }

    .login-form .btn-block.btn-outline-secondary {
        padding: 8px 20px;
        font-size: var(--aca-text-xs);
    }

    .divider-text {
        margin: var(--aca-space-4) 0;
    }

    .login-help-text {
        padding: var(--aca-space-4);
    }
}

@media (max-width: 576px) {
    .login-title {
        font-size: var(--aca-text-lg);
    }

    .login-subtitle {
        font-size: var(--aca-text-xs);
    }

    /* 16px is the threshold below which iOS Safari zooms the page on focus;
       these forms are outside the .modal-body rule in css/aca-base.css that
       gives every other field the same floor. */
    .login-form .form-control {
        font-size: max(16px, var(--aca-text-sm));
    }

    .create-account-link {
        font-size: var(--aca-text-xs);
    }
}