/**
 * High Peak Email-First Login — login-surface styles.
 *
 * Edit these values to restyle the login card without touching PHP. Tokens
 * mirror edCircuit's live site (Open Sans body, Raleway headings, #FF8500).
 */

:root {
	--hpef-orange: #FF8500;
	--hpef-orange-dark: #e07600;
	--hpef-ink: #313131;
	--hpef-muted: #6a6a6a;
	--hpef-line: #e3e3e3;
	--hpef-bg: #ffffff;
	--hpef-chip-bg: #fff5ea;
	--hpef-chip-border: #ffd9ad;
	--hpef-radius: 8px;
	--hpef-pad: 30px;
	--hpef-font-body: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--hpef-font-head: "Raleway", "Open Sans", sans-serif;
}

.hpef-card {
	max-width: 420px;
	margin: 6% auto 0;
	background: var(--hpef-bg);
	border: 1px solid var(--hpef-line);
	border-top: 4px solid var(--hpef-orange);
	border-radius: var(--hpef-radius);
	padding: var(--hpef-pad);
	box-shadow: 0 12px 34px rgba(0, 0, 0, .10);
	font-family: var(--hpef-font-body);
	color: var(--hpef-ink);
}

.hpef-card__logo {
	display: block;
	height: 28px;
	margin: 0 0 20px;
}

.hpef-card h1 {
	font-family: var(--hpef-font-head);
	font-size: 22px;
	font-weight: 600;
	color: var(--hpef-ink);
	margin: 0 0 14px;
	padding: 0;
	line-height: 1.25;
}

.hpef-card p {
	font-size: 14px;
	color: var(--hpef-muted);
	line-height: 1.6;
	margin: 0 0 16px;
}

.hpef-card__label {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--hpef-muted);
	margin: 0 0 6px;
	display: block;
}

.hpef-email-chip {
	display: inline-block;
	font-weight: 600;
	color: var(--hpef-ink);
	background: var(--hpef-chip-bg);
	border: 1px solid var(--hpef-chip-border);
	border-radius: 6px;
	padding: 6px 12px;
	font-size: 14px;
	word-break: break-all;
}

/* Forms carry no box of their own — fixes the framed-button problem. */
.hpef-card form {
	margin: 0 0 8px;
	padding: 0;
	border: 0;
	background: none;
}

.hpef-input {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	font-size: 14px;
	font-family: var(--hpef-font-body);
	border: 1px solid var(--hpef-line);
	border-radius: 6px;
	margin: 0 0 10px;
}
.hpef-input:focus {
	border-color: var(--hpef-orange);
	outline: none;
	box-shadow: 0 0 0 3px var(--hpef-chip-border);
}

.hpef-btn {
	display: block;
	width: 100%;
	box-sizing: border-box;
	background: var(--hpef-orange);
	color: #fff;
	border: 0;
	border-radius: 6px;
	padding: 13px 16px;
	font-family: var(--hpef-font-body);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s ease;
}
.hpef-btn:hover,
.hpef-btn:focus { background: var(--hpef-orange-dark); color: #fff; }
.hpef-btn:focus-visible { outline: 3px solid var(--hpef-chip-border); outline-offset: 2px; }

.hpef-btn--secondary {
	background: #fff;
	color: var(--hpef-ink);
	border: 1px solid var(--hpef-line);
}
.hpef-btn--secondary:hover,
.hpef-btn--secondary:focus { background: #f7f7f7; color: var(--hpef-ink); }

/* Quiet "not now" escape — a text link, not a button. */
.hpef-link {
	display: inline-block;
	background: none;
	border: 0;
	padding: 6px 0;
	margin: 6px 0 0;
	color: var(--hpef-muted);
	font-size: 13px;
	text-decoration: underline;
	cursor: pointer;
}
.hpef-link:hover { color: var(--hpef-ink); }

.hpef-divider { border: 0; border-top: 1px solid var(--hpef-line); margin: 18px 0; }

.hpef-note { font-size: 12px; color: var(--hpef-muted); margin: 12px 0 0; }
.hpef-warn { color: #b32d0f; }