/**
 * Component: the Review mode bar (visitors only, while Review mode is on).
 * Fixed to the bottom of the viewport, below the sticky header and its
 * menu panel (z-index 1000). The body reserves the bar's height at the end
 * of the page, so it never covers the last content: review-banner.js keeps
 * --firm-review-banner-height current; the fallback (no JS) fits three
 * lines, the most the bar takes at 360px.
 * Collapsed (JS): a small tab at the end of the row with the name, the
 * count and a chevron.
 */

body.has-review-banner {
	padding-block-end: var(
		--firm-review-banner-height,
		calc(2 * var(--wp--preset--spacing--20) + 2 * var(--wp--preset--spacing--10) + 3 * var(--wp--custom--line-height--body-sm) * var(--wp--preset--font-size--body-sm))
	);
}

.review-banner {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 999;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--10) var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--20) var(--wp--custom--gutter);
	border-block-start: var(--wp--custom--border-width--thin) solid var(--wp--preset--color--base);
	background: var(--wp--preset--color--primary-darkest);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: var(--wp--custom--line-height--body-sm);
}

.review-banner p {
	margin: 0;
}

.review-banner__name {
	font-weight: 700;
}

.review-banner__toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--10);
	margin: 0;
	padding: var(--wp--preset--spacing--10) 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.review-banner__tab-count {
	padding-inline: var(--wp--preset--spacing--10);
	border-radius: var(--wp--custom--radius--full);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary-darkest);
	font-weight: 700;
}

.review-banner__chevron {
	--firm-icon-size: var(--wp--custom--icon--md);
}

.review-banner__panel {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--10) var(--wp--preset--spacing--40);
}

.review-banner__link,
.review-banner__link:is(:hover, :focus-visible) {
	color: var(--wp--preset--color--base);
	text-decoration: underline;
}

.review-banner__link:hover {
	text-decoration-thickness: var(--wp--custom--border-width--medium);
}

.review-banner :focus-visible {
	outline: var(--wp--custom--border-width--medium) solid var(--wp--preset--color--base);
	outline-offset: var(--wp--custom--border-width--medium);
}

/* Without JS the bar stays open: a plain name instead of the toggle. */
html:not(.js) .review-banner__toggle,
.js .review-banner__name--static {
	display: none;
}

/* Open: the count is in the panel, the chevron points down (collapse). */
.review-banner__toggle[aria-expanded="true"] .review-banner__tab-count {
	display: none;
}

/* Collapsed: a tab at the end of the row. */
.review-banner.is-collapsed {
	inset-inline-start: auto;
	padding-inline: var(--wp--preset--spacing--30);
	border-inline-start: var(--wp--custom--border-width--thin) solid var(--wp--preset--color--base);
}

.review-banner.is-collapsed .review-banner__chevron {
	rotate: 180deg;
}

.review-banner__panel[hidden] {
	display: none;
}

@media (prefers-reduced-motion: no-preference) {
	.review-banner__chevron {
		transition: rotate 0.2s ease;
	}
}