/*
 * Blog category navigation.
 *
 * The Webflow original exposed no way to browse by category — cards showed date
 * and title only. These rules add that without introducing a new visual
 * language: every value below is either an existing brand token or the site's
 * established meta-text treatment (12px / uppercase / 1px tracking / weight 500,
 * as used by the date on each card).
 *
 * Gold is reserved for interactive text elsewhere on the site ("Read more"), so
 * category links use it too, which sets up the hierarchy on a card:
 *   gold category  ->  grey date  ->  near-black title
 */

/* --- shared meta treatment -------------------------------------------- */
.rs-cat-link,
.rs-filter__item {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 1px;
	line-height: 1.4;
	text-transform: uppercase;
	text-decoration: none;
}

/* --- category label on a blog card ------------------------------------ */
.rs-cat-link {
	color: var(--renova-gold);
	transition: color 0.2s ease;
}

.rs-cat-link:hover,
.rs-cat-link:focus-visible {
	color: var(--renova-black);
}

/* --- filter row above the grid ---------------------------------------- */
.rs-filter {
	border-bottom: 1px solid var(--renova-cream);
	margin-bottom: 48px;
	padding-bottom: 16px;
}

.rs-filter__list {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 28px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.rs-filter__item {
	border-bottom: 2px solid transparent;
	color: var(--renova-half-black);
	display: inline-block;
	padding-bottom: 6px;
	transition: color 0.2s ease, border-color 0.2s ease;
	white-space: nowrap;
}

.rs-filter__item:hover,
.rs-filter__item:focus-visible {
	color: var(--renova-black);
}

.rs-filter__item[aria-current="page"] {
	border-bottom-color: var(--renova-gold);
	color: var(--renova-black);
}

/* Keyboard focus needs to be visible without borrowing the hover style. */
.rs-cat-link:focus-visible,
.rs-filter__item:focus-visible {
	outline: 2px solid var(--renova-gold);
	outline-offset: 3px;
}

/* --- tablet ------------------------------------------------------------ */
@media screen and (max-width: 991px) {
	.rs-filter {
		margin-bottom: 40px;
	}

	.rs-filter__list {
		gap: 8px 24px;
	}
}

/* --- mobile ------------------------------------------------------------
 * Seven categories will not fit across a phone. Rather than wrap into a
 * three-line block that pushes the grid below the fold, the row scrolls
 * horizontally and bleeds to the screen edge so it reads as scrollable.
 */
@media screen and (max-width: 767px) {
	.rs-filter {
		margin-bottom: 32px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.rs-filter::-webkit-scrollbar {
		display: none;
	}

	.rs-filter__list {
		flex-wrap: nowrap;
		gap: 24px;
		padding-right: 24px;
	}
}

/* --- archive heading alignment ----------------------------------------
 * On /blog/ the featured article stretches `.feautured-blog-top` to full
 * width, so the heading sits flush left. On a category archive there is no
 * featured block, the flex container shrinks to the heading, and it ends up
 * centred — the same heading rendering differently on two pages. Pin the
 * width so both read identically.
 */
.section-blog-hero .feautured-blog-top {
	width: 100%;
}

.section-blog-hero .blog-title-hero {
	align-self: flex-start;
	text-align: left;
}

/* --- service-area archive ---------------------------------------------
 * Grouped city blocks. Type sizes and rules reuse the site's existing scale;
 * the only new value is the grid, which mirrors .blog-grid's three columns so
 * the page sits in the same rhythm as the rest of the site.
 */
.rs-area {
	border-top: 1px solid var(--renova-cream);
	padding: 40px 0;
}

.rs-area:first-child {
	border-top: 0;
	padding-top: 0;
}

.rs-area__head {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	margin-bottom: 20px;
}

.rs-area__head a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

.rs-area__head a:hover {
	color: var(--renova-gold);
}

.rs-area__meta {
	color: var(--renova-half-black);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.rs-area__services {
	display: grid;
	gap: 12px 24px;
	grid-template-columns: repeat(3, 1fr);
	list-style: none;
	margin: 0;
	padding: 0;
}

.rs-area__service {
	color: var(--renova-black);
	display: inline-block;
	font-size: 16px;
	letter-spacing: 0.4px;
	text-decoration: none;
	transition: color 0.2s ease;
}

.rs-area__service:hover,
.rs-area__service:focus-visible {
	color: var(--renova-gold);
}

.rs-area__service:focus-visible {
	outline: 2px solid var(--renova-gold);
	outline-offset: 3px;
}

@media screen and (max-width: 991px) {
	.rs-area__services {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (max-width: 479px) {
	.rs-area__services {
		grid-template-columns: 1fr;
	}
}

/*
 * Service-area archive: supporting copy.
 *
 * The Webflow sheet's `.max-960` only takes effect alongside `.flex-48-center`,
 * which is a 48px-gap flex column — applying it here would push every paragraph
 * 48px apart. Constrain the measure directly instead: this prose sits in the
 * 1140px container, and a full-width line is too long to read.
 *
 * Width only. Type and rhythm still come from `.w-richtext`.
 */
.rs-area-notes {
	max-width: 760px;
}