/**
 * Stylesheet for the login page.
 *
 * @since       1.0.0
 * @since       6.0.0     Implement new UI.
 * @package     pLogin
 * @copyright   2024 Keith Pfeiffer
 */

/* =============================================================================
# Custom properties
*/

:root {
	--background: rgba(246, 246, 246, 1);
	--error: rgba(235, 27, 36, 1);
	--info: rgba(2, 122, 220, 1);
	--input: rgba(230, 237, 242, 1);
	--on-primary: rgba(242, 242, 242, 1);
	--on-surface: rgba(18, 18, 18, 1);
	--primary-400: rgba(60, 160, 242, 1);
	--primary-600: rgba(4, 104, 186, 1);
	--primary-800: rgba(14, 47, 74, 1);
	--primary: rgba(0, 133, 242, 1);
	--scrim: rgba(249, 249, 249, 0.87);
	--shadow-350: rgba(0, 0, 0, 0.12);
	--shadow-400: rgba(0, 0, 0, 0.14);
	--shadow: rgba(0, 0, 0, 0.4);
	--success: rgba(136, 204, 51, 1);
	--surface-4: rgba(252, 252, 252, 1);
	--surface-8: rgba(255, 255, 255, 1);
	--surface: rgba(249, 249, 249, 1);
	--warning: rgba(255, 192, 0, 1);
	--notice-border: calc(var(--pnet-h-space) * 3.5);
}

/* =============================================================================
# Elements
*/

.login h1 {
	font-size: var(--pnet-text-xxl);
	font-weight: 500;
	text-align: left;
}

.login #login>a {
	border-radius: var(--pnet-border-radius);
	margin-left: auto;
	order: 5;
	padding: var(--pnet-v-half-space) var(--pnet-h-space);
	text-decoration: none;
	text-transform: uppercase;
	transition: var(--pnet-transition);
}

.login #login>a:is(:hover, :focus) {
	background-color: var(--primary-400);
	box-shadow: 0px 8px 10px 1px var(--shadow-400), 0px 3px 14px 5px var(--shadow-350), 0px 5px 5px -3px var(--shadow);
	color: var(--on-primary);
	text-decoration: none;
}

/* =============================================================================
# Page layout
*/

html {
	font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	font-size: 1rem;
}

body.login {
	background-color: var(--background);
	color: var(--on-surface);
	font-size: 1rem;
	line-height: 1.424;
}

.login label {
	display: inline;
}

.login #login #backtoblog,
.login #login #nav,
.login #login .privacy-policy-page-link {
	display: none;
}

/* =============================================================================
# Content
*/

.login #login {
	align-content: center;
	align-items: flex-start;
	background-color: var(--surface);
	border-radius: var(--pnet-border-radius);
	border: none;
	box-shadow: var(--pnet-shadow-elevation-2);
	column-gap: var(--pnet-h-space);
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	left: 50%;
	margin: 0;
	max-width: 650px;
	padding: 1rem;
	position: absolute;
	row-gap: var(--pnet-v-space);
	top: 50%;
	transform: translate(-50%, -50%);
	width: 90%;
}

.login #login .wp-login-logo {
	aspect-ratio: 1/1;
	max-width: 300px;
	order: 2;
	width: 100%;
}

.login #login .wp-login-logo a {
	background-size: contain;
	border-radius: var(--pnet-border-radius);
	height: 100%;
	margin: 0;
	width: 100%;
}

.login #login .wp-login-logo a:is(:hover, :focus) {
	box-shadow: none;
}

/*
## Notices.
*/

.login #login>.notice,
.login #login>#login_error,
.login #login>#login-message {
	align-items: center;
	background-color: var(--surface-4);
	border-left-style: solid;
	border-left-width: var(--notice-border);
	border-radius: var(--pnet-border-radius);
	box-shadow: var(--pnet-shadow-elevation-1);
	column-gap: calc(var(--notice-border) * 0.75);
	display: flex;
	margin: 0;
	order: 1;
	padding: var(--pnet-v-half-space) var(--pnet-h-space);
	width: 100%;
}

.login #login>.notice,
.login #login>#login-message {
	border-left-color: var(--info);
}

.login #login>#login_error {
	border-left-color: var(--error);
}

.login #login>.notice::before,
.login #login>#login_error::before,
.login #login>#login-message::before {
	color: var(--on-primary);
	display: inline-block;
	font-size: var(--pnet-text-xxl);
	margin-left: calc(0px - var(--notice-border));
}

.login #login>.notice::before,
.login #login>#login-message::before {
	content: '\1f6c8';
}

.login #login>#login_error::before {
	content: '\26A0';
}

/*
## Login form.
*/

.login #login form {
	background-color: transparent;
	border: none;
	margin: 0;
	order: 3;
	padding: var(--pnet-v-half-space) var(--pnet-h-half-space);
	max-width: 300px;
	width: 100%;
}

.login #login form label {
	text-transform: lowercase;
	font-size: 1rem;
	margin: 0;
}

.login #login form input:not([type='submit']) {
	background-color: var(--input);
	color: var(--on-surface);
	font-size: 1rem;
}

.login #login form input:not([type='checkbox'], [type='submit']) {
	border: none;
	border-bottom-color: var(--primary-800);
	border-bottom-style: solid;
	border-bottom-width: 2px;
	border-radius: var(--pnet-border-radius) var(--pnet-border-radius) 0 0;
	line-height: var(--pnet-v-space);
	margin-bottom: var(--pnet-v-space);
	margin-right: 0;
	padding: var(--pnet-v-half-space) var(--pnet-h-half-space);
	width: 100%;
}

.login #login form input:not([type='checkbox'], [type='submit']):is(:hover, :focus) {
	border-bottom-color: var(--primary);
	outline: none;
}

.login #login form input[type='checkbox'] {
	border: 1px solid var(--on-surface);
	border-radius: var(--pnet-border-radius);
	margin: 0 var(--pnet-h-half-space) 0 0;
}

.login #login form #forgot-password {
	margin-bottom: var(--pnet-v-space);
}

#forgot-password a {
	text-decoration: none;
	text-transform: uppercase;
}

#forgot-password a:is(:hover, :focus) {
	text-decoration: underline;
}

#loginform #submit,
#loginform #wp-submit {
	background-color: var(--surface);
	border: 1px solid var(--on-surface);
	border-radius: var(--pnet-border-radius);
	box-shadow: var(--pnet-shadow-elevation-2);
	color: var(--on-surface);
	font-size: 1rem;
	text-transform: lowercase;
}

#loginform #submit:is(:hover, :focus),
#loginform #wp-submit:is(:hover, :focus) {
	background-color: var(--surface-8);
	box-shadow: var(--pnet-shadow-elevation-8);
}

/* =============================================================================
# Media queries
*/

/*
## Responsive
*/

@media screen and (max-width: 767px) {

	.login #login {
		position: static;
		transform: none;
	}

	.login #login .wp-login-logo,
	.login #login form {
		max-width: 100%
	}
}

/*
## Dark mode
*/

@media screen and (prefers-color-scheme: dark) {
	:root {
		--background: rgba(18, 18, 18, 1);
		--surface: rgba(17, 24, 29, 1);
		--surface-4: rgba(1, 29, 40, 1);
		--surface-8: rgba(15, 35, 52, 1);
		--shadow: rgba(0, 0, 0, 1);
		--shadow-350: rgba(0, 0, 0, 0.90);
		--shadow-400: rgba(0, 0, 0, 0.95);
		--input: rgba(18, 18, 18, 1);
		--scrim: rgba(17, 24, 29, 0.87);
		--on-surface: rgba(242, 242, 242, 0.87);
	}

	img {
		filter: brightness(var(--pnet-dim));
	}

	.login #login .wp-login-logo a {
		opacity: var(--pnet-dim);
	}
}