/* ==========================================================================
   Base — page shell, typography, shared button primitives
   ========================================================================== */

body {
	background-color: var(--bj-bg);
	color: var(--bj-text);
	font-family: var(--bj-font);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* The header is fixed, so reserve its height here. */
	padding-top: var(--bj-header-height);
}

a {
	color: inherit;
	text-decoration: none;
}

.bj-container {
	width: 100%;
	max-width: var(--bj-container);
	margin-inline: auto;
	padding-inline: var(--bj-gutter);
}

/* Screen-reader only, used by the menu toggle label */
.bj-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --- Buttons --------------------------------------------------------- */

.bj-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 1px solid transparent;
	border-radius: var(--bj-radius-pill);
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--bj-transition),
		border-color var(--bj-transition), color var(--bj-transition);
}

.bj-btn--ghost {
	padding: 11px 6px;
	color: var(--bj-text);
	background: none;
}

.bj-btn--ghost:hover {
	color: var(--bj-text-strong);
}

.bj-btn--outline {
	padding: 11px 24px;
	color: var(--bj-text-strong);
	border-color: var(--bj-lime);
	background: none;
}

.bj-btn--outline:hover {
	background-color: var(--bj-lime);
	color: #0a0a0e;
}

.bj-btn--lime {
	padding: 11px 24px;
	color: #0a0a0e;
	background-color: var(--bj-lime);
}

.bj-btn--lime:hover {
	background-color: var(--bj-lime-hover);
}