/*
* 258HUB Login
*/

		:root {
			--hub-purple: #6f42c1;
			--hub-purple-dark: #2c1a4d;
			--hub-text: #2c2c2c;
			--hub-muted: #6b7280;
			--hub-border: #d8d8e0;
			--hub-background: #f7f5fb;
			--hub-white: #ffffff;
			--hub-radius: 18px;
		}

		body.login {
			background:
				radial-gradient(
					circle at top left,
					rgba(111, 66, 193, 0.12),
					transparent 34rem
				),
				var(--hub-background);

			font-family: "Poppins", -apple-system, BlinkMacSystemFont,
				"Segoe UI", sans-serif;
			color: var(--hub-text);
		}


		/* Login container */
		.login #login {
			width: min(420px, calc(100% - 40px));
			padding: 60px 0 40px;
		}


		/* 258HUB logo */
		.login h1.wp-login-logo {
			margin-bottom: 28px;
		}

		.login h1.wp-login-logo a {
			background-image: url(
				'https://258hub.ca/wp-content/uploads/2025/11/cropped-258HUB-Logo-300x159.png'
			);

			background-size: contain;
			background-position: center;
			background-repeat: no-repeat;

			width: 230px;
			height: 122px;

			margin: 0 auto;
		}


		/* Login card */
		.login form {
			background: var(--hub-white);

			border: 1px solid rgba(44, 26, 77, 0.08);
			border-radius: var(--hub-radius);

			box-shadow:
				0 18px 45px rgba(44, 26, 77, 0.10),
				0 3px 10px rgba(44, 26, 77, 0.05);

			padding: 30px;
		}


		/* Labels */
		.login label {
			color: var(--hub-text);
			font-size: 14px;
			font-weight: 600;
			line-height: 1.4;
		}


		/* Username/password inputs */
		.login form .input,
		.login input[type="text"],
		.login input[type="password"] {
			box-sizing: border-box;

			width: 100%;
			min-height: 48px;

			margin-top: 7px;

			padding: 9px 14px;

			background: #fff;
			color: var(--hub-text);

			border: 1px solid var(--hub-border);
			border-radius: 10px;

			box-shadow: none;

			font-family: inherit;
			font-size: 16px;
			line-height: 1.4;

			transition:
				border-color .2s ease,
				box-shadow .2s ease,
				background-color .2s ease;
		}


		/* Input focus */
		.login form .input:focus,
		.login input[type="text"]:focus,
		.login input[type="password"]:focus {
			border-color: var(--hub-purple);

			box-shadow:
				0 0 0 3px rgba(111, 66, 193, 0.16);

			outline: none;
		}


		/* Password wrapper */
		.login .wp-pwd {
			position: relative;
		}


		/* Leave room for password visibility button */
		.login .wp-pwd input {
			padding-right: 50px;
		}


		/* Password visibility icon */
		.login .button.wp-hide-pw {
			top: 7px;
			right: 4px;

			width: 42px;
			height: 42px;

			min-width: 42px;

			padding: 0;

			border: 0;
			background: transparent;
			box-shadow: none;

			color: var(--hub-purple);
		}

		.login .button.wp-hide-pw:hover,
		.login .button.wp-hide-pw:focus {
			color: var(--hub-purple-dark);
			background: transparent;
			box-shadow: none;
		}


		/* Remember me row */
		.login .forgetmenot {
			display: flex;
			align-items: center;
			gap: 6px;

			margin-top: 20px;
		}

		.login .forgetmenot label {
			font-weight: 500;
		}

		.login input[type="checkbox"] {
			border-color: var(--hub-border);
			border-radius: 4px;
			box-shadow: none;
		}

		.login input[type="checkbox"]:focus {
			border-color: var(--hub-purple);
			box-shadow: 0 0 0 2px rgba(111, 66, 193, 0.14);
		}

		.login input[type="checkbox"]:checked::before {
			content: url(
				"data:image/svg+xml;utf8,\
				<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'>\
				<path fill='%236f42c1' d='M14.83 4.89l1.34 1.34-7.84 7.84-4.5-4.5 1.34-1.34 3.16 3.16z'/>\
				</svg>"
			);

			margin: -3px 0 0 -4px;
		}


		/* Help icon beside Remember Me */
		.login .wp-tooltip__toggle {
			color: var(--hub-purple);
		}


		/* Submit row */
		.login .submit {
			clear: both;
			padding-top: 24px;
		}


		/* Main login button */
		.login #wp-submit {
			float: none;

			display: block;

			width: 100%;
			min-height: 48px;

			padding: 10px 24px;

			background:
				linear-gradient(
					0deg,
					var(--hub-purple-dark) 1%,
					var(--hub-purple) 100%
				);

			border: 0;
			border-radius: 999px;

			box-shadow: none;

			color: #fff;

			font-family: inherit;
			font-size: 16px;
			font-weight: 600;
			line-height: 1.4;

			text-shadow: none;

			cursor: pointer;

			transition:
				opacity .25s ease,
				transform .25s ease,
				box-shadow .25s ease;
		}

		.login #wp-submit:hover,
		.login #wp-submit:focus {
			opacity: .88;

			transform: translateY(-1px);

			box-shadow:
				0 7px 18px rgba(44, 26, 77, 0.18);

			color: #fff;
		}

		.login #wp-submit:active {
			transform: translateY(0);
		}


		/* Navigation links */
		.login #nav,
		.login #backtoblog {
			text-align: center;
			font-size: 14px;
		}

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

		.login #backtoblog {
			margin-top: 14px;
		}

		.login #nav a,
		.login #backtoblog a {
			color: var(--hub-purple);
			font-weight: 500;
			text-decoration: none;

			transition: color .2s ease;
		}

		.login #nav a:hover,
		.login #nav a:focus,
		.login #backtoblog a:hover,
		.login #backtoblog a:focus {
			color: var(--hub-purple-dark);
			text-decoration: underline;
		}


		/* Login errors/messages */
		.login .message,
		.login .notice,
		.login #login_error {
			margin-bottom: 20px;

			padding: 14px 16px;

			background: #fff;

			border-top: 0;
			border-right: 0;
			border-bottom: 0;
			border-left-width: 4px;

			border-radius: 8px;

			box-shadow:
				0 5px 18px rgba(44, 26, 77, 0.06);
		}

		.login .message,
		.login .notice-info {
			border-left-color: var(--hub-purple);
		}


		/* Privacy link if WordPress displays one */
		.login .privacy-policy-page-link {
			margin-top: 25px;
		}

		.login .privacy-policy-page-link a {
			color: var(--hub-muted);
		}


		/* Remove default button styling WordPress may apply */
		.login .button-primary {
			background-color: transparent;
			border-color: transparent;
		}


		/* Mobile */
		@media screen and (max-width: 480px) {

			.login #login {
				width: calc(100% - 30px);
				padding-top: 35px;
			}

			.login h1.wp-login-logo a {
				width: 190px;
				height: 101px;
			}

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