/*
 * Styles for the server-rendered agenda tabs ([plus-event-agenda-tabs]).
 *
 * These are the Beaver Builder Tabs module's horizontal-tab rules, copied so the
 * agenda looks identical without the BB Tabs module on the page. :where() keeps
 * every rule at the same specificity BB uses, so the theme's agenda overrides in
 * style.css (.tabbed-agenda ...) still win exactly as they do today.
 *
 * Source: bb-plugin/modules/tabs/css/frontend.css, plus the responsive block BB
 * prints into each page's layout CSS (breakpoint 768px).
 */

/* Labels */
:where(.plus-agenda-tabs) a.fl-tabs-label {
	display: block;
	text-decoration: none;
}
:where(.plus-agenda-tabs) .fl-tabs .fl-tabs-label:is(a, button) {
	cursor: pointer;
	position: relative;
	padding: 12px 18px;
}
:where(.plus-agenda-tabs) .fl-tabs .fl-tabs-label.fl-tab-active {
	background: #fff;
	z-index: 1;
}
:where(.plus-agenda-tabs) .fl-tabs .fl-tabs-label:is(a, button):focus {
	z-index: 2;
}

/* Accordion labels (shown only at the narrow breakpoint) */
:where(.plus-agenda-tabs) .fl-tabs .fl-tabs-label.fl-tabs-panel-label {
	display: none;
}
:where(.plus-agenda-tabs) .fl-tabs-panel-label span {
	width: 100%;
}
:where(.plus-agenda-tabs) .fl-tabs-panel-label .fa {
	display: table-cell;
	line-height: inherit;
	opacity: .5;
	padding-left: 15px;
	vertical-align: middle;
}

/* Panels */
:where(.plus-agenda-tabs) .fl-tabs-panels {
	background: #fff;
	border-width: 1px;
	border-style: solid;
}
:where(.plus-agenda-tabs) .fl-tabs-panel-content {
	display: none;
	padding: 18px;
}
:where(.plus-agenda-tabs) .fl-tabs-panel-content.fl-tab-active {
	display: block;
}
:where(.plus-agenda-tabs) .fl-tabs-panel-content p:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
}

/* Horizontal layout */
:where(.plus-agenda-tabs) .fl-tabs.fl-tabs-horizontal .fl-tabs-label {
	float: left;
}
:where(.plus-agenda-tabs) .fl-tabs-horizontal .fl-tabs-labels .fl-tabs-label {
	border: 1px solid transparent;
	border-bottom: none;
}
:where(.plus-agenda-tabs) .fl-tabs-horizontal .fl-tabs-label.fl-tab-active {
	border-width: 1px;
	border-style: solid;
	border-bottom: none !important;
}
:where(.plus-agenda-tabs) .fl-tabs-horizontal .fl-tabs-label.fl-tab-active:after {
	content: '';
	background: inherit;
	display: block;
	width: 100%;
	height: 1px;
	position: absolute;
	bottom: -1px;
	left: 0;
}

/* Border colour BB writes per module (#e5e5e5 on the agenda pages) */
.plus-agenda-tabs .fl-tabs .fl-tabs-labels .fl-tabs-label.fl-tab-active {
	border-color: #e5e5e5;
}
.plus-agenda-tabs .fl-tabs-panels,
.plus-agenda-tabs .fl-tabs-panel {
	border-color: #e5e5e5;
}

/* Narrow breakpoint */
@media (max-width: 768px) {
	:where(.plus-agenda-tabs) .fl-tabs-labels {
		display: none;
	}
	:where(.plus-agenda-tabs) .fl-tabs .fl-tabs-label.fl-tab-active {
		position: static;
	}
	:where(.plus-agenda-tabs) .fl-tabs .fl-tabs-label.fl-tabs-panel-label {
		display: flex;
		align-items: center;
		padding: 10px 15px;
		width: 100%;
	}
	:where(.plus-agenda-tabs) .fl-tabs-panel {
		border-bottom-style: solid;
		border-bottom-width: 1px;
	}
	:where(.plus-agenda-tabs) .fl-tabs-panel:last-child {
		border-bottom: none;
	}
	:where(.plus-agenda-tabs) .fl-tabs-panel-content {
		padding: 0 15px 15px 15px;
	}
	:where(.plus-agenda-tabs) .fl-tabs.fl-tabs-horizontal .fl-tabs-label {
		float: none;
	}
	:where(.plus-agenda-tabs) .fl-tabs-horizontal .fl-tabs-label.fl-tab-active {
		border: none;
		padding: 10px 15px;
	}
}