/**
 * framework/member-login — the members sign in form.
 * Uses the theme's own control variables so the fields match the Contact form.
 */

/*
 * The panel. Doubled class because WordPress prints an inline layout rule,
 * .wp-container-core-group-is-layout-… > :where(…), at the same specificity as
 * a single class but later in the document, so a plain .ibia-login max-width
 * loses the tie and the form stretches to the full 820px column.
 *
 * Tint, radius and shadow are the site's grey panel, the one the Events and
 * Resources filter sidebars use, so the form reads as a sign in card rather
 * than loose fields on an empty page.
 */
.ibia-login.ibia-login {
	box-sizing: border-box;
	max-width: 32rem;
	margin-inline: auto;
	padding: 40px;
	border-radius: var(--fw-radius, 4px);
	background-color: var(--ibia-ev-tint, rgba(148, 159, 179, 0.2));
	box-shadow: var(--ibia-ev-shadow, 2px 2px 12px 0 rgba(0, 0, 0, 0.3));
	color: var(--fw-navy, #013563);
}

/* The heading and standfirst are inner blocks, so they carry the editor's own
   top margin into the top of the card. */
.ibia-login > :first-child {
	margin-block-start: 0;
}

.ibia-login__form {
	display: flex;
	flex-direction: column;
	gap: var(--fw-gutter-tight, 1rem);
	margin-block-start: var(--fw-gutter, 1.5rem);
}

.ibia-login__field {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0;
}

.ibia-login__field label {
	font-weight: 500;
}

/*
 * "solid" is written out rather than taken from --fw-input-border, which holds
 * a width alone (1px). Inside the shorthand that produced "border: 1px #013563",
 * which has no style keyword, so the whole declaration was invalid and dropped
 * — the fields rendered with no stroke at all. 0.8px matches the Contact form.
 *
 * border-box so --fw-input-height is the field's height. With content-box the
 * 48px minimum sat on top of the 12px padding and both borders and the fields
 * came out 72px tall.
 */
.ibia-login__field input {
	box-sizing: border-box;
	width: 100%;
	min-height: var(--fw-input-height, 3rem);
	padding: var(--fw-input-pad-y, 0.75rem) var(--fw-input-pad-x, 1rem);
	border: 0.8px solid var(--fw-input-border-colour, #013563);
	border-radius: var(--fw-input-radius, 4px);
	font: inherit;
	color: inherit;
	background: #fff;
}

.ibia-login__field input:focus-visible {
	outline: var(--fw-focus-width, 2px) solid var(--fw-focus-colour, #013563);
	outline-offset: var(--fw-focus-offset, 2px);
	border-color: var(--fw-input-border-focus, currentColor);
}

.ibia-login__actions {
	margin: 0;
}

/*
 * The submit is a bare <button>, so it never picked up a block button style and
 * fell back to the WordPress default dark grey. Painted as the navy style here,
 * and the hover inverts fill and outline exactly as .is-style-ibia-navy does.
 *
 * Qualified by the wrapper because WordPress prints
 * :root :where(.wp-element-button, .wp-block-button__link) — also one class
 * worth of specificity, but later in the document — which sets that grey and
 * border-width: 0. A bare .ibia-login__submit loses the tie at rest; only the
 * :hover rule, carrying a pseudo-class, was winning.
 */
.ibia-login .ibia-login__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 39px;
	padding: 0 20px;
	border: var(--fw-btn-border, 1px) solid var(--fw-navy, #013563);
	border-radius: var(--fw-radius, 4px);
	background-color: var(--fw-navy, #013563);
	color: var(--fw-white, #fff);
	cursor: pointer;
	font: inherit;
	font-weight: 500;
	text-decoration: none;
	transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.ibia-login .ibia-login__submit:hover,
.ibia-login .ibia-login__submit:focus-visible {
	background-color: var(--fw-white, #fff);
	border-color: var(--fw-navy, #013563);
	color: var(--fw-navy, #013563);
}

.ibia-login__help {
	margin: 0;
	font-size: var(--fw-small-size, 0.875rem);
}

/*
 * "Please note" — the same panel as the failed sign in message below, but with
 * a navy edge rather than the error red, which is reserved for something having
 * gone wrong. Swap the border-inline-start-color for var(--fw-error) to make it
 * red instead.
 */
.ibia-login .ibia-login__note {
	box-sizing: border-box;
	margin-block: var(--fw-gutter-tight, 1rem);
	padding: 12px 16px;
	border-inline-start: 2.4px solid var(--fw-navy, #013563);
	border-radius: var(--fw-input-radius, 4px);
	background: var(--fw-bg-grey, #f2f2f2);
	color: var(--fw-navy, #013563);
}

.ibia-login .ibia-login__note > * {
	margin-block: 0;
}

/* The theme gives headings a rule underneath through ::after; inside a note box
   that reads as a stray line, so it is turned off here. */
.ibia-login .ibia-login__note-title {
	margin: 0 0 4px;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	text-decoration: none;
}

.ibia-login .ibia-login__note-title::after {
	display: none;
}

/* A failed attempt, and the signed in confirmation. */
.ibia-login__notice,
.ibia-login__signed-in {
	margin-block: var(--fw-gutter-tight, 1rem);
	padding: 0.75rem 1rem;
	border-inline-start: 3px solid;
	border-radius: var(--fw-input-radius, 4px);
	background: var(--fw-bg-grey, #f5f7fa);
}

.ibia-login__notice {
	border-inline-start-color: var(--fw-error, #b3261e);
}

.ibia-login__signed-in {
	border-inline-start-color: var(--fw-green, #a3c362);
}

@media (max-width: 600px) {
	.ibia-login.ibia-login {
		padding: 24px 20px;
	}
}