/*
 * Login screen (wp-login.php) styles.
 * Loaded by inc/login-screen.php, which also injects the --dc-login-* custom
 * properties (logo, colours) from divi_child_login_settings().
 *
 * Layout rules are scoped to body.login:not(.interim-login) so the small
 * "session expired" modal inside wp-admin keeps WordPress's own layout.
 */

@font-face {
	font-family: 'Crimson-regular';
	src: url('fonts/CrimsonText-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

:root {
	--dc-login-accent: #eb0454;
	--dc-login-bg: #ffffff;
	--dc-login-text: #000000;
	--dc-login-logo: none;
	--dc-login-logo-w: 220px;
	--dc-login-logo-h: 140px;
	--dc-login-border: #e5e5e5;
	--dc-login-serif: 'Crimson-regular', 'Crimson Text', Georgia, serif;
	--dc-login-sans: 'Gotham-Book', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Core's admin colour variables, repointed so its own link/hover/focus
   rules pick up the brand colour. Scoped to the body (not :root) so this
   beats the body.admin-color-* scheme that WordPress applies. */
body.login.divi-child-login {
	--wp-admin-theme-color: var(--dc-login-accent);
	--wp-admin-theme-color-darker-10: var(--dc-login-accent);
	--wp-admin-theme-color-darker-20: var(--dc-login-accent);
}

/*********************************
Page
**********************************/
html,
body.login {
	background: var(--dc-login-bg);
}

body.login {
	color: var(--dc-login-text);
	font-family: var(--dc-login-serif);
	font-size: 15px;
}

/* Centre the form block in the viewport. Auto margins (rather than
   justify-content) mean tall content on a short screen still scrolls
   from the top instead of being clipped. */
body.login:not(.interim-login) {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	box-sizing: border-box;
	padding: 32px 16px;
}

body.login:not(.interim-login) #login {
	width: 100%;
	max-width: 360px;
	margin: auto;
	padding: 0;
}

body.login:not(.interim-login) .language-switcher {
	margin: 0 auto;
	padding: 24px 0 0;
}

/*********************************
Logo, headline, tagline
**********************************/
.login h1 {
	text-align: center;
}

.login h1 a,
.login .wp-login-logo a {
	display: block;
	width: var(--dc-login-logo-w);
	max-width: 100%;
	height: var(--dc-login-logo-h);
	margin: 0 auto 20px;
	padding: 0;
	background-color: transparent;
	background-image: var(--dc-login-logo);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	outline: none;
}

.login h1 a:focus-visible,
.login .wp-login-logo a:focus-visible {
	outline: 2px solid var(--dc-login-accent);
	outline-offset: 4px;
}

/* No logo image found: show the site name as text instead. */
body.divi-child-login--no-logo h1 a,
body.divi-child-login--no-logo .wp-login-logo a {
	width: auto;
	height: auto;
	text-indent: 0;
	overflow: visible;
	color: var(--dc-login-text);
	font-family: var(--dc-login-sans);
	font-size: 22px;
	line-height: 1.3;
	letter-spacing: 3px;
	text-transform: uppercase;
}

.divi-child-login-intro {
	margin: 0 0 20px;
	text-align: center;
}

.divi-child-login-intro p {
	margin: 0;
}

.divi-child-login-headline {
	font-family: var(--dc-login-sans);
	font-size: 22px;
	line-height: 1.3;
	letter-spacing: 3px;
	text-transform: uppercase;
}

.divi-child-login-tagline {
	margin-top: 6px !important;
	font-size: 15px;
	line-height: 1.5;
	opacity: 0.7;
}

/*********************************
Form
**********************************/
.login form {
	margin: 0;
	padding: 28px 24px;
	background: #fff;
	border: 1px solid var(--dc-login-border);
	border-radius: 0;
	box-shadow: none;
}

.login form label,
.login form .forgetmenot label {
	color: var(--dc-login-text);
	font-family: var(--dc-login-sans);
	font-size: 11px;
	line-height: 1.5;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.login form .forgetmenot label {
	letter-spacing: 1px;
}

.login form .input,
.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
	margin: 4px 0 16px;
	padding: 6px 10px;
	color: var(--dc-login-text);
	font-family: var(--dc-login-serif);
	font-size: 17px;
	line-height: 1.5;
	background: #fff;
	border: 1px solid var(--dc-login-border);
	border-radius: 0;
	box-shadow: none;
}

.login form .input:focus,
.login input[type="text"]:focus,
.login input[type="password"]:focus,
.login input[type="email"]:focus {
	border-color: var(--dc-login-accent);
	box-shadow: 0 0 0 1px var(--dc-login-accent);
	outline: none;
}

/* Show/hide password button inside the password field. */
.login .wp-pwd .wp-hide-pw {
	color: var(--dc-login-text);
	border-radius: 0;
}

.login .wp-pwd .wp-hide-pw:hover,
.login .wp-pwd .wp-hide-pw:focus {
	color: var(--dc-login-accent);
}

.login .wp-pwd .wp-hide-pw:focus {
	box-shadow: none;
	outline: 2px solid var(--dc-login-accent);
	outline-offset: -2px;
}

/* Checkbox */
.login form input[type="checkbox"] {
	border: 1px solid var(--dc-login-border);
	border-radius: 0;
	box-shadow: none;
}

.login form input[type="checkbox"]:focus {
	border-color: var(--dc-login-accent);
	box-shadow: 0 0 0 1px var(--dc-login-accent);
}

.login form input[type="checkbox"]:checked {
	border-color: var(--dc-login-accent);
}

.login form input[type="checkbox"]:checked::before {
	content: var(--dc-login-tick);
}

/* Remember-me help toggletip (WP 6.9+) */
.login .wp-tooltip__toggle {
	color: var(--dc-login-text);
}

/* Primary button */
.login .button-primary,
.wp-core-ui .login .button-primary {
	padding: 0 18px;
	min-height: 36px;
	color: #fff;
	font-family: var(--dc-login-sans);
	font-size: 12px;
	line-height: 34px;
	letter-spacing: 2px;
	text-transform: uppercase;
	background: var(--dc-login-accent);
	border: 1px solid var(--dc-login-accent);
	border-radius: 0;
	box-shadow: none;
	text-shadow: none;
}

.login .button-primary:hover,
.login .button-primary:focus,
.login .button-primary:active,
.wp-core-ui .login .button-primary:hover,
.wp-core-ui .login .button-primary:focus,
.wp-core-ui .login .button-primary:active {
	color: #fff;
	background: var(--dc-login-accent);
	border-color: var(--dc-login-accent);
	opacity: 0.85;
	box-shadow: none;
}

.login .button-primary:focus,
.wp-core-ui .login .button-primary:focus {
	opacity: 1;
	outline: 2px solid var(--dc-login-accent);
	outline-offset: 2px;
}

/* Secondary buttons (language switcher "Change", etc.) */
.login .button-secondary,
.wp-core-ui .login .button-secondary {
	color: var(--dc-login-text);
	border-color: var(--dc-login-border);
	border-radius: 0;
	box-shadow: none;
}

/*********************************
Messages
**********************************/
.login .message,
.login .success,
.login #login_error,
.login .notice {
	margin: 0 0 20px;
	padding: 12px 16px;
	color: var(--dc-login-text);
	font-size: 15px;
	background: #fff;
	border: 1px solid var(--dc-login-border);
	border-left: 4px solid var(--dc-login-accent);
	border-radius: 0;
	box-shadow: none;
}

/* Keep errors visibly red. */
.login #login_error,
.login .notice-error {
	border-left-color: #d63638;
}

.login .message a,
.login .success a,
.login #login_error a,
.login .notice a {
	color: var(--dc-login-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/*********************************
Links under the form
**********************************/
.login #nav,
.login #backtoblog {
	padding: 0;
	text-align: center;
	font-size: 14px;
}

.login #nav {
	margin: 20px 0 0;
}

.login #backtoblog {
	margin: 8px 0 0;
}

.login #nav a,
.login #backtoblog a,
.login .privacy-policy-page-link a {
	color: var(--dc-login-text);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: var(--dc-login-border);
	transition: color 0.15s, text-decoration-color 0.15s;
}

.login #nav a:hover,
.login #backtoblog a:hover,
.login .privacy-policy-page-link a:hover,
.login #nav a:focus,
.login #backtoblog a:focus,
.login .privacy-policy-page-link a:focus {
	color: var(--dc-login-accent);
	text-decoration-color: var(--dc-login-accent);
}

.login .privacy-policy-page-link {
	margin: 24px 0 0;
	font-size: 13px;
}

/*********************************
Small screens
**********************************/
@media screen and (max-width: 480px) {
	.login h1 a,
	.login .wp-login-logo a {
		height: calc(var(--dc-login-logo-h) * 0.8);
	}

	.login form {
		padding: 22px 18px;
	}
}