/*
Theme Name: American Cyanide
Theme URI: localhost/theme
Author: David Hernandez
Author URI: https://americancyanide.com
Description: Template for American Cyanide login page. 
License: Proprietary
Text Domain: americancyanide
*/

@import url('fonts.css');

:root {
	--login-border-radius: 10px;
	--login-color-black: hsl(0 0% 0%);
	--login-color-black-50: hsla(0 0% 0% / .5);
	--login-color-white-10: hsla(0 0% 95% / .1);
	--login-color-white-50: hsla(0 0% 95% / .5);
	--login-color-white: hsla(0 0% 100%);

	--login-default-text-color: var(--login-color-white);
}

*, *::before, *::after {
	box-sizing: border-box;
}

body {
	display: flex;
	flex-direction: column;
	font-family: 'Liberation', sans-serif;
	background-image: none,linear-gradient(45deg, transparent, hsl(0 0% 0%)),url('../images/login_bg_us_flag_mobile_portrait.webp');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 25% center;
	background-attachment: fixed;
	align-items: center;
	justify-content: center;
	color: var(--login-default-text-color);
	letter-spacing: 1px;
}

.login,
.login form {
	font-weight: bold;
}

#login { /*This is the container div*/
	--login-box-shadow-color-right-bottom: var(--login-color-black-50);
	--login-box-shadow-color-left-top: var(--login-color-black-50);
    width: min(320px, 100%);
	padding: 0;
	margin: 0;
	box-shadow: 4px 4px 6px var(--login-box-shadow-color-right-bottom),-4px -4px 6px var(--login-box-shadow-color-left-top);
	border-radius: var(--login-border-radius);
	/* overflow: hidden; */
}

.login h1 {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: hsla(0 0% 100% / .5);
	border-radius: var(--login-border-radius) var(--login-border-radius) 0 0;
	box-shadow: inset -6px -6px 10px var(--login-color-black-50), inset 6px 6px 10px var(--login-color-black-50),0 1px 5px hsla(0 0% 100% / .4);
}

.login h1 a {
	background-image: none,url('../images/ac_logo_dark_450x60.webp');
	background-size: 100% auto;
	background-position: center;
	width: calc(100% - 2rem);
	height: 60px;
	margin: 0;
}

.login .message, .login #login_error, .login .success {
	border: none;
	margin-block: 2rem 0;
	margin-inline: auto;
	background: hsla(0 0% 0% / .6);
	box-shadow: 2px 2px 8px hsla(0 0% 100% / .25);
	width: 95%;
	color: hsl(0 100% 35%);
	border-radius: var(--login-border-radius);
}

.login form {
	background: transparent;
	border: 0;
	margin: 0;
}

.login form .input,
.login input[type="text"]
.login input[type="password"] {
	background-color: transparent;
	border: none;
	border-bottom: 1.5px solid var(--login-color-white);
	font-weight: normal;
	color: var(--login-color-white);
	padding-inline: 1rem;
}

.login form .input:focus,
.login input[type="text"]:focus,
.login input[type="password"]:focus {
	box-shadow: none;
	border-color: hsl(240, 100%, 35%);
	background-color: hsla(240 100% 35% / .2);
}

.login .dashicons {
	color: var(--login-color-white-50);
	transition: color 200ms ease;
}

.login input[type="password"]:focus ~ .button .dashicons,
.login .button.wp-hide-pw:focus .dashicons,
.login .dashicons:focus {
	color: var(--login-color-white);
}

.login .dashicons:hover,
.login input[type="password"]:focus ~ .button .dashicons:hover {
	color: hsl(0 100% 35%);
}

.login #backtoblog a, .login #nav a {
	color: var(--login-color-white);
}

.login input[type="checkbox"]:checked::before {
	content: url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%230000b3%27%2F%3E%3C%2Fsvg%3E)
}

.login .button-primary,
.wp-core-ui .button-primary {
	--login-button-bg-color: hsl(240 100% 15%);
	background-color: var(--login-button-bg-color) !important;
	border-color: var(--login-button-bg-color) !important;
	transition: background-color 200ms ease, border-color 200ms ease;
}

.login .button-primary:hover,
.wp-core-ui .button-primary:hover,
.login .button-primary:focus,
.wp-core-ui .button-primary:focus {
	--login-button-bg-color: hsl(240 100% 35%);
}

.login #backtoblog a:focus, .login #nav a:focus, .login h1 a:focus,
.privacy-policy-link:focus {
	color: hsl(240 100% 35%);
	box-shadow: none;
	outline: 1px solid;
	outline-offset: 2px;
	text-decoration: none;
}
/*****
*
*
* MEDIA QUERIES
*
*
*****/
@media only screen and (min-width: 40em) {
	body {
		align-items: end;
		position: relative;
		background-image: none,linear-gradient(90deg, transparent -28%, hsl(0 0% 0%)),url('../images/login_bg_us_flag_1920x1280.webp');
	}

	#login {
		--login-box-shadow-color-right-bottom: var(--login-color-white-10);
		--login-box-shadow-color-left-top: var(--login-color-white-10);
		margin-inline-end: 5em;
	}

}

@media only screen and (orientation: landscape) and (max-height: 500px) {
	/*In theory, this media query should only work in mobile devices
	on landscape mode. Not sure about tablets...*/
    body {
		/* margin-block: 5rem; */
    }

	.login #login {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-areas: 
			'header header'
			'form backto'
			'form nav'
			'privacy privacy';
		gap: 0 2rem;
		align-items: center;
		width: 95vw;
		height: 95vh;
		margin: auto;
	}

	body:not([class*="login-action-login"]) #login {
		grid-template-areas: 
			'header header header'
			'message form backto'
			'message form nav'
			'privacy privacy privacy';
		grid-template-columns: repeat(3, 1fr);
	}



	.login h1 {
		grid-area: header;
		padding-block-start: 0;
		align-self: start;
	}

	.login h1 a {
		background-size: 50% auto;
		height: 90px;
		background-position: center;
	}

	.login .message,
	.login #login_error,
	.login .success {
		grid-area: message;
		margin: 0 0 0 2rem;
	}

	.login form {
		grid-area: form;
		justify-self: end;
		width: min(320px,100%);
		margin: 0;
		padding: 0;
	}

	.login #nav {
		grid-area: nav;
		align-self: start;
	}

	.login #backtoblog {
		grid-area: backto;
	}

	.login #nav,
	.login #backtoblog {
		justify-self: start;
		padding-inline: 0;
	}

	.login .privacy-policy-page-link {
		grid-area: privacy;
	}

	.login #nav,
	.login #backtoblog,
	.login .privacy-policy-page-link {
		margin: 0;
	}
}