/* CityBuildRR brand mark — logo.png (636×694, transparent) */

:root {
  --cb-logo-aspect: 636 / 694;
}

.cb-brand {
  display: inline-flex;
  align-items: center;
  gap: clamp(8px, 1.4vw, 12px);
  min-width: 0;
  line-height: 1;
  vertical-align: middle;
}

.cb-logo {
  display: block;
  flex-shrink: 0;
  width: auto;
  height: var(--cb-logo-h, 28px);
  aspect-ratio: var(--cb-logo-aspect);
  object-fit: contain;
  object-position: center;
  user-select: none;
  -webkit-user-drag: none;
  /* Keep metal + neon readable on glass without crushing detail */
  filter: drop-shadow(0 0 10px oklch(0.62 0.18 280 / 0.28));
}

.cb-brand-wordmark {
  font-family: var(--font-display, 'Bebas Neue', sans-serif);
  font-size: var(--cb-wordmark-size, clamp(17px, 2vw, 22px));
  letter-spacing: 0.08em;
  background: linear-gradient(135deg, var(--violet, #a78bfa), var(--cyan, #22d3ee));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  white-space: nowrap;
  line-height: 1;
}

/* Size presets */
.cb-brand--xs { --cb-logo-h: 20px; --cb-wordmark-size: 14px; gap: 6px; }
.cb-brand--sm { --cb-logo-h: 24px; --cb-wordmark-size: 16px; gap: 8px; }
.cb-brand--md { --cb-logo-h: 28px; --cb-wordmark-size: clamp(17px, 2vw, 22px); }
.cb-brand--lg { --cb-logo-h: 40px; --cb-wordmark-size: clamp(24px, 3vw, 32px); gap: 12px; }
.cb-brand--xl { --cb-logo-h: 56px; --cb-wordmark-size: clamp(28px, 4vw, 40px); gap: 14px; }
.cb-brand--hero { --cb-logo-h: clamp(22px, 4vw, 28px); --cb-wordmark-size: 11px; gap: 10px; }

.cb-brand--hero .cb-brand-wordmark {
  font-family: var(--font-labels, 'DM Mono', monospace);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  background: none;
  -webkit-text-fill-color: var(--cyan, #22d3ee);
  color: var(--cyan, #22d3ee);
}

.cb-brand--logo-only {
  gap: 0;
}

.cb-brand--stack {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}

.cb-brand--stack .cb-brand-wordmark {
  letter-spacing: 0.06em;
}

/* Auth modal: larger centered mark */
.auth-logo.cb-brand {
  display: flex;
  justify-content: center;
  margin-bottom: 6px;
  --cb-logo-h: clamp(48px, 12vw, 64px);
  --cb-wordmark-size: clamp(26px, 5vw, 32px);
}

/* Footer brand */
.footer-brand.cb-brand {
  margin-bottom: 10px;
  --cb-logo-h: clamp(36px, 6vw, 44px);
  --cb-wordmark-size: clamp(28px, 4vw, 36px);
  cursor: none;
}

.footer-brand.cb-brand .cb-brand-wordmark {
  background: linear-gradient(135deg, var(--violet), var(--cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Admin topnav */
.nav-logo.cb-brand {
  margin-right: clamp(16px, 3vw, 40px);
  flex-shrink: 0;
  --cb-logo-h: 26px;
  --cb-wordmark-size: 20px;
  color: inherit;
}

.nav-logo.cb-brand::after {
  content: none;
}

.nav-logo.cb-brand .cb-brand-wordmark {
  background: none;
  -webkit-text-fill-color: var(--amber, #fbbf24);
  color: var(--amber, #fbbf24);
}

/* Header nav brand button inherits flex from .nav-brand */
.nav-brand .cb-brand {
  pointer-events: none;
}

@media (max-width: 720px) {
  .nav-brand .cb-brand,
  .nav-brand.cb-brand {
    --cb-logo-h: 24px;
    --cb-wordmark-size: 17px;
    gap: 8px;
  }

  .nav-logo.cb-brand {
    --cb-logo-h: 22px;
    --cb-wordmark-size: 16px;
    margin-right: 12px;
  }
}

@media (max-width: 430px) {
  .nav-brand .cb-brand-wordmark,
  .nav-brand.cb-brand .cb-brand-wordmark {
    /* Prefer mark visibility; slightly tighter wordmark */
    font-size: 15px;
    letter-spacing: 0.06em;
  }

  .nav-brand .cb-logo,
  .nav-brand.cb-brand .cb-logo {
    height: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cb-logo {
    filter: none;
  }
}