/**
 * framework/tabs — a tab row on desktop, an accordion on a phone.
 *
 * Both are the same markup. The tab buttons and the accordion buttons both
 * exist in the DOM; the breakpoint decides which set is shown, so nothing has
 * to be moved or duplicated at runtime.
 */

.fw-tabs {
	--fw-tabs-accent: var(--fw-primary, #B25F55);
}

/* --- desktop: the tab row ---------------------------------------------- */

.fw-tabs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	border-bottom: 2px solid var(--fw-light-grey, #E2E2E2);
	margin-block-end: 1.75rem;
}

.fw-tabs__tab {
	appearance: none;
	border: 0;
	background: transparent;
	padding: 0.75rem 1.5rem;
	font: inherit;
	font-weight: 600;
	color: var(--fw-grey, #5A5A5A);
	cursor: pointer;
	border-radius: var(--fw-radius, 10px) var(--fw-radius, 10px) 0 0;
	border-bottom: 3px solid transparent;
	margin-block-end: -2px;
	transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.fw-tabs__tab:hover {
	color: var(--fw-tabs-accent);
	background: rgba(0, 0, 0, 0.03);
}

.fw-tabs__tab.is-active {
	color: var(--fw-tabs-accent);
	border-bottom-color: var(--fw-tabs-accent);
}

.fw-tabs__tab:focus-visible {
	outline: 2px solid var(--fw-tabs-accent);
	outline-offset: 2px;
}

/* --- panels ------------------------------------------------------------ */

.fw-tabs__panel > :first-child { margin-block-start: 0; }
.fw-tabs__panel > :last-child  { margin-block-end: 0; }

.fw-tabs__accordion { display: none; }

/* With JavaScript the inactive panels are hidden; without it they all stay
   visible, one after another, each under its own accordion heading. `js` is
   added to the block by view.js on load. */
.fw-tabs[data-fw-tabs].is-enhanced .fw-tabs__panel { display: none; }
.fw-tabs[data-fw-tabs].is-enhanced .fw-tabs__panel.is-active { display: block; }

.fw-tabs:not(.is-enhanced) .fw-tabs__list { display: none; }
.fw-tabs:not(.is-enhanced) .fw-tabs__accordion { display: block; }

/* --- phone: the accordion ---------------------------------------------- */

@media (max-width: 782px) {
	.fw-tabs__list { display: none; }

	.fw-tabs__accordion {
		display: block;
		width: 100%;
		appearance: none;
		border: 0;
		border-bottom: 1px solid var(--fw-light-grey, #E2E2E2);
		background: transparent;
		padding: 0.9rem 2.5rem 0.9rem 0;
		font: inherit;
		font-weight: 600;
		text-align: left;
		color: var(--fw-grey, #5A5A5A);
		cursor: pointer;
		position: relative;
	}

	.fw-tabs__accordion.is-active { color: var(--fw-tabs-accent); }

	/* Chevron, drawn rather than fetched. */
	.fw-tabs__accordion::after {
		content: '';
		position: absolute;
		right: 0.5rem;
		top: 50%;
		width: 9px;
		height: 9px;
		margin-top: -6px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg);
		transition: transform 0.2s ease;
	}

	.fw-tabs__accordion.is-active::after {
		transform: rotate(-135deg);
		margin-top: -2px;
	}

	.fw-tabs__panel { padding-block: 1.25rem; }
}