/**
 * Finewerk Side Tabs
 *
 * Scoped, BEM-style styles for the vertical side-tabs widget: dark tab rail
 * on the left, light content panel on the right. The panel is a rounded card
 * that overlaps ON TOP of the rail's right edge, and the active tab is a
 * liquid-glass pill (the site-wide .finewerk-liquid-glass material, gated to
 * the active state here) that overhangs on top of the panel and carries a
 * circular arrow button. All custom properties are namespaced with --fw-st-
 * to avoid collisions; Elementor style controls override them per instance.
 */

/* ------------------------------------------------------------------
 * Typography defaults (see assets/css/fonts.css)
 *
 * Hubot Sans for headings/titles/stat numbers, Archivo for everything
 * else. Declared at single-class specificity — the tag group through a
 * zero-specificity :where() — so an explicit Elementor Typography
 * control (which Elementor writes at element-id specificity) always
 * overrides it. No !important anywhere.
 * ---------------------------------------------------------------- */

.finewerk-side-tabs {
	font-family: var(--fw-font-body);
}

.finewerk-side-tabs :where(h1, h2, h3, h4, h5, h6) {
	font-family: var(--fw-font-title);
}

/* Form controls do not inherit the document font: the UA sheet gives
   button/input/select/textarea their own `font: 400 13.33px Arial`.
   Opt them back into the component's face. */
.finewerk-side-tabs :where(button, input, select, textarea, optgroup) {
	font-family: inherit;
}

.finewerk-side-tabs {
	/* A narrower rail leaves the panel more room for its content. */
	--fw-st-rail-width: 28%;
	/*
	 * The element's height comes from its tallest tab, not from a fixed value:
	 * every panel occupies the same grid cell, so the panel area is always as
	 * tall as the largest one and switching tabs cannot move the page. This is
	 * only a floor for sparse content.
	 */
	--fw-st-min-height: 520px;
	--fw-st-radius: 24px;
	/* The panel card's own corner radius (all four corners are visible). */
	--fw-st-panel-radius: 20px;
	/*
	 * How far the panel card slides leftwards over the rail. The rail's green
	 * surface keeps running underneath it, so the panel's rounded left corners
	 * are always drawn against green, never against the page.
	 */
	--fw-st-panel-overlap: var(--fw-st-tab-grow);
	/*
	 * How much wider the active tab is than the inactive ones. The tabs stop
	 * at the panel's left edge (see the tablist's right padding), so the
	 * active pill overhangs the panel by overlap + grow.
	 */
	--fw-st-tab-grow: 28px;
	/* Panel text always clears the overhanging pill. */
	--fw-st-panel-inset: calc(var(--fw-st-panel-overlap) + var(--fw-st-tab-grow) + 32px);
	--fw-st-tab-gap: 20px;
	--fw-st-column-gap: 28px;
	--fw-st-item-gap: 16px;
	--fw-st-arrow-size: 44px;
	--fw-st-check-size: 20px;
	--fw-st-ring-thickness: 2px;
	--fw-st-stat-card-width: 250px;
	display: block;
	width: 100%;
}

/* ---------- Heading ---------- */

.finewerk-side-tabs__heading {
	margin: 0 0 40px;
	font-family: var(--fw-font-title);
	font-size: clamp(28px, 3.2vw, 40px);
	font-weight: 700;
	line-height: 1.15;
	color: #000000;
	text-align: left;
}

/* ---------- Body: rail + panel ---------- */

/*
 * The body owns the one stacking context all the layers interleave in:
 * rail surface (bottom) → grain → panel card → tab pills (top). isolation
 * keeps that ordering stable regardless of what Elementor wraps around the
 * widget, without touching position/z-index controls.
 */
.finewerk-side-tabs__body {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	width: 100%;
	min-height: var(--fw-st-min-height);
}

/* ---------- Rail ---------- */

/*
 * The rail is the LOWEST layer: the panel card overlaps its right edge, and
 * the tab buttons (positive z-index below) paint above the panel in turn.
 * That interleaving is only possible if the rail does not form a stacking
 * context of its own, so no z-index here — and the isolation that
 * .fw-bg-gradient normally brings is undone just below.
 */
.finewerk-side-tabs__rail {
	position: relative;
	box-sizing: border-box;
	flex: 0 0 var(--fw-st-rail-width);
	max-width: var(--fw-st-rail-width);
	min-width: 0;
	/* Base colour beneath the `fw-bg-gradient` utility's opaque gradient;
	   `background-color` longhand, so the utility's gradient image survives. */
	background-color: #000000;
	/* All corners round: the right ones simply disappear under the panel. */
	border-radius: var(--fw-st-radius);
	/* No right padding: the tablist's own padding stops at the panel edge. */
	padding: 48px 0 48px 32px;
	/* The active pill must be able to extend past the rail's right edge. */
	overflow: visible;
}

/*
 * .fw-bg-gradient isolates the element so its z-index:-1 grain layer sits
 * above the background. Isolated, though, the rail would trap the tab pills
 * below the panel card. So the isolation is lifted and the grain layer
 * re-slotted at z-index:0 in the body's context: still above the rail's
 * background (tree order), still below the panel (z-index 1) and the tabs
 * (z-index 3).
 *
 * Doubled class (0,3,0 with the rail class) so these two overrides beat the
 * utility's own doubled selectors no matter which stylesheet loads first.
 */
.finewerk-side-tabs__rail.fw-bg-gradient.fw-bg-gradient {
	isolation: auto;
}

.finewerk-side-tabs__rail.fw-bg-gradient.fw-bg-gradient::after {
	z-index: 0;
}

.finewerk-side-tabs__tabs {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	row-gap: var(--fw-st-tab-gap);
	height: 100%;
	min-height: 0;
	/* Tabs stop where the overlapping panel begins; the active pill alone
	   crosses onto it. */
	padding-right: var(--fw-st-panel-overlap);
}

/* ---------- Tab buttons ---------- */

/*
 * Every tab reserves the same box — including room for the arrow button — so
 * activating one changes its width and nothing else. Labels are kept to a
 * single line; the type is sized to make that comfortable.
 */
.finewerk-side-tabs__tab {
	position: relative;
	/* Above the panel card (z-index 1) so the active pill overhangs onto it.
	   Also outranks the z-index:0 the liquid-glass class would set. */
	z-index: 3;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	column-gap: 16px;
	width: 100%;
	margin: 0;
	padding: 14px 20px;
	background: none;
	background-color: transparent;
	border: 0;
	border-radius: 999px;
	/* Navigation control, not a heading. */
	font-family: var(--fw-font-body);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.01em;
	text-align: left;
	white-space: nowrap;
	color: #ffffff;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.25s ease, color 0.25s ease;
}

.finewerk-side-tabs__tab:hover {
	opacity: 0.85;
}

/*
 * The liquid-glass material (the buttons all carry .finewerk-liquid-glass)
 * is gated to the active state: its plate (::before) and highlight (::after)
 * layers are faded out on inactive tabs, so unselected tabs read as plain
 * text and the pill material fades in/out smoothly on tab switches. The
 * material itself stays entirely the shared class's — nothing is repainted
 * here.
 */
.finewerk-side-tabs__tab.finewerk-liquid-glass::before,
.finewerk-side-tabs__tab.finewerk-liquid-glass::after {
	opacity: 0;
	transition: opacity 0.3s ease;
}

.finewerk-side-tabs__tab.is-fw-st-active.finewerk-liquid-glass::before,
.finewerk-side-tabs__tab.is-fw-st-active.finewerk-liquid-glass::after {
	opacity: 1;
}

/*
 * The active tab widens past the panel's left edge, so its glass pill and
 * arrow button overhang on top of the panel card (overlap + grow). No
 * background of its own — the glass plate IS the pill surface.
 */
.finewerk-side-tabs__tab.is-fw-st-active,
.finewerk-side-tabs__tab.is-fw-st-active:hover {
	width: calc(100% + var(--fw-st-panel-overlap) + var(--fw-st-tab-grow));
	color: #ffffff;
	opacity: 1;
}

.finewerk-side-tabs__tab:focus-visible {
	outline: 2px solid #c8f8a9;
	outline-offset: 3px;
}

/* Long labels are truncated rather than wrapped onto a second line. */
.finewerk-side-tabs__tab-label {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/*
 * Circular arrow button at the right end of the active pill. It stays in the
 * layout on inactive tabs so every tab is the same height and the rail never
 * shifts vertically when the selection changes.
 */
.finewerk-side-tabs__tab-arrow {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: var(--fw-st-arrow-size);
	height: var(--fw-st-arrow-size);
	border-radius: 50%;
	background-color: #0f3d3a;
	color: #ffffff;
	opacity: 0;
	transform: scale(0.7);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.finewerk-side-tabs__tab.is-fw-st-active .finewerk-side-tabs__tab-arrow {
	opacity: 1;
	transform: scale(1);
}

.finewerk-side-tabs__tab-arrow svg {
	width: 40%;
	height: 40%;
}

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

/*
 * The panel is a rounded card that slides leftwards ON TOP of the rail's
 * right edge (negative margin = the overlap), while the active pill in turn
 * lands on top of the panel. All four of its corners stay visible — the left
 * ones are drawn against the rail's green running underneath.
 *
 * Every panel is placed in the same single grid cell. The cell is as tall as
 * the tallest panel, which is what keeps the element's height identical on
 * every tab — no fixed value to overflow, and nothing to scroll.
 */
.finewerk-side-tabs__panels {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	flex: 1 1 auto;
	min-width: 0;
	margin-left: calc(-1 * var(--fw-st-panel-overlap));
	background-color: #f5f5f3;
	border-radius: var(--fw-st-panel-radius);
	/* A whisper of shadow on the rail side sells the card floating above it. */
	box-shadow: -18px 0 36px -24px rgba(8, 40, 35, 0.45);
	/* Left padding clears the active pill that overhangs into the panel. */
	padding: 48px 48px 48px var(--fw-st-panel-inset);
}

/*
 * The stat card drops below the text as soon as the text column would fall
 * under its comfortable measure, so a narrow panel makes the element wider
 * rather than very tall. No breakpoint needed — the wrap decides itself.
 */
.finewerk-side-tabs__panel {
	grid-area: 1 / 1;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	align-content: flex-start;
	column-gap: var(--fw-st-column-gap);
	row-gap: 28px;
	min-width: 0;
}

/*
 * Inactive panels keep their grid cell so they still contribute to the height,
 * but are removed from sight and from the accessibility tree. The author-level
 * display above already overrides the [hidden] attribute's display: none.
 */
.finewerk-side-tabs__panel[hidden] {
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
}

.finewerk-side-tabs__panel.is-fw-st-active {
	animation: fw-st-panel-in 0.35s ease both;
}

@keyframes fw-st-panel-in {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.finewerk-side-tabs__panel:focus-visible {
	outline: 2px solid #123f3a;
	outline-offset: 3px;
	border-radius: 8px;
}

/* ---------- Panel content ---------- */

/*
 * The text column takes every pixel the stat card does not need, down to the
 * basis below — past that the card wraps instead of the text getting narrower.
 */
.finewerk-side-tabs__content {
	flex: 1 1 var(--fw-st-content-min, 240px);
	min-width: 0;
}

.finewerk-side-tabs__text:last-child,
.finewerk-side-tabs__list:last-child {
	margin-bottom: 0;
}

.finewerk-side-tabs__title {
	margin: 0 0 16px;
	font-family: var(--fw-font-title);
	font-size: 26px;
	font-weight: 700;
	line-height: 1.2;
	color: #101010;
}

.finewerk-side-tabs__text {
	margin: 0 0 24px;
	font-family: var(--fw-font-body);
	font-size: 16px;
	line-height: 1.55;
	color: #55565a;
}

.finewerk-side-tabs__fix-label {
	display: flex;
	align-items: center;
	column-gap: 10px;
	margin: 0 0 18px;
	font-family: var(--fw-font-body);
	font-size: 15px;
	font-weight: 600;
	color: #101010;
}

.finewerk-side-tabs__fix-label svg {
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	color: #101010;
}

.finewerk-side-tabs__list {
	display: flex;
	flex-direction: column;
	row-gap: var(--fw-st-item-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.finewerk-side-tabs__item {
	display: flex;
	align-items: flex-start;
	column-gap: 12px;
	font-family: var(--fw-font-body);
	font-size: 15px;
	line-height: 1.45;
	color: #1a1a1a;
}

.finewerk-side-tabs__item-icon {
	flex: 0 0 auto;
	display: inline-flex;
	width: var(--fw-st-check-size);
	height: var(--fw-st-check-size);
	margin-top: 0.1em;
	color: #123f3a;
}

.finewerk-side-tabs__item-icon svg {
	width: 100%;
	height: 100%;
}

/* ---------- Stat card ---------- */

.finewerk-side-tabs__stat-card {
	flex: 0 0 var(--fw-st-stat-card-width);
	max-width: 100%;
	min-width: 0;
	background-color: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.05);
	border-radius: 16px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.04);
	padding: 28px 24px;
	text-align: center;
}

.finewerk-side-tabs__stat-ring {
	position: relative;
	width: 100%;
	max-width: 190px;
	margin: 0 auto 20px;
}

.finewerk-side-tabs__stat-ring > svg {
	display: block;
	width: 100%;
	height: auto;
}

.finewerk-side-tabs__stat-ring-track {
	stroke: #e3e3e0;
	stroke-width: var(--fw-st-ring-thickness);
}

.finewerk-side-tabs__stat-ring-progress {
	stroke: #123f3a;
	stroke-width: var(--fw-st-ring-thickness);
}

.finewerk-side-tabs__stat-value {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	row-gap: 6px;
	font-family: var(--fw-font-title);
	font-size: 40px;
	font-weight: 600;
	line-height: 1;
	color: #101010;
}

.finewerk-side-tabs__stat-arrow {
	width: 14px;
	height: 14px;
	color: #123f3a;
}

.finewerk-side-tabs__stat-caption {
	font-family: var(--fw-font-body);
	font-size: 15px;
	line-height: 1.5;
	color: #8a8a86;
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.finewerk-side-tabs__tab,
	.finewerk-side-tabs__tab-arrow,
	.finewerk-side-tabs__panel.is-fw-st-active {
		transition: none !important;
		animation: none !important;
	}
}

/* ---------- Responsive ---------- */

/* Tablet: tighten paddings and shrink the stat card. */
@media (max-width: 1024px) {
	.finewerk-side-tabs {
		--fw-st-min-height: 480px;
		/*
		 * The rail needs a real minimum to keep labels on one line, but it
		 * should not eat a fixed share of a wide tablet either.
		 */
		--fw-st-rail-width: max(288px, 32%);
		--fw-st-column-gap: 20px;
		--fw-st-stat-card-width: 190px;
		--fw-st-tab-grow: 22px;
		--fw-st-arrow-size: 34px;
	}

	.finewerk-side-tabs__rail {
		padding: 36px 0 36px 22px;
	}

	.finewerk-side-tabs__tab {
		font-size: 13px;
		padding: 11px 14px;
		column-gap: 12px;
	}

	.finewerk-side-tabs__panels {
		padding: 36px 28px 36px var(--fw-st-panel-inset);
	}

	.finewerk-side-tabs__stat-card {
		padding: 20px 16px;
	}
}

/* Mobile: stack the rail above the panel; tabs become wrapped pills. */
@media (max-width: 767px) {
	.finewerk-side-tabs {
		/* Stacked: there is no rail edge left to overhang. */
		--fw-st-tab-grow: 0px;
		--fw-st-panel-inset: 20px;
		--fw-st-tab-gap: 10px;
		--fw-st-arrow-size: 32px;
		/* Stacked, the rail sits above the panel rather than beside it. */
		--fw-st-min-height: 0;
	}

	.finewerk-side-tabs__body {
		flex-direction: column;
		align-items: stretch;
		row-gap: 16px;
		min-height: 0;
	}

	.finewerk-side-tabs__rail {
		flex-basis: auto;
		max-width: 100%;
		padding: 20px;
	}

	.finewerk-side-tabs__tabs {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: var(--fw-st-tab-gap);
		height: auto;
	}

	.finewerk-side-tabs__tab {
		width: auto;
		padding: 10px 16px;
		font-size: 14px;
	}

	.finewerk-side-tabs__tab.is-fw-st-active,
	.finewerk-side-tabs__tab.is-fw-st-active:hover {
		width: auto;
	}

	/* Inactive tabs are plain text when the rail is a horizontal chip row. */
	.finewerk-side-tabs__tab:not(.is-fw-st-active) .finewerk-side-tabs__tab-arrow {
		display: none;
	}

	/* Stacked, the panel no longer overlaps anything: no side shadow. */
	.finewerk-side-tabs__panels {
		box-shadow: none;
		padding: 28px 20px;
	}

	/* Panel content stacks with the stat card below the text. */
	.finewerk-side-tabs__panel {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		row-gap: 28px;
	}

	.finewerk-side-tabs__stat-card {
		flex-basis: auto;
		width: 100%;
		max-width: 100%;
	}
}