/**
 * Tabs — shared styles for Church Ministries + Church History.
 * Pattern matches static FBC reference: dark bar with gold underline tabs.
 * Supports both legacy [role="tab"] selector and static-parity `.tab-btn` class.
 * Mobile-first: base = pill buttons stacked. Desktop (>=769) = horizontal dark bar with underline.
 */

.tabs-container {
	max-width: var(--fbc-container);
	margin: 2.5rem auto 0;
	background: var(--fbc-card-bg);
	border-radius: var(--fbc-radius);
	box-shadow: var(--fbc-shadow-md);
	overflow: hidden;
	scroll-margin-top: calc(var(--fbc-navbar-height) + 24px);
}

/* Base: mobile pill nav, vertical stack */
.tabs-nav {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	background: transparent;
	gap: 0.6rem;
	margin: 0;
	padding: 1rem;
	justify-content: center;
	list-style: none;
}

.tabs-nav .tab-btn,
.tabs-nav [role="tab"] {
	flex: 0 1 auto;
	min-width: max-content;
	width: 100%;
	margin: 0;
	padding: 0.75rem 1rem;
	background: var(--fbc-white);
	border: 1px solid var(--fbc-primary);
	border-radius: var(--fbc-radius-pill);
	color: var(--fbc-primary);
	font-family: var(--fbc-font-heading);
	font-weight: 600;
	font-size: 1rem;
	text-align: center;
	white-space: nowrap;
	cursor: pointer;
	position: relative;
	transition: color var(--fbc-transition), background var(--fbc-transition), border-color var(--fbc-transition);
}

.tabs-nav .tab-btn i,
.tabs-nav [role="tab"] i {
	color: inherit;
	margin-right: 0.4rem;
}

.tabs-nav .tab-btn:hover,
.tabs-nav .tab-btn:focus-visible,
.tabs-nav [role="tab"]:hover,
.tabs-nav [role="tab"]:focus-visible {
	background: var(--fbc-gold-light);
	color: var(--fbc-on-gold);
	border-color: var(--fbc-gold-light);
}

.tabs-nav .tab-btn::after,
.tabs-nav [role="tab"]::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 3px;
	background-color: var(--fbc-gold);
	transition: width var(--fbc-transition);
	display: none;
}

.tabs-nav .tab-btn[aria-selected="true"],
.tabs-nav .tab-btn.active,
.tabs-nav [role="tab"][aria-selected="true"],
.tabs-nav [role="tab"].active {
	background: var(--fbc-gold);
	color: var(--fbc-on-gold);
	border-color: var(--fbc-gold);
}

.tabs-content {
	padding: 1.5rem;
}

[role="tabpanel"],
.tab-panel {
	background: transparent;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	border-top: 0;
}

[role="tabpanel"].active,
.tab-panel.active {
	animation: fbc-tab-fade-in 0.4s ease;
}

[role="tabpanel"][hidden],
.tab-panel:not(.active) { display: none; }

@keyframes fbc-tab-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Desktop: horizontal dark bar with gold underline */
@media (min-width: 769px) {
	.tabs-nav {
		flex-direction: row;
		background-color: var(--fbc-primary);
		gap: 0;
		padding: 0;
	}
	.tabs-nav .tab-btn,
	.tabs-nav [role="tab"] {
		width: auto;
		margin: 0.25rem;
		padding: 0.8rem 1rem;
		background: transparent;
		border: none;
		border-radius: 4px;
		color: var(--fbc-white);
		font-size: 0.85rem;
	}
	.tabs-nav .tab-btn::after,
	.tabs-nav [role="tab"]::after { display: block; }
	.tabs-nav .tab-btn:hover,
	.tabs-nav .tab-btn:focus-visible,
	.tabs-nav [role="tab"]:hover,
	.tabs-nav [role="tab"]:focus-visible {
		background: transparent;
		color: var(--fbc-gold-light);
		border-color: transparent;
	}
	.tabs-nav .tab-btn:hover::after,
	.tabs-nav .tab-btn:focus-visible::after,
	.tabs-nav .tab-btn[aria-selected="true"]::after,
	.tabs-nav .tab-btn.active::after,
	.tabs-nav [role="tab"]:hover::after,
	.tabs-nav [role="tab"]:focus-visible::after,
	.tabs-nav [role="tab"][aria-selected="true"]::after,
	.tabs-nav [role="tab"].active::after {
		width: 80%;
	}
	.tabs-nav .tab-btn[aria-selected="true"],
	.tabs-nav .tab-btn.active,
	.tabs-nav [role="tab"][aria-selected="true"],
	.tabs-nav [role="tab"].active {
		color: var(--fbc-gold);
		background: transparent;
		border-color: transparent;
	}
	.tabs-content {
		padding: 2rem;
	}
}