/**
 * Post tags — the row at the end of a single blog post.
 *
 * A SEPARATE FILE, enqueued only on single posts, so nothing else on the site can be
 * touched by it. inner-page.css is left alone entirely.
 *
 * Colours, type and the hairline all come from the tokens global.css defines, and the
 * hover behaviour is lifted from `.btn-outline` — transparent, then filling with the
 * brand green — so a tag reads as part of the same family as the site's buttons without
 * pretending to be one.
 *
 * EVERY SELECTOR IS SCOPED THROUGH `.page-left`, and that is not decoration. inner-page.css
 * carries `.page-detail .page-left ul li` and `.page-detail .page-left ul li::before` —
 * a diamond bullet, 20px of left padding and a 34px line-height — plus its own <p> rules.
 * Those are specificity (0,3,1), so an unscoped `.post-tags__item` would lose to them and
 * every tag would arrive wearing a bullet. Matching their depth is what wins.
 *
 * @package lawncareknox
 */

.page-detail .page-left .post-tags {
	--tag-gap: var(--sp-10);
	--tag-pad-x: var(--sp-16);
	--tag-pad-y: var(--sp-8);
	--tag-size: 16px;

	margin-top: var(--sp-48);
	padding-top: var(--sp-24);

	/*
	 * An inset box-shadow, not a border-top: the theme uses this technique throughout
	 * (see the What We Do rules) because it costs no layout height, so the 24px above the
	 * label stays exactly 24px.
	 */
	box-shadow: inset 0 1px 0 0 var(--color-hairline);
}

/* Overrides the inherited `.page-detail .page-left p` sizing (18px / 34px line-height /
   15px vertical margins), which is body-copy scale and far too loose for a small label. */
.page-detail .page-left .post-tags__label {
	margin: 0 0 var(--sp-16);
	font-family: var(--font-primary);
	font-size: var(--tag-size);
	line-height: 1.5;
	letter-spacing: 0.12em;
	font-weight: 500;
	text-transform: uppercase;
	color: var(--color-secondary);
}

.page-detail .page-left .post-tags__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tag-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Undoes the diamond bullet, the left padding and the vertical margins that
   inner-page.css applies to every <li> in this column. */
.page-detail .page-left .post-tags__item {
	margin: 0;
	padding: 0;
	line-height: normal;
}

.page-detail .page-left .post-tags__item::before {
	content: none;
}

.page-detail .page-left .post-tags__link {
	display: inline-block;
	padding: var(--tag-pad-y) var(--tag-pad-x);
	/* Square, like every button on the site — the 8px radius is for cards, not controls. */
	border-radius: 0;
	box-shadow: inset 0 0 0 1px var(--color-border-light);
	background-color: transparent;
	color: var(--color-secondary);
	font-family: var(--font-primary);
	font-size: var(--tag-size);
	line-height: 1.5;
	letter-spacing: -0.02em;
	font-weight: 500;
	text-decoration: none;
	transition: var(--transition);
}

/*
 * `!important` is needed on colour and decoration only because inner-page.css sets
 * `.inner-content .page-left a:hover { text-decoration: underline; color: var(--link-hover) }`,
 * and an underline plus an ink-black label on a filled green chip is not the hover we want.
 */
.page-detail .page-left .post-tags__link:hover,
.page-detail .page-left .post-tags__link:focus-visible {
	box-shadow: inset 0 0 0 1px var(--color-primary);
	background-color: var(--color-primary);
	color: var(--color-white) !important;
	text-decoration: none !important;
}

.page-detail .page-left .post-tags__link:focus-visible {
	outline: 2px solid var(--color-secondary);
	outline-offset: 2px;
}

/* ==========================================================================
   Responsive
   ==========================================================================
   Only the rhythm above the row steps down; the chips are already at their floor.
   ========================================================================== */

@media (max-width: 999px) {
	.page-detail .page-left .post-tags {
		margin-top: var(--sp-40);
	}
}

@media (max-width: 767px) {
	.page-detail .page-left .post-tags {
		margin-top: var(--sp-32);
		padding-top: var(--sp-16);
	}

	.page-detail .page-left .post-tags__label {
		margin-bottom: var(--sp-10);
	}
}

@media (prefers-reduced-motion: reduce) {
	.page-detail .page-left .post-tags__link {
		transition: none;
	}
}