/* =========================================================================
   StreamTech Community — front-end styles
   Login screen built to match Figma "Login" (node 2:3).
   ========================================================================= */

/* ---- Brand fonts (already present on the site) --------------------------- */
@font-face {
	font-family: "Toronto";
	src: url("/wp-content/custom-fonts/Toronto.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Neue Montreal";
	src: url("/wp-content/custom-fonts/NeueMontreal-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Neue Montreal";
	src: url("/wp-content/custom-fonts/NeueMontreal-Medium.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

/* ---- Design tokens ------------------------------------------------------- */
.stc-split,
.stc-placeholder {
	--stc-bg:        #f8f7f2;
	--stc-input-bg:  #e8e5db;
	--stc-muted:     #626262;
	--stc-teal:      #1c8b97;
	--stc-teal-dark: #16747e;
	--stc-text:      #000000;
	--stc-font:      "Neue Montreal", -apple-system, "Segoe UI", Roboto, sans-serif;
	--stc-display:   "Toronto", "Neue Montreal", sans-serif;
}

/* -------------------------------------------------------------------------
   Neutralise the theme's default page chrome on the Community page so the
   split screen can sit flush under the header (kept via get_header/footer).
   ------------------------------------------------------------------------- */
body.stc-community #Subheader,
body.stc-community .mfn-breadcrumbs,
body.stc-community .single_page_title { display: none !important; }

/* Make the Header Builder template a solid, static bar on this page (Figma
   shows a solid green header with content beneath, not a transparent overlay). */
body.stc-community #mfn-header-template.mfn-header-tmpl-absolute,
body.stc-community #mfn-header-template {
	position: static !important;
	background-color: #546552 !important;
}
body.stc-community #Content { padding-top: 0 !important; padding-bottom: 0 !important; }
body.stc-community #Content .content_wrapper,
body.stc-community .section.the_content .section_wrapper { max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; }
body.stc-community .the_content_wrapper { margin: 0 !important; }
body.stc-community { overflow-x: hidden; }

/* -------------------------------------------------------------------------
   Full-bleed split layout
   Left media : 1119 / 1920 = 58.28%   |   Right panel : 801 / 1920 = 41.72%
   ------------------------------------------------------------------------- */
.stc-split {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: 1119fr 801fr;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	min-height: calc(100vh - var(--stc-header-h, 96px));
	background: var(--stc-bg);
	font-family: var(--stc-font);
	color: var(--stc-text);
}
.stc-split *,
.stc-split *::before,
.stc-split *::after { box-sizing: border-box; }

/* ---- Left: image + dark overlay + hero title ----------------------------- */
.stc-split__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;
	background-color: #2a2f2a;
	background-image: url("../img/login-hero.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
}
.stc-split__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.27);
	pointer-events: none;
}
.stc-hero-title {
	position: relative;
	z-index: 1;
	margin: 0;
	font-family: var(--stc-display);
	font-weight: 400;
	font-size: 65px;
	line-height: 1.12;
	letter-spacing: 0.5px;
	color: #ffffff;
	text-align: center;
}

/* ---- Right: sign-in panel ------------------------------------------------ */
.stc-split__panel {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 48px 60px;
	background: var(--stc-bg);
}
.stc-auth {
	width: 480px;
	max-width: 100%;
}
.stc-auth__title {
	margin: 0;
	font-family: var(--stc-display);
	font-weight: 400;
	font-size: 32px;
	line-height: 1.15;
	color: var(--stc-text);
	text-align: center;
}
.stc-auth__subtitle {
	margin: 12px 0 0;
	font-family: var(--stc-font);
	font-weight: 400;
	font-size: 18px;
	line-height: 1.3;
	color: var(--stc-text);
	text-align: center;
}

/* ---- Form ---------------------------------------------------------------- */
.stc-form {
	display: flex;
	flex-direction: column;
	gap: 49px;
	margin-top: 48px;
}
.stc-field {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.stc-label {
	font-family: var(--stc-font);
	font-weight: 400;
	font-size: 18px;
	line-height: 1.1;
	color: var(--stc-text);
}
/* High specificity + !important so the theme's global form styles can't
   shrink or restyle the fields (BeTheme forces width:230px / padding:10px). */
body.stc-community .stc-split .stc-input {
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 16px 24px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: var(--stc-input-bg) !important;
	font-family: var(--stc-font) !important;
	font-size: 18px !important;
	line-height: 1.2 !important;
	color: var(--stc-text) !important;
	outline: none !important;
	box-shadow: none !important;
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box !important;
}
body.stc-community .stc-split .stc-input::placeholder { color: var(--stc-muted) !important; opacity: 1; }
body.stc-community .stc-split .stc-input:focus { box-shadow: inset 0 0 0 2px rgba(28, 139, 151, 0.55) !important; }

/* ---- Submit group (Forgot password + button) ----------------------------- */
.stc-submit {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}
.stc-forgot {
	font-family: var(--stc-font);
	font-size: 12px;
	line-height: 1.2;
	color: var(--stc-muted);
	text-decoration: none;
}
.stc-forgot:hover { text-decoration: underline; }
body.stc-community .stc-split .stc-btn {
	width: 100% !important;
	height: auto !important;
	margin: 0 !important;
	padding: 16px 24px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: var(--stc-teal) !important;
	font-family: var(--stc-font) !important;
	font-size: 18px !important;
	line-height: 1.2 !important;
	color: #ffffff !important;
	text-align: center;
	cursor: pointer;
	box-sizing: border-box !important;
	transition: background-color 0.15s ease;
}
body.stc-community .stc-split .stc-btn:hover { background: var(--stc-teal-dark) !important; }

/* ---- Error message ------------------------------------------------------- */
.stc-error {
	margin: 20px 0 0;
	padding: 12px 16px;
	background: #fdecea;
	border-left: 3px solid #d64541;
	font-size: 15px;
	color: #8a1f1b;
	text-align: left;
}
.stc-notice {
	margin: 20px 0 0;
	padding: 12px 16px;
	background: #e8f6ee;
	border-left: 3px solid #2e9e5b;
	font-size: 15px;
	color: #1c6b3a;
	text-align: left;
}
.stc-auth__foot { margin: 20px 0 0; text-align: center; font-size: 14px; }
.stc-auth__foot a { color: #1c8b97; text-decoration: none; cursor: pointer; }
.stc-auth__foot a:hover { text-decoration: underline; }

/* ---- Logged-in placeholder ---------------------------------------------- */
.stc-placeholder {
	max-width: 720px;
	margin: 60px auto;
	padding: 0 20px;
	font-family: var(--stc-font);
	text-align: center;
}
.stc-placeholder .stc-logout {
	display: inline-block;
	margin-top: 8px;
	padding: 12px 24px;
	background: var(--stc-teal);
	color: #fff;
	text-decoration: none;
}

/* =========================================================================
   Responsive — the Figma file is desktop-only, so below 992px the split
   stacks: image banner on top, sign-in panel beneath.
   ========================================================================= */
@media (max-width: 991px) {
	.stc-split {
		grid-template-columns: 1fr;
		min-height: 0;
	}
	.stc-split__media {
		min-height: 300px;
		padding: 48px 24px;
	}
	.stc-hero-title { font-size: 46px; }
	.stc-split__panel { padding: 48px 24px 64px; }
	.stc-form { margin-top: 36px; gap: 36px; }
}

@media (max-width: 560px) {
	.stc-split__media { min-height: 220px; }
	.stc-hero-title { font-size: 36px; }
	.stc-auth__title { font-size: 26px; }
	.stc-auth__subtitle { font-size: 16px; }
	.stc-split__panel { padding: 36px 20px 56px; }
	body.stc-community .stc-split .stc-input,
	body.stc-community .stc-split .stc-btn { padding: 14px 18px !important; font-size: 16px !important; }
	.stc-label { font-size: 16px; }
}