/* ==========================================================================
   Tabs block — tabs.css
   Covers both the .momentive-tabs container and .momentive-tab-panel children.
   Editor-only styles are scoped to .momentive-tabs--editor.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Outer container
   -------------------------------------------------------------------------- */

.momentive-tabs {
	/* Reserve space so the nav doesn't cause layout shift when JS adds it. */
}

/* --------------------------------------------------------------------------
   Tab nav (built by tabs.js on the front end, editor.js in the editor)
   -------------------------------------------------------------------------- */

.momentive-tabs__nav,
.momentive-tabs-editor__nav {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: var(--wp--preset--spacing--medium, 2rem);
	list-style: none;
	padding: 0;
	margin-top: 0;
	gap: 1rem;
}

.momentive-tabs__tab,
.momentive-tabs-editor__tab {
	display: inline-flex;
	flex: 1;                  /* stretch evenly across the full nav width */
	justify-content: center;  /* centre icon + label within each equal cell */
	align-items: center;
	gap: 0.5em;
	padding: 0.75em;
	background: none;
	border: none;
	border-bottom: .2rem solid var(--wp--preset--color--light-gray, #e0e0e0);
	cursor: pointer;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	font-family: inherit;
	color: var(--wp--preset--color--base-3, #333);
	line-height: 1.3;
	transition: color 0.15s ease, border-color 0.15s ease;
	text-decoration: none;
}

.momentive-tabs__tab svg {
	color: var(--secondary-color);
}

.momentive-tabs__tab:hover,
.momentive-tabs-editor__tab:hover {
	border-color: color-mix(in srgb, var(--wp--preset--color--primary, var(--accent-color, #0078ff)) 50%, transparent );
}

.momentive-tabs__tab.is-active,
.momentive-tabs__tab[aria-selected="true"],
.momentive-tabs-editor__tab.is-active {
	border-bottom-color: var(--wp--preset--color--primary, var(--accent-color, #0078ff));
/*	color: var(--wp--preset--color--primary, var(--accent-color, #0078ff));*/
}

/* Icons inside tab buttons — accent/orange colour to match the screenshot */
.momentive-tabs__icon,
.momentive-tabs-editor__tab-icon {
	display: inline-block;
	width: 1.4em;
	height: 1.4em;
	flex-shrink: 0;
	color: var(--page-accent-color, var(--button-background, #f26522));
	fill: currentColor;
}

/* --------------------------------------------------------------------------
   Panels
   -------------------------------------------------------------------------- */

/* When JS is active, hidden panels are suppressed via the `hidden` attribute,
   which is already covered by the global reset ([hidden]{display:none!important}).
   No extra rule needed here for hiding — just style the visible state. */

.momentive-tab-panel {
	/* Panels have no special wrapper styling by default —
	   the InnerBlocks content inside provides its own spacing/layout. */
}

/* --------------------------------------------------------------------------
   Editor-specific styles
   -------------------------------------------------------------------------- */

.momentive-tabs--editor .momentive-tabs-editor__nav {
	/* Make the editor nav look a bit more distinct from real content. */
	margin-bottom: 1rem;
}

.momentive-tabs--editor .momentive-tabs-editor__empty-hint {
	font-size: 0.85em;
	color: #999;
	font-style: italic;
	align-self: center;
	padding: 0.5em 1em;
}

/* Panels stacked in editor — show a subtle label badge above each */
.momentive-tab-panel.wp-block {
	/* No hiding in the editor — all panels visible, stacked */
}

.momentive-tabs-editor__panels {
	/* Gap between stacked panels in the editor */
}

/* --------------------------------------------------------------------------
   Responsive — stack tabs on narrow viewports
   -------------------------------------------------------------------------- */

@media ( max-width: 600px ) {
	.momentive-tabs__nav {
		flex-direction: column;
		border-bottom: none;
		gap: 0.25rem;
	}

	.momentive-tabs__tab {
		border-bottom: none;
		border-left: 3px solid transparent;
		margin-bottom: 0;
		padding: 0.6em 1em;
	}

	.momentive-tabs__tab.is-active,
	.momentive-tabs__tab[aria-selected="true"] {
		border-bottom: none;
		border-left-color: var(--wp--preset--color--primary, var(--accent-color, #0078ff));
		background: var(--wp--preset--color--superlight-accent, #f0f7ff);
	}
}