/* Login, lost password and choose password screens, in the website's colours and fonts (scss/_variables.scss) */

@font-face {
	font-family: Tapestry;
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	src: url("../assets/fonts/tapestry-latin.woff2") format("woff2");
}

@font-face {
	font-family: "DM Sans";
	font-weight: 100 1000;
	font-style: normal;
	font-display: swap;
	src: url("../assets/fonts/dm-sans-latin.woff2") format("woff2");
}

/* The body's background is painted on the page canvas using the html box. Core fixes html to the
   viewport height, which ends the page colour there on screens shorter than the content. */
html {
	height: auto;
}

body.login {
	--giff-green-dark: #3a422b;
	--giff-green-medium: #9db474;
	--giff-green-light: #c0dd8d;
	--giff-green-calmer: #fbfff4;
	--giff-green-glow: #eefcd4;
	--giff-radius: 12px;
	--giff-radius-small: 8px;

	/* Core's links, focus rings, checkboxes and secondary buttons follow the admin colour. */
	--wp-admin-theme-color: var(--giff-green-dark);
	--wp-admin-theme-color--rgb: 58, 66, 43;
	--wp-admin-theme-color-darker-10: var(--giff-green-dark);
	--wp-admin-theme-color-darker-20: var(--giff-green-dark);

	box-sizing: border-box;
	height: auto;
	min-height: 100vh;
	border: 8px solid var(--giff-green-dark);
	/* Same frame and glow as the website's body (scss/_base.scss) */
	background: linear-gradient(to bottom, var(--giff-green-glow), rgba(238, 252, 212, 0) 873px) no-repeat,
		linear-gradient(var(--giff-green-calmer), var(--giff-green-calmer)) no-repeat var(--giff-green-dark);
	color: var(--giff-green-dark);
	font-family: "DM Sans", system-ui, sans-serif;
	font-size: 16px;
}

@media (min-width: 900px) {
	body.login {
		border-width: 16px;
	}
}

/* The session-expired dialog in the admin loads this screen in a small frame. */
body.login.interim-login {
	min-height: 0;
	border: 0;
	background: var(--giff-green-calmer);
}

#login {
	box-sizing: border-box;
	width: 100%;
	max-width: 440px;
	padding: 8vh 20px 0;
}

.interim-login #login {
	padding: 0 20px;
}

/* Logo */

.login h1.wp-login-logo a {
	width: 201px;
	height: 78px;
	margin-bottom: 32px;
	background: url("../assets/images/logo-guider-pa.svg") center top / auto 35px no-repeat,
		url("../assets/images/logo-finnskogen.svg") center bottom / auto 35px no-repeat;
}

.login h1.wp-login-logo a:focus-visible {
	box-shadow: none;
	outline: 2px solid var(--giff-green-dark);
	outline-offset: 6px;
}

/* Form */

.login form {
	margin: 0 0 24px;
	padding: 28px 24px;
	border: 1px solid var(--giff-green-light);
	border-radius: var(--giff-radius);
	background: #fff;
	box-shadow: none;
}

.login label {
	margin-bottom: 8px;
	font-size: 16px;
	font-weight: 600;
}

.login form .input,
.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
	box-sizing: border-box;
	min-height: 52px;
	margin: 0 0 20px;
	padding: 12px 16px;
	border: 1px solid var(--giff-green-medium);
	border-radius: var(--giff-radius);
	background: var(--giff-green-calmer);
	color: var(--giff-green-dark);
	font-family: inherit;
	font-size: 16px;
	line-height: 1.4;
}

.js.login input.password-input {
	padding-right: 52px;
}

.login .button.wp-hide-pw {
	top: 6px;
	right: 6px;
	border-radius: var(--giff-radius-small);
	color: var(--giff-green-dark);
}

.login form .forgetmenot {
	float: none;
	margin-bottom: 20px;
}

.login form .forgetmenot label,
.login .pw-weak label {
	margin-bottom: 0;
	font-weight: 400;
}

.login input[type="checkbox"] {
	border-color: var(--giff-green-medium);
	border-radius: 4px;
	background: var(--giff-green-calmer);
}

.login input[type="checkbox"]:checked {
	border-color: var(--giff-green-dark);
	background: var(--giff-green-dark);
}

.login .wp-tooltip .wp-tooltip__toggle,
.login .wp-tooltip .wp-tooltip__close {
	color: var(--giff-green-dark);
}

.login .wp-tooltip .wp-tooltip__bubble {
	border-color: var(--giff-green-light);
	border-radius: var(--giff-radius-small);
	color: var(--giff-green-dark);
	font-size: 14px;
	box-shadow: 0 10px 30px rgba(58, 66, 43, 0.15);
}

.login .wp-tooltip:not(.wp-is-tooltip) .wp-tooltip__bubble::before {
	border-top-color: var(--giff-green-light);
}

/* Buttons, as the website's button block (scss/_buttons.scss) */

.login.wp-core-ui .button:not(.wp-hide-pw) {
	min-height: 48px;
	margin-bottom: 0;
	padding: 0 20px;
	border-radius: var(--giff-radius);
	border-color: var(--giff-green-light);
	color: var(--giff-green-dark);
	font-family: inherit;
	font-size: 16px;
	line-height: 46px;
	transition: all 0.3s ease;
}

.login.wp-core-ui .button:not(.wp-hide-pw):hover,
.login.wp-core-ui .button:not(.wp-hide-pw):focus {
	border-color: var(--giff-green-light);
	background: rgba(192, 221, 141, 0.25);
	color: var(--giff-green-dark);
}

.login.wp-core-ui .button.button-primary,
.login.wp-core-ui .reset-pass-submit .button.button-primary {
	float: none;
	width: 100%;
	min-height: 58px;
	padding: 0 25px;
	border-color: var(--giff-green-light);
	background: var(--giff-green-light);
	color: var(--giff-green-dark);
	font-family: Tapestry, Georgia, serif;
	font-size: 20px;
	font-weight: 400;
	line-height: 56px;
	text-align: left;
}

.login.wp-core-ui .button.button-primary:not(.wp-hide-pw):hover,
.login.wp-core-ui .button.button-primary:not(.wp-hide-pw):focus,
.login.wp-core-ui .button.button-primary:active {
	border-color: var(--giff-green-medium);
	background: var(--giff-green-medium);
	color: var(--giff-green-dark);
}

.login.wp-core-ui .button:focus,
.login.wp-core-ui .button.button-primary:focus {
	box-shadow: none;
	outline: 2px solid var(--giff-green-dark);
	outline-offset: 3px;
}

/* Choose password */

.login .reset-pass-submit {
	gap: 12px;
}

.login .reset-pass-submit .wp-generate-pw {
	width: 100%;
	margin-top: 0;
}

.login #pass-strength-result {
	margin: 8px 0 16px;
	padding: 8px;
	border-radius: var(--giff-radius-small);
}

#login form .indicator-hint,
#login #reg_passmail {
	font-size: 14px;
}

/* Messages */

.login .message,
.login .notice,
.login .success {
	margin-bottom: 16px;
	padding: 12px 16px;
	border: 1px solid var(--giff-green-light);
	border-radius: var(--giff-radius);
	background: var(--giff-green-glow);
	color: var(--giff-green-dark);
}

.login .message p,
.login .notice p,
.login .success p {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
}

.login .notice-error {
	border-color: #e3a3a3;
	background: #fcf0f0;
}

/* Links below the form */

.login #nav,
.login #backtoblog {
	margin: 0 0 12px;
	padding: 0 24px;
	font-size: 15px;
}

.login a,
.login #nav a,
.login #backtoblog a {
	color: var(--giff-green-dark);
}

.login #nav a,
.login #backtoblog a,
.login .privacy-policy-page-link a {
	text-decoration: underline;
	text-decoration-color: var(--giff-green-medium);
	text-underline-offset: 3px;
}

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

.login a:focus {
	border-radius: 4px;
	box-shadow: none;
	outline: 2px solid var(--giff-green-dark);
	outline-offset: 3px;
}

/* Language switcher */

.language-switcher {
	padding: 24px 20px 32px;
}

.login #language-switcher {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.login #language-switcher label {
	margin: 0;
	font-size: 15px;
	font-weight: 400;
}

.login #language-switcher select {
	min-height: 48px;
	margin: 0;
	padding: 0 36px 0 16px;
	border-color: var(--giff-green-medium);
	border-radius: var(--giff-radius);
	background-color: var(--giff-green-calmer);
	background-position: right 12px top 55%;
	color: var(--giff-green-dark);
	font-family: inherit;
	font-size: 15px;
	line-height: 46px;
}