/*
 * Tabs — ported from the Weebly "tabbed box" (Science Talks / Birdy Hour).
 * A row of grey tabs above a bordered white panel; the selected tab turns white
 * and merges into the panel below it. Switching is driven by the sfbbo/tabs
 * Interactivity store (assets/js/tabs.js); this file is purely presentational.
 *
 * The original showed custom < > scroll arrows when the tab row overflowed;
 * here the row scrolls horizontally on its own (native), which covers the same
 * narrow-screen case without extra JS.
 */

.sfbbo-tabs {
	position: relative;
	margin: 20px 0;
}

/* Tab row */
.sfbbo-tabs__list {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.sfbbo-tabs__tab {
	flex: 0 0 auto;
	height: 60px;
	margin: 0;
	padding: 0 20px;
	background-color: #f7f7f7;
	color: #767676;
	border: 1px solid #cccccc;
	border-right: none;
	font-family: var( --wp--preset--font-family--montserrat, sans-serif );
	font-weight: 700;
	font-size: 16px;
	line-height: 58px;
	text-align: center;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 150ms ease, color 150ms ease;
}

.sfbbo-tabs__tab:last-child {
	border-right: 1px solid #cccccc;
}

.sfbbo-tabs__tab:hover {
	color: #515151;
}

.sfbbo-tabs__tab.is-active {
	background-color: #ffffff;
	color: var( --wp--preset--color--muted, #515151 );
	border-bottom: 1px solid #ffffff;
	cursor: default;
}

.sfbbo-tabs__tab:focus-visible {
	outline: 2px solid var( --wp--preset--color--link-blue, #6a87b6 );
	outline-offset: -2px;
}

/* Panels */
.sfbbo-tabs__panels {
	border: 1px solid #cccccc;
	border-top: none;
	background-color: #ffffff;
}

.sfbbo-tabs__panel {
	padding: 40px 20px;
	font-size: 1rem;
	line-height: 1.6;
}

.sfbbo-tabs__panel:focus-visible {
	outline: 2px solid var( --wp--preset--color--link-blue, #6a87b6 );
	outline-offset: -4px;
}

.sfbbo-tabs__panel ul {
	margin: 0;
	padding-left: 1.25em;
}

.sfbbo-tabs__panel li {
	margin-bottom: 0.85em;
}

/* Two-column panels (Landbirds, Birding/Art) — matched the original multicol */
.sfbbo-tabs__cols {
	display: flex;
	gap: 30px;
}

.sfbbo-tabs__col {
	flex: 1 1 0;
	min-width: 0;
}

@media ( max-width: 600px ) {
	.sfbbo-tabs__cols {
		flex-direction: column;
		gap: 0;
	}
}