/**
 * CameraReady identity — square+dot mark + single-word wordmark (Figma Identity).
 * Requires `public/css/tokens.css`.
 *
 * Mark asset: `public/logo-icon.svg` (closed square outline + #D42B20 recording dot).
 * Full lockup SVG: `public/logo.svg` (square mark + CAMERAREADY wordmark).
 */

.cr-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
}

.cr-brand:hover {
  text-decoration: none;
}

.cr-brand__mark {
  position: relative;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.cr-brand__mark-img {
  display: block;
  width: 100%;
  height: 100%;
}

.cr-brand__wordmark {
  font-family: var(--cr-font-display);
  font-size: 1.375rem;
  font-weight: var(--cr-font-weight-bold);
  letter-spacing: var(--cr-letter-spacing-wordmark);
  line-height: 1;
  color: var(--cr-color-text);
}

/* Compact header variant */
.cr-brand--sm .cr-brand__mark {
  width: 32px;
  height: 32px;
}

.cr-brand--sm .cr-brand__wordmark {
  font-size: 1.125rem;
}

/* Mark-only (icon nav, favicon contexts) */
.cr-brand--mark-only .cr-brand__wordmark {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}