/* Juno spacing utilities */
.juno-spacing-sm {
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 20px;
	padding-bottom: 20px;
	gap: 12px;
}

.header-wrapper {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 56px;
	margin-bottom: 56px;
	z-index: 50;
	align-items: center;
	flex-shrink: 0;
	position: fixed;
	top: 0;
	left: 0;
	border-bottom: 0.5px solid transparent;
	right: 0;
	transition:
		background-color 0.15s,
		border-color 0.15s,
		backdrop-filter 0.15s;
}

.header-wrapper.scrolled {
	background-color: var(--base-0);
	border-bottom: 0.5px solid color-mix(in srgb, currentColor 10%, transparent);
}

@media (max-width: 767px) {
	.header-wrapper {
		border-bottom-width: 1px;
	}

	.header-wrapper.scrolled {
		border-bottom-width: 1px;
	}
}

/* Header Links */
.header-link {
	font-family: 'Onest', sans-serif;
	position: relative;
	font-weight: 500;
	font-size: 14px;
	padding: 5px 0px;
	opacity: 1;
	text-decoration: none;
	transition: color 0.2s ease;
}

@media (min-width: 768px) {
	.header-link:not([data-tag-active]) {
		opacity: 0.6;
	}
}

.header-link::after {
	content: "";
	position: absolute;
	bottom: 2px;
	left: 0px;
	right: 0px;
	height: 1.5px;
	background-color: currentColor;
	transform: scaleX(0);
	opacity: 1;
	transform-origin: center;
	transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.header-link:first-child::after {
	transform-origin: left;
}

.header-link:last-child::after {
	transform-origin: right;
}

@media (hover: hover) {
	.header-link:hover:not([data-tag-active]) {
		opacity: 0.88;
	}

	.header-link:hover::after {
		transform: scaleX(1);
	}
}

.header-link[data-tag-active] {
	opacity: 1;
}

.header-link[data-tag-active]::after {
	transform: scaleX(1);
}

.header-link[data-tag-active]:hover::after {
	transform: scaleX(1);
}

/* Juno Button Styles */
.juno-button {
	display: flex;
	position: relative;
	flex-direction: row;
	align-items: center;
	box-sizing: border-box;
	justify-content: center;
	max-width: 100%;
	overflow: hidden;
	transition: all 75ms ease-in-out;
	user-select: none;
	text-decoration: none;

	/* Size - medium defaults */
	height: 2.25rem;
	min-height: 2.25rem;
	max-height: 2.25rem;
	font-size: var(--text-sm, 0.875rem);
	line-height: var(--text-sm--line-height, 1.25rem);

	/* Padding and radius */
	padding-left: 0.75rem;
	padding-right: 0.75rem;
	gap: 0.5rem;
	border-radius: var(--border-radius-md, 0.375rem);
}

.juno-button-solid {
	--juno-button-shadow-color: 0 0.5px 1px color-mix(in srgb, var(--juno-button-color) 90%, black);
	background: var(--juno-button-color);
	color: var(--juno-button-text-color);
	font-weight: 400;
	text-shadow: var(--juno-button-shadow-color);
	border: 0.5px solid color-mix(in srgb, var(--juno-button-color) 95%, black);
	box-shadow:
		inset 0 1px 0 color-mix(in srgb, var(--juno-button-color) 90%, white),
		inset 0 -1px 0 color-mix(in srgb, var(--juno-button-color) 95%, black);
}

.juno-button-solid:hover {
	background: color-mix(in srgb, var(--juno-button-color) 95%, white);
}

.juno-button-solid:active {
	background: color-mix(in srgb, var(--juno-button-color) 95%, black);
	box-shadow:
		inset 0 1px 3px color-mix(in srgb, var(--juno-button-color) 95%, black),
		inset 0 -1px 0 color-mix(in srgb, var(--juno-button-color) 85%, black);
	padding-top: 1.5px;
}