/**
 * Kinvent Login — login screen styles.
 *
 * All rules are scoped to `body.kinvent-login` so nothing leaks outside the
 * login page. We deliberately set NO font-family: the screen inherits the
 * default WordPress login font stack.
 *
 * Structure:
 *   1. Design tokens
 *   2. Page layout (two columns)
 *   3. Brand panel (left)
 *   4. Login card (#login) + core element resets
 *   5. Injected intro (eyebrow, title, SSO button, divider)
 *   6. Native partner form (restyle only)
 *   7. Messages & errors
 *   8. Under-card support link
 *   9. Animations
 *  10. Responsive & reduced motion
 */

/* 1. Design tokens ------------------------------------------------------- */
body.kinvent-login {
	--kv-blue: #034372;
	--kv-blue-top: #06507f;
	--kv-blue-deep: #06263e;
	--kv-orange: #f57e20;
	--kv-orange-hover: #e5711a;

	--kv-ink: #14283a;
	--kv-text: #3c5568;
	--kv-label: #4a5f6f;
	--kv-muted: #6c7f8d;
	--kv-muted-2: #7c90a0;
	--kv-faint: #9fb0bf;

	--kv-page: #f5f8fa;
	--kv-card: #ffffff;
	--kv-fill: #f8fafc;
	--kv-border: #e7edf2;
	--kv-border-input: #dde5ec;
	--kv-ring: rgba(245, 126, 32, 0.14);

	--kv-brand-w: 46%;
	--kv-gutter: 28px;
}

/* 2. Page layout --------------------------------------------------------- */
body.kinvent-login {
	margin: 0;
	min-height: 100vh;
	box-sizing: border-box;
	background: var(--kv-page);
	color: var(--kv-text);

	/* Centre the card + support link in the space beside the fixed panel. */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 48px var(--kv-gutter) 48px calc(var(--kv-brand-w) + var(--kv-gutter));
}

body.kinvent-login *,
body.kinvent-login *::before,
body.kinvent-login *::after {
	box-sizing: border-box;
}

body.kinvent-login a {
	color: var(--kv-blue);
	text-decoration: none;
}

body.kinvent-login a:hover {
	color: var(--kv-orange);
}

/* An empty clearing div core prints after #login; not needed in flex flow. */
body.kinvent-login .clear {
	display: none;
}

/* 3. Brand panel (left) -------------------------------------------------- */
.kinvent-login .kv-brand {
	position: fixed;
	inset: 0 auto 0 0;
	width: var(--kv-brand-w);
	min-width: 380px;
	overflow: hidden;
	padding: 56px 60px;
	display: flex;
	flex-direction: column;
	background: linear-gradient(150deg, #eef5fb 0%, #e2edf6 55%, #dbe9f4 100%);
}

.kinvent-login .kv-brand__logo {
	position: relative;
	z-index: 2;
	height: 30px;
	width: auto;
	animation: kv-fade 0.9s ease both;
}

.kinvent-login .kv-brand__body {
	position: relative;
	z-index: 2;
	margin-top: auto;
	animation: kv-rise 0.9s ease 0.1s both;
}

.kinvent-login .kv-badge {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--kv-orange);
}

.kinvent-login .kv-badge__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--kv-orange);
}

.kinvent-login .kv-brand__title {
	margin: 18px 0 14px;
	max-width: 15ch;
	font-size: 40px;
	line-height: 1.1;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--kv-blue-deep);
}

.kinvent-login .kv-brand__lead {
	margin: 0;
	max-width: 44ch;
	font-size: 16px;
	line-height: 1.6;
	color: var(--kv-text);
}

.kinvent-login .kv-brand__url {
	color: var(--kv-blue);
	font-weight: 500;
}

.kinvent-login .kv-brand__copy {
	position: relative;
	z-index: 2;
	margin: 40px 0 0;
	font-size: 13px;
	color: var(--kv-muted);
	animation: kv-fade 1s ease 0.3s both;
}

/* Decorative floating shapes (purely visual). */
.kinvent-login .kv-shape {
	position: absolute;
	z-index: 0;
	pointer-events: none;
}

.kinvent-login .kv-shape--1 {
	top: -80px;
	right: -60px;
	width: 300px;
	height: 300px;
	border-radius: 50%;
	background: radial-gradient(circle at 30% 30%, rgba(3, 67, 114, 0.1), rgba(3, 67, 114, 0) 70%);
	animation: kv-float1 14s ease-in-out infinite;
}

.kinvent-login .kv-shape--2 {
	bottom: -70px;
	left: -50px;
	width: 240px;
	height: 240px;
	border-radius: 50%;
	background: radial-gradient(circle at 40% 40%, rgba(245, 126, 32, 0.14), rgba(245, 126, 32, 0) 70%);
	animation: kv-float2 18s ease-in-out infinite;
}

.kinvent-login .kv-shape--3 {
	top: 42%;
	right: 14%;
	width: 84px;
	height: 84px;
	border-radius: 22px;
	background: rgba(3, 67, 114, 0.06);
	animation: kv-float3 12s ease-in-out infinite;
}

.kinvent-login .kv-shape--4 {
	top: 24%;
	left: 12%;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--kv-orange);
	opacity: 0.55;
	animation: kv-float1 9s ease-in-out infinite;
}

.kinvent-login .kv-shape--5 {
	bottom: 26%;
	right: 30%;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--kv-blue);
	opacity: 0.4;
	animation: kv-float3 11s ease-in-out infinite;
}

/* 4. Login card + core resets ------------------------------------------- */
body.kinvent-login #login {
	width: 100%;
	max-width: 400px;
	margin: 0;
	padding: 40px 38px;
	background: var(--kv-card);
	border: 1px solid var(--kv-border);
	border-radius: 18px;
	box-shadow: 0 20px 50px -24px rgba(6, 38, 62, 0.28);
	animation: kv-rise 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) 0.05s both;
}

/* Logo lives in the brand panel; hide core's title but keep it for screen
   readers (page heading / site name). */
body.kinvent-login #login h1 {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	border: 0;
}

/* Replaced by our own "Visit Kinvent Support" link. */
body.kinvent-login #backtoblog {
	display: none;
}

/* 5. Injected intro ------------------------------------------------------ */
.kinvent-login .kv-card-head {
	margin-bottom: 22px;
	text-align: center;
}

.kinvent-login .kv-card-subtitle {
	margin: 8px 0 0;
	font-size: 14px;
	color: var(--kv-muted);
}

.kinvent-login .kv-card-title {
	margin: 0;
	font-size: 25px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--kv-ink);
}

/* One-click SSO button (styled as a link — it navigates to the SSO flow). */
.kinvent-login .kv-sso {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 15px 20px;
	border-radius: 11px;
	background: linear-gradient(180deg, var(--kv-blue-top) 0%, var(--kv-blue) 100%);
	color: #fff;
	font-size: 15.5px;
	font-weight: 600;
	box-shadow: 0 10px 22px -10px rgba(3, 67, 114, 0.7);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.kinvent-login .kv-sso:hover {
	transform: translateY(-2px);
	color: #fff;
	box-shadow: 0 16px 30px -12px rgba(3, 67, 114, 0.75);
}

.kinvent-login .kv-sso:active {
	transform: translateY(0);
}

.kinvent-login .kv-sso:focus-visible {
	outline: 3px solid var(--kv-ring);
	outline-offset: 2px;
}

.kinvent-login .kv-sso__arrow {
	font-size: 17px;
	line-height: 1;
	transition: transform 0.2s ease;
}

/* Subtle CTA cue: the arrow slides right when the SSO button is hovered
   (the design declares this transition on the arrow). Suppressed under
   prefers-reduced-motion by the global rule below. */
.kinvent-login .kv-sso:hover .kv-sso__arrow {
	transform: translateX(3px);
}

.kinvent-login .kv-divider {
	display: flex;
	align-items: center;
	gap: 14px;
}

.kinvent-login .kv-divider--employees {
	margin: 0 0 16px;
}

.kinvent-login .kv-divider--partners {
	margin: 32px 0 24px;
}

.kinvent-login .kv-divider::before,
.kinvent-login .kv-divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--kv-border);
}

.kinvent-login .kv-divider span {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--kv-faint);
}

/* 6. Native forms (restyle only) ---------------------------------------- */
/* Scoped to `#login form` (not just #loginform) so the lost-password / reset /
   register views reachable from this screen share the same field styling and
   don't fall back to core's 24px inputs inside our card. Authentication markup
   is never changed — only its appearance. */

/* Neutralise core's white form box — our card (#login) is the container. */
body.kinvent-login #login form {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	overflow: visible;
}

body.kinvent-login #login form > p,
body.kinvent-login #login form .user-pass-wrap {
	margin: 0 0 16px;
}

body.kinvent-login #login form label {
	display: block;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--kv-label);
}

body.kinvent-login #login form input[type="text"],
body.kinvent-login #login form input[type="password"],
body.kinvent-login #login form input[type="email"],
body.kinvent-login #login form .input {
	width: 100%;
	margin: 7px 0 0;
	padding: 13px 14px;
	font-size: 15px;
	line-height: 1.4;
	color: var(--kv-ink);
	background: var(--kv-fill);
	border: 1.5px solid var(--kv-border-input);
	border-radius: 10px;
	box-shadow: none;
	transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

body.kinvent-login #login form input[type="text"]:focus,
body.kinvent-login #login form input[type="password"]:focus,
body.kinvent-login #login form input[type="email"]:focus,
body.kinvent-login #login form .input:focus {
	border-color: var(--kv-orange);
	background: #fff;
	box-shadow: 0 0 0 4px var(--kv-ring);
	outline: 0;
}

/* Password field + native show/hide toggle (core .wp-hide-pw, powered by the
   core `user-profile` script — we only restyle it). */
body.kinvent-login .wp-pwd {
	position: relative;
	margin-top: 7px;
}

body.kinvent-login .wp-pwd .input {
	margin-top: 0;
	padding-right: 46px;
}

/* Selector matches core's `.login .button.wp-hide-pw` (0,3,0) specificity and
   adds the body scope so our restyle wins. min-width must be reset (core sets
   40px) or the button stays 40px wide. */
body.kinvent-login .button.wp-hide-pw {
	position: absolute;
	top: 50%;
	right: 8px;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--kv-muted-2);
	box-shadow: none;
	cursor: pointer;
	transition: color 0.15s ease, background 0.15s ease;
}

body.kinvent-login .button.wp-hide-pw:hover {
	color: var(--kv-blue);
	background: #eef4f9;
}

body.kinvent-login .button.wp-hide-pw:focus {
	color: var(--kv-blue);
	background: #eef4f9;
	border-color: transparent;
	outline: 0;
	box-shadow: 0 0 0 3px var(--kv-ring);
}

/* Core's :active sets transform:none, which would drop the vertically-centred
   button by half its height on click. Keep it centred. */
body.kinvent-login .button.wp-hide-pw:active {
	transform: translateY(-50%);
}

body.kinvent-login .button.wp-hide-pw .dashicons {
	width: 20px;
	height: 20px;
	font-size: 20px;
}

/* Remember me. Core floats .forgetmenot left (to sit beside the right-floated
   submit); we lay everything out in a single column, so clear the float. The
   label is scoped through #loginform to beat the general label rule above. */
body.kinvent-login #loginform .forgetmenot {
	float: none;
	margin: 0;
	font-size: 14px;
}

body.kinvent-login #loginform .forgetmenot label {
	display: inline-flex;
	align-items: center;
	font-size: 14px;
	font-weight: 400;
	color: var(--kv-label);
	cursor: pointer;
}

body.kinvent-login #rememberme {
	width: 17px;
	height: 17px;
	margin: 0 8px 0 0;
	accent-color: var(--kv-orange);
}

/* Primary submit button. Targeting `#login .button-primary` covers the login
   submit and the submit on the other login-page forms. */
body.kinvent-login #login form p.submit {
	margin: 16px 0 0;
}

body.kinvent-login #login .button-primary {
	float: none;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 14px 20px;
	border: 0;
	border-radius: 11px;
	background: var(--kv-orange);
	color: #fff;
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.2;
	text-shadow: none;
	box-shadow: 0 10px 22px -10px rgba(245, 126, 32, 0.75);
	transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

body.kinvent-login #login .button-primary:hover {
	transform: translateY(-2px);
	background: var(--kv-orange-hover);
	box-shadow: 0 16px 30px -12px rgba(245, 126, 32, 0.8);
}

body.kinvent-login #login .button-primary:active {
	transform: translateY(0);
}

body.kinvent-login #login .button-primary:focus-visible {
	outline: 3px solid var(--kv-ring);
	outline-offset: 2px;
}

/* Under-form nav (Lost your password? / Register). */
body.kinvent-login #nav {
	margin: 18px 0 0;
	padding: 0;
	text-align: center;
	font-size: 13.5px;
}

/* Core's `.login #nav a` sets a grey colour that outweighs our generic link
   rule, so set the brand colours on an ID-scoped selector. */
body.kinvent-login #nav a {
	color: var(--kv-blue);
	font-weight: 500;
}

body.kinvent-login #nav a:hover {
	color: var(--kv-orange);
}

/* 7. Messages & errors --------------------------------------------------- */
body.kinvent-login #login .message,
body.kinvent-login #login .notice,
body.kinvent-login #login_error {
	margin: 0 0 20px;
	padding: 13px 16px;
	border-radius: 10px;
	font-size: 13.5px;
	line-height: 1.5;
	box-shadow: none;
}

body.kinvent-login #login .message,
body.kinvent-login #login .notice {
	border-left: 4px solid var(--kv-blue);
	background: #f2f8fd;
	color: var(--kv-text);
}

body.kinvent-login #login_error {
	border-left: 4px solid #d63638;
	background: #fdf5f5;
	color: #8a1f24;
}

/* 8. Under-card support link -------------------------------------------- */
.kinvent-login .kv-support {
	margin: 26px 0 0;
	text-align: center;
	font-size: 12.5px;
	color: var(--kv-faint);
}

.kinvent-login .kv-support a {
	font-weight: 500;
}

/* Fallback: hide WP SAML Auth's default CTA if it is ever not removed. */
body.kinvent-login #wp-saml-auth-cta {
	display: none;
}

/* 9. Animations ---------------------------------------------------------- */
@keyframes kv-rise {
	from {
		opacity: 0;
		transform: translateY(18px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes kv-fade {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes kv-float1 {
	0%,
	100% {
		transform: translate(0, 0) rotate(0deg);
	}

	50% {
		transform: translate(22px, -30px) rotate(8deg);
	}
}

@keyframes kv-float2 {
	0%,
	100% {
		transform: translate(0, 0) rotate(0deg);
	}

	50% {
		transform: translate(-26px, 24px) rotate(-10deg);
	}
}

@keyframes kv-float3 {
	0%,
	100% {
		transform: translate(0, 0);
	}

	50% {
		transform: translate(18px, 18px);
	}
}

/* 10. Responsive & reduced motion --------------------------------------- */
@media (max-width: 900px) {
	body.kinvent-login {
		padding: 40px 20px;
	}

	.kinvent-login .kv-brand {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	/* Respect reduced-motion for entrance and hover motion. The faint ambient
	   background shapes are intentionally exempted (:not(.kv-shape)) so they
	   keep their slow, low-contrast drift, which is part of the brand design. */
	.kinvent-login *:not(.kv-shape),
	.kinvent-login *::before,
	.kinvent-login *::after {
		animation: none !important;
		transition: none !important;
	}
}