/* Sticky footer: fill the viewport so the footer sits at the
   bottom on short pages, and flows below content on long ones. */
body.syl {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
/* The per-page content wrapper (.ct) sets min-height:100vh on itself, which
   makes it claim the whole viewport on its own and pushes the footer below
   the fold. As the body's flex child it should instead grow to fill only the
   space left above the footer — so the footer lands at the viewport bottom on
   short pages and flows after the content on long ones. Higher specificity +
   later load order overrides each page's .ct rule. */
body.syl > .ct {
	flex: 1 0 auto;
	min-height: 0;
}
.syl-site-footer {
	flex-shrink: 0;
	margin-top: auto;
	padding: 24px 20px;
	background: #fff;
	border-top: 1px solid #e5e5e5;
	font-family: "montserrat", sans-serif;
	text-align: center;
}
.syl-site-footer p {
	margin: 0;
	font-size: 13px;
	line-height: 1.4;
	color: #888;
}
/* Admin-only demo control: switch account type (educator/learner). */
.syl-demo-role-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	padding: 6px;
	border: 1px solid #e5e5e5;
	border-radius: 999px;
	background: #fafafa;
}
.syl-demo-role-toggle__label {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #999;
	padding-left: 8px;
}
.syl-demo-role-toggle__btn {
	font-family: "montserrat", sans-serif;
	font-size: 12px;
	font-weight: 600;
	color: #555;
	padding: 6px 16px;
	border: none;
	border-radius: 999px;
	background: transparent;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}
.syl-demo-role-toggle__btn:hover {
	background: #eee;
}
.syl-demo-role-toggle__btn.is-active {
	background: #1e1e1e;
	color: #fff;
}