/* assets/classic-site.css */

/* Global button scale: 0.75 = 25% smaller */
:root {
	--btn-scale: 0.85;
	--text-bar-scale: 0.5; /* independent */
}

/* NAVBAR buttons (top-right nav group) */
nav a,
nav button {
	width: calc(var(--nav-width) * var(--btn-scale));
	height: calc((var(--nav-width) / 2.8) * var(--btn-scale));
	padding-inline: calc(1.5rem * var(--btn-scale));
	padding-bottom: calc(.7rem * var(--btn-scale));
	font-size: calc(1em * var(--btn-scale));  /* label size down by same amount */

	/* keep text anchored bottom-right */
	justify-content: flex-end;
	align-items: flex-end;
	text-align: right;
}

/* CONTENT buttons (the .buttons group + .lcars-button) */
.buttons a,
.buttons button,
.lcars-button {
	width: calc(224px * var(--btn-scale));
	height: calc(80px * var(--btn-scale));
	padding-inline: calc(1.75rem * var(--btn-scale));
	padding-bottom: calc(.675rem * var(--btn-scale));
	font-size: calc(1em * var(--btn-scale));

	/* keep text anchored bottom-right */
	justify-content: flex-end;
	align-items: flex-end;
	text-align: right;
}

/* Optional: if you also want the left “pill” buttons scaled (comment out if not) */
.pill,
.pill-2,
.pillbox a,
.pillbox-2 a {
	height: calc(56px * var(--btn-scale));
	padding-right: calc(.75rem * var(--btn-scale));
	padding-bottom: calc(.35rem * var(--btn-scale));
	font-size: calc(1em * var(--btn-scale));

	justify-content: flex-end;
	align-items: flex-end;
	text-align: right;
}

/* LCARS TEXT BAR – independently scalable (bar + label) */

/* bar */
.lcars-text-bar {
	height: clamp(
		calc(16px * var(--text-bar-scale)),
		calc(4vh * var(--text-bar-scale)),
		calc(41px * var(--text-bar-scale))
	);

	border-right: clamp(
		calc(16px * var(--text-bar-scale)),
		calc(4vh * var(--text-bar-scale)),
		calc(43px * var(--text-bar-scale))
	) solid var(--lcars-bar-end-color);

	border-left: clamp(
		calc(16px * var(--text-bar-scale)),
		calc(4vh * var(--text-bar-scale)),
		calc(43px * var(--text-bar-scale))
	) solid var(--lcars-bar-start-color);
}

/* label */
.lcars-text-bar h2,
.lcars-text-bar h3,
.lcars-text-bar h4,
.lcars-text-bar span {
	height: clamp(
		calc(20px * var(--text-bar-scale)),
		calc(5.5vh * var(--text-bar-scale)),
		calc(60px * var(--text-bar-scale))
	);

	font-size: clamp(
		calc(17px * var(--text-bar-scale)),
		calc(4.5vh * var(--text-bar-scale)),
		calc(46px * var(--text-bar-scale))
	);

	padding-inline: calc(1vh * var(--text-bar-scale));
}


/* label inside the bar */
.lcars-text-bar h2,
.lcars-text-bar h3,
.lcars-text-bar h4,
.lcars-text-bar span{
	/* font choice belongs here (override only if you need to) */
	font-family: var(--lcars-font, inherit);
	font-weight: 400;
	letter-spacing: 0.02em;
	text-transform: uppercase;

	/* scaled sizing */
	font-size: clamp(
		calc(17px * var(--text-bar-scale)),
		calc(4.5vh * var(--text-bar-scale)),
		calc(46px * var(--text-bar-scale))
	);

	/* prevents the “sits too high” look */
	line-height: 1.4;

	padding-inline: calc(1vh * var(--text-bar-scale));
	white-space: nowrap;
}