/* Heaventurn — acceso editorial. Hoja aislada de la interfaz pública. */

@font-face {
	font-family: "Geist";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/geist-latin.woff2") format("woff2");
}

:root {
	--hvt-login-stage: #050506;
	--hvt-login-surface: #111114;
	--hvt-login-surface-hover: #1a1a1f;
	--hvt-login-text: #f7f7f8;
	--hvt-login-muted: #a1a1aa;
	--hvt-login-line: rgb(255 255 255 / 0.14);
	--hvt-login-focus: #d4d4d8;
}

html {
	background: var(--hvt-login-stage);
}

body.login {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 100%;
	padding: clamp(32px, 7vh, 80px) 20px;
	padding-block-start: max(clamp(32px, 7vh, 80px), calc(68px + env(safe-area-inset-top)));
	background: var(--hvt-login-stage);
	color: var(--hvt-login-text);
	font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	-webkit-font-smoothing: antialiased;
}

body.login * {
	box-sizing: border-box;
}

body.login #login {
	width: min(100%, 420px);
	margin: 0 auto;
	padding: 0;
}

body.login #login > h1 {
	margin: 0 0 38px;
	text-align: center;
}

body.login #login > h1 a {
	width: 54px;
	height: 48px;
	margin: 0 auto;
	background-image: url("../img/heaventurn-mark.svg");
	background-position: center;
	background-size: contain;
}

body.login form {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	overflow: visible;
}

body.login #registerform.hvt-email-register {
	display: flex;
	flex-direction: column;
}

body.login #registerform.hvt-email-register .acf-user-register-fields {
	display: none !important;
}

body.login #registerform.hvt-email-register #reg_passmail {
	margin: -8px 0 0;
	color: var(--hvt-login-muted);
	font-size: 0.8125rem;
	line-height: 1.5;
}

body.login #registerform.hvt-email-register .submit {
	padding-top: 24px;
}

body.login #loginform {
	display: flex;
	flex-direction: column;
}

body.login #loginform > p:first-child {
	order: 1;
}

body.login #loginform > .user-pass-wrap {
	order: 2;
}

body.login #loginform > .forgetmenot {
	order: 3;
}

body.login #loginform > .submit {
	order: 5;
}

body.login #loginform > .hvt-google-login {
	order: 6;
}

body.login #loginform > .hvt-login-register {
	order: 7;
}

body.login #loginform > .hvt-turnstile {
	order: 4;
}

body.login form .input,
body.login input[type="text"],
body.login input[type="email"],
body.login input[type="password"] {
	min-height: 52px;
	margin: 8px 0 22px;
	padding: 0 16px;
	border: 1px solid var(--hvt-login-line);
	border-radius: 12px;
	background: var(--hvt-login-surface);
	color: var(--hvt-login-text);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.2;
	box-shadow: none;
	transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

body.login form .input:hover,
body.login input[type="text"]:hover,
body.login input[type="email"]:hover,
body.login input[type="password"]:hover {
	border-color: rgb(255 255 255 / 0.26);
	background: var(--hvt-login-surface-hover);
}

body.login form .input:focus,
body.login input[type="text"]:focus,
body.login input[type="email"]:focus,
body.login input[type="password"]:focus {
	border-color: var(--hvt-login-focus);
	background: var(--hvt-login-surface);
	box-shadow: 0 0 0 3px rgb(212 212 216 / 0.2);
	outline: 0;
}

body.login label,
body.login .forgetmenot label {
	color: #d4d4d8;
	font-size: 0.875rem;
	font-weight: 520;
}

body.login .user-pass-wrap {
	position: relative;
}

body.login .wp-pwd {
	position: relative;
	display: block;
}

body.login .button.wp-hide-pw {
	top: 8px;
	right: 5px;
	width: 44px;
	height: 52px;
	min-width: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--hvt-login-muted);
	box-shadow: none;
}

body.login .button.wp-hide-pw:hover {
	color: var(--hvt-login-text);
}

body.login input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 0 7px 0 0;
	border: 1px solid rgb(255 255 255 / 0.28);
	border-radius: 5px;
	background: var(--hvt-login-surface);
	box-shadow: none;
}

body.login input[type="checkbox"]:checked {
	border-color: var(--hvt-login-text);
	background: var(--hvt-login-text);
}

body.login input[type="checkbox"]:checked::before {
	width: 20px;
	height: 20px;
	margin: -2px 0 0 -2px;
	color: var(--hvt-login-stage);
}

body.login .forgetmenot {
	display: flex;
	align-items: center;
	min-height: 44px;
}

body.login .submit {
	clear: both;
	padding-top: 20px;
}

body.login .button-primary {
	float: none;
	width: 100%;
	min-height: 48px;
	padding: 0 24px;
	border: 1px solid var(--hvt-login-text);
	border-radius: 999px;
	background: var(--hvt-login-text);
	color: #09090b;
	font-family: inherit;
	font-size: 0.925rem;
	font-weight: 650;
	line-height: 46px;
	text-shadow: none;
	box-shadow: none;
	transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease;
}

body.login .button-primary:hover {
	border-color: #d4d4d8;
	background: #d4d4d8;
	color: #09090b;
}

body.login .button-primary:active {
	transform: translateY(1px);
}

.hvt-google-login {
	margin-top: 16px;
}

.hvt-google-login__button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 48px;
	padding: 0 22px;
	border: 1px solid #8e918f;
	border-radius: 999px;
	background: #131314;
	color: #e3e3e3;
	font-family: "Google Sans", Roboto, Arial, sans-serif;
	font-size: 0.925rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	box-shadow: none;
	transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.hvt-google-login__button:hover {
	border-color: #b7bab8;
	background: #1f1f21;
	color: #fff;
}

.hvt-google-login__button:active {
	transform: translateY(1px);
}

.hvt-google-login__button img {
	flex: 0 0 18px;
}

.hvt-login-register {
	margin-top: 32px;
	text-align: center;
}

body.login #loginform .hvt-login-register > p {
	margin: 0 0 18px;
	color: #d4d4d8;
	font-size: 0.875rem;
	font-weight: 520;
	line-height: 1.5;
}

.hvt-login-register__button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 48px;
	padding: 0 22px;
	border: 1px solid var(--hvt-login-line);
	border-radius: 999px;
	background: transparent;
	color: var(--hvt-login-text);
	font-size: 0.925rem;
	font-weight: 620;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.hvt-login-register__button:hover {
	border-color: rgb(255 255 255 / 0.3);
	background: var(--hvt-login-surface-hover);
	color: var(--hvt-login-text);
}

.hvt-login-register__button:active {
	transform: translateY(1px);
}

.hvt-turnstile {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 65px;
	margin-top: 10px;
}

.hvt-turnstile .cf-turnstile {
	width: 100%;
}

body.login #registerform.hvt-email-register > p:first-child {
	order: 1;
}

body.login #registerform.hvt-email-register #reg_passmail {
	order: 2;
}

body.login #registerform.hvt-email-register > .hvt-turnstile {
	order: 3;
}

body.login #registerform.hvt-email-register > .hvt-auth-legal {
	order: 4;
}

body.login #registerform.hvt-email-register > .submit {
	order: 5;
}

body.login .hvt-auth-legal {
	max-width: 38rem;
	margin: 14px auto 0;
	color: var(--hvt-login-muted);
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1.55;
	text-align: center;
}

body.login .hvt-auth-legal a {
	color: #d4d4d8;
	text-decoration-color: rgb(212 212 216 / 0.45);
	text-underline-offset: 3px;
}

body.login .hvt-auth-legal a:hover {
	color: var(--hvt-login-text);
	text-decoration-color: currentColor;
}

body.login :focus-visible {
	outline: 2px solid var(--hvt-login-focus);
	outline-offset: 3px;
}

body.login #nav,
body.login #backtoblog,
body.login .privacy-policy-page-link {
	padding: 0;
	color: var(--hvt-login-muted);
	font-size: 0.875rem;
	text-align: left;
}

body.login #nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 18px;
	margin: 16px 0 0;
	text-align: center;
}

body.login.login-action-login #nav .wp-login-register {
	display: none;
}

body.login #backtoblog {
	position: fixed;
	z-index: 10;
	inset-block-start: max(12px, env(safe-area-inset-top));
	inset-inline-start: max(20px, env(safe-area-inset-left));
	margin: 0;
}

body.login #nav a,
body.login #backtoblog a,
body.login .privacy-policy-page-link a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--hvt-login-muted);
	text-decoration-color: transparent;
	text-underline-offset: 3px;
	transition: color 150ms ease, text-decoration-color 150ms ease;
}

body.login #nav a:hover,
body.login #backtoblog a:hover,
body.login .privacy-policy-page-link a:hover {
	color: var(--hvt-login-text);
	text-decoration-color: currentColor;
}

body.login .message,
body.login .notice,
body.login #login_error {
	margin: 0 0 24px;
	padding: 14px 16px;
	border: 1px solid var(--hvt-login-line);
	border-radius: 10px;
	background: var(--hvt-login-surface);
	color: #d4d4d8;
	font-size: 0.875rem;
	line-height: 1.5;
	box-shadow: none;
}

body.login .message a,
body.login .notice a,
body.login #login_error a {
	color: var(--hvt-login-text);
}

body.login .privacy-policy-page-link {
	width: min(100%, 420px);
	margin: 24px auto 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	text-align: end;
}

body.login .hvt-legal-separator {
	color: rgb(161 161 170 / 0.55);
}

body.login .dashicons {
	color: inherit;
}

body.login .wp-tooltip__toggle {
	color: var(--hvt-login-muted);
}

body.login .wp-tooltip__toggle:hover {
	color: var(--hvt-login-text);
}

body.login .wp-tooltip__bubble {
	border: 1px solid var(--hvt-login-line);
	border-radius: 10px;
	background: var(--hvt-login-surface-hover);
	color: var(--hvt-login-text);
	box-shadow: 0 20px 48px rgb(0 0 0 / 0.42);
}

body.login .wp-tooltip__bubble::before {
	border-bottom-color: var(--hvt-login-surface-hover);
}

body.login .wp-tooltip__close {
	color: var(--hvt-login-muted);
}

@media (max-width: 480px) {
	body.login {
		display: block;
		padding: calc(72px + env(safe-area-inset-top)) 20px calc(28px + env(safe-area-inset-bottom));
	}

	body.login #login {
		margin: 0 auto;
	}

	body.login #login > h1 {
		margin-bottom: 32px;
	}

}

@media (min-width: 768px) and (min-height: 700px) {
	body.login .privacy-policy-page-link {
		position: fixed;
		z-index: 10;
		inset-inline-end: max(20px, env(safe-area-inset-right));
		inset-block-end: max(12px, env(safe-area-inset-bottom));
		width: auto;
		margin: 0;
	}
}

@media (max-width: 340px) {
	body.login {
		padding-inline: 10px;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.login *,
	body.login *::before,
	body.login *::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}
