/*
 * NabiMakes sign-in screen (wp-login.php), design files.
 *
 * On the deep teal band: the logo, the card (a heading, the Nextend Google/GitHub buttons and
 * the legal line) and, under it, the way back and the Privacy Policy. The band stays dark in
 * both colour schemes; the card follows the scheme. Loaded by inc/frontend/login-screen.php
 * together with the theme.json preset variables, which wp-login.php does not print itself.
 */

/*
 * The page behind the body (overscroll, short windows) matches the deep teal backdrop.
 * base.css is not loaded here, so the fixed action colours are declared here too, on <html>:
 * color-scheme.css flips the palette on body, and these must keep the light values.
 */
html:has(> body.nm-login) {
	--nm-color-action-fill: var(--wp--preset--color--signal-red);
	--nm-color-action-fill-hover: var(--wp--preset--color--primary-hover);
	--nm-color-action-fill-pressed: var(--wp--preset--color--primary-pressed);
	--nm-color-on-action: var(--wp--preset--color--white-surface);
	/* The subtle-surface shadow preset is var(--nm-shadow-2) (base.css). */
	--nm-shadow-color: var(--wp--preset--color--deep-teal);
	--nm-shadow-2: 0 4px 16px color-mix(in srgb, var(--nm-shadow-color) 8%, transparent);
	--nm-shadow-3: 0 24px 60px -32px color-mix(in srgb, var(--nm-shadow-color) 45%, transparent);

	background: var(--nm-light-deep-teal, var(--wp--preset--color--deep-teal));
}

body.nm-login {
	--nm-radius-button: 6px;
	--nm-radius-input: 6px;
	--nm-radius-card: 8px;
	--nm-radius-sheet: 12px;
	--nm-control-lg: 52px;
	--nm-transition-fast: 150ms;
	--nm-ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);

	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 100vh;
	padding: var(--wp--preset--spacing--70) 16px;
	/* The backdrop stays deep teal in both colour schemes; the card follows the scheme. */
	background: var(--nm-light-deep-teal, var(--wp--preset--color--deep-teal));
	color: var(--wp--preset--color--prose-ink);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

/* The column on the band: logo, messages, the card, the way back. */
.nm-login #login {
	box-sizing: border-box;
	display: grid;
	gap: var(--wp--preset--spacing--50);
	justify-items: center;
	width: 100%;
	max-width: 420px;
	margin: 0 auto;
	padding: 0;
}

.nm-login #login > * {
	box-sizing: border-box;
	width: 100%;
	margin: 0;
}

/* Logo, on the band: the light version of the custom logo (the theme's logo-dark.svg unless
   another is set), otherwise the site name. */

.nm-login .wp-login-logo a {
	display: block;
	width: auto;
	height: auto;
	margin: 0;
	background: none;
	color: var(--nm-light-studio-white, var(--wp--preset--color--studio-white));
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--heading-3);
	font-weight: 700;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	text-indent: 0;
	overflow: visible;
}

.nm-login .wp-login-logo a:hover {
	color: var(--nm-light-studio-white, var(--wp--preset--color--studio-white));
}

.nm-login.nm-login--has-dark-logo .wp-login-logo a {
	height: 32px;
	background: var(--nm-login-logo-dark) center / contain no-repeat;
	text-indent: -9999px;
	overflow: hidden;
}

/* The card: the one surface that follows the colour scheme. Dark cards sit on the dark band;
   the border keeps them apart. The stock form is the card when password sign-in is on. */

.nm-login-card,
.nm-login:not(.nm-login--social-only) :is(#loginform, #lostpasswordform, #resetpassform, #registerform) {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--60);
	border: 1px solid light-dark(transparent, var(--wp--preset--color--default-border));
	border-radius: var(--nm-radius-sheet);
	background: var(--wp--preset--color--white-surface);
	box-shadow: var(--nm-shadow-3);
	color: var(--wp--preset--color--deep-teal);
}

.nm-login-card > * {
	margin: 0;
}

.nm-login-title {
	color: inherit;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--heading-3);
	font-weight: 700;
	line-height: 1.1;
}

.nm-login-intro {
	color: var(--wp--preset--color--muted-text);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
}

.nm-login-legal {
	color: var(--wp--preset--color--muted-text);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
}

/* Nextend buttons: neutral NabiMakes surface, the provider's own logo. */

.nm-login div.nsl-container.nsl-container-block-fullwidth .nsl-container-buttons {
	padding: 0;
	align-items: stretch;
}

.nm-login div.nsl-container .nsl-container-buttons a[data-plugin="nsl"] {
	margin: 0 0 var(--wp--preset--spacing--30);
	border-radius: var(--nm-radius-button);
}

.nm-login div.nsl-container .nsl-container-buttons a[data-plugin="nsl"]:last-child {
	margin-bottom: 0;
}

.nm-login div.nsl-container .nsl-button.nsl-button-default {
	align-items: center;
	min-height: var(--nm-control-lg);
	border-radius: var(--nm-radius-button);
	/* Nextend sets the provider colour as an inline style. In the dark scheme the button is the
	   subtle surface on the raised card. */
	background-color: light-dark(var(--wp--preset--color--white-surface), var(--wp--preset--color--subtle-surface)) !important;
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--control-border);
	color: var(--wp--preset--color--deep-teal);
	transition: background-color var(--nm-transition-fast) var(--nm-ease-standard),
		box-shadow var(--nm-transition-fast) var(--nm-ease-standard);
}

.nm-login div.nsl-container a[data-plugin="nsl"]:hover .nsl-button-default {
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--deep-teal);
}

.nm-login div.nsl-container a[data-plugin="nsl"]:active .nsl-button-default {
	transform: translateY(1px);
}

.nm-login div.nsl-container .nsl-button-svg-container {
	padding: 0 0 0 var(--wp--preset--spacing--40);
}

/* The label follows the mark, as on the design's social button. */
.nm-login div.nsl-container .nsl-button-default div.nsl-button-label-container {
	flex: 1;
	margin: 0 var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--30);
	text-align: start;
	padding: var(--wp--preset--spacing--30) 0;
	color: var(--wp--preset--color--deep-teal);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 600;
	letter-spacing: 0;
}

/* GitHub's mark ships white for its dark button; draw it dark on the light one. */
.nm-login div.nsl-container .nsl-button-github svg path {
	fill: var(--wp--preset--color--deep-teal);
}

/* Focus, links and footer. */

.nm-login a {
	color: var(--wp--preset--color--workshop-teal);
	text-underline-offset: 0.18em;
}

.nm-login a:hover {
	color: var(--wp--preset--color--secondary-hover);
}

.nm-login a:focus,
.nm-login input:focus,
.nm-login button:focus {
	box-shadow: none;
	outline: none;
}

/* In the card the teal ring follows the scheme (the dark workshop-teal on the dark card). */
.nm-login a:focus-visible,
.nm-login input:focus-visible,
.nm-login button:focus-visible {
	outline: 2px solid var(--wp--preset--color--workshop-teal);
	outline-offset: 3px;
}

/* The band is always dark: its links take the on-dark ring, studio white with a brass glow. */
.nm-login .wp-login-logo a:focus-visible,
.nm-login #nav a:focus-visible,
.nm-login #backtoblog a:focus-visible,
.nm-login .privacy-policy-page-link a:focus-visible {
	outline-color: var(--nm-light-studio-white, var(--wp--preset--color--studio-white));
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--nm-light-soft-brass, var(--wp--preset--color--soft-brass)) 55%, transparent);
}

.nm-login #backtoblog,
.nm-login .privacy-policy-page-link {
	padding: 0;
	font-size: var(--wp--preset--font-size--small);
	text-align: center;
}

/* The two links under the card sit close together. */
.nm-login #login > .privacy-policy-page-link {
	margin-top: calc(var(--wp--preset--spacing--40) - var(--wp--preset--spacing--50));
}

.nm-login #backtoblog a,
.nm-login .privacy-policy-page-link a,
.nm-login #backtoblog a:hover,
.nm-login .privacy-policy-page-link a:hover {
	color: var(--nm-light-studio-white, var(--wp--preset--color--studio-white));
}

.nm-login.nm-login--social-only #nav {
	display: none;
}

/* Messages and errors. */

.nm-login .notice,
.nm-login .message,
.nm-login #login_error {
	margin: 0;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--default-border);
	border-left-width: 4px;
	border-radius: var(--nm-radius-input);
	background: var(--wp--preset--color--subtle-surface);
	box-shadow: none;
	color: var(--wp--preset--color--prose-ink);
	font-size: var(--wp--preset--font-size--small);
}

.nm-login .message,
.nm-login .notice-info,
.nm-login .notice-success {
	border-left-color: var(--wp--preset--color--workshop-teal);
}

.nm-login #login_error,
.nm-login .notice-error {
	border-color: var(--wp--preset--color--mistake-border);
	border-left-color: var(--wp--preset--color--signal-red);
	background: var(--wp--preset--color--mistake-surface);
	color: var(--wp--preset--color--mistake-ink);
}

/* Stock form, shown only when NABIMAKES_ALLOW_PASSWORD_LOGIN is on. */

.nm-login #loginform,
.nm-login #lostpasswordform,
.nm-login #resetpassform,
.nm-login #registerform {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

.nm-login label {
	color: var(--wp--preset--color--deep-teal);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.nm-login input[type="text"],
.nm-login input[type="email"],
.nm-login input[type="password"] {
	min-height: 44px;
	border: 1px solid var(--wp--preset--color--default-border);
	border-radius: var(--nm-radius-input);
	background: var(--wp--preset--color--white-surface);
	color: var(--wp--preset--color--deep-teal);
	font-size: var(--wp--preset--font-size--body);
}

.nm-login .button-primary {
	min-height: 44px;
	padding: 0 var(--wp--preset--spacing--50);
	border: 0;
	border-radius: var(--nm-radius-button);
	background: var(--nm-color-action-fill);
	color: var(--nm-color-on-action);
	font-weight: 600;
}

.nm-login .button-primary:hover,
.nm-login .button-primary:focus {
	background: var(--nm-color-action-fill-hover);
	color: var(--nm-color-on-action);
}

.nm-login #nav {
	padding: 0;
	font-size: var(--wp--preset--font-size--small);
	text-align: center;
}

.nm-login #nav a,
.nm-login #nav a:hover {
	color: var(--nm-light-studio-white, var(--wp--preset--color--studio-white));
}

/* Session-expired modal in wp-admin: a small iframe, so drop the page chrome. */

body.nm-login.interim-login {
	min-height: 0;
	padding: var(--wp--preset--spacing--40) 16px;
	background: var(--wp--preset--color--white-surface);
}

.nm-login.interim-login #login {
	max-width: none;
	margin: 0 auto;
	padding: 0;
}

.nm-login.interim-login .nm-login-card {
	padding: 0;
	border: 0;
	box-shadow: none;
}

.nm-login.interim-login .wp-login-logo {
	display: none;
}