/* Login screen (home.php + login.php, via tpl/login.inc).
 *
 * Deliberately its own small stylesheet rather than edits inside main.css:
 * the old modal styling this reused was built for a form sitting on a dark
 * overlay (.modal-fade-screen), which is why .login--elements p was white —
 * invisible once the same class rendered on a plain white page. New classes
 * here (login-box*) avoid inheriting that rule at all.
 */

.login-box {
  max-width: 26em;
  margin: 4em auto;
  background: #fff;
  padding: 2.5em 2.5em 2em;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
}

.login-box__intro {
  color: #282828;
  margin: 0 0 1.5em;
  line-height: 1.5;
}

.login-box__error {
  background: #fdecea;
  border: 1px solid #f5c6cb;
  color: #a12622;
  padding: .75em 1em;
  border-radius: 3px;
  margin: 0 0 1.5em;
  font-size: .95em;
}

.login-box__intro a {
  color: #1696C7;
  text-decoration: underline;
}

.login-box__intro a:hover,
.login-box__intro a:focus {
  color: #114B5F;
}

.login-box__field {
  margin-bottom: 1.25em;
}

.login-box__field label {
  display: block;
  font-weight: 700;
  text-transform: uppercase;
  font-size: .8em;
  letter-spacing: .02em;
  color: #114B5F;
  margin-bottom: .4em;
}

.login-box__field input[type=text],
.login-box__field input[type=password] {
  width: 100%;
  box-sizing: border-box;
  padding: .65em .75em;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 1em;
  font-family: inherit;
  transition: border-color .2s, box-shadow .2s;
}

.login-box__field input:focus {
  outline: none;
  border-color: #1696C7;
  box-shadow: 0 0 0 3px rgba(22, 150, 199, .15);
}

.login-box__submit {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  background: #1696C7;
  color: #fff;
  border: 0;
  padding: .7em 1.75em;
  font-size: 1em;
  font-weight: 700;
  border-radius: 3px;
  cursor: pointer;
  transition: background .2s;
}

.login-box__submit:hover,
.login-box__submit:focus {
  background: #114B5F;
  color: #fff;
}

.login-box__submit .icon-lock {
  font-size: .9em;
}

.login-box__forgot {
  margin-top: 1.25em;
  margin-bottom: 0;
  font-size: .9em;
}

.login-box__forgot a {
  color: #1696C7;
}

.login-box__forgot a:hover {
  color: #114B5F;
}

@media (max-width: 480px) {
  .login-box {
    margin: 1.5em 1em;
    padding: 1.75em;
  }
}