/*
 * Runsmart wp-login.php redesign.
 * Restyles WordPress's native login/lostpassword/resetpass/register screens
 * into a two-pane layout: a fixed decorative brand panel behind a right-hand
 * sign-in card (markup for the card is WP core's own #login form).
 */

:root {
	--accent: #FF7A1A;
	--accent-ink: oklch(0.99 0.01 80);

	--bg: oklch(0.23 0.022 258);
	--bg-deep: oklch(0.18 0.022 258);

	--panel: oklch(0.985 0.003 250);
	--panel-2: oklch(0.96 0.004 250);
	--ink: oklch(0.26 0.015 260);
	--ink-soft: oklch(0.50 0.012 260);
	--ink-faint: oklch(0.66 0.01 260);
	--field-line: oklch(0.86 0.006 260);
	--field-line-strong: oklch(0.40 0.02 260);

	--radius: 12px;
	/* Single source of truth for #login's width, so anything on the
	   .o3-visual side that needs to stay clear of it (e.g. content pinned
	   to the right edge of the viewport) can reference the same value
	   instead of an independently-guessed measurement that can drift. */
	--panel-w: clamp(440px, 43%, 640px);

	--type-display: 'Archivo', system-ui, sans-serif;
	--type-body: 'IBM Plex Sans', system-ui, sans-serif;
	--type-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

body.login {
	margin: 0;
	background: var(--bg-deep);
	font-family: var(--type-body);
	color: var(--ink);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Hide WP's default site logo/name heading inside #login — our own
   "Runsmart" wordmark lives in .o3-visual instead. Deliberately does not
   touch body > h1.screen-reader-text, which is visually hidden already
   and needed for accessibility. */
body.login #login h1.wp-login-logo {
	display: none;
}

/* ————————————— decorative brand pane ————————————— */
.o3-visual {
	position: fixed;
	inset: 0;
	z-index: -1;
	background: var(--bg);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	overflow: hidden;
}
/* Sibling of .o3-visual, not nested inside it — .o3-visual is its own
   stacking context (position:fixed + z-index:-1), so a stripe nested
   inside it can never paint above #login (z-index:1) on the right side,
   no matter how high its own z-index is set. As a true sibling, fixed
   and z-index:2, it spans and sits above both sections. */
.o3-hazard {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 6px;
	z-index: 2;
	background: repeating-linear-gradient(-45deg, var(--accent) 0 18px, var(--accent-ink) 18px 36px);
	opacity: 0.95;
}
.o3-visual__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 34px 48px 0;
	gap: 20px;
	/* .o3-visual is a full-viewport backdrop behind #login (see above) —
	   without this, justify-content:space-between pushes .o3-topnote to
	   the far right edge of the *viewport*, which is exactly where #login
	   sits on top of it, hiding it entirely. */
	max-width: calc(100% - var(--panel-w));
	box-sizing: border-box;
}
.o3-wordmark {
	font-family: var(--type-display);
	font-weight: 800;
	font-size: 26px;
	letter-spacing: -0.02em;
	color: oklch(0.985 0.003 250);
	line-height: 1;
}
.o3-wordmark-accent {
	color: var(--accent);
}
.o3-topnote {
	font-family: var(--type-mono);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: oklch(0.92 0.01 258 / 0.78);
	display: flex;
	align-items: center;
	gap: 9px;
}
.o3-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--accent);
}
.o3-visual__body {
	padding: 0 48px 52px;
	/* Same reasoning as .o3-visual__top — cap it from running under #login
	   on narrower desktop widths where 720px alone wouldn't be safe. */
	max-width: min(720px, calc(100% - var(--panel-w)));
	box-sizing: border-box;
}
.o3-eyebrow {
	font-family: var(--type-mono);
	font-size: 12.5px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--accent);
	margin: 0 0 20px;
	display: inline-flex;
	align-items: center;
	gap: 12px;
}
.o3-eyebrow::before {
	content: "";
	width: 26px;
	height: 2px;
	background: var(--accent);
	display: inline-block;
}
.o3-visual__h1 {
	font-family: var(--type-display);
	font-weight: 800;
	font-size: clamp(32px, 3.4vw, 52px);
	line-height: 1.04;
	letter-spacing: -0.015em;
	color: oklch(0.985 0.003 250);
	margin: 0 0 18px;
}
.o3-visual__h1 .o3-hl {
	display: block;
	color: var(--accent);
}
.o3-visual__sub {
	font-size: 17px;
	line-height: 1.55;
	color: oklch(0.9 0.008 258 / 0.82);
	margin: 0 0 34px;
	max-width: 540px;
}
.o3-props {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	border-top: 1px solid oklch(0.92 0.01 258 / 0.16);
	padding-top: 26px;
}
.o3-prop {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.o3-prop__ic {
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	border: 1px solid oklch(0.92 0.01 258 / 0.26);
	border-radius: 9px;
	color: var(--accent);
}
.o3-prop__ic svg {
	width: 18px;
	height: 18px;
}
.o3-prop__t {
	font-family: var(--type-display);
	font-weight: 600;
	font-size: 14.5px;
	color: oklch(0.97 0.005 258);
	letter-spacing: -0.005em;
}
.o3-prop__d {
	font-size: 13px;
	line-height: 1.45;
	color: oklch(0.88 0.008 258 / 0.7);
}

/* ————————————— sign-in card (WP's #login) ————————————— */
body.login div#login {
	width: var(--panel-w);
	box-sizing: border-box;
	margin: 0 0 0 auto;
	padding: 48px clamp(36px, 5vw, 76px);
	background: var(--panel);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	z-index: 1;
	/* WP core centers some of its own elements (e.g. the hidden logo h1) —
	   force left alignment as the baseline for everything in the panel so
	   the eyebrow/heading/lead read as one uniform block. */
	text-align: left;
}

/* Explicit on each element, not just inherited from #login — guarantees
   left alignment regardless of any intervening rule. */
.o3-panel-eyebrow {
	font-family: var(--type-mono);
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink-faint);
	margin: 0 0 12px;
	text-align: left;
}
/* WP core styles its own logo heading with `#login h1 { text-align:
   center; ... }` — an ID-based selector that outranks a class selector
   on specificity no matter the source order. This is also an <h1>, so it
   matches that same core rule; #login h1.o3-panel-heading is needed to
   actually win. */
body.login #login h1.o3-panel-heading {
	font-family: var(--type-display);
	font-weight: 700;
	font-size: 30px;
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin: 0 0 8px;
	color: var(--ink);
	text-align: left;
}
.o3-panel-lead {
	font-size: 15px;
	line-height: 1.5;
	color: var(--ink-soft);
	margin: 0 0 30px;
	text-align: left;
}

/* login_message's wrapper — unwraps for flex layout so .o3-panel-top and
   .o3-panel-foot become direct flex items of #login (see functions.php). */
.o3-message {
	display: contents;
}
.o3-panel-top {
	order: 0;
}
.o3-panel-foot {
	order: 3;
	margin-top: 30px;
	padding-top: 22px;
	border-top: 1px solid var(--field-line);
	display: flex;
	flex-direction: column;
	gap: 16px;
}
/* WP's privacy-policy link is rendered inside #login, right after the
   form — pull it below the divider and the support line at the very
   bottom of the panel instead. */
body.login .privacy-policy-page-link {
	order: 4;
	margin-top: 16px;
}
body.login .privacy-policy-page-link a {
	font-size: 12px;
	color: var(--ink-faint);
	text-decoration: none;
	border-bottom: 1px solid var(--field-line);
}
body.login .privacy-policy-page-link a:hover {
	color: var(--ink-soft);
}

.o3-trust {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
}
.o3-trust span {
	font-family: var(--type-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-faint);
	display: inline-flex;
	align-items: center;
	gap: 7px;
}
.o3-trust svg {
	width: 13px;
	height: 13px;
	color: var(--ink-soft);
}
.o3-support {
	font-size: 13px;
	color: var(--ink-faint);
	line-height: 1.5;
	margin: 0;
}
.o3-support a {
	color: var(--ink-soft);
	text-decoration: none;
	border-bottom: 1px solid var(--field-line);
}
.o3-support a:hover {
	color: var(--ink);
}

body.login #loginform,
body.login #registerform,
body.login #resetpassform,
body.login #lostpasswordform {
	/* WP core's login.css gives the form its own card look (white bg,
	   border, shadow, padding) — neutralize it so fields just flow inside
	   our panel directly, instead of a box nested inside the panel. */
	background: none;
	border: 0;
	box-shadow: none;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin-top: 0;
	order: 0;
}
body.login #login form p,
body.login #login form > div.user-pass-wrap {
	margin: 0;
}

body.login #login label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink);
	letter-spacing: 0.005em;
	margin-bottom: 7px;
}

body.login #login input[type="text"],
body.login #login input[type="email"],
body.login #login input[type="password"] {
	width: 100%;
	font-family: var(--type-body);
	font-size: 15px;
	color: var(--ink);
	/* longhand, not the `background` shorthand — shorthand would reset
	   background-image back to none, defeating the icon rules below
	   despite their higher specificity (they only have to beat this rule
	   on the background-image property, which they no longer need to). */
	background-color: #fff;
	border: 1px solid var(--field-line);
	border-radius: var(--radius);
	padding: 13px 14px 13px 42px;
	outline: none;
	box-shadow: none;
	transition: border-color .16s, box-shadow .16s;
}
body.login #login input[type="text"]::placeholder,
body.login #login input[type="email"]::placeholder,
body.login #login input[type="password"]::placeholder {
	color: var(--ink-faint);
}
body.login #login input[type="text"]:focus,
body.login #login input[type="email"]:focus,
body.login #login input[type="password"]:focus {
	border-color: var(--field-line-strong);
	box-shadow: 0 0 0 4px oklch(0.66 0.19 42 / 0.18);
}

body.login #user_login,
body.login #reg_username {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa3ad' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'%3E%3C/rect%3E%3Cpath d='m3 7 9 6 9-6'%3E%3C/path%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 14px center;
	background-size: 17px 17px;
}

body.login #user_pass,
body.login #pass1,
body.login #pass2 {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa3ad' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'%3E%3C/rect%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'%3E%3C/path%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 14px center;
	background-size: 17px 17px;
}

body.login #reg_email {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa3ad' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'%3E%3C/rect%3E%3Cpath d='m3 7 9 6 9-6'%3E%3C/path%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 14px center;
	background-size: 17px 17px;
}

body.login p.forgetmenot {
	display: flex;
	align-items: center;
}
body.login #rememberme {
	appearance: none;
	width: 17px;
	height: 17px;
	margin: 0 9px 0 0;
	flex: none;
	border: 1px solid var(--field-line-strong);
	border-radius: 5px;
	background: #fff;
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: background .15s, border-color .15s;
}
body.login #rememberme:checked {
	background: var(--bg);
	border-color: var(--bg);
}
body.login #rememberme:checked::after {
	content: "";
	width: 9px;
	height: 5px;
	border-left: 2px solid var(--accent);
	border-bottom: 2px solid var(--accent);
	transform: rotate(-45deg) translateY(-1px);
}
body.login p.forgetmenot label {
	display: inline;
	margin: 0;
	font-size: 13.5px;
	font-weight: 400;
	color: var(--ink-soft);
}

body.login p.submit {
	margin-top: 4px;
}
body.login #wp-submit,
body.login #login form .button-primary {
	appearance: none;
	border: 0;
	width: 100%;
	font-family: var(--type-display);
	font-weight: 700;
	font-size: 15.5px;
	letter-spacing: 0.01em;
	text-align: center;
	/* WP core's .button-large gives this a generous line-height; reset it
	   so the button's height comes from padding alone, matching the
	   static template's sizing instead of stacking on top of it. */
	line-height: normal;
	padding: 15px 44px 15px 18px;
	border-radius: var(--radius);
	background-color: var(--accent);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'%3E%3C/path%3E%3Cpath d='m13 6 6 6-6 6'%3E%3C/path%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 18px center;
	background-size: 17px 17px;
	color: var(--accent-ink);
	box-shadow: 0 6px 18px oklch(0.66 0.19 42 / 0.28);
	text-shadow: none;
	height: auto;
	float: none;
	transition: transform .12s, filter .16s;
}
body.login #wp-submit:hover,
body.login #login form .button-primary:hover {
	filter: brightness(1.06);
	transform: translateY(-1px);
}

/* WP's show/hide-password toggle isn't in the static design — keep the
   functionality but de-chrome it so it blends into the input instead of
   looking like a separate grey button. */
body.login .wp-hide-pw {
	background: transparent;
	border: 0;
	box-shadow: none;
	color: var(--ink-faint);
}
body.login .wp-hide-pw:hover {
	background: transparent;
	color: var(--ink-soft);
}

/* #nav's link(s) get unwrapped (via JS, see functions.php) into this span
   and appended into .forgetmenot, so "Forgot password?" sits on the same
   row as "Keep me signed in" — margin-left:auto floats it to the right. */
body.login .o3-nav-inline {
	margin-left: auto;
}
body.login .o3-nav-inline a {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ink);
	text-decoration: none;
	border-bottom: 1.5px solid var(--accent);
	padding-bottom: 1px;
}
body.login .o3-nav-inline a:hover {
	opacity: 0.65;
}

body.login #login_error,
body.login .message,
body.login .success {
	border-left: 4px solid var(--accent);
	background: var(--panel-2);
	color: var(--ink);
	border-radius: var(--radius);
	font-size: 14px;
}

@media (max-width: 940px) {
	.o3-visual {
		position: relative;
		inset: auto;
		min-height: 46vh;
	}
	/* Below this breakpoint .o3-visual stacks above #login instead of
	   sitting behind it full-bleed, so nothing needs to stay clear of
	   #login's width anymore — undo the calc()s based on --panel-w. */
	.o3-visual__top,
	.o3-visual__body {
		max-width: 100%;
	}
	body.login div#login {
		width: 100%;
		margin: 0;
		min-height: auto;
		justify-content: flex-start;
		padding: 44px 28px;
	}
	.o3-props {
		grid-template-columns: 1fr;
		gap: 10px;
	}
	.o3-prop {
		flex-direction: row;
		align-items: center;
		gap: 12px;
	}
	.o3-prop__d {
		display: none;
	}
}

@media (max-width: 520px) {
	.o3-visual__top {
		padding: 22px 24px 0;
	}
	.o3-visual__body {
		padding-left: 24px;
		padding-right: 24px;
	}
	.o3-topnote {
		display: none;
	}
}