/*
 * Tabs — a row of grey tabs above a bordered white panel; the selected tab turns
 * white and merges into the panel below it.
 *
 * The markup comes from the sfbbo/tabs block (src/tabs/render.php) and switching
 * is driven by the sfbbo/tabs Interactivity store (assets/js/tabs.js); this file
 * is purely presentational. It is also loaded into the editor canvas via
 * add_editor_style(), so the strip and panel look the same in both places —
 * editor-only chrome lives in src/tabs/editor.scss instead.
 *
 * When the tab row is wider than its container it scrolls horizontally on its
 * own, which covers the 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;
}

/* Type is inherited, not set here: panel copy is body copy, and the content size
   belongs to .wp-block-post-content in base.css. */
.sfbbo-tabs__panel {
	padding: 40px 20px;
}

.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;
}