/**
 * Tab Slider block (vmg/tab-slider).
 *
 * Ported from veson2025. The original transitioned panels with Slick; reworked
 * dependency-free here — panels cross-fade via CSS, script.js toggles .is-active
 * / .sel. Palette mapped to this theme (blackblue -> dark-blue).
 *
 * Styling keys off hook classes rather than structural `>` chains, because ACF
 * wraps InnerBlocks in a .acf-innerblocks-container on the front end (which a
 * `.tab-slider > .wp-block-group` chain would miss). render.php sets the classes
 * on new blocks; script.js re-applies them so existing content works too:
 *
 *   .tab-slider
 *     ul.tab-slider__tabs > li      (tabs; .sel = active)
 *     .tab-slider__panels           (panels wrapper)
 *       .tab-slider__panel          (each panel; .is-active = shown)
 *
 * The cross-fade pre-hide is gated behind .is-tab-slider-ready (added by JS), so
 * every panel stays visible with JS off and in the block editor.
 */

/* Tab bar ------------------------------------------------------------------ */
.tab-slider__tabs {
    display: inline-flex;
    gap: 1rem;
    flex: 1 1 0px;
    list-style: none;
    margin: 0 0 1rem;
    padding: 5px;
    background-color: var(--wp--preset--color--white);
    border: 1px solid var(--wp--preset--color--border-gray, #ddd);
    border-radius: 99px;
    justify-content: center;
	flex-wrap: nowrap;
}
.wp-block-group:has(.tab-slider__tabs) {
  	text-align: center;
	li{
		text-align: left;
	}
}
.tab-slider__tabs > li {
    flex-grow: 0;
    margin: 0;
    padding: var(--spacing-4) var(--spacing-16);
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    border-radius: 99px;
    color: var(--wp--preset--color--dark-blue);
    transition: background-color 200ms ease, color 200ms ease;
	white-space: nowrap;
    flex-shrink: 0;
}

.tab-slider__tabs > li.sel {
	background-color: var(--wp--preset--color--blue);
	color: var(--wp--preset--color--white);
}

.tab-slider__tabs > li::marker {
	color: transparent;
}

.tab-slider__tabs > li::before {
	display: none;
}

/* Panels: cross-fade, only once JS has flagged the block ready -------------- */
.tab-slider.is-tab-slider-ready .tab-slider__panels {
	display: grid;
}

/* Every panel stacks in the same grid cell, so the block keeps the height of
   its tallest panel and never jumps between tabs. */
.tab-slider.is-tab-slider-ready .tab-slider__panel {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transition: opacity 400ms ease;
	margin:0;
}

.tab-slider.is-tab-slider-ready .tab-slider__panel.is-active {
	opacity: 1;
	visibility: visible;
}
.dark-mode{    
	.wp-block-list.tab-slider__tabs {
		background-color: var(--wp--preset--color--dark-blue);
		border-color: rgba(85, 87, 105, 0.5);
	}
	.tab-slider__tabs > li{
		color: var(--wp--preset--color--white);
		&.sel {
			color: var(--wp--preset--color--lime);
			background-color: rgba(85, 87, 105, 0.5);
		}
	}
}
@media (prefers-reduced-motion: reduce) {
	.tab-slider.is-tab-slider-ready .tab-slider__panel {
		transition: none;
	}
}

/* Mobile: let the tab bar wrap --------------------------------------------- */
@media only screen and (max-width: 830px) {
	.tab-slider__tabs {
		gap: 1rem;
		border: none;
		background-color: transparent;
	}
}