/* ==========================================================================
   NPRN 2026 refresh: Ultimate Member login page (/login/, page 11)
   Loaded by login.php. Scoped to logged-out visitors (the only people who see the form),
   so the white heading never lands on the light page background.
   Background = the same Santa Barbara harbour photo as the home hero, under a brand-blue wash.
   ========================================================================== */

/* ---- Full-page photo background ------------------------------------------ */
body.page-id-11.logged-out {
	background:
		linear-gradient(180deg, rgba(27, 43, 54, 0.5) 0%, rgba(44, 74, 93, 0.68) 50%, rgba(27, 43, 54, 0.86) 100%),
		url('/wp-content/uploads/2021/12/sb-ocean.jpg') center 58% / cover no-repeat fixed !important;
}
body.page-id-11.logged-out #page { background: transparent !important; }

/* Card centred in the first screen under the header; the footer sits below the fold */
body.page-id-11.logged-out #primary {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: calc(100vh - var(--nprn-header-h) - var(--wp-admin--admin-bar--height, 0px));
	padding: clamp(24px, 6vh, 72px) 16px clamp(40px, 8vh, 96px);
}

/* ---- Heading ---------------------------------------------------------------- */
body.page-id-11.logged-out .entry-content .elementor-widget-heading { text-align: center; }
body.page-id-11.logged-out .elementor-widget-heading .elementor-heading-title {
	color: #fff !important;
	font: 700 clamp(2.25rem, 5vw, 3.25rem)/1.05 Montserrat, sans-serif !important;
	letter-spacing: -0.025em;
	text-transform: lowercase; /* the page title is stored as "LOGIN" */
	text-shadow: 0 2px 24px rgba(8, 20, 28, 0.45);
}
body.page-id-11.logged-out .elementor-widget-heading .elementor-heading-title::first-letter { text-transform: uppercase; }
body.page-id-11.logged-out .elementor-widget-heading::after {
	content: 'Sign in to the Santa Barbara County nonprofit hub.';
	display: block;
	margin-top: 10px;
	color: rgba(255, 255, 255, 0.9);
	font: 500 16px/1.5 Montserrat, sans-serif;
	text-shadow: 0 1px 14px rgba(8, 20, 28, 0.5);
}

/* ---- Card ------------------------------------------------------------------- */
body.page-id-11.logged-out .um {
	position: relative;
	max-width: 460px;
	margin: 22px auto 0;
	padding: 40px 40px 30px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.97);
	border: 0;
	border-radius: 22px;
	box-shadow: 0 34px 70px -24px rgba(8, 20, 28, 0.65);
	animation: nprn-login-in 0.6s var(--nprn-ease) both;
}
body.page-id-11.logged-out .um::before {
	content: '';
	position: absolute;
	inset: 0 0 auto 0;
	height: 5px;
	background: linear-gradient(90deg, var(--nprn-green), #3b8fc2);
}
@keyframes nprn-login-in {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

/* ---- Fields ----------------------------------------------------------------- */
body.page-id-11.logged-out .um .um-field { padding: 0; margin: 0 0 20px; }
body.page-id-11.logged-out .um .um-field-label { margin: 0 0 8px; }
body.page-id-11.logged-out .um .um-field-label label {
	font: 700 11.5px/1.3 Montserrat, sans-serif;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--nprn-blue-deep);
}
body.page-id-11.logged-out .um .um-field-label .um-req { margin-left: 3px; color: var(--nprn-green-ink); }
body.page-id-11.logged-out .um .um-form-field,
body.page-id-11.logged-out .um input[type="text"],
body.page-id-11.logged-out .um input[type="password"] {
	height: 54px;
	min-height: 54px;
	padding: 0 18px !important;
	background: #f6f8f9 !important;
	border: 1.5px solid var(--nprn-line-strong) !important;
	border-radius: 14px !important;
	box-shadow: none !important;
	color: var(--nprn-ink) !important;
	font: 500 15px/1 Montserrat, sans-serif !important;
	transition: border-color 0.2s var(--nprn-ease), box-shadow 0.2s var(--nprn-ease), background-color 0.2s var(--nprn-ease);
}
/* labels are hidden in this UM form, so the placeholder is the label: keep it readable (AA on the field background) */
body.page-id-11.logged-out .um .um-form-field::placeholder { color: #5b6770; font-weight: 600; letter-spacing: 0.02em; opacity: 1; }
body.page-id-11.logged-out .um .um-form-field:focus,
body.page-id-11.logged-out .um input[type="text"]:focus,
body.page-id-11.logged-out .um input[type="password"]:focus {
	background: #fff !important;
	border-color: var(--nprn-green-ink) !important;
	box-shadow: 0 0 0 4px rgba(152, 203, 60, 0.28) !important;
}
/* browser autofill paints its own blue/yellow */
body.page-id-11.logged-out .um input:-webkit-autofill,
body.page-id-11.logged-out .um input:-webkit-autofill:hover,
body.page-id-11.logged-out .um input:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 1000px #f6f8f9 inset !important;
	-webkit-text-fill-color: var(--nprn-ink);
	caret-color: var(--nprn-ink);
}

/* Keep me signed in */
body.page-id-11.logged-out .um .um-field-checkbox { display: inline-flex; align-items: center; gap: 0; margin: 0; }
body.page-id-11.logged-out .um .um-field-checkbox-option { font: 500 14px/1.3 Montserrat, sans-serif; color: var(--nprn-text); }
body.page-id-11.logged-out .um .um-field-c { margin: 0 0 22px; }

/* ---- Buttons: Login on top, Register beneath, both full width -------------- */
body.page-id-11.logged-out .um .um-col-alt .um-half { float: none !important; width: 100% !important; margin: 0 0 4px; padding: 0; }
body.page-id-11.logged-out .um .um-button,
body.page-id-11.logged-out .um a.um-button {
	width: 100%;
	min-height: 54px;
	font-size: 15px !important;
	letter-spacing: 0.06em;
}
body.page-id-11.logged-out .um #um-submit-btn { box-shadow: 0 12px 24px -12px rgba(79, 122, 18, 0.75) !important; }
body.page-id-11.logged-out .um .um-right.um-half::before {
	content: 'New to NPRN?';
	display: block;
	margin: 14px 0 10px;
	text-align: center;
	color: var(--nprn-muted);
	font: 500 13.5px/1.3 Montserrat, sans-serif;
}
body.page-id-11.logged-out .um .um-button.um-alt:hover,
body.page-id-11.logged-out .um a.um-button.um-alt:hover {
	background: var(--nprn-blue) !important;
	border-color: var(--nprn-blue) !important;
	color: #fff !important;
}

/* Forgot password */
body.page-id-11.logged-out .um .um-col-alt-b { margin-top: 18px; text-align: center; }
body.page-id-11.logged-out .um .um-link-alt {
	color: var(--nprn-muted);
	font: 600 13.5px/1.3 Montserrat, sans-serif;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color 0.2s var(--nprn-ease), border-color 0.2s var(--nprn-ease);
}
body.page-id-11.logged-out .um .um-link-alt:hover { color: var(--nprn-blue); border-bottom-color: currentColor; }

/* ---- Errors ----------------------------------------------------------------- */
body.page-id-11.logged-out .um .um-notice {
	margin: 0 0 20px;
	padding: 12px 16px;
	border-radius: 12px;
	font: 500 14px/1.45 Montserrat, sans-serif;
}
body.page-id-11.logged-out .um .um-notice.err { background: #fdf0ee; border: 1px solid #f0c9c3; color: #8a2f25; }
/* UM paints its field errors as a solid #ED5565 bar with white text; soften it and mark the field itself */
body.page-id-11.logged-out .um .um-field-error {
	margin-top: 8px;
	padding: 9px 14px !important;
	background: #fdf0ee !important;
	border: 1px solid #f0c9c3;
	border-radius: 10px;
	color: #8a2f25 !important;
	font: 600 13px/1.4 Montserrat, sans-serif !important;
}
body.page-id-11.logged-out .um .um-form-field.um-error { border-color: #d9534f !important; background: #fff8f7 !important; }
body.page-id-11.logged-out .um .um-field-arrow { display: none; }

/* Limit Login Attempts Reloaded pops its "N attempts remaining" notice in the middle of the screen, which is
   right on top of the card and its error message. Park it just under the header instead. */
body.page-id-11.logged-out .llar_notification_login_page {
	top: calc(var(--nprn-header-h) + var(--wp-admin--admin-bar--height, 0px) + 24px) !important;
	transform: translateX(-50%) !important;
	border: 0 !important;
	border-radius: 14px !important;
	box-shadow: 0 18px 40px -16px rgba(8, 20, 28, 0.55) !important;
	font-family: Montserrat, sans-serif !important;
	font-size: 14px !important;
}

/* ---- Small screens ---------------------------------------------------------- */
@media (max-width: 560px) {
	body.page-id-11.logged-out { background-attachment: scroll !important; }
	body.page-id-11.logged-out .um { padding: 32px 22px 24px; border-radius: 18px; }
}
@media (prefers-reduced-motion: reduce) {
	body.page-id-11.logged-out .um { animation: none; }
}