/**
 * Tabs Component
 *
 * Server-side tab navigation (links, not JS).
 * Used for country detail sections and similar multi-view pages.
 *
 * @package CPDC_Sovereign_Debt_Hub
 * @since 0.1.0
 */

.tabs {
	margin-block-end: var(--wp--preset--spacing--lg);
}

.tabs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 2px solid var(--wp--preset--color--gray-300);
}

.tabs__item {
	margin-bottom: -2px;
}

.tabs__link {
	display: block;
	padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
	color: var(--wp--preset--color--gray-600);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	border-bottom: 2px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.tabs__link:hover {
	color: var(--wp--preset--color--gray-900);
	background-color: var(--wp--preset--color--gray-100);
}

.tabs__link--active {
	color: var(--wp--preset--color--primary);
	border-bottom-color: var(--wp--preset--color--primary);
}

.tabs__link--active:hover {
	color: var(--wp--preset--color--primary);
	background-color: transparent;
}

/* ==========================================================================
   Tab Panel Content
   ========================================================================== */

.tabs__panel {
	padding-block-start: var(--wp--preset--spacing--md);
}

.tabs__panel > *:first-child {
	margin-block-start: 0;
}

/* ==========================================================================
   Variant: Pills (alternative style)
   ========================================================================== */

.tabs--pills .tabs__list {
	gap: var(--wp--preset--spacing--xs);
	border-bottom: none;
	padding-block-end: var(--wp--preset--spacing--sm);
}

.tabs--pills .tabs__item {
	margin-bottom: 0;
}

.tabs--pills .tabs__link {
	border: 1px solid var(--wp--preset--color--gray-300);
	border-radius: 2px;
	background-color: var(--wp--preset--color--white);
}

.tabs--pills .tabs__link:hover {
	background-color: var(--wp--preset--color--gray-100);
}

.tabs--pills .tabs__link--active {
	background-color: var(--wp--preset--color--gray-900);
	border-color: var(--wp--preset--color--gray-900);
	color: var(--wp--preset--color--white);
}

/* ==========================================================================
   Button Tabs (JS-enhanced)
   ========================================================================== */

button.tabs__link {
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	cursor: pointer;
	font-family: inherit;
}

.tabs__link-fallback {
	display: block;
	padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
	color: var(--wp--preset--color--gray-600);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 639px) {
	.tabs__link {
		padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--sm);
		font-size: var(--wp--preset--font-size--xs);
	}
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.tabs__link {
		transition: none;
	}
}