/*!
 * Fairytale Rebels – WordPress login, register and lost password page (wp-login.php).
 */

@font-face { font-family: "Cinzel FR"; src: url("../fonts/cinzel.woff") format("woff"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Cormorant FP"; src: url("../fonts/cormorant.woff") format("woff"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Jost FP"; src: url("../fonts/jost.woff") format("woff"); font-weight: 100 900; font-display: swap; }

body.login.fp-login {
	--fr-ink: #14100d;
	--fr-text: #4d4038;
	--fr-muted: #8a786b;
	--fr-line: #eadbcd;
	--fr-taupe: #c8a286;
	--fr-accent: #a37a5b;
	--fr-bronze: #7c5130;
	--fr-gold: linear-gradient(105deg, #7c5130 0%, #b88d6b 22%, #f3dcc2 46%, #c8a286 64%, #8f6242 100%);
	background: #fff;
	font-family: "Jost FP", Jost, "Helvetica Neue", Arial, sans-serif;
	color: var(--fr-text);
}
.fp-login #login { width: min(440px, calc(100vw - 32px)); padding: 6vh 0 40px; }

/* Logo */
.fp-login h1 a {
	width: 340px; max-width: 100%; height: 224px; margin: 0 auto 26px;
	background-size: contain; background-position: center; background-repeat: no-repeat;
	text-indent: -9999px; overflow: hidden;
}

/* The card: arch top with a fine rose-gold line, like the rental calendar */
.fp-login #loginform,
.fp-login #registerform,
.fp-login #lostpasswordform,
.fp-login #resetpassform {
	position: relative; margin-top: 0; padding: 130px 44px 44px; background: #fff;
	border: 1px solid var(--fr-line); border-radius: 220px 220px 0 0; box-shadow: 0 40px 80px -60px rgba(124, 81, 48, .5);
}
.fp-login #loginform::before,
.fp-login #registerform::before,
.fp-login #lostpasswordform::before,
.fp-login #resetpassform::before { content: ""; position: absolute; inset: 12px; border: 1px solid var(--fr-taupe); border-radius: 208px 208px 0 0; pointer-events: none; }
.fp-login form > * { position: relative; }

.fp-login label { font-family: "Cinzel FR", Cinzel, Georgia, serif; font-size: .7rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--fr-accent); }
.fp-login input[type="text"],
.fp-login input[type="email"],
.fp-login input[type="password"] {
	border: 0; border-bottom: 1px solid var(--fr-line); border-radius: 0; box-shadow: none; background: transparent;
	font-size: 1.05rem; padding: 8px 0; margin: 4px 0 22px; color: var(--fr-ink);
}
.fp-login input[type="text"]:focus,
.fp-login input[type="email"]:focus,
.fp-login input[type="password"]:focus { border-bottom-color: var(--fr-accent); box-shadow: none; outline: none; }
.fp-login .wp-pwd .button.wp-hide-pw { color: var(--fr-muted); top: 6px; }
.fp-login .forgetmenot label { font-family: inherit; font-size: .88rem; letter-spacing: 0; text-transform: none; color: var(--fr-text); }
.fp-login input[type="checkbox"] { border-color: var(--fr-taupe); border-radius: 0; box-shadow: none; }
.fp-login input[type="checkbox"]:checked::before { filter: sepia(1) saturate(3) hue-rotate(-10deg); }

.fp-login .submit { clear: both; padding-top: 14px; }
.fp-login .button-primary,
.fp-login .wp-core-ui .button-primary {
	width: 100%; float: none; height: auto; min-height: 0; padding: 1.3em 1.5em; border: 0; border-radius: 0;
	background: var(--fr-gold); background-size: 200% 100%; color: #2a170a; text-shadow: none; box-shadow: 0 10px 24px -14px rgba(124, 81, 48, .8);
	font-family: "Cinzel FR", Cinzel, Georgia, serif; font-size: .76rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
	transition: background-position .8s;
}
.fp-login .button-primary:hover,
.fp-login .button-primary:focus { background: var(--fr-gold); background-position: 100% 0; color: #2a170a; box-shadow: 0 0 0 1px var(--fr-taupe); }

/* Links and messages */
.fp-login #nav,
.fp-login #backtoblog,
.fp-login .privacy-policy-page-link { text-align: center; margin: 22px 0 0; padding: 0; }
.fp-login #nav a,
.fp-login #backtoblog a,
.fp-login .privacy-policy-page-link a { color: var(--fr-bronze); text-decoration: underline; text-decoration-color: var(--fr-taupe); text-underline-offset: 5px; }
.fp-login #nav a:hover, .fp-login #backtoblog a:hover { color: var(--fr-ink); }
.fp-login .message,
.fp-login .notice,
.fp-login #login_error { border: 1px solid var(--fr-line); border-left: 3px solid var(--fr-accent); box-shadow: none; background: #fff; color: var(--fr-ink); margin-bottom: 22px; }
.fp-login #login_error { border-left-color: #a1473f; }
.fp-login .language-switcher { margin-top: 20px; }
.fp-login .language-switcher select { border-color: var(--fr-line); border-radius: 0; }
.fp-login .language-switcher .button { border-color: var(--fr-taupe); color: var(--fr-bronze); border-radius: 0; }

.fp-login-tagline { text-align: center; margin: 30px 0; font-family: "Cinzel FR", Cinzel, Georgia, serif; font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; color: var(--fr-accent); }

@media (max-width: 480px) {
	.fp-login h1 a { height: 170px; }
	.fp-login #loginform, .fp-login #registerform, .fp-login #lostpasswordform, .fp-login #resetpassform { padding: 100px 24px 28px; border-radius: 160px 160px 0 0; }
	.fp-login #loginform::before, .fp-login #registerform::before, .fp-login #lostpasswordform::before, .fp-login #resetpassform::before { inset: 8px; border-radius: 152px 152px 0 0; }
}