/* e-Mandhai login page.
 *
 * Loaded from emandhai_ui/www/login.html via include_style(). Only that page
 * uses it, so it is kept out of web_include_css.
 *
 * .emd-login is position:fixed rather than relying on the web.html container.
 * templates/web.html wraps page_content in a bootstrap grid whose width and
 * padding would otherwise have to be unpicked selector by selector; taking the
 * viewport directly is both shorter and immune to changes in that wrapper.
 *
 * Colours are literal rather than var()-driven: this page renders before any
 * desk theme loads, and it should look identical whatever the site theme is.
 */

:root {
	--emd-green: #1e5a38;
	--emd-green-600: #2f7d4f;
	--emd-green-050: #eef5f1;
	--emd-gold: #b8862b;
	--emd-ink: #16241d;
	--emd-ink-soft: #4d6357;
	--emd-line: #d7e5dc;
}

/* web.html chrome we do not want behind a full-bleed page */
body[data-path="login"] .web-footer,
body[data-path="login"] footer {
	display: none;
}

body[data-path="login"] {
	background: #ffffff;
}

.emd-login {
	position: fixed;
	inset: 0;
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	overflow-y: auto;
	background: #ffffff;
	z-index: 1;
}

/* ---------------------------------------------------------------- hero --- */

.emd-login__hero {
	position: relative;
	display: flex;
	align-items: center;
	padding: 64px 72px;
	overflow: hidden;
	background:
		radial-gradient(1100px 520px at 78% 6%, rgba(184, 134, 43, 0.16), transparent 62%),
		radial-gradient(760px 620px at 8% 96%, rgba(30, 90, 56, 0.13), transparent 68%),
		linear-gradient(152deg, #f2f8f4 0%, #fbf9f2 100%);
}

/* faint dot lattice, kept behind the copy */
.emd-login__hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(30, 90, 56, 0.16) 1px, transparent 1px);
	background-size: 22px 22px;
	opacity: 0.5;
	pointer-events: none;
}

.emd-hero__inner {
	position: relative;
	max-width: 560px;
}

.emd-hero__brand {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 44px;
}

.emd-hero__brand img {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	box-shadow: 0 8px 20px rgba(30, 90, 56, 0.22);
}

.emd-hero__brand span {
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -0.4px;
	color: var(--emd-green);
}

.emd-hero__eyebrow {
	margin: 0 0 18px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--emd-gold);
}

.emd-hero__title {
	margin: 0 0 22px;
	font-size: clamp(34px, 3.4vw, 52px);
	line-height: 1.08;
	font-weight: 800;
	letter-spacing: -1.4px;
	color: var(--emd-green);
}

.emd-hero__body {
	margin: 0 0 40px;
	max-width: 46ch;
	font-size: 17px;
	line-height: 1.65;
	color: var(--emd-ink-soft);
}

.emd-hero__quote {
	margin: 0;
	padding: 4px 0 4px 20px;
	border-left: 3px solid var(--emd-gold);
}

.emd-hero__quote p {
	margin: 0 0 8px;
	font-family: Georgia, "Times New Roman", serif;
	font-style: italic;
	font-size: 17px;
	line-height: 1.55;
	color: var(--emd-ink);
}

.emd-hero__quote cite {
	font-style: normal;
	font-size: 13px;
	font-weight: 700;
	color: var(--emd-gold);
}

/* --------------------------------------------------------------- panel --- */

.emd-login__panel {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 48px 40px;
	background: #ffffff;
}

.emd-panel__inner {
	width: 100%;
	max-width: 400px;
}

/* the card is the frame in upstream's markup; here the panel is the frame */
.emd-login .login-content.page-card {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}

.emd-card-head {
	margin-bottom: 8px;
}

.emd-card-mark {
	width: 62px;
	height: 62px;
	border-radius: 16px;
	box-shadow: 0 10px 24px rgba(30, 90, 56, 0.2);
}

.emd-login .page-card-head h4 {
	font-size: 27px;
	font-weight: 700;
	letter-spacing: -0.5px;
	color: var(--emd-ink);
}

.emd-login .page-card-subtitle {
	color: var(--emd-ink-soft);
}

/* inputs */
.emd-login .form-control {
	height: 44px;
	border-radius: 9px;
	border: 1px solid var(--emd-line);
	background: #f6faf7;
	font-size: 15px;
}

.emd-login .form-control:focus {
	background: #ffffff;
	border-color: var(--emd-green-600);
	box-shadow: 0 0 0 3px rgba(47, 125, 79, 0.16);
}

.emd-login label {
	font-weight: 600;
	color: var(--emd-ink);
}

/* primary action */
.emd-login .es-button[data-variant="solid"] {
	height: 46px;
	border-radius: 9px;
	font-size: 15px;
	font-weight: 600;
	background-color: var(--emd-green);
	border-color: var(--emd-green);
	color: #ffffff;
	box-shadow: 0 8px 18px rgba(30, 90, 56, 0.22);
}

.emd-login .es-button[data-variant="solid"]:hover,
.emd-login .es-button[data-variant="solid"]:focus {
	background-color: var(--emd-green-600);
	border-color: var(--emd-green-600);
}

.emd-login a {
	color: var(--emd-green-600);
}

.emd-login a:hover {
	color: var(--emd-green);
}

.emd-secured {
	margin: 26px 0 0;
	text-align: center;
	font-size: 12.5px;
	color: #8a9c92;
}

.emd-secured::before {
	content: "\1F512";
	margin-right: 6px;
}

/* ---------------------------------------------------------- responsive --- */

@media (max-width: 992px) {
	.emd-login {
		grid-template-columns: 1fr;
	}

	/* aria-hidden decorative panel -- drop it rather than stack it */
	.emd-login__hero {
		display: none;
	}
}

@media (max-width: 480px) {
	.emd-login__panel {
		padding: 32px 20px;
	}
}