/*
    DeMythif.AI Winter School 2027, custom stylesheet for the Indico event (event 14997).
    Version of 5 November 2026 (v3: light header so that the navy parts of the logo stay visible; event title hidden under the logo; logo capped at 120 px high, 10 px above and below; logo aligned with the text column). Based on IJCLab's example stylesheet (confTemplates/standard.css).

    Palette taken from the school's logo; navy = EU flag blue (Pantone Reflex Blue):
      navy        #003399
      mid blue    #4f7ad4
      sky blue    #75b7f4
      pale blue   #e8effd

    How to use: Gerer l'evenement > Personnalisation > Mise en page (Layout):
    upload this file as the custom stylesheet, then save and reload the event page.
*/

:root {
  /* Header: pale blue (the logo's own background) with a sky-blue line underneath, navy title.
     For a pure white header instead, use: header-bg #ffffff and subtitle-bg #f6f8fd. */
  --conf-theme-header-bg: #e8effd;
  --conf-theme-header-border-bottom: #75b7f4;
  --conf-theme-header-text: #003399;

  /* Subtitle area (dates, venue): white */
  --conf-theme-subtitle-bg: #ffffff;
  --conf-theme-subtitle-border: #d3def5;
  --conf-theme-subtitle-text: #0b2a73;

  /* Menu: navy links, selected item in pale blue with a mid-blue label */
  --conf-theme-menu-bg: #f6f8fd;
  --conf-theme-menu-border: #d3def5;
  --conf-theme-menu-link: #003399;
  --conf-theme-menu-selected: #4f7ad4;
  --conf-theme-menu-selected-bg: #e8effd;
  --conf-theme-menu-selected-border: #c9d8f6;
  --conf-theme-hover-bg: #e8effd;
  --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 (contact): navy header */
  --conf-theme-support-bg: #f6f8fd;
  --conf-theme-support-border: #d3def5;
  --conf-theme-support-header-bg: #003399;
  --conf-theme-support-header-text: #ffffff;
  --conf-theme-support-text: #555555;

  /* Background images (Indico's blue sprite set, kept as in the example) */
  --conf-theme-sprite-image: url('/images/conf/sprites_blue.png');

  /* Announcement banner ("Applications are open..."): pale blue, sky-blue line, navy text */
  --conf-theme-announcement-bg: #e8effd;
  --conf-theme-announcement-border: #75b7f4;
  --conf-theme-announcement-text: #003399;
}

/*
    Hide the event title under the logo: the logo already says "Winter School, DeMythif.AI MSCA COFUND",
    and the dates are shown just below. The title is only hidden visually: it stays in the page for
    screen readers, search engines and the browser tab. Delete this block to show the title again.
    (Tested on the live page, 5 November 2026: Indico puts the title in .confTitle span[itemprop="title"].)
*/
.confTitle span[itemprop="title"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/*
    Smaller banner: by default Indico stretches the logo to the full page width (about 265 px high
    on a laptop screen). Here it keeps its proportions and is capped at 120 px high, with 10 px of
    space above and below. Change max-height to make it bigger or smaller, and the 10px padding to
    change the space around it.
    (Tested on the live page, 5 November 2026: header height goes from about 460 px to about 250 px.)
*/
.confTitle .conference-title-link {
  padding: 10px 0 !important;
}
/* Dates and venue band just below (7px = Indico default; lower it to tighten) */
.confSubTitleBox {
  padding: 7px 0 !important;
}
.confLogoBannerBox {
  padding: 0 !important;
  /* Left edge of the logo aligned with the main text column, not with the menu:
     230 px = width of Indico's left menu (200 px) + the gap before the text (30 px).
     Checked on the live page at 1440 px and 1024 px wide, and on a phone (Indico keeps the same layout there). */
  padding-left: 230px !important;
}
img.confLogo {
  display: block;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 150px !important;
  margin: 0 !important;
}