/* ═══════════════════════════════════════════════════════
   ANGELHUB — wp-login.php custom styles
   Covers: login, register, lost-password screens.
═══════════════════════════════════════════════════════ */

/* ── Body — full-bleed background image ─────────────── */
body.login {
	background:
		url( 'login-banner.png' )
		center / cover
		no-repeat
		fixed;
	min-height: 100vh;
	box-sizing: border-box; /* padding-top is included in 100vh — no scrollbar */
	padding-top: 26px;      /* clears the fixed marquee strip */
	display: flex;
	align-items: center;
	justify-content: center;
	overflow-x: hidden;
}

/* ── Marquee strip (injected before #login via login_footer) ── */
#aoe-login-banner {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
}

.aoe-login-banner__marquee {
	height: 26px;
	overflow: hidden;
	background: linear-gradient( 90deg,
		#b9c8d3  0%,
		#dae9f7 30%,
		#ffffff 50%,
		#dae9f7 70%,
		#b9c8d3 100%
	);
	display: flex;
	align-items: center;
}

.aoe-login-banner__marquee-track {
	display: flex;
	white-space: nowrap;
	animation: aoe-login-marquee 16.5s linear infinite;
}

.aoe-login-banner__marquee-track span {
	font-family: 'Continuum', monospace;
	font-size: 13px;
	color: #3a4d60;
	letter-spacing: 3px;
	padding-right: 64px;
}

@keyframes aoe-login-marquee {
	0%   { transform: translateX( 0 ); }
	100% { transform: translateX( calc( -100% / 20 ) ); }
}

/* ── Form container ────────────────────────────────── */
#login {
	position: relative;
	z-index: 1;
	padding: 32px 32px 24px;
	background: linear-gradient( 175deg,
		rgba( 255, 255, 255, 0.96 )  0%,
		rgba( 218, 233, 247, 0.93 ) 25%,
		rgba( 185, 200, 211, 0.90 ) 50%,
		rgba( 218, 233, 247, 0.93 ) 75%,
		rgba( 255, 255, 255, 0.96 ) 100%
	);
	border: 1.5px solid rgba( 185, 200, 211, 0.8 );
	border-radius: 20px;
	box-shadow:
		0 8px 48px rgba( 0, 0, 0, 0.18 ),
		0 1px 0 rgba( 255, 255, 255, 0.9 ) inset,
		4px 0 24px rgba( 185, 200, 211, 0.25 );
	backdrop-filter: blur( 12px );
	-webkit-backdrop-filter: blur( 12px );
	width: 340px !important;
	margin: 0 auto !important;
}

/* ── Site title — chrome Continuum ────────────────── */
.login h1 a {
	background: linear-gradient( 180deg, #63bdff 0%, #ffffff 100% );
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-text-stroke: 1.5px #1d7a93;
	paint-order: stroke fill;

	font-family: 'Continuum', monospace !important;
	font-size: 32px;
	font-weight: 700;
	letter-spacing: 4px;
	text-transform: lowercase;
	text-indent: 0;        /* override WP's -9999px text-hide */
	text-align: center;

	background-size: auto; /* override WP's 84px logo size */
	width: auto;           /* override WP's 84px */
	height: auto;          /* override WP's 84px */
}

/* ── Labels ────────────────────────────────────────── */
.login label {
	color: #3a4d60;
	font-size: 12px;
	letter-spacing: 1px;
	text-transform: uppercase;
}

/* ── Inputs ────────────────────────────────────────── */
.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
	background: rgba( 255, 255, 255, 0.85 ) !important;
	border: 1.5px solid rgba( 185, 200, 211, 0.8 ) !important;
	border-radius: 10px !important;
	color: #3a4d60 !important;
	font-size: 15px;
	padding: 10px 14px;
	box-shadow: 0 1px 4px rgba( 185, 200, 211, 0.2 ) inset !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.login input[type="text"]:focus,
.login input[type="password"]:focus,
.login input[type="email"]:focus {
	border-color: rgba( 62, 80, 182, 0.5 ) !important;
	box-shadow:
		0 1px 4px rgba( 185, 200, 211, 0.2 ) inset,
		0 0 0 3px rgba( 62, 80, 182, 0.1 ) !important;
	outline: none !important;
}

/* ── Checkbox ──────────────────────────────────────── */
.login input[type="checkbox"] {
	accent-color: #3E50B6;
}

.login .forgetmenot {
	margin-bottom: 20px !important;
}

.login .forgetmenot label {
	color: #5a6e80;
	font-size: 12px;
	text-transform: none;
	letter-spacing: 0;
}

/* ── Submit button — metallic pill + chrome text ───── */
.login .button-primary,
.login #wp-submit {
	position: relative !important;

	/* Chrome gradient text */
	background-image: linear-gradient( 180deg, #63bdff 0%, #ffffff 100% ) !important;
	background-color: transparent !important;
	background-clip: text !important;
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	-webkit-text-stroke: 1.5px #1d7a93 !important;
	paint-order: stroke fill !important;

	/* Pill shape */
	border: 1.5px solid rgba( 185, 200, 211, 0.9 ) !important;
	border-radius: 999px !important;
	box-shadow:
		0 4px 16px rgba( 185, 200, 211, 0.5 ),
		0 1px 0 rgba( 255, 255, 255, 0.9 ) inset !important;

	font-family: 'Continuum', monospace !important;
	font-size: 18px !important;
	font-weight: 700;
	letter-spacing: 2px;

	padding: 10px 28px !important;
	height: auto !important;
	width: 100% !important;
	cursor: pointer;
	transition: filter 0.2s ease, box-shadow 0.2s ease;
}

/* Metallic pill fill via pseudo-element */
.login .button-primary::before,
.login #wp-submit::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 999px;
	background: linear-gradient( 90deg,
		rgba( 255, 255, 255, 0.92 )  0%,
		rgba( 218, 233, 247, 0.95 ) 30%,
		rgba( 185, 200, 211, 0.90 ) 50%,
		rgba( 218, 233, 247, 0.95 ) 70%,
		rgba( 255, 255, 255, 0.92 ) 100%
	);
	background-size: 300% 100%;
	background-position: 0% center;
	animation: aoe-pill-shimmer 8s ease infinite;
	z-index: -1;
}

@keyframes aoe-pill-shimmer {
	0%,
	100% { background-position: 0% center; }
	50%  { background-position: 100% center; }
}

.login .button-primary:hover,
.login #wp-submit:hover {
	filter: brightness( 1.1 );
	box-shadow:
		0 6px 24px rgba( 185, 200, 211, 0.7 ),
		0 1px 0 rgba( 255, 255, 255, 0.9 ) inset !important;
}

.login .button-primary:focus,
.login #wp-submit:focus {
	outline: none !important;
	box-shadow:
		0 0 0 3px rgba( 62, 80, 182, 0.2 ),
		0 4px 16px rgba( 185, 200, 211, 0.5 ) !important;
}

/* ── Nav links (lost password, back to site) ───────── */
.login #nav,
.login #backtoblog {
	text-align: center;
}

.login #nav a,
.login #backtoblog a {
	color: #5a6e80;
	font-size: 12px;
	text-decoration: none;
	transition: color 0.2s ease;
}

.login #nav a:hover,
.login #backtoblog a:hover {
	color: #3E50B6;
}

/* ── Notices / errors ──────────────────────────────── */
.login .message,
.login .notice,
.login .notice-info,
.login .success {
	background-color: rgba( 78, 165, 217, 0.08 ) !important;
	border-left: 4px solid #4EA5D9 !important;
	border-radius: 8px;
	box-shadow: none !important;
	color: #1d5a7a !important;
	padding: 12px;
	margin-left: 0;
	margin-bottom: 20px;
	word-wrap: break-word;
}

.login #login_error,
.login .notice-error {
	background: rgba( 255, 153, 223, 0.1 );
	border-left-color: #FF99DF;
	border-radius: 8px;
	color: #8c2060;
}

/* ── Privacy policy link ───────────────────────────── */
.login .privacy-policy-page-link a {
	color: #5a6e80;
	font-size: 11px;
}

/* ── Password strength meter ───────────────────────── */
#pass-strength-result {
	border-radius: 8px;
	border: none;
	color: #3a4d60;
}

/* ── Mobile ────────────────────────────────────────── */
@media ( max-width: 480px ) {
	#login {
		width: calc( 100% - 32px ) !important;
	}
}