/**
 * Custom User Forms - added by BOBA Jan 2026. This file is not compiled by Grunt, as NPM
 * was giving issues with Node-Sass and other libs. I determined it was safer to ignore the
 * pre-existing build and just add my own vanilla CSS file here.
 ============================================================================ */

:root {
	--color-neutral: rgb(109, 109, 109);
	--color-neutral-mid: rgb(178, 178, 178);
	--color-neutral-light: rgb(223, 223, 223);
	--color-neutral-lighter: #f9f8fa;
	--color-neutral-dark: rgb(45, 45, 45);
	--color-brand: #49267f;
	--color-brand-alt: #ff0ba9;

	--color-error: rgb(223, 122, 119);
	--color-error-tint: rgb(253, 246, 246);
}

body.path-user .page {
	background-color: #fff;
}

/* Container around the login form */
body.path-user .regions {
	background-color: transparent;
	width: 480px;
	max-width: 100%;
	padding: 0;
	margin: 0 auto;
}

/* Validation messages */
body.path-user .messages {
	margin-top: -3rem;
	padding: -0.75rem 2rem;
}

.messages--error {
	color: var(--color-neutral-dark);
	border-color: var(--color-error);
	background-color: var(--color-error-tint);
}

.messages a {
	color: var(--neutral-dark);
	text-decoration: underline;
}
.messages a:hover,
.messages a:focus {
	color: var(--color-brand);
}

/* Tabs - Log in / Register */

body.path-user-password #block-matching-theme-local-tasks {
	display: none !important;
}

.tabs__tab:has(a[href^="/user/password"]) {
	/* Hide the "Forgot Password" tab */
	display: none !important;
}

body.path-user .block:has(.tabs) {
	margin: 0;
}
body.path-user .tabs {
	margin: 0;
}

body.path-user .tabs .is-horizontal ul.tabs--primary {
	display: flex;
	flex-direction: row;
	justify-content: stretch;
	overflow: hidden;
	border: none;
}

body.path-user .tabs .is-horizontal ul.tabs--primary li {
	flex: 1;
	text-align: center;
}

body.path-user .tabs .is-horizontal ul.tabs--primary a {
	border: 0;
	border-bottom: 4px solid var(--color-neutral-light);
	background: transparent;
	color: var(--color-neutral-mid);
	font-weight: normal;
	transition:
		color 0.3s ease,
		border-bottom-color 0.3s ease;
}
body.path-user .tabs .is-horizontal ul.tabs--primary a:hover,
body.path-user .tabs .is-horizontal ul.tabs--primary a:focus {
	color: var(--color-neutral-dark);
	border-bottom-color: var(--color-neutral);
}

body.path-user .tabs .is-horizontal ul.tabs--primary a.is-active {
	font-weight: bold;
	color: var(--color-neutral-dark);
	border-bottom-color: var(--color-brand);
}

body.path-user .block:has(form) {
	margin-top: 0.75rem;
}

/* Custom forgot-password-link */
a.forgot-password-link {
	color: var(--color-brand);
	font-size: 0.9rem;
	display: block;
	margin-top: 1rem;
	text-align: right;
	transition: color 0.3s ease;
	text-decoration: none;
}
a.forgot-password-link:hover,
a.forgot-password-link:focus {
	color: var(--color-neutral-dark);
	text-decoration: underline;
}

/* Actual form element */

a.back-to-login-link {
	display: block;
	color: var(--color-neutral);
	font-size: 0.9rem;
	margin-bottom: 0.75rem;
	text-decoration: none;
	transition: color 0.3s ease;
}
a.back-to-login-link:hover,
a.back-to-login-link:focus {
	color: var(--color-neutral-dark);
	text-decoration: underline;
}

a.back-to-login-link::before {
	content: "";
	position: relative;
	display: inline-block;
	height: 1.6em;
	width: 1.6em;
	top: 0.4em;
	margin-left: -0.4em;
	background: currentColor;
	mask: url("../../../images/icons/chevron-left.svg") no-repeat center /
		contain;
}

h2.user-form-title {
	font-weight: 800;
	font-size: 1.35em;
	color: var(--color-neutral-dark);
	margin-bottom: 1rem;
}
body.path-user form {
	background-color: var(--color-neutral-lighter);
	padding: 2rem;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	margin-bottom: 3rem;
}

body.path-user form .form-required::after {
	font-weight: bold;
	color: var(--color-neutral-dark);
}

body.path-user form label {
	color: var(--color-neutral-dark);
	font-weight: normal;
}
body.path-user form label + input {
	margin-top: 0.5rem;
}

body.path-user form input[type="text"],
body.path-user form input[type="password"],
body.path-user form input[type="email"] {
	border-radius: 2px;
	border: 1px solid var(--color-neutral-light) !important;
	color: var(--color-neutral-dark) !important;
	font-size: 1rem;
	padding: 1.25em 0.75em;
	line-height: 1;
	font-size: 1.2em;
}

body.path-user form input[type="text"]:focus,
body.path-user form input[type="email"]:focus,
body.path-user form input[type="password"]:focus {
	border-color: var(--color-brand) !important;
	box-shadow: 0 0 0 3px rgba(73, 38, 127, 0.2);
}

body.path-user form input + .description {
	margin-top: 0.25rem;
}

body.path-user form div.password-suggestions,
body.path-user form .description,
body.path-user form p,
body.path-user form .password-strength__title,
body.path-user form .password-confirm {
	color: var(--color-neutral);
	font-size: 0.9rem;
	line-height: 1.3;
}

body.path-user form .password-strength__title,
body.path-user form .password-confirm {
	margin-top: 0.5rem;
	display: block;
}

body.path-user form ::placeholder {
	color: var(--color-neutral-mid);
}

body.path-user form .js-form-item {
	margin-bottom: 1.25rem;
}

body.path-user form #edit-actions {
	margin: 0;
}

body.path-user form input.form-submit {
	width: 100%;
	display: block;
	color: var(--color-neutral);
	background: var(--color-neutral-light);
	box-shadow: none;
	border: 0 !important;
	border-radius: 2px;
	padding: 0.75em 1.5em;
	height: auto;
	margin: 0;
	transition:
		background 0.3s ease,
		color 0.3s ease;
}

body.path-user form input.form-submit:hover,
body.path-user form input.form-submit:focus {
	background: var(--color-neutral-dark);
	color: #fff;
}

/* Hide logi n link from footer */
body.path-user .footer-login-link {
	display: none;
}

/* MAke the overall page more appealing */
body.path-user,
body.path-user .dialog-off-canvas-main-canvas {
	min-height: 100dvh;
}
body.path-user .page {
	display: flex;
	flex-direction: column;
	min-height: 100dvh;
}
body.path-user .l-footer {
	margin-top: auto;
}
body.path-user .l-footer .regions {
	width: 100%;
	max-width: 75em;
}

body.path-user #rid-subfeatures-fourth {
	display: none;
}

/* Password Reset UI */

body[class*="path-query-pass-reset-token"] #block-returntothedashboard {
	display: none;
}

.password-strength__meter {
	height: 0.5rem;
}

.js-password-strength__indicator.is-weak {
	background: var(--color-error);
}
.js-password-strength__indicator.is-fair {
	background: orange;
}
.js-password-strength__indicator.is-good {
	background: green;
}
.js-password-strength__indicator.is-strong {
	background: green;
}

.password-strength:has(.is-weak) .js-password-strength__text {
	color: var(--color-error);
}
.password-strength:has(.is-fair) .js-password-strength__text {
	color: orange;
}
.password-strength:has(.is-good) .js-password-strength__text {
	color: green;
}
.password-strength:has(.is-strong) .js-password-strength__text {
	color: green;
}