/* Z-index layers, back to front:
   - 0: hover slider
   - 1: tabs
   - 2: active portfolio tab (allows overlap of shoulders for portfolio style)
   - 3: scroll chevrons
   - 4: active tab panel */

/* Contain child overflow so tabs scroll instead of blowing out the viewport.
   --_indicator-bg is set using javascript, and matches whatever background color is set on the block so the
   scroll-indicator chevron and fade don't leave a white strip on dark backgrounds. */

.jweb-tabs {
	min-width: 0;
	max-width: 100%;
	--_indicator-bg: white;
}

/* Tab bar: horizontal scroll layout. position: relative makes it the containing
   block for the hover slider (a single highlight that slides between tabs).
   .jweb-tabs-menu is the editor equivalent of [role="tablist"]. */

.jweb-tabs [role="tablist"],
.jweb-tabs-menu {
	position: relative;
	display: flex;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.jweb-tabs [role="tablist"]::-webkit-scrollbar,
.jweb-tabs-menu::-webkit-scrollbar {
	display: none;
}

/* Tab button: layout, spacing, and cursor. position + z-index keep the tab (and
   its label) above the hover slider, which sits at z-index 0 behind the tabs.
   .jweb-tabs-menu-item is the editor equivalent of [role="tab"]. */

.jweb-tabs [role="tab"],
.jweb-tabs-menu-item {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	flex-shrink: 0;
	white-space: nowrap;
	line-height: 1;
	gap: var(--spacing-4xs);
	padding: var(--spacing-2xs) var(--spacing-sm);
	border: none;
	background: none;
	font: inherit;
	cursor: pointer;
}

@media (max-width: 374px) {
	.jweb-tabs [role="tab"] {
		padding-inline: var(--spacing-2xs);
	}
}

/* Wrapper around the label/icons, used by portfolio variant as the fill box between the shoulders */

.jweb-tabs-menu-item__fill {
	display: contents;
	z-index: 1; /* z-index lifts the fill above the shoulder pseudos so text is not clipped. */
}

.jweb-tabs [role="tab"],
.jweb-tabs .jweb-tabs-menu-item {
	color: var(--tab-text-color, var(--color-text-body));
}

/* Per-button text-color preset overrides the inherited tab-text-color. */

.jweb-tabs [role="tab"][class*="has-"][class*="-text-color"],
.jweb-tabs-menu-item[class*="has-"][class*="-text-color"] {
	color: var(--text-color);
}

/* Active tab button. .is-active is the editor equivalent of [aria-selected="true"]. */

.jweb-tabs [role="tab"][aria-selected="true"],
.jweb-tabs-menu-item.is-active {
	background-color: var(--selected-tab-color, var(--color-background-neutral-light));
	color: var(--selected-tab-text-color, var(--tab-text-color, var(--color-text-body)));
}

/* Tab panel background matches the active tab color.
   .jweb-tab is the editor equivalent of [role="tabpanel"]. */

.jweb-tabs [role="tabpanel"],
.jweb-tab {
	background-color: var(--selected-tab-color, var(--color-background-neutral-light));
}

.jweb-tabs [role="tabpanel"].is-tab-hidden {
	display: none;
}

/* --- Icon rendering --- */

.jweb-tabs-menu-item__icon {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	color: inherit;
	color: var(--icon-color, inherit);
}

.jweb-tabs-menu-item__icon svg {
	display: block;
	width: var(--icon-size, var(--icon-size-sm));
	height: var(--icon-size, var(--icon-size-sm));
}

.jweb-tabs-menu-item__icon[data-icon-size="small"] { --icon-size: var(--icon-size-sm); }

.jweb-tabs-menu-item__icon[data-icon-size="medium"] { --icon-size: var(--icon-size-md); }

.jweb-tabs-menu-item__icon[data-icon-size="large"] { --icon-size: var(--icon-size-lg); }

.jweb-tabs-menu-item__icon[data-icon-size="extra-large"] { --icon-size: var(--icon-size-xl); }

/* --- Border-radius styles --- */

/* Each variant sets --tabs-radius; the tab tops, hover slider top, and panel
   bottoms all round to it, so the bar and panel read as one rounded container.
   Default is sharp. */

.jweb-tabs {
	--tabs-radius: 0;
}

.jweb-tabs.is-style-subtle-border {
	--tabs-radius: var(--border-radius-subtle);
}

.jweb-tabs.is-style-border {
	--tabs-radius: var(--border-radius-default);
}

.jweb-tabs [role="tab"] {
	border-top-left-radius: var(--tabs-radius);
	border-top-right-radius: var(--tabs-radius);
}

.jweb-tabs [role="tabpanel"] {
	border-bottom-left-radius: var(--tabs-radius);
	border-bottom-right-radius: var(--tabs-radius);
}

/* --- Hover slider --- */

/* A single shared highlight (injected by cms_tabs.ts) that slides to the hovered
   tab. It sits behind the tabs (z-index 0), showing through their transparent
   backgrounds; with no --tab-hover-color it's transparent, so no hover effect. */

.jweb-tabs__hover-slider {
	position: absolute;
	top: 0;
	bottom: 0;
	/* Position/size are set by JS (--slider-left / --slider-width on the tablist). */
	left: 0;
	left: var(--slider-left, 0);
	width: 0;
	width: var(--slider-width, 0);
	z-index: 0;
	opacity: 0;
	pointer-events: none;
	background-color: var(--tab-hover-color);
	/* Match the tab tops so the highlight isn't a sharp rectangle behind rounded tabs. */
	border-top-left-radius: var(--tabs-radius);
	border-top-right-radius: var(--tabs-radius);
	transition:
		left 0.25s cubic-bezier(0.4, 0, 0.2, 1),
		width 0.25s cubic-bezier(0.4, 0, 0.2, 1),
		opacity 0.15s ease;
}

.jweb-tabs [role="tablist"].is-slider-active .jweb-tabs__hover-slider {
	opacity: 1;
}

/* Respect reduced-motion: snap the highlight instead of sliding it. */

@media (prefers-reduced-motion: reduce) {
	.jweb-tabs__hover-slider {
		transition: none;
	}
}

/* --- Portfolio style --- */

/*
 * Each tab is a flex row of [::before shoulder][fill][::after shoulder]. The
 * shoulders are masked with the Figma shoulder curve and run the full tab
 * height.
 */

.jweb-tabs.is-style-portfolio {
	--portfolio-cap-svg: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2093%2053%27%3E%3Cpath%20d=%27M93%200.0261C78.6798%20-0.068%2056.7322%20-1.0587%2049.4604%2026.2094C44.5164%2044.7488%2023.7258%2051.4046%208.7162%2053L0%2053L93%2053Z%27%20fill=%27black%27/%3E%3C/svg%3E");
	--portfolio-cap-aspect: 93 / 53; /* Taken from the SVG viewBox width / height */
	--portfolio-tab-height: calc(1lh + 2 * var(--spacing-2xs));
	--portfolio-cap-width: calc(var(--portfolio-tab-height) * var(--portfolio-cap-aspect));
	--portfolio-tab-overlap: 60px;
}

/* Pull each tab back over its predecessor so adjacent shoulders overlap. */

.jweb-tabs.is-style-portfolio [role="tab"] + [role="tab"],
.jweb-tabs.is-style-portfolio .jweb-tabs-menu-item + .jweb-tabs-menu-item {
	margin-inline-start: calc(var(--portfolio-tab-overlap) * -1);
}

/* Tab button: a flex row of [left shoulder][fill][right shoulder]. */

.jweb-tabs.is-style-portfolio [role="tab"],
.jweb-tabs.is-style-portfolio .jweb-tabs-menu-item {
	gap: 0;
	padding: 0;
	height: var(--portfolio-tab-height);
	background: none;
	border-radius: 0;
	z-index: 1;
}

/* Shared shoulder properties. The frontend uses ::before/::after; the editor
   uses real .jweb-tabs-menu-item__shoulder spans (see tabs-menu-item/edit.js). */

.jweb-tabs.is-style-portfolio [role="tab"]::before,
.jweb-tabs.is-style-portfolio [role="tab"]::after,
.jweb-tabs.is-style-portfolio .jweb-tabs-menu-item__shoulder {
	flex: 0 0 auto;
	align-self: stretch;
	width: var(--portfolio-cap-width);
	background-color: transparent;
	background-color: var(--portfolio-fill, transparent);
	-webkit-mask: var(--portfolio-cap-svg) no-repeat center / 100% 100%;
	mask: var(--portfolio-cap-svg) no-repeat center / 100% 100%;
}

/* Pseudos need content; real spans don't. */

.jweb-tabs.is-style-portfolio [role="tab"]::before,
.jweb-tabs.is-style-portfolio [role="tab"]::after {
	content: "";
}

/* Overlap each shoulder 1px into the fill to close sub-pixel seams. */

.jweb-tabs.is-style-portfolio [role="tab"]::before,
.jweb-tabs.is-style-portfolio .jweb-tabs-menu-item__shoulder--left {
	margin-inline-end: -1px;
}

/* Right shoulder — same SVG mirrored. */

.jweb-tabs.is-style-portfolio [role="tab"]::after,
.jweb-tabs.is-style-portfolio .jweb-tabs-menu-item__shoulder--right {
	transform: scaleX(-1);
	margin-inline-start: -1px;
}

/* Centre fill. */

.jweb-tabs.is-style-portfolio .jweb-tabs-menu-item__fill {
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	gap: var(--spacing-4xs);
	background-color: transparent;
	background-color: var(--portfolio-fill, transparent);
}

/* Active tab: fill with the selected-tab color. Raise z-index above hover. */

.jweb-tabs.is-style-portfolio [role="tab"][aria-selected="true"],
.jweb-tabs.is-style-portfolio .jweb-tabs-menu-item.is-active {
	--portfolio-fill: var(--selected-tab-color, var(--color-background-neutral-light));
	z-index: 2;
}

/* Portfolio: the slider takes the folder silhouette — centre gradient fill plus
   the two masked shoulders — so the hover highlight matches the tab shape. */

.jweb-tabs.is-style-portfolio .jweb-tabs__hover-slider {
	/* The fill extends 1px under each shoulder so sub-pixel rounding can't leave a
	   hairline at the shoulder/fill seam. The shoulders' opaque inner edges cover
	   that 1px, so nothing overhangs. */
	background: linear-gradient(
		to right,
		transparent calc(var(--portfolio-cap-width) - 1px),
		var(--tab-hover-color) calc(var(--portfolio-cap-width) - 1px),
		var(--tab-hover-color) calc(100% - var(--portfolio-cap-width) + 1px),
		transparent calc(100% - var(--portfolio-cap-width) + 1px)
	);
}

.jweb-tabs.is-style-portfolio .jweb-tabs__hover-slider::before,
.jweb-tabs.is-style-portfolio .jweb-tabs__hover-slider::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: var(--portfolio-cap-width);
	background-color: var(--tab-hover-color);
	-webkit-mask: var(--portfolio-cap-svg) no-repeat center / 100% 100%;
	mask: var(--portfolio-cap-svg) no-repeat center / 100% 100%;
}

.jweb-tabs.is-style-portfolio .jweb-tabs__hover-slider::before {
	left: 0;
}

.jweb-tabs.is-style-portfolio .jweb-tabs__hover-slider::after {
	right: 0;
	transform: scaleX(-1);
}

/* Portfolio panel: a rounded card at the default radius.
   - Negative top margin overlaps the panel 1px under the tabs to close a
     high-DPR hairline (iOS/iPadOS); invisible since tab and panel share a colour.
   - z-index above the chevrons (z-index 3) so the panel covers that overlap. */

.jweb-tabs.is-style-portfolio [role="tabpanel"],
.jweb-tabs.is-style-portfolio .jweb-tab {
	position: relative;
	z-index: 4;
	border-radius: var(--border-radius-default);
	margin-top: -1px;
}

/* --- Scroll indicators --- */

.jweb-tabs__tablist-container {
	position: relative;
	overflow-x: clip;
}

/* Portfolio: inset the tab row by the panel's radius so tabs stay clear of the rounded corners. */

.jweb-tabs.is-style-portfolio .jweb-tabs__tablist-container {
	padding-inline: var(--border-radius-default);
}

/* Solid background so nothing bleeds through behind the chevron. The fade is a
   separate ::after just outside the button, so content fades up to the chevron. */

.jweb-tabs__scroll-indicator {
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 3;
	display: none;
	align-items: center;
	padding: 0 var(--spacing-4xs);
	border: none;
	background: var(--_indicator-bg);
	color: inherit;
	color: var(--tab-text-color, inherit);
	cursor: pointer;
	/* How far the fade extends into the content past the chevron. */
	--_indicator-fade: var(--spacing-md);
}

.jweb-tabs__scroll-indicator.is-visible {
	display: flex;
}

.jweb-tabs__scroll-indicator--right {
	right: 0;
}

.jweb-tabs__scroll-indicator--left {
	left: 0;
}

/* Chevron icon. */

.jweb-tabs__scroll-indicator::before {
	content: "";
	display: block;
	width: var(--icon-size-md);
	height: var(--icon-size-md);
	background-color: currentColor;
	-webkit-mask: var(--_indicator-icon) no-repeat center / contain;
	mask: var(--_indicator-icon) no-repeat center / contain;
}

/* Fade strip, positioned beyond the chevron on the content side so the fade
   begins only after the solid chevron area. */

.jweb-tabs__scroll-indicator::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: var(--_indicator-fade);
	background: linear-gradient(to var(--_fade-dir), var(--_indicator-bg), transparent);
}

.jweb-tabs__scroll-indicator--right::before {
	--_indicator-icon: var(--icon-svg-arrows--chevron-right);
}

.jweb-tabs__scroll-indicator--left::before {
	--_indicator-icon: var(--icon-svg-arrows--chevron-left-1);
}

/* Left chevron: fade sits to its right, white (at the chevron) → transparent. */

.jweb-tabs__scroll-indicator--left::after {
	left: 100%;
	--_fade-dir: right;
}

/* Right chevron: fade sits to its left, white (at the chevron) → transparent. */

.jweb-tabs__scroll-indicator--right::after {
	right: 100%;
	--_fade-dir: left;
}

/* --- Focus ring --- */

.jweb-tabs [role="tab"]:focus-visible {
	outline: 2px solid var(--color-action-accent);
	outline-offset: -2px;
}

/* Portfolio: draw the ring on the centre fill instead of the entire tab */

.jweb-tabs.is-style-portfolio [role="tab"]:focus-visible {
	outline: none;
}

.jweb-tabs.is-style-portfolio [role="tab"]:focus-visible .jweb-tabs-menu-item__fill {
	position: relative;
	z-index: 1; /* z-index lifts the ring above the shoulder pseudos. */
}

.jweb-tabs.is-style-portfolio [role="tab"]:focus-visible .jweb-tabs-menu-item__fill::after {
	content: "";
	position: absolute;
	/* horizontally: extend past the fill so the label isn't crowded */
	/* vertically: bottom offset by 1px since the active tab panel overlaps the tab by 1px to avoid seams with shoulders */
	inset: 0 calc(var(--spacing-2xs) * -1) 1px; 
	border: 2px solid var(--color-action-accent);
	pointer-events: none;
}

/* --- Accordion mode --- */

.jweb-tabs__accordion-heading {
	display: none;
	margin: 0;
	font: inherit;
}

.jweb-tabs__accordion-trigger {
	display: flex;
	width: 100%;
	align-items: center;
	gap: var(--spacing-4xs);
	padding: var(--spacing-2xs) 0;
	border: none;
	background: none;
	font: inherit;
	text-align: start;
	cursor: pointer;
	color: var(--selected-tab-text-color, var(--tab-text-color, var(--color-text-body)));
}

.jweb-tabs__accordion-trigger::after {
	content: "";
	flex-shrink: 0;
	margin-inline-start: auto;
	width: var(--icon-size-md);
	height: var(--icon-size-md);
	background-color: currentColor;
	background-color: var(--accordion-chevron-color, currentColor);
	opacity: 1;
	opacity: var(--accordion-chevron-opacity, 1);
	-webkit-mask: var(--icon-svg-arrows--chevron-up-2) no-repeat center / contain;
	mask: var(--icon-svg-arrows--chevron-up-2) no-repeat center / contain;
	transform: rotate(180deg);
	transition: transform 0.25s ease, opacity 0.25s ease, background-color 0.25s ease;
}

.jweb-tabs__panel-item.accordion-active .jweb-tabs__accordion-trigger::after {
	transform: rotate(0deg);
	background-color: currentColor;
	background-color: var(--accordion-chevron-active-color, var(--accordion-chevron-color, currentColor));
	opacity: 1;
	opacity: var(--accordion-chevron-active-opacity, 1);
}

/* --- Accordion mode signal --- */

/* --_accordion read by js to determine which presentation is live, used to set the .is-accordion class.
  Set here so breakpoint logic is encapsulated in CSS and uses our custom-media tokens as source of truth. */

.jweb-tabs {
	--_accordion: 0;
}

@media (max-width: 767px) {
	.jweb-tabs[data-collapse-accordion-at="tablet"] {
		--_accordion: 1;
	}
}

@media (max-width: 1279px) {
	.jweb-tabs[data-collapse-accordion-at="desktop"] {
		--_accordion: 1;
	}
}

/* --- Accordion activation --- */

/* cms_tabs/mode.ts adds .is-accordion below the collapse breakpoint. */

.jweb-tabs.is-accordion .jweb-tabs__tablist-container {
		display: none;
	}

/* The panels container becomes the outer container */

.jweb-tabs.is-accordion .jweb-tabs__panels {
		background-color: var(--selected-tab-color, var(--color-background-neutral-light));
		border-radius: var(--border-radius-default);
		overflow: hidden;
		padding: var(--spacing-sm) var(--spacing-xl);

		/* Below mobile-large (<425px), tighten the horizontal padding to spacing-xs (16px). */
	}

@media (max-width: 424px) {

.jweb-tabs.is-accordion .jweb-tabs__panels {
			padding-inline: var(--spacing-xs);
	}
		}

.jweb-tabs.is-accordion .jweb-tabs__accordion-heading {
		display: block;
	}

/* Divider between items, inset to the padded card width. */

.jweb-tabs.is-accordion .jweb-tabs__panel-item + .jweb-tabs__panel-item::before {
		content: "";
		display: block;
		height: var(--border-width-sm);
		background-color: var(--accordion-divider-color, var(--color-border-subtle));
		opacity: 1;
		opacity: var(--accordion-divider-opacity, 1);
	}

/* Collapse via a grid-rows animation (0fr, opening to 1fr below). The card
	   owns the background and spacing now, so strip the panel's own box + inline styles from WordPress */

.jweb-tabs.is-accordion .jweb-tabs__panel {
		display: grid;
		grid-template-rows: 0fr;
		transition: grid-template-rows 0.3s ease;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		border-radius: 0 !important;
		background: none !important;
	}

/* Tab-mode hiding is off here; the collapse animation owns visibility (and
	   the accordion JS marks closed panels inert to keep them out of the a11y
	   tree and tab order). */

.jweb-tabs.is-accordion .jweb-tabs__panel.is-tab-hidden {
		display: grid;
	}

.jweb-tabs.is-accordion .jweb-tabs__panel-item.accordion-active > .jweb-tabs__panel {
		grid-template-rows: 1fr;
	}

/* overflow:hidden + min-height:0 is what makes grid 0fr actually collapse. */

.jweb-tabs.is-accordion .jweb-tabs__panel-inner {
		overflow: hidden;
		min-height: 0;
	}

/* Padding lives here, inside the clip, so it can't peek when collapsed. */

.jweb-tabs.is-accordion .jweb-tabs__panel-content {
		padding-block: var(--spacing-3xs);
	}

@media (prefers-reduced-motion: reduce) {
	.jweb-tabs__accordion-trigger::after,
	.jweb-tabs__panel {
		transition: none;
	}
}

/* --- Equal tab height --- */

/* Stack all panel-items in one grid cell so the area sizes to the tallest panel. */

.jweb-tabs[data-tabs-equal-height="true"]:not(.is-accordion) .jweb-tabs__panels {
		display: grid;
	}

.jweb-tabs[data-tabs-equal-height="true"]:not(.is-accordion) .jweb-tabs__panel-item {
		grid-area: 1 / 1;
	}

/* Stretch to fill the equalized cell; center vertically so shorter panels don't pile space at the bottom. */

.jweb-tabs[data-tabs-equal-height="true"]:not(.is-accordion) .jweb-tabs__panel {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;

		/* Hidden panels: stay laid out (reserve height) but invisible and inert. */
	}

.is-tab-hidden:is(.jweb-tabs[data-tabs-equal-height="true"]:not(.is-accordion) .jweb-tabs__panel) {
			display: block;
			visibility: hidden;
		}