/*
	Theme Name: Hello Elementor Child
	Theme URI: https://elementor.com/hello-theme/
	Description: Child-thema van Hello Elementor voor dakkapellen.nu.
	Author: Satdesign, Pepijn van Rijen
	Author URI: https://satdesign.nl
	Template: hello-elementor
	Version: 1.0.0
	Text Domain: hello-elementor-child
	License: GNU General Public License v3 or later.
	License URI: https://www.gnu.org/licenses/gpl-3.0.html
*/

.tabscontainer li{
	padding-left: 12px !important;
	padding-right: 12px !important;
	border-top-left-radius: 5px !important;
	border-top-right-radius: 5px !important;
}
.tabscontainer li:hover{
	background-color: #EFEFEF !important;
}
@media(max-width: 767px){
	.tabscontainer li{
		padding-top: 3px !important;
		padding-bottom: 3px !important;
	}
}

/* Actieve tab: zonder JS = eerste tab (fallback), met JS = .tabactive */
.tabscontainer:not(.js-tabs) li:nth-child(1),
.tabscontainer.js-tabs li.tabactive{
	background-color: #FFF !important;
}
.tabscontainer:not(.js-tabs) li:nth-child(1) .elementor-icon-list-text,
.tabscontainer.js-tabs li.tabactive .elementor-icon-list-text{
	color: #000 !important;
}

@media(max-width: 767px){
	/* Tekst standaard ingeklapt, met uitklap-animatie bij tonen */
	.tabscontainer .elementor-icon-list-text{
		display: inline-block !important;
		max-width: 0;
		padding-left: 0 !important;
		opacity: 0;
		overflow: hidden;
		white-space: nowrap;
		vertical-align: middle;
		transform: translateX(-8px);
		transition: max-width .4s cubic-bezier(0.4, 0, 0.2, 1),
					opacity .3s ease,
					transform .4s cubic-bezier(0.4, 0, 0.2, 1),
					padding .4s cubic-bezier(0.4, 0, 0.2, 1);
	}
	/* Alleen de actieve tab toont zijn tekst (klapt geanimeerd uit) */
	.tabscontainer:not(.js-tabs) li:nth-child(1) .elementor-icon-list-text,
	.tabscontainer.js-tabs li.tabactive .elementor-icon-list-text{
		max-width: 200px;
		opacity: 1;
		transform: translateX(0);
	}
	/* Externe-link icoon achter de tekst, behalve bij de eerste tab (die verwijst naar deze site) */
	.tabscontainer li:not(:first-child) .elementor-icon-list-text::after{
		content: "";
		display: inline-block;
		width: 11px;
		height: 11px;
		margin-left: 6px;
		vertical-align: -1px;
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
	}
}