/**
 * Custom site header.
 *
 * Loaded on the app page and, optionally, across the site. Kept separate from
 * the app bundle so it can render on theme pages without the whole dashboard
 * stylesheet. Every class is namespaced lrh- to survive unknown themes.
 */

.lrh {
	/* Pinned to the top so it stays put as the page scrolls. The standalone
	   template sets --lr-offset so it clears the WordPress admin bar. */
	position: sticky;
	top: var(--lr-offset, 0px);
	z-index: 50;
	background: #ffffff;
	border-bottom: 1px solid #e8e9f1;
	font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: #141327;
}

.lrh *, .lrh *::before, .lrh *::after { box-sizing: border-box; }

.lrh-inner {
	max-width: 1320px; margin: 0 auto;
	display: flex; align-items: center; justify-content: space-between;
	gap: 20px; padding: 14px 24px;
}

/* Brand */
.lrh-brand {
	display: flex; align-items: center; gap: 11px;
	text-decoration: none; color: inherit; flex: none;
}
.lrh-mark {
	width: 36px; height: 36px; border-radius: 11px; flex: none;
	display: grid; place-items: center;
	background: linear-gradient(145deg, #7c5cff, #5b32f0);
}
.lrh-mark svg { width: 18px; height: 18px; fill: #fff; }
.lrh-brand-name {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 21px; font-weight: 700; letter-spacing: -.015em; color: #141327;
}

/* Navigation */
.lrh-nav { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }

.lrh-link {
	text-decoration: none; color: #4b4a63; font-size: 15px; white-space: nowrap;
	padding: 6px 0; border-bottom: 2px solid transparent;
}
.lrh-link:hover { color: #141327; }
.lrh-link--active { color: #5b32f0; border-bottom-color: #5b32f0; font-weight: 600; }

.lrh-btn {
	display: inline-block; text-decoration: none; white-space: nowrap;
	padding: 11px 26px; border-radius: 999px;
	background: #6c47ff; color: #fff; font-size: 15px; font-weight: 600;
}
.lrh-btn:hover { background: #5b32f0; color: #fff; }

/* Mobile toggle */
.lrh-toggle {
	display: none; flex-direction: column; justify-content: center; gap: 5px;
	width: 42px; height: 42px; padding: 0 10px; cursor: pointer;
	background: none; border: 1px solid #e8e9f1; border-radius: 10px;
}
.lrh-toggle span { display: block; height: 2px; background: #141327; border-radius: 2px; }

@media (max-width: 860px) {
	.lrh-inner { flex-wrap: wrap; padding: 12px 16px; }
	.lrh-toggle { display: flex; }
	.lrh-nav {
		display: none; width: 100%; flex-direction: column;
		align-items: stretch; gap: 2px; padding-top: 12px;
	}
	.lrh--open .lrh-nav { display: flex; }
	.lrh-link { padding: 11px 4px; border-bottom: 1px solid #f0f0f6; }
	.lrh-link--active { border-bottom-color: #5b32f0; }
	.lrh-btn { text-align: center; margin-top: 10px; }
}

/* The standalone app page fills the viewport below the header. */
.lr-standalone-main { display: block; }