/* CLARIPHY custom Indico theme
   Upload via: Event Management -> Layout -> Theme -> "Add new CSS file"
   Do NOT also set an image as the event "Logo" - that renders as a separate
   full-width <img> banner above this title box and will fight with this CSS
   (that's what caused the earlier "image above, title below" problem).

   Targets the classic Indico conference-page header (.confheader / .confTitleBox),
   confirmed against Indico's own Conf_Basic.scss source.

   Title color #FFDC5A confirmed from the CLARIPHY site's own source
   (clariphy/clariphy.github.io-source, assets/css/style.scss):
     $brand-yellow: rgb(255, 220, 90);  // banner text, navbar border, card bodies, sub-footer
     .banner-title { color: $brand-yellow; ... }
   (An earlier version of this file incorrectly used #D5D962, which is a
   different accent color - $custom-500/--bs-secondary - used for sidebar
   event/publication boxes on clariphy.org, not the banner title.)
*/

/* Tune this one number to make the banner taller/shorter.
   The original blue banner's height came from 25px+25px of padding around
   the title text (removed below so we could center properly) plus a
   90px min-height floor - stripping that padding is what made the box
   shrink smaller than the original. This variable restores control over
   the total height directly. */
:root {
  --clariphy-banner-height: 160px;
}

.confheader,
.confTitleBox {
  background-image: url('https://indico.global/event/18639/images/5144-clariphy-banner-aiml2026.png') !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
  background-color: #1a64a0 !important; /* fallback shown briefly while the image loads, or if it fails */
}

/* Force the banner to a specific height (instead of letting padding/content
   determine it), and center the title box content on both axes within it. */
.confTitleBox {
  height: var(--clariphy-banner-height) !important;
  min-height: var(--clariphy-banner-height) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.confTitle {
  width: auto !important;
  margin: 0 auto !important;
}

.confTitle h1 {
  margin: 0 !important;
}

.conference-title-link {
  padding: 0 !important;
  display: inline-block !important;
  color: #FFDC5A !important;
  font-size: 2.2rem !important; /* up from Indico's default ~22pt (~1.83rem); adjust to taste */
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6) !important; /* matches .banner-title on clariphy.org */
}

.confheader .event-label {
  color: #FFDC5A !important;
}

/* Optional: darken the image slightly behind the title so gold text stays
   legible against busy parts of the photo. Uncomment to enable. */
/*
.confTitleBox {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
    url('https://indico.global/event/18639/images/5144-clariphy-banner-aiml2026.png') !important;
}
*/