/*
 * Google Reviews & Business Schema — badge + write-review button.
 *
 * Design rule: minimal visual opinion, maximum theme control.
 * - Colours are theme-inherited or exposed as CSS custom properties.
 * - Only Google brand marks (the G logo, star yellow) keep fixed colours.
 * - Layout/spacing/structure stays so the components still look like
 *   themselves out of the box.
 *
 * To restyle from your theme, override the CSS variables, e.g.
 *   .grt-badge { --grt-badge-bg: #fff; --grt-badge-border: #ddd; }
 *   .grt-write-review--button { --grt-wr-bg: var(--wp--preset--color--primary); }
 */

.grt-badge {
	--grt-badge-bg: transparent;
	--grt-badge-color: inherit;
	--grt-badge-border: transparent;
	--grt-badge-padding: 0.4em 0.7em;
	--grt-badge-radius: 6px;
	--grt-star-color: #fbbc04;

	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-family: inherit;
	line-height: 1.2;
	text-decoration: none;
	padding: var(--grt-badge-padding);
	border: 1px solid var(--grt-badge-border);
	background: var(--grt-badge-bg);
	color: var(--grt-badge-color);
	border-radius: var(--grt-badge-radius);
	vertical-align: middle;
}

/* Subtle border for the "light" variant — still theme-agnostic. */
.grt-badge--light {
	--grt-badge-border: rgba(127, 127, 127, 0.25);
}

/* Semi-transparent dark card — works on most theme backgrounds. */
.grt-badge--dark {
	--grt-badge-bg: rgba(20, 20, 20, 0.92);
	--grt-badge-color: #fff;
}

.grt-badge--link {
	cursor: pointer;
}

.grt-badge--link:hover,
.grt-badge--link:focus-visible {
	filter: brightness(0.97);
}

.grt-badge--small  { font-size: 0.875rem; }
.grt-badge--medium { font-size: 1rem; }
.grt-badge--large  { font-size: 1.25rem; }

.grt-badge__brand {
	font-weight: 600;
	letter-spacing: 0.01em;
}

.grt-badge__rating {
	font-weight: 700;
}

.grt-badge__count {
	opacity: 0.7;
	font-size: 0.9em;
}

/* Stars — yellow is a Google brand cue for ratings, kept as default
   but overridable through --grt-star-color on a parent. */
.grt-stars {
	display: inline-flex;
	align-items: center;
	gap: 1px;
	color: var(--grt-star-color, #fbbc04);
	line-height: 0;
}

.grt-stars__star {
	display: inline-block;
	flex: 0 0 auto;
}

/* Inline Google G logo — scales with parent font-size. Brand colours fixed. */
.grt-google-logo {
	width: 1.1em;
	height: 1.1em;
	flex: 0 0 auto;
	display: inline-block;
}

/* Write-review button — structural only. Looks like a button out of the box
   but inherits theme text colour and uses currentColor for its border so it
   blends with whatever the surrounding type colour is. */
.grt-write-review {
	--grt-wr-bg: transparent;
	--grt-wr-color: inherit;
	--grt-wr-border: currentColor;
	--grt-wr-padding: 0.6em 1.1em;
	--grt-wr-radius: 6px;

	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	font-family: inherit;
	line-height: 1.3;
	text-decoration: none;
	vertical-align: middle;
}

.grt-write-review--button {
	padding: var(--grt-wr-padding);
	border-radius: var(--grt-wr-radius);
	background: var(--grt-wr-bg);
	color: var(--grt-wr-color);
	border: 1px solid var(--grt-wr-border);
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.grt-write-review--button:hover,
.grt-write-review--button:focus-visible {
	background: var(--grt-wr-hover-bg, rgba(127, 127, 127, 0.12));
	color: var(--grt-wr-hover-color, inherit);
}

.grt-write-review--link {
	text-decoration: underline;
	color: inherit;
}

.grt-write-review--link .grt-google-logo {
	width: 1em;
	height: 1em;
}

.grt-write-review__label {
	font-weight: 600;
}

.grt-write-review--link .grt-write-review__label {
	font-weight: inherit;
}