/* Icon Tabs – structural styles + neutral defaults. Visual styling comes from the Elementor Style tab. */

.itabs {
	--itabs-speed: 250ms;
	--itabs-dir: row;
	--itabs-nav-dir: column;
	--itabs-nav-w: 160px;
	--itabs-nav-basis: var(--itabs-nav-w);
	--itabs-nav-justify: flex-start;
	--itabs-item-gap: 27px;
	--itabs-icon-box: 22px;

	--itabs-label: #0a2a4a;
	--itabs-label-active: #1d5c2e;
	--itabs-icon: #0a2a4a;
	--itabs-icon-bg: #e6eef6;
	--itabs-icon-active: #fff;
	--itabs-icon-bg-active: #1d5c2e;

	--itabs-line: block;
	--itabs-line-color: #e6eef6;
	--itabs-line-w: 2px;
	--itabs-line-inset: 0px;

	display: flex;
	flex-direction: var(--itabs-dir);
	align-items: flex-start;
	gap: 36px;
}

/* ---------- Tab navigation ---------- */
.itabs__nav {
	flex: 0 0 var(--itabs-nav-basis);
	align-self: stretch;
	max-width: 100%;
	display: flex;
	flex-direction: var(--itabs-nav-dir);
	flex-wrap: wrap;
	justify-content: var(--itabs-nav-justify);
	gap: var(--itabs-item-gap);
	min-width: 0;
}

/* Scoped under .itabs so theme button styles don't leak in */
.itabs .itabs__tab,
.itabs .itabs__tab:hover,
.itabs .itabs__tab:focus {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	width: auto;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: none;
	text-align: left;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	color: inherit;
}
.itabs .itabs__tab:focus-visible {
	outline: 2px solid var(--itabs-label-active);
	outline-offset: 3px;
	border-radius: 4px;
}

.itabs__icon {
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--itabs-icon-box);
	height: var(--itabs-icon-box);
	border-radius: 50%;
	font-size: 11px;
	line-height: 1;
	color: var(--itabs-icon);
	fill: var(--itabs-icon);
	background-color: var(--itabs-icon-bg);
	transition: background-color .2s, color .2s;
}
.itabs__icon svg {
	width: 1em;
	height: 1em;
}
.itabs__icon:empty {
	display: none;
}

.itabs__label {
	display: flex;
	align-items: center;
	min-height: var(--itabs-icon-box);
	color: var(--itabs-label);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .03em;
	text-transform: uppercase;
	transition: color .2s;
}

/* Hover */
.itabs .itabs__tab:hover .itabs__label { color: var(--itabs-label-hover, var(--itabs-label-active)); }
.itabs .itabs__tab:hover .itabs__icon {
	color: var(--itabs-icon-hover, var(--itabs-icon));
	fill: var(--itabs-icon-hover, var(--itabs-icon));
	background-color: var(--itabs-icon-bg-hover, var(--itabs-icon-bg));
}

/* Active */
.itabs .itabs__tab.is-active .itabs__label { color: var(--itabs-label-active); }
.itabs .itabs__tab.is-active .itabs__icon {
	color: var(--itabs-icon-active);
	fill: var(--itabs-icon-active);
	background-color: var(--itabs-icon-bg-active);
}

/* Connector line: runs from the bottom of each icon to the top of the next one */
.itabs__tab:not(:last-child)::after {
	content: "";
	display: var(--itabs-line);
	position: absolute;
	left: calc(var(--itabs-icon-box) / 2 - var(--itabs-line-w) / 2);
	top: calc(var(--itabs-icon-box) + var(--itabs-line-inset));
	bottom: calc(var(--itabs-line-inset) - var(--itabs-item-gap));
	width: var(--itabs-line-w);
	background-color: var(--itabs-line-color);
	pointer-events: none;
}
.itabs--no-line .itabs__tab::after {
	display: none !important;
}

/* ---------- Panels ---------- */
.itabs__panels {
	flex: 1 1 0;
	min-width: 0;
	width: 100%;
}
.itabs__panel:focus {
	outline: none;
}
.itabs__panel:focus-visible {
	outline: 2px solid var(--itabs-label-active);
	outline-offset: 4px;
}
.itabs__panel.is-active {
	animation: itabs-fade var(--itabs-speed) ease both;
}
.itabs--no-fade .itabs__panel.is-active {
	animation: none;
}
@keyframes itabs-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.itabs__panel.is-active { animation: none; }
}

/* Equal height: stack every panel in one grid cell so the tallest sets the height */
.itabs--equal .itabs__panels {
	display: grid;
}
.itabs--equal .itabs__panel {
	grid-area: 1 / 1;
}
.itabs--equal .itabs__panel[hidden] {
	display: block;
	visibility: hidden;
}

/* ---------- Quote ---------- */
.itabs__quote {
	margin: 0 0 24px;
	padding: 24px 40px;
	border-radius: 6px;
	background-color: #f1f4f7;
	text-align: center;
}
.itabs__quote-text {
	margin: 0;
	padding: 0;
	border: 0;
	font-style: normal;
	quotes: none;
}
.itabs__quote-text::before,
.itabs__quote-text::after {
	content: none;
}
.itabs__quote-cite {
	margin-top: 8px;
	font-size: .8em;
}
.itabs__qmark {
	--itabs-qmark-offset: .3em;
	display: inline-block;
	position: relative;
	top: var(--itabs-qmark-offset);
	font-size: 3em;
	line-height: 0;
	font-family: Georgia, "Times New Roman", serif;
	color: #d5dde5;
	user-select: none;
}
.itabs__qmark--open  { margin-right: .05em; }
.itabs__qmark--close { margin-left: .05em; }

/* ---------- Content ---------- */
.itabs__content > :first-child { margin-top: 0; }
.itabs__content > :last-child  { margin-bottom: 0; }
.itabs__content ul,
.itabs__content ol {
	padding-left: 1.2em;
}
