/* ============================================================================
   ALZAR LOGIC — BrandLogo (vanilla)
   Matches website BrandLogo.tsx:
     - /logo.png  = white ALZAR + blue LOGIC, transparent, no TM baked in
     - TM         = separate span (#0EA5E9)
     - light mode = invert + hue-rotate on the mark only
   Themes:
     - html.theme-light                 (standalone)
     - html[data-brightness="light"]    (main shell)
   ============================================================================ */

.brand-logo {
    display: inline-flex;
    align-items: flex-start;
    line-height: 1;
    flex-shrink: 0;
}

.brand-logo-mark {
    display: block;
    width: 160px;
    height: auto;
    filter: none;
}

/* Source artwork is white + blue. Invert for light UI so ALZAR reads dark
   while hue-rotate keeps LOGIC blue. */
html.theme-light .brand-logo-mark,
html[data-brightness="light"] .brand-logo-mark {
    filter: invert(1) hue-rotate(180deg) saturate(1.4);
}

.brand-logo-tm {
    margin-left: 0.2em;
    margin-top: 0.15em;
    font-size: 0.6em;
    font-weight: 600;
    line-height: 1;
    color: #0EA5E9;
    font-family: var(--font-base, system-ui, sans-serif);
    letter-spacing: 0;
}

/* ── Placement sizes ──────────────────────────────────────────────── */

/* Auth / standalone card headers */
.alzar-brand-logo .brand-logo,
.brand-logo--card {
    margin: 0 auto 12px;
}

.alzar-brand-logo .brand-logo-mark,
.brand-logo--card .brand-logo-mark {
    width: min(220px, 72vw);
}

.alzar-brand-logo--hero .brand-logo-mark,
.brand-logo--hero .brand-logo-mark {
    width: min(280px, 80vw);
}

.alzar-brand-logo--hero .brand-logo {
    margin-bottom: 16px;
}

/* Shell chrome (titlebar + topbar) */
.brand-logo--chrome .brand-logo-mark,
.alzar-titlebar-brand .brand-logo-mark,
.topbar-brand .brand-logo-mark {
    width: 140px;
}

body.is-mobile .topbar-brand .brand-logo-mark,
body.is-mobile .brand-logo--chrome .brand-logo-mark {
    width: 122px;
}

/* Legal header */
.brand-logo--legal .brand-logo-mark {
    width: 160px;
}

/* Hide legacy text wordmark when image lockup is present */
.alzar-brand-logo:has(.brand-logo) .alzar-brand-wordmark,
.topbar-brand:has(.brand-logo) .topbar-brand-text,
#title-bar:has(.brand-logo) .alzar-titlebar-wordmark {
    display: none;
}

/* Universal ™ for prose brand names (not image lockups) */
.alzar-tm {
    font-size: 0.55em;
    vertical-align: super;
    line-height: 0;
    font-weight: 400;
    letter-spacing: 0;
    color: #0EA5E9;
}

html[data-brightness="light"] .topbar-brand-text {
    color: var(--color-text-main) !important;
}

html[data-brightness="light"] .topbar-brand-accent,
html[data-brightness="light"] .topbar-brand-mark,
html[data-brightness="light"] .alzar-tm {
    color: #0EA5E9 !important;
}

body.is-mobile .topbar-brand-text {
    display: none;
}