/* RF SheConnects sign-in.
 *
 * Palette is the wireframe's own RF SheConnects set - nothing invented here.
 * Everything is sized with clamp() against the viewport and there are no fixed heights, so the
 * page holds its shape from 80% to 110% browser zoom: at 80% the hero copy and panel grow rather
 * than leaving a band of empty white, and at 110% the panel scrolls inside itself instead of
 * pushing the page into a scrollbar.
 */

:root {
	--rf-teal: #003c3c;
	--rf-teal-deep: #002a2a;
	--rf-green: #007a4d;
	--rf-gold: #c0a062;
	--sc-purple: #4b3b8f;
	--rf-page: #f8f8f8;
	--rf-ink: #1c1f1f;
	--rf-muted: #808a8a;
	--rf-line: #e6e9e9;
	--rf-control: #f2f4f4;
	--rf-link: #005f5c;
}

/* the product's web shell adds chrome we do not want on a full-bleed sign-in */
body.page-login,
body[data-path="login"],
body[data-path="admin"] {
	margin: 0;
	background: var(--rf-page);
}
body[data-path="login"] .navbar,
body[data-path="admin"] .navbar,
body[data-path="login"] footer,
body[data-path="admin"] footer,
body[data-path="login"] .web-footer,
body[data-path="admin"] .web-footer { display: none !important; }

body[data-path="login"] .page_content,
body[data-path="admin"] .page_content,
body[data-path="login"] main,
body[data-path="admin"] main,
body[data-path="login"] .main-section,
body[data-path="admin"] .main-section {
	padding: 0 !important;
	margin: 0 !important;
	max-width: none !important;
}

/* ───────────────────────────── shell ───────────────────────────── */
.rf-login {
	display: grid;
	/* the panel is allowed to grow with zoom but never squeezes the hero out */
	grid-template-columns: minmax(0, 1.25fr) clamp(360px, 34vw, 560px);
	min-height: 100vh;
	min-height: 100dvh;
	background: var(--rf-page);
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: var(--rf-ink);
}

/* ───────────────────────────── hero ───────────────────────────── */
.rf-hero {
	position: relative;
	overflow: hidden;
	background: var(--rf-teal-deep);
	/* the seam: RF green into SheConnects purple, echoing the reference layout */
	border-right: 4px solid transparent;
	border-image: linear-gradient(180deg, var(--rf-green), var(--sc-purple)) 1;
	min-height: clamp(220px, 32vh, 100vh);
}

.rf-slides { position: absolute; inset: 0; }

/* The top row carries white type over whatever photograph is showing. Slide 1 is a brightly lit
   screen and the wordmark vanished into it, so the band gets its own scrim rather than relying on
   the per-slide gradient. */
.rf-hero::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: clamp(90px, 15vh, 170px);
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(0,32,32,.72) 0%, rgba(0,32,32,.34) 55%, rgba(0,32,32,0) 100%);
}

.rf-slide {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	transition: opacity 1.1s ease;
	pointer-events: none;
}
.rf-slide.is-active { opacity: 1; }

.rf-slide img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* a slow drift keeps a still photograph from looking like a broken image */
	animation: rf-drift 22s ease-in-out infinite alternate;
}
@keyframes rf-drift {
	from { transform: scale(1.04) translate3d(0, 0, 0); }
	to   { transform: scale(1.12) translate3d(0, -1.5%, 0); }
}

/* teal scrim: dark enough at the bottom for white copy to pass contrast */
.rf-slide::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(0, 42, 42, .55) 0%, rgba(0, 42, 42, .12) 34%, rgba(0, 42, 42, .82) 100%),
		linear-gradient(90deg, rgba(0, 42, 42, .38), rgba(0, 42, 42, 0) 60%);
}

.rf-slide figcaption {
	position: absolute;
	left: clamp(24px, 4vw, 64px);
	right: clamp(24px, 6vw, 96px);
	bottom: clamp(56px, 9vh, 104px);
	z-index: 2;
	max-width: 30em;
}
.rf-eyebrow {
	display: block;
	color: var(--rf-gold);
	font-size: clamp(11px, .78vw, 13px);
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	margin-bottom: clamp(8px, 1.2vh, 14px);
}
.rf-slide h2 {
	margin: 0 0 clamp(8px, 1.4vh, 16px);
	color: #fff;
	font-size: clamp(26px, 2.9vw, 46px);
	line-height: 1.12;
	font-weight: 400;
	letter-spacing: -.01em;
}
.rf-slide h2 b { font-weight: 700; }
.rf-slide p {
	margin: 0;
	color: rgba(255, 255, 255, .88);
	font-size: clamp(13px, 1.05vw, 17px);
	line-height: 1.5;
	max-width: 34em;
}

.rf-hero-top {
	position: absolute;
	top: clamp(18px, 3vh, 38px);
	left: clamp(24px, 4vw, 64px);
	right: clamp(24px, 4vw, 64px);
	z-index: 3;
	display: flex;
	align-items: center;
	gap: clamp(10px, 1.4vw, 20px);
	flex-wrap: wrap;
}
.rf-hero-logo { height: clamp(34px, 4.4vh, 56px); width: auto; filter: drop-shadow(0 1px 6px rgba(0,26,26,.55)); }
.rf-hero-rule { width: 1px; height: clamp(18px, 2.4vh, 30px); background: rgba(255, 255, 255, .4); }
.rf-hero-kicker {
	color: rgba(255, 255, 255, .92);
	font-size: clamp(10px, .78vw, 13px);
	font-weight: 600;
	letter-spacing: .17em;
	text-transform: uppercase;
}
.rf-sdg {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: clamp(5px, .8vh, 9px) clamp(12px, 1.2vw, 18px);
	border-radius: 999px;
	background: rgba(0, 42, 42, .5);
	border: 1px solid rgba(255, 255, 255, .22);
	backdrop-filter: blur(6px);
	color: #fff;
	font-size: clamp(11px, .8vw, 13px);
	font-weight: 600;
	white-space: nowrap;
}
.rf-sdg::before {
	content: "";
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--rf-green);
	box-shadow: 0 0 0 3px rgba(0, 122, 77, .28);
}

.rf-dots {
	position: absolute;
	left: clamp(24px, 4vw, 64px);
	bottom: clamp(22px, 3.6vh, 40px);
	z-index: 3;
	display: flex;
	gap: 8px;
}
.rf-dot {
	width: clamp(22px, 2.4vw, 34px);
	height: 4px;
	border: 0;
	padding: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, .34);
	cursor: pointer;
	transition: background .3s ease, width .3s ease;
}
.rf-dot.is-on { background: #fff; width: clamp(34px, 3.4vw, 48px); }

/* ───────────────────────────── panel ───────────────────────────── */
.rf-panel {
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	/* at 110% zoom a short viewport scrolls the panel, not the whole page */
	overflow-y: auto;
	padding: clamp(24px, 4vh, 56px) clamp(22px, 2.6vw, 52px);
}
.rf-panel-inner { width: 100%; max-width: 400px; }

.rf-panel-logo {
	display: block;
	height: clamp(34px, 4.6vh, 54px);
	width: auto;
	margin: 0 auto clamp(16px, 2.6vh, 30px);
}
.rf-title {
	margin: 0 0 6px;
	text-align: center;
	color: var(--rf-teal);
	font-size: clamp(20px, 1.7vw, 27px);
	font-weight: 700;
	letter-spacing: -.01em;
}
.rf-sub {
	margin: 0 0 clamp(18px, 3vh, 30px);
	text-align: center;
	color: var(--rf-muted);
	font-size: clamp(13px, 1vw, 15px);
}

/* form controls */
.rf-card .form-group { margin-bottom: clamp(12px, 2vh, 18px); position: relative; }
.rf-card label {
	display: block;
	margin-bottom: 6px;
	color: var(--rf-ink);
	font-size: clamp(12px, .9vw, 13.5px);
	font-weight: 600;
}
.rf-card .form-control {
	width: 100%;
	height: auto;
	padding: clamp(10px, 1.5vh, 13px) 14px;
	background: var(--rf-control);
	border: 1px solid var(--rf-line);
	border-radius: 8px;
	color: var(--rf-ink);
	font-size: clamp(13px, 1vw, 15px);
	transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.rf-card .form-control:focus {
	background: #fff;
	border-color: var(--rf-teal);
	box-shadow: 0 0 0 3px rgba(0, 60, 60, .1);
	outline: none;
}
.rf-card .form-control::placeholder { color: #a7b0b0; }

.rf-password-group .toggle-password {
	position: absolute;
	right: 12px;
	top: calc(50% + 9px);
	transform: translateY(-50%);
	cursor: pointer;
	font-size: clamp(11px, .82vw, 12.5px);
	font-weight: 600;
	color: var(--rf-link);
	user-select: none;
}

/* buttons - Frappe's own classes, restyled */
.rf-card .btn { border-radius: 8px; font-weight: 600; }
.rf-card .btn-block { display: block; width: 100%; }
.rf-card .btn-primary,
.rf-card .btn-primary.btn-login {
	margin-top: clamp(6px, 1.2vh, 12px);
	padding: clamp(11px, 1.7vh, 14px) 16px;
	background: var(--rf-teal) !important;
	border: 1px solid var(--rf-teal) !important;
	color: #fff !important;
	font-size: clamp(14px, 1.05vw, 15.5px);
}
.rf-card .btn-primary:hover { background: var(--rf-teal-deep) !important; border-color: var(--rf-teal-deep) !important; }
.rf-card .btn-primary:focus-visible { outline: 3px solid rgba(0, 60, 60, .28); outline-offset: 2px; }

.rf-card .btn-default,
.rf-card .btn-login-option {
	margin-top: 10px;
	padding: clamp(10px, 1.5vh, 13px) 16px;
	background: #fff !important;
	border: 1px solid var(--rf-line) !important;
	color: var(--rf-teal) !important;
	font-size: clamp(13px, 1vw, 14.5px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}
.rf-card .btn-default:hover,
.rf-card .btn-login-option:hover {
	border-color: var(--rf-teal) !important;
	box-shadow: 0 0 0 3px rgba(0, 60, 60, .07);
}
.rf-sso-icon { display: inline-flex; align-items: center; }
.rf-sso-icon img, .rf-sso-icon svg { height: 18px; width: 18px; }

.rf-forgot-row { margin-top: clamp(10px, 1.6vh, 14px); text-align: right; }
.rf-quiet-link {
	color: var(--rf-link);
	font-size: clamp(12px, .9vw, 13.5px);
	font-weight: 600;
	text-decoration: none;
}
.rf-quiet-link:hover { text-decoration: underline; }

.rf-or {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: clamp(14px, 2.4vh, 22px) 0 clamp(6px, 1vh, 10px);
}
.rf-or-line { flex: 1; height: 1px; background: var(--rf-line); }
.rf-or-text { color: var(--rf-muted); font-size: clamp(10px, .78vw, 12px); font-weight: 700; letter-spacing: .12em; }

.rf-card .page-card-head h4 {
	margin: 0 0 clamp(12px, 2vh, 18px);
	color: var(--rf-teal);
	font-size: clamp(15px, 1.2vw, 18px);
	font-weight: 700;
}

.rf-panel-foot {
	margin-top: clamp(20px, 3.4vh, 36px);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	color: var(--rf-muted);
	font-size: clamp(10px, .78vw, 12px);
}
.rf-panel-foot img { height: clamp(14px, 1.8vh, 20px); width: auto; opacity: .8; }



/* ─────────────────── narrow / short viewports ─────────────────── */
@media (max-width: 980px) {
	.rf-login { grid-template-columns: 1fr; min-height: 0; }
	.rf-hero { min-height: clamp(200px, 34vh, 320px); border-right: 0; border-bottom: 4px solid var(--rf-green); }
	.rf-slide figcaption { bottom: clamp(40px, 7vh, 64px); }
	.rf-slide h2 { font-size: clamp(21px, 4.6vw, 30px); }
	.rf-panel { overflow: visible; }
	.rf-panel-inner { max-width: 440px; }
}

/* a laptop at 110% zoom lands near here: give the hero copy less room, not the form */
@media (max-height: 700px) and (min-width: 981px) {
	.rf-slide figcaption { bottom: clamp(44px, 7vh, 68px); }
	.rf-slide h2 { font-size: clamp(22px, 2.2vw, 32px); }
	.rf-slide p { display: none; }
	.rf-panel-logo { margin-bottom: 14px; }
	.rf-sub { margin-bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.rf-slide, .rf-slide img { transition: none; animation: none; }
}