/*
 * Peak Narrative Core: modern minimal split login.
 * British English. No em dashes.
 *
 * A two part layout: a clean form column (left) beside a branded showcase panel
 * (right). The panel is a tinted brand photograph with the agency logo over it.
 * A client logo, when set, appears above the form. The photo, logo, panel and
 * accent colours are injected as CSS custom properties by
 * admin/login-branding.php, so this file stays static and the branding stays
 * per site. Applies to every wp-login.php screen (sign in, lost password, reset
 * password) and the Two Factor plugin prompts, which use the same chrome.
 *
 * The interim login (the small modal refresh inside wp-admin) keeps the default
 * centred layout, so the split never appears in a popup.
 */

:root {
	--pnc-login-panel-bg: #12151A;
	--pnc-login-overlay: rgba(18, 21, 26, 0.82);
	--pnc-login-panel-image: none;
	--pnc-login-accent: #28B1B6;
	--pnc-login-accent-fg: #12151A;
	--pnc-login-form-bg: #F9FCF8;
	--pnc-login-logo-size: min(60%, 190px);
}

/* ---- Split layout (form left, brand panel right) ----------------------- */

body.login {
	min-height: 100vh;
	margin: 0;
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr;
	background: var(--pnc-login-form-bg);
}

/* Form column (left). A flex column with centred items, so everything (form,
   links, logo, credit) is centred regardless of the core margin rules. align-self
   centres it vertically but lets the page scroll when the content is taller than
   the viewport, so nothing is ever clipped. */
body.login #login {
	grid-area: 1 / 1 / 2 / 2;
	align-self: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: auto;
	max-width: none;
	min-width: 0;
	margin: 0;
	padding: 6vh clamp(24px, 5vw, 80px);
	box-sizing: border-box;
}

body.login #login > * {
	width: 100%;
	max-width: 360px;
}

/* The client logo keeps its own (smaller) size, centred. */
body.login #login > .pnc-client-logo-img {
	width: auto;
	max-width: 160px;
}

/* Brand panel (right): a tinted photograph (layer order: logo, overlay, photo). */
body.login::before {
	content: "";
	grid-area: 1 / 2 / 2 / 3;
	background-color: var(--pnc-login-panel-bg);
	background-image:
		var(--pnc-login-logo, none),
		linear-gradient(var(--pnc-login-overlay), var(--pnc-login-overlay)),
		var(--pnc-login-panel-image, none);
	background-repeat: no-repeat, no-repeat, no-repeat;
	background-position: center, center, center;
	background-size: var(--pnc-login-logo-size) auto, cover, cover;
}

/* ---- Header: client logo, or a small site name ------------------------- */

body.login h1 {
	margin: 0 auto 6px;
}

body.login h1 a {
	background: none !important;
	width: auto;
	height: auto;
	margin: 0;
	text-indent: 0;
	overflow: visible;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #6b7280;
}

/* When a client logo is set, hide the WordPress logo / site-name heading and
   show the injected client logo image (added above the form via login_message).
   The screen-reader-only "Log In" heading is kept for accessibility. */
body.login.pnc-has-client-logo h1:not(.screen-reader-text) {
	display: none;
}

body.login .pnc-client-logo-img {
	display: block;
	width: auto;
	max-width: 160px;
	height: auto;
	margin: 0 auto 20px;
}

/* ---- Form ---------------------------------------------------------------- */

body.login form {
	margin-top: 20px;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}

body.login label {
	font-size: 13px;
	color: #3c434a;
}

body.login input[type="text"],
body.login input[type="password"],
body.login input[type="email"],
body.login input[type="tel"],
body.login input[type="number"] {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	margin: 6px 0 16px;
	font-size: 15px;
	line-height: 1.4;
	background: #fff;
	border: 1px solid #d6d9dd;
	border-radius: 8px;
	box-shadow: none;
	transition: border-color 0.15s ease;
}

/* Focus: change the border colour only. No box shadow (it was being clipped). */
body.login input[type="text"]:focus,
body.login input[type="password"]:focus,
body.login input[type="email"]:focus,
body.login input[type="tel"]:focus,
body.login input[type="number"]:focus {
	border-color: var(--pnc-login-accent);
	box-shadow: none !important;
	outline: none;
}

/* Primary button (sign in, get new password, reset, 2FA authenticate). */
body.login .button-primary,
body.login #wp-submit {
	display: block;
	float: none;
	width: 100%;
	height: auto;
	margin: 4px 0 0;
	padding: 12px 18px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
	text-shadow: none;
	border: 0;
	border-radius: 8px;
	background: var(--pnc-login-accent);
	color: var(--pnc-login-accent-fg);
	box-shadow: none;
	cursor: pointer;
	transition: filter 0.15s ease;
}

body.login .button-primary:hover,
body.login #wp-submit:hover,
body.login .button-primary:focus,
body.login #wp-submit:focus {
	filter: brightness(0.94);
	color: var(--pnc-login-accent-fg);
	background: var(--pnc-login-accent);
	box-shadow: none;
	outline: none;
}

/* Secondary buttons in the form (e.g. the Two Factor "Resend Code"). An outline
   in the accent colour, matching the primary button's shape. The password reveal
   button is excluded. */
body.login input.button:not(.button-primary):not(.wp-hide-pw),
body.login .two-factor-email-resend .button,
body.login #webauthn-retry .button,
body.login form button.button-secondary:not(.wp-hide-pw) {
	display: block;
	float: none;
	width: 100%;
	height: auto;
	margin: 10px 0 0;
	padding: 11px 18px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
	text-shadow: none;
	border: 1px solid var(--pnc-login-accent);
	border-radius: 8px;
	background: transparent;
	color: var(--pnc-login-accent);
	box-shadow: none;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

body.login input.button:not(.button-primary):not(.wp-hide-pw):hover,
body.login .two-factor-email-resend .button:hover,
body.login #webauthn-retry .button:hover,
body.login form button.button-secondary:not(.wp-hide-pw):hover,
body.login input.button:not(.button-primary):not(.wp-hide-pw):focus,
body.login .two-factor-email-resend .button:focus,
body.login #webauthn-retry .button:focus,
body.login form button.button-secondary:not(.wp-hide-pw):focus {
	background: var(--pnc-login-accent);
	color: var(--pnc-login-accent-fg);
	outline: none;
}

/* The password reveal button sits inside the password field. */
body.login .wp-pwd {
	position: relative;
}

body.login .wp-pwd button.wp-hide-pw {
	top: 2px;
	right: 4px;
	color: #6b7280;
}

/* ---- Removed UI: remember me and the language switcher ------------------ */

body.login .forgetmenot,
body.login #language-switcher,
body.login .language-switcher {
	display: none !important;
}

/* ---- Links and footer --------------------------------------------------- */

body.login #nav,
body.login #backtoblog {
	margin: 18px 0 0;
	padding: 0;
	text-align: center;
	font-size: 13px;
}

body.login #nav a,
body.login #backtoblog a,
body.login .privacy-policy-page-link a {
	color: #6b7280;
}

body.login #nav a:hover,
body.login #backtoblog a:hover,
body.login .privacy-policy-page-link a:hover {
	color: var(--pnc-login-accent);
}

/* ---- Notices and errors ------------------------------------------------- */

body.login .message,
body.login .notice,
body.login #login_error {
	max-width: 380px;
	margin: 0 auto 16px;
	border-radius: 8px;
	border-left-width: 4px;
	box-shadow: none;
}

/* ---- Agency credit at the bottom of the brand panel -------------------- */

body.login .pnc-login-credit {
	position: absolute;
	right: 0;
	bottom: 22px;
	width: 50%;
	padding: 0 28px;
	box-sizing: border-box;
	text-align: center;
	font-size: 12px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.72);
}

body.login .pnc-login-credit a {
	color: rgba(255, 255, 255, 0.92);
	text-decoration: none;
}

body.login .pnc-login-credit a:hover {
	text-decoration: underline;
}

/* ---- Responsive: stack the panel above the form ------------------------- */

@media screen and (max-width: 782px) {
	body.login {
		grid-template-columns: 1fr;
		grid-template-rows: auto 1fr;
	}

	body.login::before {
		grid-area: 1 / 1 / 2 / 2;
		min-height: 30vh;
	}

	body.login #login {
		grid-area: 2 / 1 / 3 / 2;
		align-self: start;
		padding: 32px 24px 40px;
	}

	body.login .pnc-login-credit {
		position: static;
		width: 100%;
		margin: 8px 0 0;
		padding: 0 24px 28px;
		color: #6b7280;
	}

	body.login .pnc-login-credit a {
		color: #4b5563;
	}
}

/* ---- Interim login (wp-admin modal): keep the default centred layout ---- */

body.login.interim-login {
	display: block;
	min-height: 0;
	background: #fff;
}

body.login.interim-login::before {
	display: none;
}

body.login.interim-login #login {
	display: block;
	width: 320px;
	max-width: 100%;
	padding: 8% 0 0;
	margin: auto;
}

body.login.interim-login #login > * {
	max-width: none;
}

/* ---- WebAuthn / security-key 2FA screen --------------------------------- */

/* Centre the security-key prompt so the screen reads as deliberate. The Retry
   button is full-width via the secondary-button rule above. */
body.login form[name="validate_2fa_form"] > p {
	text-align: center;
}

body.login form[name="validate_2fa_form"] #webauthn-retry {
	margin-top: 4px;
}

/* The "Having Problems?" fallbacks (e.g. "Send a code to your email"). Centre
   them and drop the default list bullet, with the link in the accent colour so
   it matches the footer rather than the browser default blue. */
body.login .backup-methods-wrap {
	margin-top: 20px;
	padding: 0;
	text-align: center;
	font-size: 13px;
}

body.login .backup-methods-wrap > p {
	margin: 0 0 6px;
	color: #6b7280;
}

body.login .backup-methods-wrap ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.login .backup-methods-wrap li {
	margin: 0;
}

body.login .backup-methods-wrap a {
	color: var(--pnc-login-accent);
	font-weight: 600;
	text-decoration: none;
}

body.login .backup-methods-wrap a:hover,
body.login .backup-methods-wrap a:focus {
	text-decoration: underline;
}