/* =========================================================
   Custom WP Admin Login Styles
   Palette:
   --theme-color-primary:          #000000  (ink)
   --theme-color-secondary:        #FFF7E9  (cream)
   --theme-color-tertiary:         #591417  (oxblood)
   --theme-color-quaternary:       #E74223  (brand orange-red)
   --theme-color-accent-primary:   #F3D74C  (gold)
   --theme-color-accent-secondary: #DE93BF  (blush pink)
   ========================================================= */

:root {
	--theme-color-primary: #000000;
	--theme-color-secondary: #FFF7E9;
	--theme-color-tertiary: #591417;
	--theme-color-quaternary: #E74223;
	--theme-color-accent-primary: #F3D74C;
	--theme-color-accent-secondary: #DE93BF;

	--login-radius: 14px;
	--login-transition: 180ms ease;
}

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&display=swap');

/* ---------- Base page ---------- */
html.wp-toolbar,
body.login {
	background:
		radial-gradient(circle at 15% 20%, rgba(231, 66, 35, 0.18), transparent 45%),
		radial-gradient(circle at 85% 80%, rgba(222, 147, 191, 0.14), transparent 45%),
		linear-gradient(160deg, var(--theme-color-primary) 0%, var(--theme-color-tertiary) 100%);
	min-height: 100vh;
	font-family: 'Sora', -apple-system, BlinkMacSystemFont, sans-serif;
}

body.login::before {
	content: "";
	position: fixed;
	inset: 0;
	background-image:
		linear-gradient(rgba(255,247,233,0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,247,233,0.035) 1px, transparent 1px);
	background-size: 42px 42px;
	pointer-events: none;
	z-index: 0;
}

body.login #login {
	position: relative;
	z-index: 1;
	padding-block: 6vh;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	box-sizing: border-box;
}

/* ---------- Logo ---------- */
body.login h1 {
	order: 1;
}

body.login h1 a {
	background-image: url('./images/logo.svg');
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	width: 210px;
	height: 130px;
	margin: 0 auto;
	filter: drop-shadow(0 6px 18px rgba(231, 66, 35, 0.45));
	transition: transform var(--login-transition);
}

body.login h1 a:hover {
	transform: translateY(-2px) scale(1.02);
}

/* ---------- Login card ---------- */
.login form {
	background: var(--theme-color-secondary);
	border: 1px solid rgba(89, 20, 23, 0.08);
	border-radius: var(--login-radius);
	box-shadow:
		0 20px 45px rgba(0, 0, 0, 0.35),
		0 2px 0 rgba(243, 215, 76, 0.6) inset;
	padding: 34px 32px 26px;
	position: relative;
	overflow: hidden;
}

.login form::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(
		90deg,
		var(--theme-color-quaternary),
		var(--theme-color-accent-primary),
		var(--theme-color-accent-secondary)
	);
}

#loginform {
	order: 2;
}

#loginform p label,
.login label {
	color: var(--theme-color-tertiary);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* ---------- Inputs ---------- */
.login form .input,
.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
	background: #ffffff;
	border: 1.5px solid rgba(89, 20, 23, 0.18);
	border-radius: 8px;
	color: var(--theme-color-primary);
	font-size: 15px;
	padding: 10px 12px;
	box-shadow: none;
	transition: border-color var(--login-transition), box-shadow var(--login-transition);
}

.login form .input:focus,
.login input[type="text"]:focus,
.login input[type="password"]:focus,
.login input[type="email"]:focus {
	border-color: var(--theme-color-quaternary);
	box-shadow: 0 0 0 3px rgba(231, 66, 35, 0.16);
	outline: none;
}

/* Remember me checkbox accent */
.login form .forgetmenot input[type="checkbox"] {
	accent-color: var(--theme-color-quaternary);
}

/* ---------- Primary button ---------- */
.wp-core-ui .button-primary {
	background: var(--theme-color-quaternary);
	border: none;
	border-radius: 8px;
	color: var(--theme-color-secondary);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	text-shadow: none;
	padding: 10px 22px;
	height: auto;
	box-shadow: 0 8px 20px rgba(231, 66, 35, 0.35);
	transition: background var(--login-transition), transform var(--login-transition), box-shadow var(--login-transition);
}

.wp-core-ui .button-primary:hover,
.wp-core-ui .button-primary:focus {
	background: var(--theme-color-tertiary);
	box-shadow: 0 10px 26px rgba(89, 20, 23, 0.45);
	transform: translateY(-1px);
	color: var(--theme-color-accent-primary);
}

.wp-core-ui .button-primary:active {
	transform: translateY(0);
}

/* ---------- Links ---------- */
.login #nav,
.login #backtoblog {
	margin: 0;
	order: 4;
}

.login #backtoblog {
	order: 3;
}

.login #nav a,
.login #backtoblog a {
	color: var(--theme-color-secondary);
	font-weight: 500;
	transition: color var(--login-transition);
}

.login #nav a:hover,
.login #backtoblog a:hover {
	color: var(--theme-color-accent-primary);
}

/* ---------- Messages ---------- */
.login .message,
.login .notice {
	background: var(--theme-color-secondary);
	border-left: 4px solid var(--theme-color-accent-primary);
	border-radius: 6px;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.login .message a {
	color: var(--theme-color-quaternary);
}

.login div.error,
#login_error {
	background: var(--theme-color-secondary);
	border-left: 4px solid var(--theme-color-quaternary);
	color: var(--theme-color-tertiary);
	border-radius: 6px;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* Success / green notices reskinned with palette */
.login .message,
.login .notice-success {
	border-left-color: var(--theme-color-accent-secondary);
}

/* ---------- Language switcher ---------- */
.login .language-switcher {
	position: relative;
	z-index: 1;
}

.login .language-switcher label {
	color: var(--theme-color-secondary);
}

/* ---------- Privacy policy link footer ---------- */
.login .privacy-policy-page-link {
	order: 10;
	margin: 10px 0 0 0;
}
.login .privacy-policy-page-link a {
	color: rgba(255, 247, 233, 0.75);
	text-decoration: none;
}

.login .privacy-policy-page-link a:hover {
	color: var(--theme-color-accent-primary);
}

/* ---------- Focus ring accessibility on interactive elements ---------- */
.login *:focus-visible {
	outline: 2px solid var(--theme-color-accent-secondary);
	outline-offset: 2px;
}

/* ---------- Small screens ---------- */
@media screen and (max-width: 480px) {
	.login form {
		padding: 26px 20px 20px;
	}
	body.login h1 a {
		width: 170px;
		height: 105px;
	}
}