/* Tabs — pill-less rectangular nav with active arrow marker and cross-fading
   panels. Values measured from the reference tabs component. */

:root { --tabs-header-offset: 60px; }
@media screen and (min-width: 576px) {
	:root { --tabs-header-offset: 90px; }
}

.tabs { display: block; min-width: 0; }

.tabs__nav {
	display: flex;
	gap: 3px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.tabs__nav-item { color: var(--color-soft-white); min-width: 0; }
.tabs__nav-item:last-child { flex-grow: 1; }
@media screen and (min-width: 576px) {
	.tabs__nav-item:last-child { flex-grow: 0; }
}

.tabs--align-center .tabs__nav-item { border-radius: 0; flex: 1; min-width: 0; width: calc(50% - 3px); }
@media screen and (min-width: 576px) {
	.tabs--align-center .tabs__nav { justify-content: center; }
	.tabs--align-center .tabs__nav-item { flex: initial; width: auto; }
}
.tabs--align-center .tabs__nav-link { padding: 9px 17px; }
@media screen and (min-width: 400px) {
	.tabs--align-center .tabs__nav-link { padding-left: 10px; padding-right: 10px; }
}
@media screen and (min-width: 768px) {
	.tabs--align-center .tabs__nav-link { padding-left: 20px; padding-right: 20px; }
}

.tabs__nav-link {
	align-items: center;
	background-color: var(--color-gray-600);
	border-radius: 0;
	color: var(--color-soft-white);
	display: flex;
	height: 100%;
	justify-content: center;
	letter-spacing: 0.7px;
	padding: 9px 20px;
	position: relative;
	text-align: center;
	text-decoration: none;
	width: 100%;
	transition-duration: var(--transition-time);
	transition-property: color, background-color;
	transition-timing-function: var(--transition-easing);
}
@media screen and (min-width: 400px) {
	.tabs__nav-link { min-width: 110px; }
}
.tabs__nav-link::before {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='13' fill='%2316191B'%3E%3Cpath d='M50 13C35 13 25 0 25 0S15 13 0 13z'/%3E%3C/svg%3E");
	background-size: contain;
	bottom: -7px;
	content: "";
	height: 7px;
	left: 0;
	margin: auto;
	opacity: 0;
	position: absolute;
	right: 0;
	transform: rotate(180deg);
	transition: opacity var(--transition-time) var(--transition-easing);
	width: 27px;
}
.tabs__nav-link:hover {
	background-color: var(--color-soft-black);
	color: var(--color-soft-white);
}
.tabs__nav-item[data-active] .tabs__nav-link {
	background-color: var(--color-soft-black);
	color: var(--color-soft-white);
}
.tabs__nav-item[data-active] .tabs__nav-link::before { opacity: 1; }

.tabs__content {
	position: relative;
	transition-duration: 0.4s;
	transition-property: height;
	transition-timing-function: var(--transition-easing);
}

.tabs__tab {
	display: block;
	height: auto;
	left: 0;
	min-height: 142px;
	min-width: 0;
	opacity: 0;
	padding-top: 15px;
	position: absolute;
	top: 0;
	transition-duration: 0.4s;
	transition-property: opacity, visibility;
	transition-timing-function: var(--transition-easing);
	visibility: hidden;
	width: 100%;
}
@media screen and (min-width: 1024px) {
	.tabs__tab { padding-top: 20px; }
}
.tabs__tab[data-open] { opacity: 1; visibility: visible; }

/* No-JS fallback: before tabs.js initialises, stack panels normally */
.tabs:not(.tabs--ready) .tabs__tab { opacity: 1; position: static; visibility: visible; }