/**
 * ============================================================
 * PARTICIPANT PORTAL — LOGIN / FRONT DOOR (page styles)
 * ============================================================
 * Styles for page-templates/template-login.php only. Loaded after
 * portal.css and reuses its tokens (brand palette only, no new colours):
 * the left visual area is a deep navy (the one login-only colour,
 * --mgpn-login-navy, taken from the approved login reference comp), with the
 * real background image on top once it is added; the right panel is Warm White.
 * The primary button uses a darkened brand orange with white text (the
 * reference treatment; plain brand orange fails contrast with white text).
 *
 * Selectors are qualified with .portal-app because portal.css resets
 * button/a/h1/p/ul with that prefix, which would otherwise out-specify
 * single-class rules here.
 *
 * LEFT IMAGE: the whole left panel is the image slot. Add the real image at
 * assets/images/login-background.{webp,jpg,jpeg,png} (see inc/portal-auth.php);
 * it fills the panel edge to edge (cover, centered). Until then the panel is
 * plain solid navy. Nothing is generated and no placeholder box is drawn.
 *
 * LAYOUT: two columns (about 55% / 45%) from 900px up. Below that the visual
 * area becomes a brand band above the sign-in panel.
 *
 * RIGHT SIDE RHYTHM: three groups, each tight inside and clearly separated
 * from the next: (1) participant sign-in, (2) staff / referral access,
 * (3) support. Moderate gap between 1 and 2, a larger one before 3. The
 * column is centred in the panel as a unit; elements are never spread apart. Nothing is fixed-width wider
 * than the viewport, so there is no horizontal scroll at any width.
 */

.portal-app.portal-login-body {
	--mgpn-login-navy: #12213a;
	--mgpn-login-cta: #a64f0f;
	--mgpn-login-cta-hover: #8c420c;
	margin: 0;
	background: var(--portal-color-surface);
}

.portal-app .portal-login {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

/* ---------- Left: visual area (about 55%) ----------
 * LAYER ORDER (bottom to top):
 *   1. solid navy panel background        (.portal-login__visual)
 *   2. login-background.png               (.portal-login__visual-image, z 0)
 *   3. navy overlay, 6%                   (.portal-login__visual::after, z 1)
 *   4. Pathways North logo                (.portal-login__brand, z 2)
 *   5. tagline / supporting text          (inside .portal-login__brand)
 */
.portal-app .portal-login__visual {
	position: relative;
	display: flex;
	align-items: flex-start;
	padding: var(--portal-space-6) var(--portal-space-5);
	overflow: hidden;
	background: var(--mgpn-login-navy);
}

.portal-app .portal-login__visual-image {
	position: absolute;
	inset: 0;
	z-index: 0; /* layer 2: the supplied artwork (transparent PNG) over the navy */
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Focal point: the detailed florals/circuits sit lower-right in the source
	 * image, so anchor toward that corner to keep them in the panel. Tuned per
	 * layout below. */
	object-position: 90% 100%;
}

/* Layer 3: subtle navy wash over the artwork (never edits the file). Sits
 * above the image and below the logo/text. */
.portal-app .portal-login__visual::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: color-mix(in srgb, var(--mgpn-login-navy) 6%, transparent);
	pointer-events: none;
}

/* Layers 4-5: logo and tagline/supporting text, above the overlay. */
.portal-app .portal-login__brand {
	position: relative;
	z-index: 2;
	max-width: 100%;
	color: #fff;
}

/* The supplied logo is orange; the reference shows it white on navy. Rendered
 * white with a CSS filter (the image file itself is untouched). The PNG has
 * transparent padding (about 15% left, 4% right); the wrapper clips exactly
 * that, so the visible logo lines up with the text beneath it and
 * --mgpn-logo-w can be sized by what is actually seen (visible = 81% of it). */
.portal-app .portal-login__logo-wrap {
	--mgpn-logo-w: 400px;
	width: calc(var(--mgpn-logo-w) * 0.809);
	max-width: 100%;
	overflow: hidden;
}

.portal-app .portal-login__logo {
	display: block;
	width: var(--mgpn-logo-w);
	max-width: none;
	height: auto;
	margin-left: calc(var(--mgpn-logo-w) * -0.153);
	filter: brightness(0) invert(1);
}

.portal-app .portal-login__tagline {
	margin: var(--portal-space-4) 0 0;
	max-width: 15em;
	font-family: var(--portal-font-display);
	font-weight: 600;
	font-size: 1.125rem;
	line-height: 1.35;
	color: #fff;
}

.portal-app .portal-login__program {
	display: none;
	margin: var(--portal-space-4) 0 0;
	max-width: 24em;
	font-size: var(--portal-text-xs);
	line-height: 1.5;
	color: var(--portal-color-text-on-dark);
}

/* ---------- Right: sign-in panel ---------- */
.portal-app .portal-login__panel {
	flex: 1 1 auto;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: var(--portal-space-6) var(--portal-space-4) var(--portal-space-7);
	background: var(--portal-color-surface);
}

.portal-app .portal-login__content {
	width: 100%;
	max-width: 460px;
}

/* Group spacing (the whole rhythm lives in these three values). */
.portal-app .portal-login__group--staff {
	margin-top: 40px;
}

.portal-app .portal-login__support {
	margin-top: 56px;
}

/* ---------- Group 1: participant sign-in ---------- */
.portal-app .portal-login__title {
	margin: 0 0 var(--portal-space-2);
	font-family: var(--portal-font-display);
	font-weight: 700;
	font-size: 2.125rem; /* 34px */
	line-height: 1.12;
	color: var(--portal-color-ink);
}

.portal-app .portal-login__lead {
	margin: 0 0 var(--portal-space-5);
	font-size: 1rem; /* 16px */
	color: var(--portal-color-muted);
}

.portal-app .portal-login__signin {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--portal-space-2);
	box-sizing: border-box;
	width: 100%;
	min-height: 54px;
	margin: 0;
	padding: var(--portal-space-3) var(--portal-space-4);
	border: 0;
	border-radius: var(--portal-radius-md);
	background: var(--mgpn-login-cta);
	color: #fff;
	font-family: var(--portal-font-body);
	font-weight: 600;
	font-size: 1rem; /* 16px */
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(26, 26, 26, 0.18);
}

.portal-app a.portal-login__signin {
	color: #fff;
}

.portal-app .portal-login__signin:hover {
	background: var(--mgpn-login-cta-hover);
}

.portal-app .portal-login__signin:focus-visible,
.portal-app .portal-login__staff-link:focus-visible {
	outline: 3px solid var(--portal-color-ink);
	outline-offset: 3px;
}

.portal-app .portal-login__ms-icon {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
}

/* Status pill: empty until the Microsoft button is used (role="status"). */
.portal-app .portal-login__status {
	margin: var(--portal-space-3) 0 0;
	padding: 0;
	text-align: center;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--portal-color-ink);
}

.portal-app .portal-login__status:not(:empty),
.portal-app .portal-login__status--static {
	padding: var(--portal-space-2) var(--portal-space-4);
	border-radius: 999px;
	background: var(--portal-color-orange-soft);
}

.portal-app .portal-login__hint {
	margin: var(--portal-space-3) 0 0;
	text-align: center;
	font-size: 0.875rem; /* 14px */
	color: var(--portal-color-muted);
}

.portal-app .portal-login__new {
	margin: var(--portal-space-2) 0 0;
	text-align: center;
	font-size: 0.9375rem; /* 15px */
	color: var(--portal-color-ink);
}

/* ---------- Group 2: staff / referral access ---------- */
.portal-app .portal-login__group--staff {
	padding-top: var(--portal-space-5);
	border-top: 1px solid var(--portal-color-border);
	text-align: center;
}

.portal-app .portal-login__staff-title {
	margin: 0 0 var(--portal-space-3);
	font-family: var(--portal-font-body);
	font-weight: 600;
	font-size: 0.8125rem; /* 13px */
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--portal-color-muted);
}

.portal-app .portal-login__staff-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--portal-space-3);
}

.portal-app .portal-login__staff-list li {
	margin: 0;
	display: flex;
}

.portal-app .portal-login__staff-link {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	gap: var(--portal-space-3);
	box-sizing: border-box;
	padding: var(--portal-space-3) var(--portal-space-5);
	min-height: 60px;
	border: 1px solid #cdbfae;
	border-radius: var(--portal-radius-md);
	background: #fff;
	color: var(--portal-color-ink);
	font-weight: 700;
	font-size: 0.875rem; /* 14px */
	line-height: 1.25;
	text-align: left;
	text-decoration: none;
}

.portal-app a.portal-login__staff-link:hover {
	border-color: var(--portal-color-slate);
	background: var(--portal-color-supporting);
}

.portal-app .portal-login__staff-icon {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
}

.portal-app .portal-login__staff-link--off {
	background: var(--portal-color-supporting);
	border-color: var(--portal-color-border);
	color: var(--portal-color-muted);
}

.portal-app .portal-login__staff-note {
	display: block;
	margin-top: 2px;
	font-weight: 400;
	font-size: 0.75rem; /* 12px */
}

/* ---------- Group 3: support (plain inline text; NOT the Help component) ---------- */
.portal-app .portal-login__support {
	padding: 0;
	text-align: center;
	font-size: 0.8125rem; /* 13px */
	color: var(--portal-color-muted);
}

.portal-app .portal-login__support-link {
	color: var(--portal-color-slate);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.portal-app .portal-login__support-link:focus-visible {
	outline: 3px solid var(--portal-color-ink);
	outline-offset: 2px;
}

.portal-app .portal-login__support-note {
	display: block;
	margin-top: var(--portal-space-1);
	font-size: 0.75rem;
}

/* ---------- Tablet (stacked): a taller image band ---------- */
@media (min-width: 600px) and (max-width: 899px) {
	/* Wide, short band: the florals live at the bottom of the image. */
	.portal-app .portal-login__visual-image {
		object-position: 50% 100%;
	}

	.portal-app .portal-login__visual {
		min-height: 300px;
		padding: var(--portal-space-7) var(--portal-space-6);
	}

	.portal-app .portal-login__logo-wrap {
		--mgpn-logo-w: 460px;
	}

	.portal-app .portal-login__tagline {
		font-size: 1.375rem;
	}

	.portal-app .portal-login__panel {
		padding: var(--portal-space-7) var(--portal-space-6);
	}
}

/* ---------- Two-column layout (about 55% / 45%) ---------- */
@media (min-width: 900px) {
	.portal-app .portal-login {
		flex-direction: row;
	}

	.portal-app .portal-login__visual {
		flex: 0 0 55%;
		align-items: flex-start;
		padding: 18vh var(--portal-space-6) var(--portal-space-6);
	}

	.portal-app .portal-login__logo-wrap {
		--mgpn-logo-w: 500px;
	}

	.portal-app .portal-login__tagline {
		margin-top: var(--portal-space-5);
		font-size: 1.25rem;
	}

	.portal-app .portal-login__program {
		display: block;
	}

	/* The sign-in and staff groups are centred in the panel as ONE unit, a
	 * little above true centre (the bottom padding sets how far). They are not
	 * stretched apart. The support link is independent: pinned near the foot
	 * of the panel, centred on the same column. */
	.portal-app .portal-login__panel {
		position: relative;
		flex: 1 1 45%;
		align-items: center;
		/* Floor = the height the sign-in group + pinned support link actually
		 * need so they never overlap (it was a fixed 640px, which forced a
		 * vertical scrollbar in any window shorter than that). Below this the
		 * page scrolls normally; at or above it the page fits the window. */
		min-height: 560px;
		padding: var(--portal-space-6) var(--portal-space-6) calc(var(--portal-space-6) + 9vh);
	}

	.portal-app .portal-login__title {
		font-size: 2.25rem; /* 36px */
	}

	.portal-app .portal-login__group--staff {
		margin-top: 48px;
	}

	.portal-app .portal-login__support {
		position: absolute;
		left: 50%;
		bottom: 40px;
		width: calc(100% - 2 * var(--portal-space-6));
		max-width: 460px;
		margin: 0;
		transform: translateX(-50%);
	}
}

/* Wider windows wrap the sign-in content less, so need a lower floor. */
@media (min-width: 1000px) {
	.portal-app .portal-login__panel {
		min-height: 530px;
	}
}

@media (min-width: 1024px) {
	.portal-app .portal-login__logo-wrap {
		--mgpn-logo-w: 560px;
	}
}

@media (min-width: 1200px) {
	.portal-app .portal-login__visual {
		padding-left: 48px;
		padding-right: 48px;
	}

	.portal-app .portal-login__logo-wrap {
		--mgpn-logo-w: 640px;
	}

	.portal-app .portal-login__tagline {
		font-size: 1.5rem;
	}

	.portal-app .portal-login__content,
	.portal-app .portal-login__support {
		max-width: 480px;
	}
}

@media (min-width: 1440px) {
	.portal-app .portal-login__logo-wrap {
		--mgpn-logo-w: 700px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.portal-app .portal-login * {
		transition: none;
	}
}

/* ---------- WordPress admin bar (logged-in WP users only) ----------
 * WordPress pushes the page down with `html { margin-top: 32px }` (46px at
 * 782px and below) when the admin bar shows. The login page is min-height
 * 100vh, so it overflowed the viewport by exactly that amount. Subtract the
 * bar height only when body.admin-bar is present; logged-out participants
 * never get that class, so their layout is untouched. */
.portal-app.admin-bar .portal-login {
	min-height: calc(100vh - 32px);
	min-height: calc(100dvh - 32px);
}

@media (max-width: 782px) {
	.portal-app.admin-bar .portal-login {
		min-height: calc(100vh - 46px);
		min-height: calc(100dvh - 46px);
	}
}