/**
 * ReimburseOS nav wordmark — marketing vs app chrome sizing.
 * App topbar must stay compact so the module tab bar is not overlapped.
 */
:root {
  /* Marketing (.cc-nav) */
  --ros-nav-logo-h: 56px;
  --ros-nav-logo-h-mob: 44px;
  --ros-nav-row-min: 72px;
  --ros-nav-row-min-mob: 64px;
  /* App (.topbar, .ri-topbar) — compact lockup */
  --ros-nav-logo-h-app: 36px;
  --ros-nav-logo-h-app-mob: 30px;
  --ros-app-topbar-min: 52px;
  --ros-nav-bg: #000000;
}

/* ── Solid black chrome ── */
.cc-nav,
.ri-topbar,
header.ri-topbar,
.topbar,
.pos-top,
header.pos-topbar {
  background: var(--ros-nav-bg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ── Marketing header ── */
.cc-nav.cc-nav .cc-nav__row,
.cc-nav__row {
  min-height: var(--ros-nav-row-min) !important;
  height: auto !important;
  max-height: none !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  align-items: center !important;
  overflow: visible !important;
}

.cc-nav__brand,
.cc-nav__brand--wordmark {
  flex-shrink: 0 !important;
  overflow: visible !important;
  min-width: 0;
  text-decoration: none !important;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  background: var(--ros-nav-bg) !important;
  padding: 0 6px 0 0;
}

.cc-nav .cc-nav__brand--wordmark {
  flex: 0 0 auto;
  max-width: none;
  min-width: 0;
}

/* Marketing wordmark */
.cc-nav__brand img.ros-brand-logo--nav,
.cc-nav__brand .ros-brand-logo--nav {
  display: block !important;
  width: auto !important;
  height: var(--ros-nav-logo-h) !important;
  max-height: var(--ros-nav-logo-h) !important;
  max-width: min(280px, 52vw) !important;
  object-fit: contain !important;
  object-position: left center !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ── App chrome brand anchor ── */
a.reos-app-brand,
.ri-topbar__brand.reos-app-brand,
.topbar a.brand.reos-app-brand,
.pos-top a.brand.reos-app-brand {
  flex-shrink: 0 !important;
  overflow: hidden !important;
  min-width: 0;
  max-width: min(200px, 42vw);
  text-decoration: none !important;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  background: var(--ros-nav-bg) !important;
  padding: 0 4px 0 0;
  display: inline-flex !important;
  align-items: center !important;
}

.reos-app-brand img,
.reos-app-brand .reos-brand-lockup,
.reos-app-brand .ros-brand-logo--nav,
.ri-topbar__brand img,
.topbar .brand img.reos-brand-lockup {
  display: block !important;
  width: auto !important;
  height: var(--ros-nav-logo-h-app) !important;
  max-height: var(--ros-nav-logo-h-app) !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  object-fit: contain !important;
  object-position: left center !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
  filter: none !important;
  box-shadow: none !important;
  background: transparent !important;
  pointer-events: none;
}

.cc-nav__brand:focus-visible,
.reos-app-brand:focus-visible {
  outline: 2px solid var(--cc-accent, #00d4ff);
  outline-offset: 4px;
  border-radius: 6px;
}

/* ── App topbars — height must match logo, tab bar stacks below ── */
.ri-topbar,
header.ri-topbar,
.topbar,
.pos-top,
header.pos-topbar {
  min-height: var(--ros-app-topbar-min) !important;
  height: auto !important;
  max-height: none !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  align-items: center !important;
  overflow: hidden !important;
}

.ri-topbar__brand.reos-app-brand {
  min-width: 0 !important;
  max-width: min(200px, 42vw) !important;
}

body:has(.reos-app-brand) {
  --topbar-h: var(--ros-app-topbar-min);
  --pos-topbar-h: var(--ros-app-topbar-min);
  --ri-topbar-h: var(--ros-app-topbar-min);
}

@media (max-width: 980px) {
  :root {
    --ros-nav-logo-h: var(--ros-nav-logo-h-mob);
    --ros-nav-row-min: var(--ros-nav-row-min-mob);
    --ros-nav-logo-h-app: var(--ros-nav-logo-h-app-mob);
    --ros-app-topbar-min: 48px;
  }

  .cc-nav__row {
    min-height: var(--ros-nav-row-min-mob);
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .cc-nav__brand img.ros-brand-logo--nav {
    max-width: min(220px, 68vw) !important;
  }

  a.reos-app-brand,
  .ri-topbar__brand.reos-app-brand {
    max-width: min(180px, 48vw) !important;
  }
}

@media (max-width: 420px) {
  a.reos-app-brand,
  .ri-topbar__brand.reos-app-brand {
    max-width: min(160px, 52vw) !important;
  }
}