/* ================================================================
   Orabux brand marks for the web pages — one source, every page.
   docs/ADMIN_PANEL.md, "Look and branding".

   .ob-lockup  logo + name, like the share poster's top-left corner
               (orabuxFrontend/src/components/ContestPosterCard.js)
   .ob-eyebrow the poster's accent pill beside it
   .ob-mark    logo alone, like the app's login/signup hero
               (orabuxFrontend/src/Auth/login.js, logoHalo)
   Sizes are the poster's ×1.2 for screen reading.
   ================================================================ */

.ob-lockup {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px; border-radius: 999px;
  background: rgba(0,0,0,0.45);
  /* The poster sits on photos; on our dark headers a bare 45% black would
     vanish, so a hairline keeps the pill's edge. */
  border: 1px solid rgba(255,255,255,0.08);
  text-decoration: none !important; line-height: 1; white-space: nowrap;
}
.ob-lockup__logo { width: 17px; height: 17px; display: block; flex-shrink: 0; }
.ob-lockup__name {
  color: #fff !important; font-size: 12px; font-weight: 800;
  letter-spacing: 1.4px; text-transform: uppercase; line-height: 1;
}
.ob-lockup--lg { gap: 9px; padding: 8px 14px; }
.ob-lockup--lg .ob-lockup__logo { width: 21px; height: 21px; }
.ob-lockup--lg .ob-lockup__name { font-size: 14px; letter-spacing: 1.7px; }

.ob-eyebrow {
  display: inline-flex; align-items: center;
  padding: 6px 10px; border-radius: 999px;
  background: #C0461C;  /* primaryStrong: white on #D85A30 is too faint */
  color: #fff !important; font-size: 10.5px; font-weight: 800;
  letter-spacing: 1.2px; text-transform: uppercase; line-height: 1; white-space: nowrap;
}

.ob-brandrow { display: inline-flex; align-items: center; gap: 8px; text-decoration: none !important; }

.ob-mark {
  width: 84px; height: 84px; border-radius: 26px;
  background: rgba(216,90,48,0.12);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto;
}
.ob-mark img { width: 54px; height: 54px; display: block; }
.ob-mark--sm { width: 64px; height: 64px; border-radius: 20px; }
.ob-mark--sm img { width: 40px; height: 40px; }

.ob-hero-glow { background: linear-gradient(180deg, rgba(216,90,48,0.12), transparent); }