/* Chad's Google reviews, held on this site rather than fetched from a widget.
   Replaces the three Elfsight review widgets that ran on the Handyman
   Marketing Pros account: the home page testimonials, the Customer Reviews
   list, and the Google rating badge in the footer.

   The reviews themselves are in source/google-reviews-2026-10-31.md and the
   markup is written from it by script/render_reviews.py.

   Colours are the site's own: #1E384B navy, #196A88 teal, #FAA54E orange,
   #161412 near-black (the testimonials section background). */

/* ---- the review cards, on the home page and the Customer Reviews page ---- */

.chs-reviews {
	width: 100%;
}

.chs-reviews__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: start;
	gap: 1.25rem;
}

.chs-reviews--list .chs-reviews__grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 1024px) {
	.chs-reviews__grid,
	.chs-reviews--list .chs-reviews__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.chs-reviews__grid,
	.chs-reviews--list .chs-reviews__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.chs-review {
	background: #fff;
	border: 1px solid #e4e8ec;
	border-radius: 12px;
	box-shadow: 0 2px 10px rgba(22, 20, 18, 0.08);
	padding: 1.25rem 1.35rem 1.15rem;
	text-align: left;
}

.chs-review__top {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin-bottom: 0.6rem;
}

.chs-review__avatar {
	flex: 0 0 auto;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: #1e384b;
	color: #fff;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.chs-review__who {
	min-width: 0;
}

.chs-review__name {
	display: block;
	color: #1e384b;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
}

.chs-review__meta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.chs-review__stars {
	color: #faa54e;
	font-size: 0.95rem;
	letter-spacing: 0.08em;
	white-space: nowrap;
}

.chs-review__star {
	font-style: normal;
}

.chs-review__when {
	color: #7b8691;
	font-size: 0.8rem;
}

.chs-review__source {
	margin-left: auto;
	align-self: flex-start;
	color: #4285f4;
	font-size: 1.1rem;
}

.chs-review__text {
	margin: 0;
	color: #333c45;
	font-size: 0.95rem;
	line-height: 1.6;
}

/* ---- the 5.0 summary above the Customer Reviews list ---- */

.chs-reviews__summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.4rem 0.9rem;
	margin: 0 0 1.75rem;
}

.chs-reviews__score {
	color: #1e384b;
	font-size: 2.25rem;
	font-weight: 700;
	line-height: 1;
}

.chs-reviews__summary-stars {
	color: #faa54e;
	font-size: 1.4rem;
	letter-spacing: 0.12em;
}

.chs-reviews__summary-text {
	color: #4a5a67;
	font-size: 1rem;
}

/* ---- the link to Chad's Google listing, under each set of reviews ---- */

.chs-reviews__more {
	margin: 1.4rem 0 0;
	text-align: center;
	font-size: 0.95rem;
	color: #4a5a67;
}

.chs-reviews__more a {
	color: #196a88;
	font-weight: 700;
	text-decoration: underline;
}

.chs-reviews--dark .chs-reviews__more {
	color: #d6cec6;
}

.chs-reviews--dark .chs-reviews__more a {
	color: #faa54e;
}

/* ---- the floating Google rating badge ----

   The Elfsight badge floated in the bottom right corner of the screen on every
   page, in view from the moment the page opened rather than at the bottom of
   the footer. This one does the same: its markup sits in the footer, where the
   widget's did, and it is taken out of the flow and fixed to that corner. The
   footer is on every page except privacy-policy, so the badge is too. */

.chs-rating-badge {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 9998;
	display: grid;
	grid-template-columns: auto auto;
	grid-template-areas:
		"icon line"
		"icon label";
	align-items: center;
	column-gap: 0.55rem;
	margin: 0;
	padding: 0.5rem 0.95rem;
	background: #fff;
	border: 1px solid #e7eaee;
	border-radius: 999px;
	box-shadow: 0 4px 18px rgba(22, 20, 18, 0.22);
	color: #1e384b;
	line-height: 1.15;
	text-decoration: none;
}

.chs-rating-badge:hover,
.chs-rating-badge:focus {
	box-shadow: 0 6px 22px rgba(22, 20, 18, 0.32);
	color: #1e384b;
}

.chs-rating-badge__icon {
	grid-area: icon;
	font-size: 1.5rem;
	line-height: 1;
	color: #4285f4;
}

.chs-rating-badge__line {
	grid-area: line;
	display: flex;
	align-items: baseline;
	gap: 0.35rem;
}

.chs-rating-badge__score {
	font-size: 1.1rem;
	font-weight: 700;
}

.chs-rating-badge__stars {
	color: #faa54e;
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

.chs-rating-badge__label {
	grid-area: label;
	color: #5b6672;
	font-size: 0.7rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

@media (max-width: 767px) {
	.chs-rating-badge {
		right: 12px;
		bottom: 12px;
		padding: 0.4rem 0.75rem;
	}

	.chs-rating-badge__icon {
		font-size: 1.25rem;
	}

	.chs-rating-badge__score {
		font-size: 1rem;
	}
}

@media print {
	.chs-rating-badge {
		position: static;
	}
}