/*
 * petpartners/category-strip
 *
 * One row, every width. The brief asked for a centred row that wraps to a
 * second line past eight items; with twelve leaf categories in the catalogue
 * today that row would run past 2400px at the specified type size and gap —
 * wider than any screen. Confirmed with the client: horizontal scroll, same
 * treatment mobile already needed, rather than a second line or a shorter
 * list hidden off into the side panel.
 *
 * No JavaScript. overflow-x does the scrolling; drag, wheel, touch and Tab all
 * work on it natively, and there is nothing here a script would add — no
 * arrow buttons, unlike category-showcase's rail, because that block tracks
 * which arrow to show and this one does not need to.
 *
 * ICON ON HOVER/FOCUS (06/out/2026)
 *
 * The icon's box is `inline-size: 0; overflow: hidden` at rest and animates
 * open — width and the margin that follows it, 180ms ease-out — rather than
 * being always present at `opacity: 0`. An always-present 36px box would
 * either force the row taller than its fixed `header-strip-h` or get
 * clipped by it; animating the box itself open is what keeps the row's own
 * height fixed while still giving the icon room to fade and scale into.
 *
 * `#4d2096`, not the `purple` token (`#742EDF`): the client named this exact
 * value for the hover colour here, same value already in scoped use for the
 * logo, the hero title and the hero button's solid stop (CLAUDE.md 5.4, ADR-
 * 064 Adendo 3, ADR-067) — not a foreign colour, the project's own
 * established exception, asked for here by name rather than left as the
 * `purple-hover` substitution the first version of this row used.
 */

.wp-block-petpartners-category-strip {
	position: relative;
	border-bottom: 1px solid var( --wp--preset--color--border );
}

/*
 * The scroll hint (14/out/2026, client reference image) — a static chevron
 * pinned to the row's right edge, over a fade from transparent to the
 * header's own background colour, so the last visible label dims out under
 * it rather than getting cut mid-letter. `pointer-events: none` on both this
 * and the SVG inside it: the row underneath still needs the drag/touch
 * gesture this element exists only to advertise, never to intercept it.
 * `inset-block: 0` matches the row's own fixed height
 * (`--chrome--header-strip-h`) so the fade covers it edge to edge, not just
 * a sliver in the middle.
 */
.wp-block-petpartners-category-strip__scroll-hint {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	display: flex;
	align-items: center;
	inline-size: 40px;
	padding-inline-end: var( --wp--preset--spacing--xs );
	justify-content: flex-end;
	background: linear-gradient( to right, rgb( 255 255 255 / 0% ), var( --wp--preset--color--white ) 60% );
	color: var( --wp--preset--color--gray-dark );
	pointer-events: none;
}

.wp-block-petpartners-category-strip__scroll-hint svg {
	display: block;
	fill: currentColor;
}

.wp-block-petpartners-category-strip__list {
	display: flex;
	align-items: center;
	gap: var( --wp--preset--spacing--xl );
	margin: 0;
	padding: 0 var( --wp--preset--spacing--lg );
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	block-size: var( --wp--custom--chrome--header-strip-h );

	/* No visible scrollbar — the row scrolls, nothing announces that it does. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.wp-block-petpartners-category-strip__list::-webkit-scrollbar {
	display: none;
}

.wp-block-petpartners-category-strip__item {
	flex: 0 0 auto;
}

.wp-block-petpartners-category-strip__link {
	position: relative;
	display: flex;
	align-items: center;
	block-size: 100%;
	color: var( --wp--preset--color--brown );
	font-family: var( --wp--preset--font-family--sans );
	/*
	 * 17px: the client's own spec for this row, and it sits between two
	 * existing type tokens (base at 16px, heading at 20–24px) rather than on
	 * either — a scoped literal for the one place that asked for it, the same
	 * treatment the project already gives the logo's recoloured purple and
	 * the hero title's font (CLAUDE.md 5.4, 5.5).
	 */
	font-size: 17px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
}

/* The active-state bar — 3px, the client's own literal, at the base of the
   item. A pseudo-element rather than a child: it needs to sit under both
   the icon and the label without being counted as a flex child of either. */
.wp-block-petpartners-category-strip__link::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	block-size: 3px;
	background-color: #4d2096;
	opacity: 0;
	transition: opacity 180ms ease-out;
}

.wp-block-petpartners-category-strip__icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	inline-size: 0;
	block-size: 36px;
	margin-inline-end: 0;
	overflow: hidden;
	transition: inline-size 180ms ease-out, margin-inline-end 180ms ease-out;
}

.wp-block-petpartners-category-strip__icon img,
.wp-block-petpartners-category-strip__icon svg,
.wp-block-petpartners-category-strip__icon-mask {
	flex: 0 0 auto;
	inline-size: 36px;
	block-size: 36px;
	opacity: 0;
	transform: scale( 0.8 );
	transition: opacity 180ms ease-out, transform 180ms ease-out;
}

.wp-block-petpartners-category-strip__icon img {
	display: block;
	object-fit: contain;
}

.wp-block-petpartners-category-strip__icon svg {
	display: block;
	color: #4d2096;
	fill: currentColor;
}

.wp-block-petpartners-category-strip__icon-mask {
	display: block;
	background-color: #4d2096;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-image: var( --petpartners-icon-mask );
	mask-image: var( --petpartners-icon-mask );
}

/*
 * Hover only where the device actually has one — on a touch screen :hover
 * can stick after a tap with nothing to clear it, which is exactly the
 * client's own distinction (the active page's icon stays, everything else
 * reveals only on a pointer that can hover).
 */
@media ( hover: hover ) {

	.wp-block-petpartners-category-strip__link:hover {
		color: #4d2096;
		text-decoration: none;
	}

	.wp-block-petpartners-category-strip__link:hover::after {
		opacity: 1;
	}

	.wp-block-petpartners-category-strip__link:hover .wp-block-petpartners-category-strip__icon {
		inline-size: 36px;
		margin-inline-end: var( --wp--preset--spacing--xxs );
	}

	.wp-block-petpartners-category-strip__link:hover .wp-block-petpartners-category-strip__icon img,
	.wp-block-petpartners-category-strip__link:hover .wp-block-petpartners-category-strip__icon svg,
	.wp-block-petpartners-category-strip__link:hover .wp-block-petpartners-category-strip__icon-mask {
		opacity: 1;
		transform: scale( 1 );
	}
}

/* Keyboard focus and the current page's own item: same reveal, every
   device, hover capable or not. */
.wp-block-petpartners-category-strip__link:focus-visible,
.wp-block-petpartners-category-strip__link[ aria-current="page" ] {
	color: #4d2096;
	text-decoration: none;
}

.wp-block-petpartners-category-strip__link:focus-visible::after,
.wp-block-petpartners-category-strip__link[ aria-current="page" ]::after {
	opacity: 1;
}

.wp-block-petpartners-category-strip__link:focus-visible .wp-block-petpartners-category-strip__icon,
.wp-block-petpartners-category-strip__link[ aria-current="page" ] .wp-block-petpartners-category-strip__icon {
	inline-size: 36px;
	margin-inline-end: var( --wp--preset--spacing--xxs );
}

.wp-block-petpartners-category-strip__link:focus-visible .wp-block-petpartners-category-strip__icon img,
.wp-block-petpartners-category-strip__link:focus-visible .wp-block-petpartners-category-strip__icon svg,
.wp-block-petpartners-category-strip__link:focus-visible .wp-block-petpartners-category-strip__icon-mask,
.wp-block-petpartners-category-strip__link[ aria-current="page" ] .wp-block-petpartners-category-strip__icon img,
.wp-block-petpartners-category-strip__link[ aria-current="page" ] .wp-block-petpartners-category-strip__icon svg,
.wp-block-petpartners-category-strip__link[ aria-current="page" ] .wp-block-petpartners-category-strip__icon-mask {
	opacity: 1;
	transform: scale( 1 );
}

/* A visible focus ring still matters even though the icon reveal already
   marks focus — colour alone is never the only signal (CLAUDE.md 5.3). */
.wp-block-petpartners-category-strip__link:focus-visible {
	outline: 2px solid var( --wp--preset--color--purple );
	outline-offset: 2px;
}

@media ( prefers-reduced-motion: reduce ) {

	.wp-block-petpartners-category-strip__link::after,
	.wp-block-petpartners-category-strip__icon,
	.wp-block-petpartners-category-strip__icon img,
	.wp-block-petpartners-category-strip__icon svg,
	.wp-block-petpartners-category-strip__icon-mask {
		transition: none;
	}
}