/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/
/* ------------------------------------------------------------------ *
 * Blog archive — category nav chips
 *
 * Rendered by the "Archive — blog categories" Bricks template. The chip
 * markup is a Bricks text-link inside a term loop, so the only hooks are
 * the .dd-cat-chip class and the data-cat attribute carrying {term_slug}.
 *
 * Contrast: the styling guide records white-on-orange-500 at 3.14:1, which
 * fails at this size. The filled states use --clr-orange-800 (9.06:1).
 * ------------------------------------------------------------------ */

.dd-cat-chip {
	display: inline-flex;
	align-items: center;
	padding: var(--space-2xs) var(--space-s);
	border: 1px solid var(--clr-border);
	border-radius: var(--radius-pill);
	color: var(--clr-ink);
	font-size: var(--text-sm);
	line-height: var(--leading-snug);
	text-decoration: none;
	white-space: nowrap;
	transition:
		background-color var(--duration-fast) var(--ease-out-expo),
		border-color     var(--duration-fast) var(--ease-out-expo),
		color            var(--duration-fast) var(--ease-out-expo);
}

.dd-cat-chip:hover {
	background-color: var(--clr-orange-50);
	border-color: var(--clr-orange-500);
	color: var(--clr-orange-800);
}

.dd-cat-chip:focus-visible {
	outline: 2px solid var(--clr-focus);
	outline-offset: 2px;
}

/* The chip for the archive you are already on. Bricks sets aria-current="page"
   natively on any link whose href matches the current URL (base.php:2637). */
.dd-cat-chip[aria-current="page"] {
	background-color: var(--clr-orange-800);
	border-color: var(--clr-orange-800);
	color: var(--clr-surface);
}

@media (prefers-reduced-motion: reduce) {
	.dd-cat-chip { transition: none; }
}

/* Eight chips wrap to five rows on a phone, pushing the posts off screen. Below
   Bricks' mobile_portrait breakpoint they become one scrollable row instead.
   flex-wrap is set on the element in Bricks, not here — Bricks emits an
   #brxe-… rule for it, which a class selector cannot outrank. */
@media (max-width: 478px) {
	.dd-cat-nav {
		overflow-x: auto;
		scrollbar-width: none;
	}

	.dd-cat-nav::-webkit-scrollbar { display: none; }
}