/* CSCQM / Indico public-page theme v3
   Upload in: Customization -> Layout -> Stylesheet
   Safe rollback: remove/deactivate this stylesheet.
*/

:root {
  --cscqm-blue: #0f6ea4;
  --cscqm-blue-dark: #0b4f78;
  --cscqm-blue-soft: #eaf5fb;
  --cscqm-text: #243447;
  --cscqm-muted: #667085;
  --cscqm-border: #d8e5ee;
  --cscqm-bg: #f5f9fc;
  --cscqm-card: #ffffff;
  --cscqm-radius: 18px;
  --cscqm-shadow: 0 18px 45px rgba(12, 50, 80, 0.12);
}

body {
  background:
    radial-gradient(circle at 15% 0%, rgba(15,110,164,.10), transparent 28rem),
    radial-gradient(circle at 85% 20%, rgba(44,155,215,.08), transparent 24rem),
    var(--cscqm-bg) !important;
  color: var(--cscqm-text) !important;
}

/* Hide old technical admin/action bar for ordinary conference look.
   Comment this block if you want to keep Indico navigation icons visible. */
.page-header-dark .main-action-bar {
  min-height: 36px !important;
}

/* Main conference header */
.conf {
  max-width: 1120px !important;
  margin: 0 auto !important;
}

.confheader {
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

.confTitleBox {
  background: linear-gradient(135deg, var(--cscqm-blue-dark), var(--cscqm-blue)) !important;
  border-radius: 0 0 24px 24px !important;
  box-shadow: var(--cscqm-shadow) !important;
  padding: 38px 34px 34px !important;
}

.confTitle h1,
.confTitle h1 a,
.conference-title-link,
.conference-title-link span {
  color: #fff !important;
  text-decoration: none !important;
}

.confTitle h1 {
  margin: 0 !important;
  font-size: clamp(2rem, 4vw, 3.3rem) !important;
  line-height: 1.08 !important;
  font-weight: 750 !important;
  letter-spacing: -0.035em !important;
}

.confSubTitleBox {
  background: rgba(255,255,255,.88) !important;
  border: 1px solid var(--cscqm-border) !important;
  border-radius: var(--cscqm-radius) !important;
  margin: -22px auto 28px !important;
  max-width: 960px !important;
  box-shadow: 0 12px 30px rgba(12,50,80,.09) !important;
  backdrop-filter: blur(10px);
}

.confSubTitleContent {
  padding: 18px 22px !important;
  align-items: center !important;
  gap: 24px !important;
}

.datePlace .date,
.datePlace .place {
  color: var(--cscqm-text) !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
}

.datePlace .timezone {
  color: var(--cscqm-muted) !important;
}

#event-search-box {
  margin-left: auto !important;
  min-width: 280px !important;
}

#event-search-box input {
  border-radius: 999px !important;
  border-color: var(--cscqm-border) !important;
  box-shadow: none !important;
}

/* Horizontal conference menu */
#confSectionsBox {
  display: block !important;
}

.conf_leftMenu {
  float: none !important;
  width: auto !important;
  max-width: 960px !important;
  margin: 0 auto 34px !important;
  padding: 10px !important;
  background: rgba(255,255,255,.92) !important;
  border: 1px solid var(--cscqm-border) !important;
  border-radius: 999px !important;
  box-shadow: 0 14px 34px rgba(12,50,80,.10) !important;
}

.event-menu-heading {
  display: none !important;
}

.conf_leftMenu nav,
.conf_leftMenu ul#outer {
  margin: 0 !important;
  padding: 0 !important;
}

.conf_leftMenu ul#outer {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 8px !important;
  list-style: none !important;
}

.conf_leftMenu li.menuConfTitle {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.conf_leftMenu li.menuConfTitle > a {
  display: block !important;
  padding: 11px 18px !important;
  border-radius: 999px !important;
  color: var(--cscqm-blue-dark) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  text-decoration: none !important;
  font-weight: 750 !important;
  letter-spacing: .01em !important;
  transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease !important;
}

.conf_leftMenu li.menuConfTitle > a:hover {
  background: var(--cscqm-blue-soft) !important;
  color: var(--cscqm-blue-dark) !important;
  transform: translateY(-1px) !important;
}

.conf_leftMenu li.selected > a,
.conf_leftMenu li.menuConfSelected > a,
.conf_leftMenu li.menuConfTitle.active > a {
  background: linear-gradient(135deg, var(--cscqm-blue-dark), var(--cscqm-blue)) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(15,110,164,.28) !important;
}

.conf_leftMenu ul.inner {
  display: none !important;
}

/* Main body as centered card */
.confBodyBox,
.mainContent,
.col2 {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.conference-page {
  max-width: 960px !important;
  margin: 0 auto 64px !important;
}

.page-content,
.conferenceDetails,
.infogrid,
.action-box {
  background: var(--cscqm-card) !important;
  border: 1px solid var(--cscqm-border) !important;
  border-radius: var(--cscqm-radius) !important;
  box-shadow: 0 12px 32px rgba(12,50,80,.08) !important;
}

.page-content {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.conferenceDetails {
  padding: 34px 38px !important;
  margin-bottom: 28px !important;
}

.conferenceDetails h2,
.page-content h2,
.infogrid h2 {
  color: var(--cscqm-blue-dark) !important;
  font-weight: 760 !important;
  letter-spacing: -0.025em !important;
  margin-top: 1.6em !important;
  margin-bottom: .55em !important;
}

.conferenceDetails h2:first-child {
  margin-top: 0 !important;
}

.conferenceDetails p,
.conferenceDetails li {
  font-size: 1.04rem !important;
  line-height: 1.72 !important;
  color: #3d4b5c !important;
}

.conferenceDetails strong {
  color: #12263a !important;
}

.conferenceDetails a,
.page-content a {
  color: var(--cscqm-blue) !important;
  font-weight: 650 !important;
}

.conferenceDetails img {
  max-width: min(100%, 520px) !important;
  height: auto !important;
  display: block !important;
  margin: 28px auto !important;
  border-radius: 16px !important;
  box-shadow: 0 16px 38px rgba(12,50,80,.18) !important;
}

/* Info grid and registration box */
.infogrid,
.action-box {
  padding: 26px 30px !important;
  margin: 0 0 28px !important;
}

.infogrid .infoline {
  border-top: 1px solid var(--cscqm-border) !important;
  padding: 18px 0 !important;
}

.action-box.highlight {
  border-color: rgba(15,110,164,.22) !important;
  background: linear-gradient(135deg, #fff, #f0f8fd) !important;
}

.i-button.next.highlight,
a.i-button.next.highlight {
  background: linear-gradient(135deg, var(--cscqm-blue-dark), var(--cscqm-blue)) !important;
  color: #fff !important;
  border-radius: 999px !important;
  border: 0 !important;
  padding: 10px 18px !important;
  box-shadow: 0 10px 20px rgba(15,110,164,.25) !important;
}

/* Attachment/material page headers: remove harsh orange-on-blue effect */
.groupTitle,
.material-list .folder-title,
.attachment-list .folder-title,
.category-title,
.page-content > h2:first-child {
  color: var(--cscqm-blue-dark) !important;
}

/* Footer */
.footer {
  background: transparent !important;
  border: 0 !important;
  color: var(--cscqm-muted) !important;
}

/* Mobile */
@media (max-width: 800px) {
  .conf {
    max-width: calc(100% - 20px) !important;
  }

  .confTitleBox {
    padding: 30px 22px !important;
    border-radius: 0 0 18px 18px !important;
  }

  .confSubTitleContent {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  #event-search-box {
    min-width: 0 !important;
    width: 100% !important;
  }

  .conf_leftMenu {
    border-radius: 18px !important;
  }

  .conf_leftMenu ul#outer {
    justify-content: stretch !important;
  }

  .conf_leftMenu li.menuConfTitle {
    flex: 1 1 100% !important;
  }

  .conf_leftMenu li.menuConfTitle > a {
    text-align: center !important;
  }

  .conferenceDetails,
  .infogrid,
  .action-box {
    padding: 24px 20px !important;
  }
}

/* ==========================================================
   Robust CSS-only dropdown submenus for horizontal Indico menu
   No :has() dependency; empty Indico submenus stay visually invisible.

   Important: CSS can only display submenu items that Indico actually
   outputs as li elements inside ul.inner. It cannot create missing
   submenu entries by itself.
   ========================================================== */

/* Desktop/tablet with mouse: dropdowns open on hover/focus */
@media (min-width: 801px) {
  .conf_leftMenu,
  .conf_leftMenu nav,
  .conf_leftMenu ul#outer {
    overflow: visible !important;
  }

  .conf_leftMenu ul#outer > li.menuConfTitle {
    position: relative !important;
  }

  /*
     The ul itself is transparent and has no visual box. This is deliberate:
     if Indico creates an empty <ul class="inner"></ul>, nothing visible appears.
     Real dropdown appearance is attached to child li/a elements below.
  */
  .conf_leftMenu ul#outer > li.menuConfTitle > ul.inner {
    display: block !important;
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 50% !important;
    z-index: 9999 !important;

    min-width: 235px !important;
    max-width: min(340px, 90vw) !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateX(-50%) translateY(6px) !important;
    transition: opacity .16s ease, visibility .16s ease, transform .16s ease !important;
  }

  /* Invisible bridge, so the dropdown does not disappear while moving the mouse down. */
  .conf_leftMenu ul#outer > li.menuConfTitle > ul.inner::before {
    content: "" !important;
    position: absolute !important;
    top: -10px !important;
    left: 0 !important;
    right: 0 !important;
    height: 10px !important;
    background: transparent !important;
  }

  .conf_leftMenu ul#outer > li.menuConfTitle:hover > ul.inner,
  .conf_leftMenu ul#outer > li.menuConfTitle:focus-within > ul.inner {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(-50%) translateY(0) !important;
  }

  /* Real dropdown rows. Empty ul.inner has no li, so it stays invisible. */
  .conf_leftMenu ul#outer > li.menuConfTitle > ul.inner > li {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    background: #ffffff !important;
    border-left: 1px solid var(--cscqm-border) !important;
    border-right: 1px solid var(--cscqm-border) !important;
  }

  .conf_leftMenu ul#outer > li.menuConfTitle > ul.inner > li:first-child {
    border-top: 1px solid var(--cscqm-border) !important;
    border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 18px 42px rgba(12, 50, 80, .18) !important;
    position: relative !important;
  }

  .conf_leftMenu ul#outer > li.menuConfTitle > ul.inner > li:last-child {
    border-bottom: 1px solid var(--cscqm-border) !important;
    border-radius: 0 0 16px 16px !important;
  }

  .conf_leftMenu ul#outer > li.menuConfTitle > ul.inner > li:only-child {
    border-radius: 16px !important;
  }

  /* Small arrow exists only if there is at least one submenu item. */
  .conf_leftMenu ul#outer > li.menuConfTitle > ul.inner > li:first-child::before {
    content: "" !important;
    position: absolute !important;
    top: -7px !important;
    left: 50% !important;
    width: 14px !important;
    height: 14px !important;
    transform: translateX(-50%) rotate(45deg) !important;
    background: #ffffff !important;
    border-left: 1px solid var(--cscqm-border) !important;
    border-top: 1px solid var(--cscqm-border) !important;
  }

  .conf_leftMenu ul#outer > li.menuConfTitle > ul.inner > li > a,
  .conf_leftMenu ul#outer > li.menuConfTitle > ul.inner a {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 11px 14px !important;
    border-radius: 10px !important;

    color: var(--cscqm-blue-dark) !important;
    background: transparent !important;
    border: 0 !important;
    font-weight: 650 !important;
    line-height: 1.28 !important;
    text-align: left !important;
    text-decoration: none !important;
    white-space: normal !important;

    transition: background .14s ease, color .14s ease, transform .14s ease !important;
  }

  .conf_leftMenu ul#outer > li.menuConfTitle > ul.inner > li > a:hover,
  .conf_leftMenu ul#outer > li.menuConfTitle > ul.inner > li > a:focus,
  .conf_leftMenu ul#outer > li.menuConfTitle > ul.inner a:hover,
  .conf_leftMenu ul#outer > li.menuConfTitle > ul.inner a:focus {
    color: var(--cscqm-blue-dark) !important;
    background: var(--cscqm-blue-soft) !important;
    transform: translateX(2px) !important;
    outline: none !important;
  }
}

/* Mobile: show subitems as nested buttons. Empty ul.inner has no visible box. */
@media (max-width: 800px) {
  .conf_leftMenu ul#outer > li.menuConfTitle > ul.inner {
    display: block !important;
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .conf_leftMenu ul#outer > li.menuConfTitle > ul.inner > li {
    display: block !important;
    margin: 6px 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  .conf_leftMenu ul#outer > li.menuConfTitle > ul.inner > li > a,
  .conf_leftMenu ul#outer > li.menuConfTitle > ul.inner a {
    display: block !important;
    padding: 9px 12px !important;
    border-radius: 12px !important;
    color: var(--cscqm-blue-dark) !important;
    background: rgba(15, 110, 164, .06) !important;
    border: 1px solid rgba(15, 110, 164, .12) !important;
    text-align: center !important;
    text-decoration: none !important;
    font-weight: 620 !important;
  }

  .conf_leftMenu ul#outer > li.menuConfTitle > ul.inner > li > a:hover,
  .conf_leftMenu ul#outer > li.menuConfTitle > ul.inner > li > a:focus,
  .conf_leftMenu ul#outer > li.menuConfTitle > ul.inner a:hover,
  .conf_leftMenu ul#outer > li.menuConfTitle > ul.inner a:focus {
    background: var(--cscqm-blue-soft) !important;
  }
}