/**
 * Email-only login form.
 *
 * Matches the Gravity Forms sign-up form deliberately: same brand purple, same cream borderless
 * field, same bold near-black label, same square submit button. The two forms sit either side of
 * one journey, so anything else reads as a different site. The palette is duplicated rather than
 * imported because assets/css/narthex-gravity.css only loads when a Gravity Form is on the page.
 *
 * Scope: :is(#top, body) prefix, same reasoning as narthex-gravity.css. Enfold styles inputs and
 * buttons through ID-prefixed selectors (#top input[type="email"], #top .main_color input), which
 * a class-only selector loses to however late this sheet loads. :is() takes the specificity of
 * its most specific argument, so the prefix wins without an !important on every declaration, and
 * the `body` branch keeps it working on a theme with no #top wrapper.
 */

:is(#top, body) .narthex-login {
	--narthex-field-height: 3rem;
	--narthex-error: #b32d2e;
	--narthex-success: #1d7a3f;

	max-width: 26rem;
	margin: 0 auto;
}

/* ------------------------------------------------------------------ Notices. */

:is(#top, body) .narthex-login__notice {
	padding: 0.75rem 1rem;
	margin-bottom: 1.25rem;
	border-left: 4px solid currentColor;
	font-size: 0.95em;
}

:is(#top, body) .narthex-login__notice--error {
	color: var(--narthex-error);
	background: rgba(179, 45, 46, 0.07);
}

:is(#top, body) .narthex-login__notice--success {
	color: var(--narthex-success);
	background: rgba(29, 122, 63, 0.07);
}

/* ------------------------------------------------------------------ Field. */

:is(#top, body) .narthex-login__field {
	margin-bottom: 1.5rem;
}

:is(#top, body) .narthex-login__label {
	display: block;
	margin-bottom: 0.5rem;
	color: var(--narthex-ink, #1d1d1b);
	font-weight: 700;
}

:is(#top, body) .narthex-login__input,
:is(#top, body) input[type="email"].narthex-login__input {
	width: 100%;
	height: var(--narthex-field-height);
	box-sizing: border-box;
	padding: 0 1rem;
	background: var(--narthex-field-bg, #fbf3e2);
	color: var(--narthex-ink, #1d1d1b);
	border: 1px solid transparent;
	border-radius: 0;
	box-shadow: none;
	font-size: 1rem;
	line-height: normal;
}

:is(#top, body) .narthex-login__input:focus,
:is(#top, body) input[type="email"].narthex-login__input:focus {
	background: var(--narthex-field-bg, #fbf3e2);
	border-color: var(--narthex-primary, var(--narthex-primary, #8a034f));
	outline: 0;
	box-shadow: none;
}

/* ------------------------------------------------------------------ Button. */

/*
 * Every state is listed because Enfold sets button colours per state, and missing one repaints
 * the label mid-interaction.
 */
:is(#top, body) .narthex-login__button,
:is(#top, body) input[type="submit"].narthex-login__button,
:is(#top, body) button.narthex-login__button {
	display: inline-block;
	min-height: var(--narthex-field-height);
	padding: 0.85rem 2rem;
	background: var(--narthex-primary, var(--narthex-primary, #8a034f));
	color: var(--narthex-on-primary, #fff);
	border: 0;
	border-radius: 0;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	line-height: 1.2;
	cursor: pointer;
	transition: opacity 0.15s ease;
}

:is(#top, body) .narthex-login__button:hover,
:is(#top, body) .narthex-login__button:focus,
:is(#top, body) .narthex-login__button:active,
:is(#top, body) button.narthex-login__button:hover,
:is(#top, body) button.narthex-login__button:focus {
	background: var(--narthex-primary, var(--narthex-primary, #8a034f));
	color: var(--narthex-on-primary, #fff);
	opacity: 0.88;
}

:is(#top, body) .narthex-login__actions {
	margin: 0;
}

/* ------------------------------------------------------------------ Signed-in state. */

:is(#top, body) .narthex-login__signed-in {
	color: var(--narthex-ink, #1d1d1b);
}

:is(#top, body) .narthex-login__logout,
:is(#top, body) .narthex-login__logout:link,
:is(#top, body) .narthex-login__logout:visited {
	color: var(--narthex-primary, var(--narthex-primary, #8a034f));
	font-weight: 700;
	text-decoration: underline;
}

/* ------------------------------------------------------------------ Honeypot. */

/*
 * Off-screen rather than display:none, which some bots skip. Never change this rule: an
 * always-visible field would be filled by real people and lock them out.
 */
:is(#top, body) .narthex-login__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/* ------------------------------------------------------------------ Consent notice. */

/*
 * Checkbox and wording on one row, the text block aligned to the top of the box rather than
 * centred on it: the sentence runs to several lines and centring would leave the box floating
 * beside the middle of the paragraph.
 *
 * The box keeps its native appearance. A restyled checkbox is one more thing to get wrong in a
 * consent flow, and this is the one control on the page whose state has to be unambiguous.
 */
:is(#top, body) .narthex-login__consent {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	margin: 0 0 1.25rem;
}

:is(#top, body) .narthex-login__consent-box {
	flex: 0 0 auto;
	/* Optical alignment with the first line of the label, which sits on a 1.45 line-height. */
	margin-top: 0.2em;
}

/*
 * No font-weight here on purpose. Enfold styles form labels through #top .main_color label,
 * which is (1,1,1) and beats anything this file can say short of qualifying the element, so a
 * weight declared here would lose silently. The theme's label weight is also what the mockup
 * shows, so this inherits it deliberately rather than declaring something that does not apply.
 */
:is(#top, body) .narthex-login__consent-text {
	font-size: 0.875rem;
	line-height: 1.45;
	color: var(--narthex-ink, #1d1d1b);
	cursor: pointer;
}

:is(#top, body) .narthex-login__consent-text a,
:is(#top, body) .narthex-login__consent-text a:link,
:is(#top, body) .narthex-login__consent-text a:visited {
	color: var(--narthex-primary, #8a034f);
	text-decoration: underline;
}