/* TABS */

.TABS {
	position: relative;
}

.TABS input {
	position: absolute;
	top: 0;
	left: -9999rem;
}

.TABS nav {
	margin-bottom: var(--s7);
}

.TABS nav ul {
	display: flex;
	flex-wrap: wrap;
}

.TABS nav li {
	border: 1rem solid transparent;
	border-width: 0 0 1rem 0;
	margin: 0 var(--s4) 0 0;
}

.TABS nav label {
	display: block;
	cursor: pointer;
	max-width: 100%;
	box-sizing: border-box;
	padding: 0 0 var(--s1);
	font-size: 16rem;
	font-weight: 500;
	transition: color 0.25s;
}

.TABS nav label:hover {
	color: var(--blue-700);
}

.TABS .content {
	max-width: var(--col-8);
}

.TABS .tab {
	display: none;
}

.TABS input:nth-child(1):checked ~ nav li:nth-child(1),
.TABS input:nth-child(2):checked ~ nav li:nth-child(2),
.TABS input:nth-child(3):checked ~ nav li:nth-child(3),
.TABS input:nth-child(4):checked ~ nav li:nth-child(4),
.TABS input:nth-child(5):checked ~ nav li:nth-child(5),
.TABS input:nth-child(6):checked ~ nav li:nth-child(6),
.TABS input:nth-child(7):checked ~ nav li:nth-child(7),
.TABS input:nth-child(8):checked ~ nav li:nth-child(8),
.TABS input:nth-child(9):checked ~ nav li:nth-child(9) {border-color: var(--blue-500); pointer-events: none;}

.TABS input:nth-child(1):checked ~ .tabs .tab:nth-child(1),
.TABS input:nth-child(2):checked ~ .tabs .tab:nth-child(2),
.TABS input:nth-child(3):checked ~ .tabs .tab:nth-child(3),
.TABS input:nth-child(4):checked ~ .tabs .tab:nth-child(4),
.TABS input:nth-child(5):checked ~ .tabs .tab:nth-child(5),
.TABS input:nth-child(6):checked ~ .tabs .tab:nth-child(6),
.TABS input:nth-child(7):checked ~ .tabs .tab:nth-child(7),
.TABS input:nth-child(8):checked ~ .tabs .tab:nth-child(8),
.TABS input:nth-child(9):checked ~ .tabs .tab:nth-child(9) {display: block;}

@media (width <= 960px) {
	.TABS nav {margin-bottom: var(--s5);}
	.TABS nav li {border-width: 0 0 0 1rem; margin: 2rem 0; width: 100%;}
	.TABS nav label {padding: 0 0 0 var(--s3);}
}



/* WP ADMIN */

.editor-styles-wrapper .TABS nav li:nth-child(1) {border-color: var(--light-grey); background: var(--white);}
.editor-styles-wrapper .TABS .tabs .tab:nth-child(1) {display: block;}



/* CONTAINER */

.TABS[data-variant="container"] ~ .b-container {display: none;}
.TABS[data-variant="container"] + .b-container {display: block;}




/* TESTIMONIALS */

.TABS[data-variant="testimonials"] nav {
	margin-bottom: var(--s4);
}

.TABS[data-variant="testimonials"] nav ul {
	justify-content: center;
}

.TABS[data-variant="testimonials"] nav li {
	border-radius: 999rem;
	border: none;
	background: var(--blue-50);
	margin: 0 var(--s1);
}

.TABS[data-variant="testimonials"] nav label {
	padding: var(--s1) var(--s3);
}

.TABS[data-variant="testimonials"] input:nth-child(1):checked ~ nav li:nth-child(1),
.TABS[data-variant="testimonials"] input:nth-child(2):checked ~ nav li:nth-child(2),
.TABS[data-variant="testimonials"] input:nth-child(3):checked ~ nav li:nth-child(3),
.TABS[data-variant="testimonials"] input:nth-child(4):checked ~ nav li:nth-child(4),
.TABS[data-variant="testimonials"] input:nth-child(5):checked ~ nav li:nth-child(5),
.TABS[data-variant="testimonials"] input:nth-child(6):checked ~ nav li:nth-child(6),
.TABS[data-variant="testimonials"] input:nth-child(7):checked ~ nav li:nth-child(7),
.TABS[data-variant="testimonials"] input:nth-child(8):checked ~ nav li:nth-child(8),
.TABS[data-variant="testimonials"] input:nth-child(9):checked ~ nav li:nth-child(9) {background-color: var(--blue-500); color: var(--white);}

/* alt-static */

.TABS[data-variant="testimonials"].alt-static nav {pointer-events: none;}
.TABS[data-variant="testimonials"].alt-static nav li {
	background: var(--blue-50) !important;
	color: var(--black) !important;
}

@media (width <= 960px) {
	.TABS[data-variant="testimonials"] nav label {font-size: 12rem;}
	.TABS[data-variant="testimonials"] nav li {margin: 2rem; width: auto; font-size: 14rem;}
}

.editor-styles-wrapper .TABS[data-variant="testimonials"] nav li:nth-child(1) {background-color: var(--blue-500); color: var(--white);}







/* pill */ 

.TABS.alt-pill nav {
	margin-bottom: var(--s3);
}


.TABS.alt-pill nav li {
	border: 1.5px solid var(--blue-300);
	background: transparent;
	color: var(--black);
	font-weight: 500;
	font-size: 14rem;
	padding: var(--s1) var(--s3);
	margin-right: var(--s3);
	border-radius: 999rem;
}

.TABS.alt-pill nav li label {
	display: inline-block;
	width: 100%;
	cursor: pointer;
	padding: 0;
	background: none;
	color: inherit;
	text-align: center;
}

.TABS.alt-pill nav li:hover,
.TABS.alt-pill nav li:focus-within {
	border-color: var(--blue-100);
	background: var(--blue-100);
}

.TABS.alt-pill input:nth-child(1):checked ~ nav li:nth-child(1),
.TABS.alt-pill input:nth-child(2):checked ~ nav li:nth-child(2),
.TABS.alt-pill input:nth-child(3):checked ~ nav li:nth-child(3),
.TABS.alt-pill input:nth-child(4):checked ~ nav li:nth-child(4),
.TABS.alt-pill input:nth-child(5):checked ~ nav li:nth-child(5),
.TABS.alt-pill input:nth-child(6):checked ~ nav li:nth-child(6),
.TABS.alt-pill input:nth-child(7):checked ~ nav li:nth-child(7),
.TABS.alt-pill input:nth-child(8):checked ~ nav li:nth-child(8),
.TABS.alt-pill input:nth-child(9):checked ~ nav li:nth-child(9) {
	background: var(--blue-100);
	border-color: var(--blue-100);
	pointer-events: none;
	box-shadow: none;
}
