/**
 * Add .wm-pattern-styles-tabs to a group or container block to create a Tab UI from a Query Loop. 
 * Select the Query Loop block and add tag the block with the WM Pattern Libary attribute Tabs pattern.
 * Copy this file to your theme's assets/css/patterns directory to customize/extend the functionality. 
 * This file will automatically enqueue when .wm-pattern-styles-tabs is detected.
 *
 * JS file: assets/js/patterns/wm-pattern-styles-tabs.js
 *
 * @version 1.0.0
 * @since 2025-10-16
 */


/* Tab button styling */
.wm-pattern-styles-tabs .wmx-loop-toggle-btns {
    cursor: pointer;
    transition: all 0.3s ease;
}

.wm-pattern-styles-tabs .wmx-loop-toggle-btns {
    cursor: pointer;
}

.wm-pattern-styles-tabs .wmx-loop-toggle-btns.active {
    /* Add your active button styles here */
    opacity: 1;
}
.horizontal-tabs{
	width: 100%;
	flex-direction: column;
	padding: 0 !important;
}
.wm-pattern-styles-tabs .wmx-loop-toggle-btns.active{
	background: #2e7842 !important;
}
.wm-pattern-styles-tabs .wmx-loop-toggle-btns.active a{
	color: #ffffff !important;
}
.wm-pattern-styles-tabs .wmx-loop-toggle-btns a{
	font-family: 'Open Sans',sans-serif;
}
.wm-pattern-styles-tabs .wmx-loop-toggle-btns:not(.active) {
    transition: all 0.3s ease;
}

/* Hide all tab content by default */
.wmx-loop-tab-targets .wp-block-post-template .wp-block-post {
    display: none !important;
}

/* Show only the active tab content */
.wmx-loop-tab-targets .wp-block-post-template .wp-block-post.active {
    display: block !important;
}

.wm-pattern-styles-tabs .horizontal-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0px;
}
@media screen and (max-width: 1440px) {
	.tabs-custom-content{
		min-height: 64vh !important;
	}
}
@media screen and (max-width: 791px) {
	.tabs-custom-content{
		min-height: 79vh !important;
	}
}