/**
 * Okta Login Page: login screen styles.
 *
 * Design: Figma uRpCYTJ4POPMHwPjZgLpbX, "Option 2 — WordPress" (collapsed 46:518, expanded 46:547).
 *
 * Every rule is scoped to body.lwh-okta-login, which the plugin adds only
 * while Okta is configured, so the stock screen is untouched otherwise.
 * Core 7.x reads its accent from --wp-admin-theme-color; the colors that
 * matter are also set directly, so older core versions match too.
 */

body.login.lwh-okta-login {
	--lwh-okta-accent: #4353ef;
	--lwh-okta-accent-hover: #2b3ded;
	--lwh-okta-accent-active: #1428eb;
	--lwh-okta-text: #3c434a;
	--lwh-okta-muted: #50575e;
	--lwh-okta-border: #c3c4c7;
	--lwh-okta-control-border: #8c8f94;
	--lwh-okta-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
	--lwh-okta-focus-ring: 0 0 0 2px #fff, 0 0 0 4px var(--lwh-okta-accent);

	/* Same lightness steps core uses for its own admin color schemes. */
	--wp-admin-theme-color: #4353ef;
	--wp-admin-theme-color--rgb: 67, 83, 239;
	--wp-admin-theme-color-darker-10: #2b3ded;
	--wp-admin-theme-color-darker-10--rgb: 43, 61, 237;
	--wp-admin-theme-color-darker-20: #1428eb;
	--wp-admin-theme-color-darker-20--rgb: 20, 40, 235;

	color: var(--lwh-okta-text);
	font-family: Arimo, Arial, Helvetica, sans-serif;
}

.login.lwh-okta-login #login {
	max-width: calc(100% - 32px);
	padding-top: 48px;
}

@media (min-width: 992px) {
	.login.lwh-okta-login #login {
		padding-top: 99px;
	}
}

/* ---- Logo: the site's own brand, sized per brand from the plugin ---- */

.login.lwh-okta-login h1.wp-login-logo a {
	width: var(--lwh-okta-logo-width, 193px);
	height: var(--lwh-okta-logo-height, 30px);
	max-width: 100%;
	margin: 0 auto 51px;
	background-image: var(--lwh-okta-logo);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

/* No brand matched: show the site name instead of a logo. */
.login.lwh-okta-login.lwh-okta-no-logo h1.wp-login-logo a {
	width: auto;
	height: auto;
	background: none;
	color: var(--lwh-okta-text);
	font-size: 24px;
	font-weight: 700;
	text-indent: 0;
}

/* ---- Card: the Okta section on top, core's #loginform below it ----
 * The comp's 24px insets include its 1px border (Figma strokes sit inside the
 * frame), hence 23px of padding throughout.
 */

.login.lwh-okta-login form {
	padding: 23px;
}

.login.lwh-okta-sso #login {
	display: flex;
	flex-direction: column;
}

.login.lwh-okta-sso #login > h1 {
	order: -2;
}

/* Core prints notices between our section and the form; lift them above the card so it stays one piece. */
.login.lwh-okta-sso #login > .notice,
.login.lwh-okta-sso #login > .message,
.login.lwh-okta-sso #login > .success {
	order: -1;
	margin-bottom: 24px;
}

.login.lwh-okta-login .lwh-okta {
	/* Paints over the form's shadow where the two halves of the card meet. */
	position: relative;
	z-index: 1;
	padding: 23px 23px 0;
	border: 1px solid var(--lwh-okta-border);
	border-bottom: 0;
	background: #fff;
}

.login.lwh-okta-sso #loginform {
	margin: 0;
	padding: 12px 23px 23px;
	border-top: 0;
}

.login.lwh-okta-login .lwh-okta--button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	box-sizing: border-box;
	min-height: 44px;
	padding: 0 16px;
	/* Transparent until Windows High Contrast drops the fill; then it outlines the button. */
	border: 1px solid transparent;
	border-radius: 2px;
	background: var(--lwh-okta-accent);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	line-height: 18px;
	text-decoration: none;
	transition: background-color 0.1s ease-in-out;
}

/* Core recolors every link on hover and focus; this one sits on the accent fill, so it stays white. */
.login.lwh-okta-login .lwh-okta--button:hover,
.login.lwh-okta-login .lwh-okta--button:focus {
	background: var(--lwh-okta-accent-hover);
	color: #fff;
}

.login.lwh-okta-login .lwh-okta--button:active {
	background: var(--lwh-okta-accent-active);
	color: #fff;
}

.login.lwh-okta-login .lwh-okta--button-icon {
	flex: none;
}

/* A button styled as a link. The 2px padding makes a 24px target without moving the text. */
.login.lwh-okta-login .lwh-okta--toggle {
	display: block;
	margin: 10px auto -2px;
	padding: 2px 4px;
	border: 0;
	border-radius: 2px;
	background: none;
	color: var(--lwh-okta-muted);
	font: inherit;
	font-size: 13px;
	line-height: 20px;
	text-decoration: underline;
	text-underline-position: under;
	cursor: pointer;
}

.login.lwh-okta-login .lwh-okta--toggle:hover {
	color: var(--lwh-okta-accent-active);
}

.login.lwh-okta-login .lwh-okta--or {
	margin: 24px 0 0;
	color: var(--lwh-okta-text);
	font-size: 13px;
	line-height: 16px;
	text-align: center;
}

/* Collapsed: Okta only. The body class comes from the server and is cleared by the toggle. */
.login.js.lwh-okta-collapsed #loginform,
.login.js.lwh-okta-collapsed .lwh-okta--or {
	display: none;
}

.login.js.lwh-okta-collapsed .lwh-okta {
	padding-bottom: 23px;
	border-bottom: 1px solid var(--lwh-okta-border);
	box-shadow: var(--lwh-okta-shadow);
}

/* The comps space the links 51px below the collapsed card and 28px below the expanded one. */
.login.js.lwh-okta-collapsed #nav {
	margin-top: 51px;
}

/* Without JavaScript the form is always shown, so there's nothing to toggle. */
.login.no-js.lwh-okta-login .lwh-okta--toggle {
	display: none;
}

/* ---- Fields ---- */

.login.lwh-okta-login label {
	margin-bottom: 6px;
	color: var(--lwh-okta-text);
	line-height: 18px;
}

.login.lwh-okta-login form .input,
.login.lwh-okta-login input[type="text"],
.login.lwh-okta-login input[type="email"],
.login.lwh-okta-login input[type="password"] {
	min-height: 40px;
	padding: 0 10px;
	border-color: var(--lwh-okta-control-border);
	border-radius: 3px;
	font-size: 16px;
	line-height: 38px;
}

/* Room for the show-password button; core sets this, and the padding rule above would undo it. */
.login.js.lwh-okta-login input.password-input {
	padding-right: 40px;
}

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

.login.lwh-okta-login .button.wp-hide-pw {
	color: var(--lwh-okta-accent);
}

.login.lwh-okta-login form .forgetmenot {
	gap: 6px;
	min-height: 36px;
}

.login.lwh-okta-login form .forgetmenot input[type="checkbox"] {
	margin: 0;
	border-color: var(--lwh-okta-control-border);
	border-radius: 2px;
}

.login.lwh-okta-login form .forgetmenot label {
	font-size: 13px;
}

.login.lwh-okta-login .button.button-primary {
	min-height: 36px;
	padding: 0 14px;
	border-color: var(--lwh-okta-accent);
	background: var(--lwh-okta-accent);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	line-height: 34px;
}

.login.lwh-okta-login .button.button-primary:hover {
	border-color: var(--lwh-okta-accent-hover);
	background: var(--lwh-okta-accent-hover);
}

.login.lwh-okta-login .button.button-primary:active {
	border-color: var(--lwh-okta-accent-active);
	background: var(--lwh-okta-accent-active);
}

/* ---- Notices ---- */

.login.lwh-okta-login .message,
.login.lwh-okta-login .notice-info {
	border-left-color: var(--lwh-okta-accent);
}

/* ---- Links below the card ---- */

.login.lwh-okta-login #nav,
.login.lwh-okta-login #backtoblog {
	padding: 0;
	font-size: 13px;
	line-height: 18px;
	text-align: center;
}

.login.lwh-okta-login #nav {
	margin: 28px 0 0;
}

.login.lwh-okta-login #backtoblog {
	margin: 16px 0 0;
}

.login.lwh-okta-login #nav a,
.login.lwh-okta-login #backtoblog a {
	color: var(--lwh-okta-muted);
	text-decoration: underline;
}

.login.lwh-okta-login .privacy-policy-page-link {
	margin: 36px 0 24px;
	font-size: 13px;
	line-height: 18px;
}

.login.lwh-okta-login .privacy-policy-link {
	color: var(--lwh-okta-accent);
	text-decoration: underline;
}

.login.lwh-okta-login #nav a:hover,
.login.lwh-okta-login #backtoblog a:hover,
.login.lwh-okta-login .privacy-policy-link:hover {
	color: var(--lwh-okta-accent-active);
}

/* ---- Focus ----
 * Core draws its rings on :focus, which also fires on mouse clicks and taps.
 * These move them to :focus-visible. Each reset carries the same specificity
 * as the ring below it, so the resets must stay first.
 */

.login.lwh-okta-login a:focus,
.login.lwh-okta-login .button:focus,
.login.lwh-okta-login .button.wp-hide-pw:focus,
.login.lwh-okta-login input[type="checkbox"]:focus,
.login.lwh-okta-login .wp-tooltip .wp-tooltip__toggle:focus,
.login.lwh-okta-login .wp-tooltip .wp-tooltip__close:focus,
.login.lwh-okta-login .lwh-okta--toggle:focus {
	box-shadow: none;
	outline: none;
}

.login.lwh-okta-login .button.wp-hide-pw:focus {
	border-color: transparent;
}

.login.lwh-okta-login a:focus-visible,
.login.lwh-okta-login .button:focus-visible,
.login.lwh-okta-login .button.wp-hide-pw:focus-visible,
.login.lwh-okta-login input[type="checkbox"]:focus-visible,
.login.lwh-okta-login .wp-tooltip .wp-tooltip__toggle:focus-visible,
.login.lwh-okta-login .wp-tooltip .wp-tooltip__close:focus-visible,
.login.lwh-okta-login .lwh-okta--toggle:focus-visible {
	box-shadow: var(--lwh-okta-focus-ring);
	/* Only visible in Windows High Contrast mode. */
	outline: 2px solid transparent;
}

@media (prefers-reduced-motion: reduce) {
	.login.lwh-okta-login .lwh-okta--button {
		transition: none;
	}
}