/* Olectra AI brand lockup (header option 12): official logo | "[ AI ]" over the app name,
   set in Chakra Petch. Shared by every app served from /var/www. Dark colours are the
   default; each app's own light-mode switch (data-theme="light", body.light-mode or
   body.light-theme) flips it to Olectra blue. Use .olx-light on a light-only page. */
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600&display=swap');

.olx-lockup {
  --olx-h: 24px;
  --olx-logo: #ffffff;
  --olx-acc: #7fd3ff;
  --olx-sub: #8fa1b6;
  --olx-line: rgba(255, 255, 255, 0.2);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: none;
  color: inherit;
  text-decoration: none;
  line-height: 1;
}
:is([data-theme="light"], .light-mode, .light-theme) .olx-lockup,
.olx-lockup.olx-light {
  --olx-logo: #13599c;
  --olx-acc: #13599c;
  --olx-sub: #64748b;
  --olx-line: #cbd5e1;
}
a.olx-lockup:hover { opacity: 0.85; }
a.olx-lockup:focus-visible { outline: 2px solid var(--olx-acc); outline-offset: 4px; border-radius: 4px; }

.olx-logo {
  display: block;
  flex: none;
  height: var(--olx-h);
  width: auto;
  aspect-ratio: 1632 / 427;
  color: var(--olx-logo);
  fill: currentColor;
}
.olx-vr {
  flex: none;
  width: 1px;
  height: calc(var(--olx-h) + 10px);
  background: var(--olx-line);
}
.olx-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: 'Chakra Petch', 'Inter', system-ui, sans-serif;
  text-align: left;
}
.olx-ai {
  margin: 0;
  font-weight: 600;
  font-size: 17px;
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--olx-acc);
}
.olx-sub {
  margin: 0;
  font-weight: 500;
  font-size: 10.5px;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--olx-sub);
}
@media (max-width: 640px) {
  .olx-lockup { --olx-h: 20px; gap: 9px; }
  .olx-sub { display: none; }
}