/**
 * Navigation Term List — frontend styles.
 *
 * Tokens resolve against the values the header block sets on :root, with
 * design-spec fallbacks so a list still looks right used on its own.
 */

.wb-nav-term-list {
	--wb-nav-fg: var(--wb-nav-foreground, #16181d);
	--wb-nav-dim: var(--wb-nav-muted, #6b7280);
	--wb-nav-accent: var(--wb-nav-brand, #1a5fe0);
	--wb-nav-edge: var(--wb-nav-border, #e4e7ec);
}

.wb-nav-term-list__eyebrow {
	margin: 0 0 12px;
	color: var(--wb-nav-dim);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.wb-nav-term-list__items {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wb-nav-term-list__link {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	color: var(--wb-nav-fg);
	text-decoration: none;
}

/*
 * The row's two halves: what the category is on the left, what is known
 * about it on the right. Both are flex so a slot that is not rendered costs
 * nothing rather than leaving a gap where it would have been.
 */
.wb-nav-term-list__lead,
.wb-nav-term-list__trail {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

@media (hover: hover) {
	.wb-nav-term-list__link:hover {
		color: var(--wb-nav-accent);
	}
}

.wb-nav-term-list__count {
	color: var(--wb-nav-dim);
	font-size: 13.5px;
	font-weight: 400;
}

/* List layout — the default column inside a department panel. */

.wb-nav-term-list--rows .wb-nav-term-list__item {
	display: flex;
}

.wb-nav-term-list--list .wb-nav-term-list__item + .wb-nav-term-list__item {
	margin-top: 10px;
}

.wb-nav-term-list--list .wb-nav-term-list__name {
	font-size: 13.5px;
	font-weight: 600;
}

.wb-nav-term-list__more {
	display: inline-block;
	margin-top: 14px;
	color: var(--wb-nav-accent);
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
}

.wb-nav-term-list__more:hover {
	text-decoration: underline;
}

/* Chip layout — "narrow by" facets. */

/*
 * Rows — one bordered, full-width row per term, for a standalone section
 * rather than a panel column. The arrow sits hard right, so a column of
 * rows reads as a list of destinations.
 */

/*
 * Five across, under a row of five cards, so the two rows line up as one
 * grid rather than as a grid with a list under it. A fixed five rather than
 * as-many-as-fit: the count is what ties them to the cards above.
 */
.wb-nav-term-list--rows .wb-nav-term-list__items {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 8px;
}

/*
 * One line, clipped. At a fifth of the band these cells are narrow and the
 * names are the catalogue's — "Tile, Stone and Concrete Treatments" needs
 * three times the room it has. A name that wraps makes its own cell taller
 * than the four beside it, so the row's height is set by its longest label
 * rather than by the design.
 */
.wb-nav-term-list--rows .wb-nav-term-list__name {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* Stacked on a phone, where five columns would be five slivers. */
@media (max-width: 900px) {
	.wb-nav-term-list--rows .wb-nav-term-list__items {
		grid-template-columns: minmax(0, 1fr);
	}
}

/*
 * The row stretches its cell and the link fills it, so every cell in the row
 * is the same height whatever its label.
 */
.wb-nav-term-list--rows .wb-nav-term-list__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex: 1;
	gap: 8px;
	min-width: 0;
	padding: 16px 14px;
	border: 1px solid var(--wb-nav-edge);
	border-radius: 12px;
	background: var(--wb-nav-row-bg, #f6f7f9);
	font-size: 15px;
	font-weight: 600;
	box-sizing: border-box;
}

.wb-nav-term-list--chips .wb-nav-term-list__items {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.wb-nav-term-list--chips .wb-nav-term-list__link {
	padding: 7px 14px;
	border: 1px solid var(--wb-nav-edge);
	border-radius: 999px;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.2;
}

.wb-nav-term-list--chips .wb-nav-term-list__link:hover {
	border-color: var(--wb-nav-accent);
}

.wb-nav-term-list--rows .wb-nav-term-list__link:hover {
	border-color: var(--wb-nav-accent);
}

.wb-nav-term-list--rows .wb-nav-term-list__arrow {
	flex: 0 0 auto;
	color: var(--wb-nav-accent);
}

/* Badges — a short marker beside a category, inside the link text. */

.wb-nav-term-list__badge {
	display: inline-block;
	padding: 2px 8px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.5;
	white-space: nowrap;
}

.wb-nav-term-list__badge--new {
	background: color-mix(in srgb, var(--wb-nav-accent) 12%, #fff);
	color: var(--wb-nav-accent);
}

.wb-nav-term-list__badge--warning {
	background: #fff7ed;
	border-color: #f5d9ad;
	color: #a9631a;
}

.wb-nav-term-list__badge--neutral {
	background: #f6f7f9;
	color: var(--wb-nav-dim);
}

/* -------------------------------------- Interaction and current state */

.wb-nav-term-list .wb-nav-term-list__link:focus-visible,
.wb-nav-term-list .wb-nav-term-list__more:focus-visible {
	border-radius: 4px;
	color: var(--wb-nav-accent);
	outline: 2px solid var(--wb-nav-accent);
	outline-offset: 3px;
}

/* The page the visitor is already on. */
.wb-nav-term-list__link[aria-current="page"] {
	color: var(--wb-nav-accent);
}

.wb-nav-term-list__link[aria-current="page"] .wb-nav-term-list__name {
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wb-nav-term-list--chips .wb-nav-term-list__link:focus-visible {
	border-color: var(--wb-nav-accent);
	border-radius: 999px;
	outline-offset: 2px;
}

.wb-nav-term-list--chips .wb-nav-term-list__link[aria-current="page"] {
	border-color: var(--wb-nav-accent);
	background: color-mix(in srgb, var(--wb-nav-accent) 10%, #fff);
}

/*
 * Mobile-only display overrides. A list that reads as a column of named links
 * on a wide panel can read better as chips in a drawer, and the two layouts
 * have to coexist because it is one list rendered once. Below the breakpoint
 * only, so the desktop panel is untouched.
 */
@media (max-width: 900px) {
	.wb-nav-term-list--mobile-chips .wb-nav-term-list__items {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}

	.wb-nav-term-list--mobile-chips .wb-nav-term-list__item {
		margin: 0;
		border: 0;
	}

	/*
	 * A chip is its own target, so it carries the hit padding rather than
	 * the row around it — 32px of visual with 6px of reach on each side.
	 */
	.wb-nav-term-list--mobile-chips .wb-nav-term-list__link {
		position: relative;
		display: inline-flex;
		align-items: center;
		width: auto;
		min-height: 32px;
		margin: 6px 0;
		padding: 0 14px;
		border: 1px solid var(--wb-nav-border);
		border-radius: 999px;
		font-size: 13.5px;
		font-weight: 600;
	}

	/*
	 * The reach, extended past the drawing. A chip is 32px because that is
	 * the shape it should be, and the 6px either side of it was margin —
	 * which is space, not target. This claims that space back for the finger
	 * without moving a pixel of what you see, taking the chip to the 44px a
	 * thumb needs.
	 */
	.wb-nav-term-list--mobile-chips .wb-nav-term-list__link::after {
		position: absolute;
		inset: -6px 0;
		content: "";
	}

	.wb-nav-term-list--mobile-chips .wb-nav-term-list__name {
		margin-right: 0;
		font-size: 13.5px;
	}

	/* A count inside a chip doubles its width for very little. */
	.wb-nav-term-list--mobile-chips .wb-nav-term-list__count {
		display: none;
	}
}

/*
 * The drawer's third level. Rendered into the page always — these links are
 * the point of server-rendering the panels — but only ever shown as a pane
 * below the breakpoint. Desktop has the room to list a category's children
 * beside it and does not need a level that slides.
 */
.wb-nav-term-list__subpane {
	display: none;
}

.wb-nav-term-list__drill {
	display: none;
}

@media (max-width: 900px) {
	/*
	 * The drill control sits beside the link rather than replacing it, so the
	 * row still navigates to the category and the chevron opens the level
	 * below. Two intentions, two targets.
	 */
	.wb-nav-term-list__drill {
		display: block;
		flex: 0 0 auto;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		background: none;
		cursor: pointer;
	}

	/*
	 * 8px square with 2px borders, turned 45 degrees: ten pixels across the
	 * diagonal, which draws as the 14px chevron the row is specified with.
	 * Sizing it by eye to 10 put it at 17.
	 */
	.wb-nav-term-list__drill::after {
		display: block;
		width: 8px;
		height: 8px;
		margin: 0 auto;
		border-right: 2px solid var(--wb-nav-chevron, #c3cad4);
		border-bottom: 2px solid var(--wb-nav-chevron, #c3cad4);
		transform: rotate(-45deg);
		content: "";
	}

	/*
	 * Under the pane head, not over it. The head is sticky at z-index 2 and
	 * carries the back control; a pane that covers it is a pane with no way
	 * out. The top padding clears the head's own height so the first
	 * sub-category is not hidden behind it.
	 */
	.wb-nav-term-list__subpane {
		position: absolute;
		inset: 0;
		z-index: 1;
		display: block;
		overflow-y: auto;
		padding: 72px var(--wb-nav-drawer-gutter, 14px) 32px;
		background: #fff;
		transform: translateX(100%);
		transition: transform var(--wb-nav-motion, 220ms) ease;
	}

	.wb-nav-departments__panel.is-subpane-open
		.wb-nav-term-list__subpane:not([hidden]) {
		transform: none;
	}

	/*
	 * The pane being left travels 90% while the third pane travels the
	 * full width. The subpane is nested inside the first term-list for
	 * server-rendering, so its siblings and the panel's other authored blocks
	 * are moved separately instead of transforming their shared ancestor.
	 */
	/* stylelint-disable @stylistic/selector-combinator-space-before */
	.wb-nav-departments__panel
		.wb-nav-term-list:has(> .wb-nav-term-list__subpane)
		> :not(.wb-nav-term-list__subpane),
	.wb-nav-departments__panel
		.wb-nav-panel-grid
		> :not(:has(.wb-nav-term-list__subpane)) {
		transition: transform var(--wb-nav-motion, 220ms) ease;
	}

	.wb-nav-departments__panel.is-subpane-open
		.wb-nav-term-list:has(> .wb-nav-term-list__subpane:not([hidden]))
		> :not(.wb-nav-term-list__subpane),
	.wb-nav-departments__panel.is-subpane-open
		.wb-nav-panel-grid:has(.wb-nav-term-list__subpane:not([hidden]))
		> :not(:has(.wb-nav-term-list__subpane)) {
		transform: translateX(-90%);
	}
	/* stylelint-enable @stylistic/selector-combinator-space-before */

	.wb-nav-term-list__subpane[hidden] {
		display: none;
	}

	/*
	 * The pane head shows this name, so it is not drawn twice — but it still
	 * has to exist for assistive technology, because it is what labels the
	 * group. Clipped, not `display: none`.
	 */
	.wb-nav-term-list__subpane-title {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

@media (prefers-reduced-motion: reduce) {
	/* stylelint-disable @stylistic/selector-combinator-space-before */
	.wb-nav-term-list__subpane,
	.wb-nav-departments__panel
		.wb-nav-term-list:has(> .wb-nav-term-list__subpane)
		> :not(.wb-nav-term-list__subpane),
	.wb-nav-departments__panel
		.wb-nav-panel-grid
		> :not(:has(.wb-nav-term-list__subpane)) {
		transition: none;
	}
	/* stylelint-enable @stylistic/selector-combinator-space-before */
}

/* Screen-reader text: a bare number does not say what it counts. */
.wb-nav-term-list__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}