/*
 * Makira Services Section - frontend styles.
 *
 * Colors, typography, borders, backgrounds, spacing, and radii are all
 * applied per-instance via Elementor's own generated CSS (see the
 * `selectors` on each control in class-elementor-widget.php). This file
 * only sets up the structural layout and the click/hover state mechanics.
 */

.makira-services-section {
	--makira-ss-transition: 250ms;
	display: flex;
}

/* --- Horizontal: tab row on top, content below --- */
.makira-services-section--horizontal {
	flex-direction: column;
}
.makira-services-section--horizontal > .makira-services-section__list {
	flex-direction: row;
	flex-wrap: wrap;
}
.makira-services-section--horizontal > .makira-services-section__content {
	flex: 1 1 auto;
}

/* --- Vertical: sidebar list on the left, content on the right --- */
.makira-services-section--vertical {
	flex-direction: row;
	align-items: flex-start;
}
.makira-services-section--vertical > .makira-services-section__list {
	flex-direction: column;
	flex: 0 0 auto;
}
.makira-services-section--vertical > .makira-services-section__content {
	flex: 1 1 0%;
	min-width: 0; /* allow the content column to shrink properly in a flex row */
}

/* Collapse vertical layout to stacked on small screens, same as horizontal. */
@media ( max-width: 767px ) {
	.makira-services-section--vertical {
		flex-direction: column;
	}
	.makira-services-section--vertical > .makira-services-section__list {
		flex-direction: row;
		flex-wrap: wrap;
	}
}

.makira-services-section__list {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
}

.makira-services-section__item {
	display: flex;
}

.makira-services-section__trigger {
	display: flex;
	align-items: center;
	width: 100%;
	background: none;
	border: none;
	cursor: pointer;
	font: inherit;
	color: inherit;
	text-align: left;
	transition:
		background-color var( --makira-ss-transition ) ease,
		border-color var( --makira-ss-transition ) ease,
		color var( --makira-ss-transition ) ease;
}

.makira-services-section__label {
	display: inline-flex;
	flex-direction: row;
	align-items: baseline;
	min-width: 0;
}

.makira-services-section__number,
.makira-services-section__name {
	display: inline-block;
}

.makira-services-section__icon-wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.makira-services-section__icon,
.makira-services-section__icon-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	text-decoration: none;
	color: inherit;
	transition: color var( --makira-ss-transition ) ease;
}

.makira-services-section__icon svg,
.makira-services-section__icon-link svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: currentColor;
}

/* --- Content panels: all render in the DOM; JS toggles which is visible --- */
.makira-services-section__content {
	position: relative;
}

.makira-services-section__panel {
	display: none;
	opacity: 0;
	transition: opacity var( --makira-ss-transition ) ease;
}

.makira-services-section__panel.is-active {
	display: block;
}

.makira-services-section__panel.is-active.is-visible {
	opacity: 1;
}

.makira-services-section__panel-empty {
	opacity: 0.6;
	font-style: italic;
}