/**
 * Promoted Charity Jobs Core — auth pages design (registration, login,
 * reset password).
 *
 * Self-contained: this file defines its own copy of the shared design
 * tokens (:root custom properties) rather than depending on
 * listings.css also being loaded on the same page — a page carrying
 * only [pcj_login] or [pcj_reset_password] and nothing else may never
 * load listings.css at all, so these tokens must not be assumed to
 * already exist. The values are identical to listings.css's own, kept
 * in sync deliberately so the whole site reads as one product.
 */

:root {
	--pcj-ink: #1c2b28;
	--pcj-ink-soft: #4b5d59;
	--pcj-paper: #faf8f4;
	--pcj-surface: #ffffff;
	--pcj-teal: #0e5c52;
	--pcj-teal-deep: #093f38;
	--pcj-teal-mist: #e3efec;
	--pcj-gold: #b8842e;
	--pcj-gold-deep: #8f6620;
	--pcj-gold-mist: #f5ecd9;
	--pcj-line: #e3ddd0;
	--pcj-line-soft: #eee9de;

	--pcj-font-serif: ui-serif, Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, serif;
	--pcj-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--pcj-radius: 10px;
	--pcj-radius-sm: 6px;
}

/* ---------------------------------------------------------------------
 * Page shell (PCJ_Auth_Page_Chrome)
 * ------------------------------------------------------------------- */

.pcj-auth-page {
	display: flex;
	justify-content: center;
	padding: 56px 24px 80px;
	background: var(--pcj-paper);
	font-family: var(--pcj-font-sans);
	box-sizing: border-box;
}

.pcj-auth-card {
	width: 100%;
	max-width: 440px;
	background: var(--pcj-surface);
	border: 1px solid var(--pcj-line);
	border-radius: var(--pcj-radius);
	padding: 40px 36px;
	box-sizing: border-box;
}

.pcj-auth-heading {
	font-family: var(--pcj-font-serif);
	font-size: 1.75rem;
	font-weight: 600;
	line-height: 1.25;
	margin: 0 0 8px;
	color: var(--pcj-ink);
	text-align: center;
}

.pcj-auth-subheading {
	font-size: 0.9375rem;
	color: var(--pcj-ink-soft);
	text-align: center;
	margin: 0 0 28px;
	line-height: 1.5;
}

/* When there's no subheading, tighten the gap before the form/notice
   instead of leaving the larger gap meant to sit under supporting copy. */
.pcj-auth-heading:last-of-type {
	margin-bottom: 24px;
}

/* ---------------------------------------------------------------------
 * Shared form primitives (also used by the apply form on a single job
 * page — kept consistent with listings.css's own copies of these rules
 * for exactly that reason)
 * ------------------------------------------------------------------- */

.pcj-form .pcj-field {
	margin-bottom: 18px;
}

.pcj-form .pcj-field label {
	display: block;
	margin-bottom: 6px;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--pcj-ink);
}

.pcj-form .pcj-field input {
	width: 100%;
	max-width: none;
	box-sizing: border-box;
	padding: 11px 13px;
	border: 1px solid var(--pcj-line);
	border-radius: var(--pcj-radius-sm);
	font-family: var(--pcj-font-sans);
	font-size: 0.9375rem;
	color: var(--pcj-ink);
	background: var(--pcj-surface);
}

.pcj-form .pcj-field input:focus {
	outline: none;
	border-color: var(--pcj-teal);
	box-shadow: 0 0 0 3px var(--pcj-teal-mist);
}

.pcj-field-checkbox label {
	display: flex !important;
	align-items: center;
	gap: 8px;
	font-weight: 500 !important;
	cursor: pointer;
}

.pcj-field-checkbox input[type="checkbox"] {
	width: auto;
	margin: 0;
}

.pcj-field-submit {
	margin-top: 24px;
}

.pcj-field-submit button,
.pcj-form button[type="submit"] {
	display: block;
	width: 100%;
	padding: 12px 22px;
	border-radius: var(--pcj-radius-sm);
	border: 1.5px solid var(--pcj-teal);
	background: var(--pcj-teal);
	color: #fff;
	font-family: var(--pcj-font-sans);
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
	box-sizing: border-box;
}

.pcj-field-submit button:hover,
.pcj-form button[type="submit"]:hover {
	background: var(--pcj-teal-deep);
	border-color: var(--pcj-teal-deep);
}

.pcj-honeypot {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.pcj-form-error {
	padding: 12px 16px;
	border-radius: var(--pcj-radius-sm);
	background: #fbe9e7;
	color: #a13a2e;
	font-size: 0.875rem;
	font-weight: 600;
	margin: 0 0 20px;
}

.pcj-form-success {
	padding: 12px 16px;
	border-radius: var(--pcj-radius-sm);
	background: var(--pcj-teal-mist);
	color: var(--pcj-teal-deep);
	font-size: 0.875rem;
	font-weight: 600;
	margin: 0 0 20px;
	line-height: 1.5;
}

.pcj-notice {
	font-family: var(--pcj-font-sans);
	font-size: 0.9375rem;
	color: var(--pcj-ink-soft);
	text-align: center;
	margin: 0;
}

/* ---------------------------------------------------------------------
 * Login-page and reset-password-page specific bits
 * ------------------------------------------------------------------- */

.pcj-auth-card a {
	color: var(--pcj-teal-deep);
}

.pcj-login-lost-password,
.pcj-reset-back-to-login {
	text-align: center;
	margin: 20px 0 0;
	font-size: 0.875rem;
}

.pcj-login-lost-password a,
.pcj-reset-back-to-login a {
	color: var(--pcj-teal-deep);
	text-decoration: none;
}

.pcj-login-lost-password a:hover,
.pcj-reset-back-to-login a:hover {
	text-decoration: underline;
}

@media (max-width: 480px) {
	.pcj-auth-card {
		padding: 32px 24px;
	}

	.pcj-auth-heading {
		font-size: 1.5rem;
	}
}