/* Aqarat Jahza logo. Every spot carries the Arabic and English artwork; the
   page language picks one (<html lang="ar"> today, "en" once an English
   version exists). Hidden images are lazy, so only the visible one loads. */
.brand-logo{display:inline-flex;align-items:center;flex-shrink:0}
.brand-logo img{display:block;height:100%;width:auto;max-width:none}
html[lang|="en"] .brand-logo .logo-ar,
html:not([lang|="en"]) .brand-logo .logo-en{display:none}

/* Header: colour logo on the white desktop bar, white on the dark mobile bar. */
.brand-logo--header{height:52px}
#siteHeader .brand-logo .logo-dark{display:none}
@media(max-width:1280px){.brand-logo--header{height:46px}}
@media(max-width:767px){
  .brand-logo--header{height:42px}
  #siteHeader .brand-logo .logo-light{display:none}
  html:not([lang|="en"]) #siteHeader .brand-logo .logo-ar.logo-dark,
  html[lang|="en"] #siteHeader .brand-logo .logo-en.logo-dark{display:block}
}

.brand-logo--footer{height:64px}
.brand-logo--workspace{height:40px}
.brand-logo--auth{height:48px}

/* Small screens hide the auth side panel and print the brand as text above
   the form; show the logo there instead. */
@media(max-width:767px){
  .auth-content:before{content:'';block-size:48px;background:url('/assets/logo-ar.webp') no-repeat center/contain}
  html[lang|="en"] .auth-content:before{background-image:url('/assets/logo-en.webp')}
}