/* FileFade dynamic header logo sizing
   Adjust --filefade-logo-height if you want the header logo larger/smaller. */
:root{
  --filefade-logo-height:72px;
  --filefade-logo-max-width:360px;
}

.topbar{
  align-items:center;
  min-height:calc(var(--filefade-logo-height) + 22px);
}

.brand-logo{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:var(--filefade-logo-height);
  line-height:0;
  text-decoration:none;
  flex:0 0 auto;
}

.site-logo{
  display:block;
  height:var(--filefade-logo-height);
  width:auto;
  max-width:var(--filefade-logo-max-width);
  max-height:none;
  object-fit:contain;
}

.site-logo-light{display:none}
html[data-theme="light"] .site-logo-dark{display:none}
html[data-theme="light"] .site-logo-light{display:block}
html[data-theme="dark"] .site-logo-dark{display:block}
html[data-theme="dark"] .site-logo-light{display:none}

@media(max-width:800px){
  :root{
    --filefade-logo-height:56px;
    --filefade-logo-max-width:300px;
  }
  .topbar{
    align-items:flex-start;
    min-height:0;
  }
}