/*
    Use this stylesheet to modify the layout of your
    conference.
*/

:root {
  /* Header */
  --conf-theme-header-bg:rgb(245, 250, 255);
  --conf-theme-header-border-bottom:rgb(245, 250, 255);
  --conf-theme-header-text: rgb(52, 59, 66);

  /* Subtitle area */
  --conf-theme-subtitle-bg: #f5faff;
  --conf-theme-subtitle-border: #d5e4f1;
  --conf-theme-subtitle-text: rgb(52, 59, 66);

  /* Menu colors */
  --conf-theme-menu-bg: #f6f6f6;
  --conf-theme-menu-border: #ccc;
  --conf-theme-menu-link: #275c86;
  --conf-theme-menu-selected: #bd891a;
  --conf-theme-menu-selected-bg: #dadada;
  --conf-theme-menu-selected-border: #d0d0d0;
  --conf-theme-hover-bg: #e0e0e0;
  --conf-theme-hover-color: var(--conf-theme-menu-link);
  --conf-theme-title-sprite-bg: transparent;
  --conf-theme-announcement-sprite-bg: transparent;
  --conf-theme-announcement-border-top: 1px solid var(--conf-theme-announcement-border);
  --conf-theme-announcement-border-bottom: none;

  /* Support box */
  --conf-theme-support-bg: #f6f6f6;
  --conf-theme-support-border: #ccc;
  --conf-theme-support-header-bg: #1a64a0;
  --conf-theme-support-header-text: #f3f3f3;
  --conf-theme-support-text: #aaa;

  /* Background images */
  --conf-theme-sprite-image: url('/images/conf/sprites_blue.png');

  /* Announcement colors */
  --conf-theme-announcement-bg: #f5faff;
  --conf-theme-announcement-border: #c2d6e7;
  --conf-theme-announcement-text: #0f283d;
}

#confTitleBox .confTitle {
  display: none !important;
}

.confTitleBox {
    border-top: 0;
    padding-top: 0;
}
.conference-title-link {
    padding-top: 0;
}

.conference-title-container {
    padding: 0 !important;
    margin: 0 !important;
}

.conference-title-box {
    padding-left: 0 !important;
    padding-right: 0 !important;
}



/* Full-width banner logo (classic Indico conference theme) */
.confLogoBannerBox {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;  /* break out of centered container */
  margin-right: calc(50% - 50vw) !important;
  padding: 0 !important;
}

.confLogoBannerBox img.confLogo {
  width: 100% !important;
  max-width: none !important;
  height: clamp(240px, 26vw, 420px);  /* adjust to taste */
  object-fit: cover;
  object-position: center;
  display: block;
}


.confLogoBannerBox{
  padding: 0 !important;
  line-height: 0 !important;
}

.confLogoBannerBox img.confLogo{
  height: clamp(260px, 30vw, 520px); /* taller */
}

/* --- Put the title ON TOP of the banner image (classic Indico) --- */

/* --- Title overlay on banner (safe method) --- */

/* Ensure we are NOT absolutely positioning the title */
#confTitleBox, #confSubTitleBox {
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
}

/* Make the title bar full-bleed and pull it up onto the banner */
#confTitleBox {
  z-index: 50 !important;

  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;

  margin-top: -72px !important;     /* <-- adjust this number */
  padding: 12px 0 !important;
  background: rgba(26, 100, 160, 0.75) !important;
}

/* Optional: if there is a subtitle box and you want it to overlay too */
#confSubTitleBox {
  z-index: 50 !important;

  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;

  margin-top: -1px !important; /* keep it snug under the title bar */
  background: rgba(245, 250, 255, 0.85) !important; /* or transparent */
}

/* Improve text readability */
#confTitleBox .confTitle {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}