/*
 * office-badge.css — the live open/closed pill.
 *
 * Shared component: it appears in the homepage assistant section AND on the
 * contact page. Its styles were originally in assistant.css, which is enqueued
 * front-page-only — the same latent class of bug as the drawer-overflow and
 * FAQ-enqueue ones — so they live here and load site-wide instead.
 *
 * office-status.js (already site-wide) keeps the state truthful on cached
 * pages; inc/hours.php prints the schedule as data attributes.
 */

.office-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--s-3);
	padding: var(--s-2) var(--s-4);
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	font-size: var(--fs-small);
	font-weight: 600;
	color: var(--text-muted);
}

.office-badge__dot {
	width: 8px;
	height: 8px;
	border-radius: var(--radius-pill);
	background: var(--muted);
	flex-shrink: 0;
}

.office-badge.is-open .office-badge__dot {
	background: var(--koivu-bright);
	animation: officePulse 2.6s var(--ease) infinite;
}

.office-badge.is-open {
	color: var(--ink);
}

/* A slow breath, not a blink: presence rather than an alert. */
@keyframes officePulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(115, 162, 32, 0.45); }
	60% { box-shadow: 0 0 0 7px rgba(115, 162, 32, 0); }
}

/* Perpetual motion is the first thing to go when motion is unwelcome. */
@media (prefers-reduced-motion: reduce) {
	.office-badge.is-open .office-badge__dot {
		animation: none;
	}
}