/* QuickGigs — brand header: QuickGigs + POSTER / TASKER (always together) */

.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.nav-brand .nav-logo {
  font-family: 'Playfair Display', serif;
  font-style: normal;
  font-size: 1.45rem;
  font-weight: 700;
  color: #c8a8e9 !important;
  line-height: 1;
  letter-spacing: -0.01em;
}

.nav-brand .nav-role {
  font-family: 'DM Sans', sans-serif;
  font-style: normal;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: #c8a8e9 !important;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(107, 63, 160, 0.2);
  border: 0.5px solid rgba(200, 168, 233, 0.22);
  white-space: nowrap;
}

/* Same dark header on every app page */
.nav {
  background: #120828 !important;
  border-bottom: none !important;
  box-shadow: 0 3px 0 #6b3fa0, 0 1px 0 rgba(200, 168, 233, 0.22);
}

/* Light mode: white nav + dark purple text (see qg-light-nav.css for full rules) */
body.light .nav {
  background: #ffffff !important;
  border-bottom: 1px solid #e8e2ff !important;
  box-shadow: 0 2px 12px rgba(107, 63, 160, 0.08) !important;
}

body.light .nav-brand .nav-logo,
body.light .nav-brand .nav-role {
  color: #6b3fa0 !important;
}

/* Never show logo without role · beta lockup */
.nav-brand .nav-role:empty::before {
  content: 'Poster · Beta';
}

html[data-qg-mode="worker"] .nav-brand .nav-role:empty::before {
  content: 'Tasker · Beta';
}

html[data-qg-mode="poster"] .nav-brand .nav-role:empty::before {
  content: 'Poster · Beta';
}