/**
 * Home agenda navigation.
 * Mirrors the compact segmented control used by Tepoz Academia.
 */

[data-tha-agenda] .tha-tabs {
	align-items: center;
	background: rgba(79, 78, 40, .055);
	border: 1px solid rgba(27, 40, 34, .11);
	border-radius: 999px;
	display: inline-flex;
	gap: 2px;
	padding: 3px;
}

[data-tha-agenda] .tha-tab,
[data-tha-agenda] .tha-tab:visited {
	align-items: center;
	appearance: none;
	background: transparent;
	border: 0;
	border-radius: 999px;
	box-sizing: border-box;
	color: var(--tha-copy, #646b67);
	cursor: pointer;
	display: inline-flex;
	font-family: inherit;
	font-size: .75rem;
	font-weight: 750;
	gap: .38rem;
	justify-content: center;
	line-height: 1;
	min-height: 40px;
	padding: .62rem .82rem;
	text-decoration: none !important;
	transition: background-color .18s ease, box-shadow .18s ease, color .18s ease, transform .18s ease;
	white-space: nowrap;
}

[data-tha-agenda] .tha-tabs .tha-tab:hover {
	background: rgba(255, 255, 255, .58);
	color: var(--tha-forest, #173127);
	transform: translateY(-1px);
}

[data-tha-agenda] .tha-tabs .tha-tab.is-active {
	background: var(--tha-white, #fff);
	box-shadow: 0 3px 12px rgba(52, 53, 30, .1);
	color: var(--tha-forest, #173127);
	transform: none;
}

[data-tha-agenda] .tha-tab:focus-visible {
	outline: 2px solid var(--tha-forest-2, #49654c);
	outline-offset: 2px;
}

[data-tha-agenda] .tha-tab-icon {
	fill: none;
	flex: 0 0 auto;
	height: 14px;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.8;
	width: 14px;
}

[data-tha-agenda] .tha-tab--online {
	color: var(--tha-copy, #646b67);
}

@media (max-width: 520px) {
	[data-tha-agenda] .tha-tabs {
		gap: 1px;
		justify-content: stretch;
		width: 100%;
	}

	[data-tha-agenda] .tha-tab,
	[data-tha-agenda] .tha-tab:visited {
		flex: 1 1 0;
		font-size: .66rem;
		gap: .24rem;
		letter-spacing: -.01em;
		min-width: 0;
		padding: .55rem .38rem;
	}

	[data-tha-agenda] .tha-tab-icon {
		height: 13px;
		width: 13px;
	}
}

@media (max-width: 360px) {
	[data-tha-agenda] .tha-tab,
	[data-tha-agenda] .tha-tab:visited {
		font-size: .61rem;
		gap: .18rem;
		padding-inline: .24rem;
	}

	[data-tha-agenda] .tha-tab-icon {
		height: 12px;
		width: 12px;
	}
}