/**
 * Login Page Branding - The Refinery Hair Lounge
 *
 * Dark theme with brand design system colors (Tan, Light Orange, Orange).
 *
 * @package Refinery_Hair
 */

/* CSS Variables for consistent theming */
:root {
	--refinery-black: #141210;
	--refinery-dark: #1e1c1a;
	--refinery-gray: #2E2A28;
	--refinery-gray-light: #444444;
	--refinery-gray-lighter: #5E5854;
	--refinery-white: #ffffff;
	--refinery-off-white: #F0EDEB;            /* Design system off-white */
	--refinery-tan: #DCC88D;                  /* Brand Tan - primary accent */
	--refinery-light-orange: #F9A33C;         /* Light Orange - hover states */
}

/* Dark background for login page */
body.login {
	background-color: var(--refinery-black);
	background-image: none;
}

/* Logo styling - logo plaque image */
#login h1 a,
.login h1 a {
	background-image: url('../images/logo-plaque.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	width: 200px;
	height: 162px;
	margin: 0 auto 30px;
	display: block;
}

/* Login form container */
.login form {
	background: var(--refinery-gray);
	border: 1px solid var(--refinery-gray-light);
	border-radius: 8px;
	box-shadow: 0 4px 20px rgba(20, 18, 16, 0.3);
	padding: 26px 24px 34px;
}

/* Form labels */
.login label {
	color: var(--refinery-off-white);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 14px;
}

/* Input fields */
.login input[type="text"],
.login input[type="password"],
.login input[type="email"],
.login input#user_login,
.login input#user_pass,
.login input#user_email {
	background: var(--refinery-black);
	border: 1px solid var(--refinery-gray-lighter);
	color: var(--refinery-white);
	border-radius: 4px;
	font-size: 16px;
	padding: 8px 12px;
	height: auto;
	line-height: 1.5;
}

.login input[type="text"]:focus,
.login input[type="password"]:focus,
.login input[type="email"]:focus {
	border-color: var(--refinery-tan);
	box-shadow: 0 0 0 1px var(--refinery-tan);
	outline: none;
}

/* Placeholder text */
.login input::placeholder {
	color: var(--refinery-gray-lighter);
}

/* Login button */
.login .button-primary,
.login .button-primary:focus {
	background: var(--refinery-tan);
	border-color: var(--refinery-tan);
	color: var(--refinery-black);
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 600;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 1px;
	border-radius: 4px;
	padding: 8px 20px;
	height: auto;
	line-height: 1.5;
	text-shadow: none;
	box-shadow: none;
	min-height: 40px;
}

.login .button-primary:hover,
.login .button-primary:active {
	background: var(--refinery-light-orange);
	border-color: var(--refinery-light-orange);
	color: var(--refinery-black);
}

/* Remember me checkbox */
.login .forgetmenot {
	margin-top: 10px;
}

.login #rememberme {
	accent-color: var(--refinery-tan);
}

.login .forgetmenot label {
	font-size: 13px;
}

/* Links below form */
.login #nav,
.login #backtoblog {
	padding: 12px 24px;
}

.login #nav a,
.login #backtoblog a {
	color: var(--refinery-tan);
	text-decoration: none;
	transition: color 0.2s ease;
}

.login #nav a:hover,
.login #nav a:focus,
.login #backtoblog a:hover,
.login #backtoblog a:focus {
	color: var(--refinery-light-orange);
	text-decoration: underline;
}

/* Separator between links */
.login #nav {
	color: var(--refinery-gray-lighter);
}

/* Error/message boxes */
.login .message,
.login .success,
.login .notice {
	border-left-color: var(--refinery-tan);
	background: var(--refinery-gray);
	color: var(--refinery-off-white);
	box-shadow: 0 1px 3px rgba(20, 18, 16, 0.2);
	padding: 12px;
	margin-bottom: 20px;
}

.login .message a,
.login .success a,
.login .notice a {
	color: var(--refinery-tan);
}

.login #login_error {
	border-left-color: #dc3545;
	background: var(--refinery-gray);
	color: var(--refinery-off-white);
}

.login #login_error a {
	color: var(--refinery-tan);
}

/* Privacy policy link */
.login .privacy-policy-page-link {
	margin-top: 20px;
}

.login .privacy-policy-page-link a {
	color: var(--refinery-gray-lighter);
	font-size: 12px;
}

.login .privacy-policy-page-link a:hover {
	color: var(--refinery-tan);
}

/* Language switcher if present */
.language-switcher {
	background: var(--refinery-gray);
	border-color: var(--refinery-gray-light);
}

.language-switcher select {
	background: var(--refinery-black);
	border-color: var(--refinery-gray-lighter);
	color: var(--refinery-off-white);
}

/* Password reset page specifics */
.login .reset-pass-submit {
	margin-top: 20px;
}

.login .reset-pass-submit .button-primary {
	width: 100%;
}

/* Password hint text - improve contrast */
.login p.description.indicator-hint,
.login .pw-weak,
.login p.description {
	color: var(--refinery-off-white);
	font-size: 13px;
	line-height: 1.5;
	margin-top: 8px;
}

/* Password wrapper spacing */
.login .user-pass1-wrap,
.login .wp-pwd {
	margin-bottom: 15px;
}

/* Generate Password button - outlined tan style */
.login .button.wp-generate-pw,
.login .button.button-secondary {
	background: transparent;
	border: 2px solid var(--refinery-tan);
	color: var(--refinery-tan);
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 600;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border-radius: 4px;
	padding: 6px 16px;
	height: auto;
	line-height: 1.5;
	cursor: pointer;
	transition: all 0.2s ease;
	box-shadow: none;
	text-shadow: none;
}

.login .button.wp-generate-pw:hover,
.login .button.wp-generate-pw:focus,
.login .button.button-secondary:hover,
.login .button.button-secondary:focus {
	background: var(--refinery-tan);
	border-color: var(--refinery-tan);
	color: var(--refinery-black);
	box-shadow: none;
}

/* Two-factor authentication (if plugin installed) */
.login .backup-methods-wrap {
	color: var(--refinery-off-white);
}

/* Show/hide password button */
.login .wp-pwd button.wp-hide-pw {
	color: var(--refinery-gray-lighter);
}

.login .wp-pwd button.wp-hide-pw:hover,
.login .wp-pwd button.wp-hide-pw:focus {
	color: var(--refinery-tan);
	background: transparent;
}

/* Password strength indicator */
#pass-strength-result {
	background-color: var(--refinery-gray-light);
	border-color: var(--refinery-gray-lighter);
}

#pass-strength-result.strong {
	background-color: #198754;
	border-color: #198754;
}

#pass-strength-result.short,
#pass-strength-result.bad {
	background-color: #dc3545;
	border-color: #dc3545;
}

#pass-strength-result.good {
	background-color: var(--refinery-tan);
	border-color: var(--refinery-tan);
}

/* Interim login (session expired modal) */
.interim-login .login h1 a {
	width: 84px;
	height: 84px;
}

.interim-login.login {
	background: var(--refinery-black);
}

/* Mobile responsiveness */
@media screen and (max-width: 782px) {
	.login form {
		margin-top: 20px;
	}

	#login h1 a,
	.login h1 a {
		width: 280px;
		height: 76px;
	}
}