/* Tabs component */

.saqi-tabs {
	margin-block: var(--wp--preset--spacing--50);
}

/* Before view.js runs, and if it never does: a stack of headed sections. */
.saqi-tabs__label {
	margin-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--caps);
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.saqi-tabs__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40);
	margin-block-end: var(--wp--preset--spacing--50);
	border-block-end: 1px solid var(--wp--preset--color--rule);
}

.saqi-tabs__tab {
	appearance: none;
	background: none;
	border: 0;
	border-block-end: 2px solid transparent;
	margin-block-end: -1px;
	padding: 0 0 var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--caps);
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	cursor: pointer;
}

.saqi-tabs__tab[aria-selected="true"] {
	color: var(--wp--preset--color--foreground);
	border-block-end-color: var(--wp--preset--color--accent);
}

/* A control lights up to the accent on the rollover, as the navigation and
   the pagination do; the tabs had no hover state until 2026-09-16. */
.saqi-tabs__tab:hover,
.saqi-tabs__tab:focus-visible {
	color: var(--wp--preset--color--accent);
}

/* The panel takes focus when tabbed into, so it needs a visible ring — but
   only from the keyboard, where the ring is the only thing saying so. */
.saqi-tabs__panel:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: var(--wp--preset--spacing--20);
}

.saqi-tabs__panel > :first-child {
	margin-block-start: 0;
}

/* --- Vertical tablist ---
 *
 * The builder's widget was set `vertical: true`, `tabs_width: 24%`,
 * `horizontal_at: tablet portrait` — a column of tabs beside the panel on the
 * desktop, folding back to a row below 64rem. Measured on the dev build at
 * 1440px: a 257px tab column of a 1072px widget (24%), 24px to the panel, tabs
 * at an 8px pitch, a hairline down the left of the column and a 2px accent bar
 * marking the open one.
 *
 * The 24% went on 2026-09-11 (Will): the widget sits on the page's five
 * tracks instead, the same tracks the book grid, the footer and the column
 * pages use. The tabs are track 1 and the panel spans 2–3 (Will, 2026-09-16;
 * it was 2–4 until that evening), so the tabs are exactly one book column
 * wide and the panel's edges are column edges, with a track of air after it
 * as the information pages' rows have before their copy. A container
 * narrower than the page says how many tracks it has — `--saqi-tabs-tracks:
 * 4` on About's main column, which shares the page's grid with the
 * testimonials in track 5 — and the panel still spans two.
 *
 * The type comes first and is not inside the query. These tabs read as a list
 * of places to go rather than as the theme's uppercase micro-label, and they
 * should read that way at every width — the fold changes where the list sits,
 * not what it is.
 */

.saqi-tabs--vertical .saqi-tabs__tab {
	text-transform: none;
	letter-spacing: normal;
	color: var(--wp--preset--color--foreground);
}

.saqi-tabs--vertical .saqi-tabs__tab[aria-selected="true"] {
	color: var(--wp--preset--color--accent);
}

/* The layout only applies once view.js has built the tablist. Before that
   there is no list to lay out and the sections are a stack, which is the whole
   point of rendering it in that order. */

@media (min-width: 64rem) {
	.saqi-tabs--vertical[data-saqi-tabs-mode="tabs"] {
		display: grid;
		grid-template-columns: repeat(var(--saqi-tabs-tracks, 5), minmax(0, 1fr));
		column-gap: 1.5rem;
		align-items: start;
	}

	/* Every section shares one grid area. Only the open one has height — the
	   others have a hidden heading and a hidden panel — so they stack without
	   the closed ones adding gaps the way flex siblings would. */
	.saqi-tabs--vertical[data-saqi-tabs-mode="tabs"] > .saqi-tabs__list {
		grid-column: 1;
		grid-row: 1;
	}

	.saqi-tabs--vertical[data-saqi-tabs-mode="tabs"] > .saqi-tabs__section {
		grid-column: 2 / span 2;
		grid-row: 1;
	}

	.saqi-tabs--vertical .saqi-tabs__list {
		flex-direction: column;
		flex-wrap: nowrap;
		gap: var(--wp--preset--spacing--20);
		margin-block-end: 0;
		border-block-end: 0;
		border-inline-start: 1px solid var(--wp--preset--color--light);
	}

	/* 14px of padding over a single line, which is the dev build's 44px tab.
	   Without the line-height the theme's body leading makes it 51px and the
	   column of three drifts 21px longer than the reference. */
	.saqi-tabs--vertical .saqi-tabs__tab {
		position: relative;
		width: 100%;
		margin-block-end: 0;
		padding: 0.875rem 1.125rem;
		border-block-end: 0;
		line-height: 1.15;
		text-align: start;
	}

	/* The open tab is marked on the rule it sits against, not under itself. */
	.saqi-tabs--vertical .saqi-tabs__tab::after {
		content: "";
		position: absolute;
		inset-block: 0;
		inset-inline-start: 0;
		width: 2px;
		background: transparent;
	}

	.saqi-tabs--vertical .saqi-tabs__tab[aria-selected="true"] {
		border-block-end-color: transparent;
	}

	.saqi-tabs--vertical .saqi-tabs__tab[aria-selected="true"]::after {
		background: var(--wp--preset--color--accent);
	}
}