/**
 * ch/tabs — minimal structural styles.
 *
 * Intentionally undecorated: layout + state mechanics only. Consumer
 * themes skin the tablist and tabs via theme.json (blocks['ch/tabs']) or
 * their own CSS. No colors, borders, or spacing opinions beyond what is
 * needed for the pattern to function.
 */

.ch-tabs {
	display: block;
}

.ch-tabs__list {
	display: flex;
	flex-wrap: wrap;
	/* Sane default; the blockGap control writes an inline `gap` that wins.
	   blockGap serialization is skipped on the wrapper and re-applied here
	   as the gap between tab headers. */
	gap: 0.5rem;
	margin: 0;
	padding: 0;
}

.ch-tabs__tab {
	/* Reset the native <button> so themes start from a clean slate.
	   `border: 0` + `padding: 0` are the baseline (the UA default
	   `1px 6px` button padding would misalign the tablist with content
	   below); the Border and Dimensions controls write inline
	   declarations that win over this when set.

	   Typography set by the block lands on the tablist (re-targeted
	   skip-serialized supports) and must reach the buttons by
	   inheritance. `font: inherit` covers family/size/weight/style/
	   line-height, but UA stylesheets give form controls
	   `text-transform: none` + `letter-spacing: normal` (they don't
	   inherit), and `text-decoration` never propagates into inline-flex
	   boxes — all three need explicit `inherit`. Same reset as core's
	   accordion-heading toggle (wp-includes/blocks/accordion-heading). */
	appearance: none;
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	word-spacing: inherit;
	text-transform: inherit;
	text-decoration: inherit;
	cursor: pointer;
}

/* Tab-button colors (base + active/hover states). Scoped to marker classes
   emitted only when the matching color attribute is set, so a block without
   custom colors keeps whatever the theme puts on .ch-tabs__tab. The base
   rules have lower specificity than the state rules below, so active/hover
   override the base. Hover rules skip the active tab (active styling wins)
   and mirror to :focus-visible for keyboard parity. */
.has-tab-bg .ch-tabs__tab {
	background-color: var( --ch-tabs-tab-bg );
}

.has-tab-color .ch-tabs__tab {
	color: var( --ch-tabs-tab-color );
}

.has-hover-tab-bg .ch-tabs__tab:not( .is-active ):hover,
.has-hover-tab-bg .ch-tabs__tab:not( .is-active ):focus-visible {
	background-color: var( --ch-tabs-hover-bg );
}

.has-hover-tab-color .ch-tabs__tab:not( .is-active ):hover,
.has-hover-tab-color .ch-tabs__tab:not( .is-active ):focus-visible {
	color: var( --ch-tabs-hover-color );
}

.has-active-tab-bg .ch-tabs__tab.is-active {
	background-color: var( --ch-tabs-active-bg );
}

.has-active-tab-color .ch-tabs__tab.is-active {
	color: var( --ch-tabs-active-color );
}

.ch-tabs__panels {
	display: block;
}

/* Inactive panels are removed from layout + a11y tree via [hidden]. The
   rule with !important guards against theme resets that set
   `display` on the panel element and would otherwise un-hide it. */
.ch-tabs__panel[hidden] {
	display: none !important;
}

/* Focus that did not come from the keyboard (fragment navigation to a
   focusable panel, pointer) is kept but drawn without a ring; view.js
   sets data-ch-focus-quiet only for that case and clears it on blur, so
   keyboard focus indication is unaffected. */
.ch-tabs__panel[data-ch-focus-quiet]:focus {
	outline: none;
}

/* Sticky tablist (stickyList: always | reveal; horizontal only).
   Integration surface for themes — custom properties only:
     --ch-tabs-sticky-top     offset from the viewport top (default 0px);
                              e.g. a theme with a fixed header sets it to
                              the header height and updates it if the
                              header hides on scroll.
     --ch-tabs-sticky-bg      opaque list background while pinned.
     --ch-tabs-sticky-border  hairline colour shown while stuck.
     --ch-tabs-sticky-z       stacking order (default 10).
   The list is sticky within the block, so it releases when the block
   ends. `is-stuck` is toggled by view.js from the sentinel; the hairline
   is a 0-blur box-shadow so toggling it never shifts layout. */
.ch-tabs__sticky-sentinel {
	position: absolute;
	width: 1px;
	height: 1px;
	pointer-events: none;
	visibility: hidden;
}

.ch-tabs--sticky > .ch-tabs__list {
	position: sticky;
	top: var( --ch-tabs-sticky-top, 0px );
	z-index: var( --ch-tabs-sticky-z, 10 );
	background: var(
		--ch-tabs-sticky-bg,
		var( --wp--preset--color--white, #fff )
	);
}

.ch-tabs--sticky > .ch-tabs__list.is-stuck {
	box-shadow: 0 1px 0 0
		var(
			--ch-tabs-sticky-border,
			var( --wp--preset--color--light-grey, #e5e5e5 )
		);
}

/* Reveal: slide the pinned list out above the viewport while scrolling
   down; view.js only sets is-concealed while the list is stuck. */
.ch-tabs--sticky-reveal > .ch-tabs__list {
	transition: transform 200ms ease;
}

.ch-tabs--sticky-reveal > .ch-tabs__list.is-stuck.is-concealed {
	transform: translateY(
		calc( -100% - var( --ch-tabs-sticky-top, 0px ) - 2px )
	);
}

@media ( prefers-reduced-motion: reduce ) {
	.ch-tabs--sticky-reveal > .ch-tabs__list {
		transition: none;
	}
}

/* Drill-pane list mode is never sticky. */
.ch-drilldown__pane .ch-tabs--sticky > .ch-tabs__list {
	position: static;
	transform: none;
	box-shadow: none;
	background: none;
}

/* Vertical orientation (orientation: "vertical"): tablist stacks in a
   left column, panels fill the remaining width — the mega-menu / settings-
   page presentation. Structural only: column widths, alignment and the
   sane-default gap; themes skin colors/spacing as usual. Collapses back
   to stacked (list above panels) on small viewports; inside a mobile
   drill pane the drilldown rules below take over instead. */
.ch-tabs--vertical {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1rem;
	align-items: start;
}

.ch-tabs--vertical > .ch-tabs__list {
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: stretch;
}

.ch-tabs--vertical > .ch-tabs__list > .ch-tabs__tab {
	justify-content: flex-start;
	text-align: left;
}

@media ( max-width: 599px ) {
	.ch-tabs--vertical {
		grid-template-columns: 1fr;
	}
}

/* Drill-down presentation: applies only when the block opted in
   (mobileDrilldown → .ch-tabs--drilldown) AND sits inside a drill pane
   (its mega-menu panel was pushed onto the mobile drill stack). The
   tablist becomes a vertical list with trailing chevrons; the panels
   container is hidden — activating a tab pushes its panel one level
   deeper onto the stack (see view.js + lib/drilldown.js). Containment-
   based (not a viewport breakpoint), so desktop rendering is untouched
   wherever the block appears outside a pane. */
/* Inside a drill pane the wrapper must be a plain block even when the
   block is also orientation:vertical — the panels are hidden there, so a
   two-column grid would leave a dead column. */
.ch-drilldown__pane .ch-tabs--drilldown {
	display: block;
}

.ch-drilldown__pane .ch-tabs--drilldown > .ch-tabs__list {
	flex-direction: column;
	align-items: stretch;
	gap: var( --ch-drilldown-list-gap, 0 );
}

.ch-drilldown__pane .ch-tabs--drilldown > .ch-tabs__list > .ch-tabs__tab {
	width: 100%;
	justify-content: space-between;
	gap: 12px;
	padding: var( --ch-drilldown-item-padding, 14px 0 );
	text-align: left;
	border-bottom: var(
		--ch-drilldown-item-border,
		1px solid rgba( 0, 0, 0, 0.06 )
	);
}

.ch-drilldown__pane .ch-tabs--drilldown > .ch-tabs__list > .ch-tabs__tab::after {
	content: "";
	width: 12px;
	height: 12px;
	flex: none;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='m9 18 6-6-6-6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='m9 18 6-6-6-6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
}

.ch-drilldown__pane .ch-tabs--drilldown > .ch-tabs__panels {
	display: none;
}