/*
  Indico custom CSS: header logo left, title hidden
  -------------------------------------------------
  This version is stricter and based on the standard Indico conference
  header classes:
    .confTitleBox      = main header/banner
    .confTitle         = inner header wrapper
    .confLogoBox       = logo container
    .conferencetitlelink / span[itemprop="title"] = event title

  It avoids the previous overflow problem by NOT using 100vw negative margins.
*/

/* Main page header/banner */
.confTitleBox,
#confTitleBox {
  background: #1c2045 !important;
  background-color: #1c2045 !important;

  width: 100% !important;
  max-width: 100% !important;

  margin-left: 0 !important;
  margin-right: 0 !important;

  padding: 0 !important;
  box-sizing: border-box !important;

  overflow-x: hidden !important;
}

/* Inner header row */
.confTitleBox .confTitle,
#confTitleBox .confTitle,
.confTitle {
  width: 100% !important;
  max-width: 100% !important;

  margin: 0 !important;

  padding-top: 14px !important;
  padding-right: 24px !important;
  padding-bottom: 14px !important;
  padding-left: 24px !important;

  box-sizing: border-box !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  text-align: left !important;
  overflow: hidden !important;
}

/* Logo container */
.confLogoBox,
#confLogoBox {
  float: none !important;

  display: block !important;
  flex: 0 0 auto !important;

  margin: 0 !important;
  padding: 0 !important;

  max-width: 100% !important;

  visibility: visible !important;
  opacity: 1 !important;
}

/* Logo image */
.confLogoBox img,
#confLogoBox img {
  display: block !important;

  margin: 0 !important;
  padding: 0 !important;

  max-height: 90px !important;
  max-width: calc(100vw - 48px) !important;

  width: auto !important;
  height: auto !important;

  object-fit: contain !important;

  visibility: visible !important;
  opacity: 1 !important;
}

/* Hide the title text in the header */
.confTitleBox .conferencetitlelink,
#confTitleBox .conferencetitlelink,
.confTitleBox span[itemprop="title"],
#confTitleBox span[itemprop="title"],
.confTitleBox .conf-title,
#confTitleBox .conf-title,
.confTitleBox .event-title-text,
#confTitleBox .event-title-text,
.confTitleBox .event-header-title,
#confTitleBox .event-header-title {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;

  font-size: 0 !important;
  line-height: 0 !important;

  width: 0 !important;
  max-width: 0 !important;

  height: 0 !important;
  max-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;
}

/* If the title is plain text inside .confTitle, suppress only text styling.
   The logo is restored again below. */
.confTitleBox .confTitle,
#confTitleBox .confTitle {
  font-size: 0 !important;
  line-height: 0 !important;
}

/* Restore logo sizing after suppressing parent text */
.confTitleBox .confLogoBox,
#confTitleBox .confLogoBox,
.confTitleBox .confLogoBox *,
#confTitleBox .confLogoBox * {
  font-size: initial !important;
  line-height: normal !important;

  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Mobile */
@media (max-width: 768px) {
  .confTitleBox .confTitle,
  #confTitleBox .confTitle,
  .confTitle {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .confLogoBox img,
  #confLogoBox img {
    max-height: 72px !important;
    max-width: calc(100vw - 32px) !important;
  }
}