/*
 * src/main/webapp/css/loginModal.css
 * Author: Miguel Fernandez
 * Blue Team - Robert Breutzmann, Miguel Fernandez, Carolina Rodriguez, Sara White
 * Primary Author/Owner - Miguel Fernandez
 * CSD 460 - Capstone Project - Marina Website Project
 *
 * What is particular to the three account popups - Sign in, Reset your
 * password and Change your password. They are the shared .modal now, so the
 * backdrop, box, header, close button, fields (.form-group, .field-error)
 * and buttons (.btn-primary) all come from site.css. Every color comes from
 * a semantic variable - no hex values.
 *
 * The submit button is .btn-primary: the rule is one primary per view, and
 * an open popup is its own view.
 */

/* A server message at the top of the popup - the failed sign-in, the
   lockout rule, a refused reset. .form-banner and .callout-badge are sized
   for a page, so they are pulled in to fit the popup here. */
.login-modal__banner {
	max-width: none;
	margin: 0 0 1rem;
}

.login-modal__note {
	margin: 0 0 1rem;
}

.login-modal__form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* Full width: in a narrow popup with one action, a short button floating
   at the left reads as unfinished. */
.login-modal__submit {
	align-self: stretch;
	text-align: center;
}

/* "Forgot password?" - sits right under the Password field, pulled up
   against the form's 1rem gap so it reads as belonging to that field.
   Quieter than the Sign in button: a plain text link look. */
.login-modal__forgot {
	margin: -0.5rem 0 0;
	text-align: right;
	font-size: 0.85rem;
}

.login-modal__link {
	padding: 0;
	border: none;
	background: none;
	font: inherit;
	color: var(--color-link);
	cursor: pointer;
}

.login-modal__link:hover {
	color: var(--color-link-hover);
	text-decoration: underline;
}

/* Keyboard focus keeps the link colour: the hover colour is too light on
   white to be the only thing showing where focus is. */
.login-modal__link:focus-visible {
	text-decoration: underline;
	outline: 2px solid var(--color-input-border-focus);
	outline-offset: 2px;
	border-radius: 3px;
}

.login-modal__alt {
	margin: 1.25rem 0 0;
	font-size: 0.9rem;
	color: var(--color-text-body);
}