/* ============================================================
   Indico — Blue Sidebar Menu (Nordita-style, rounded & smooth)
   ------------------------------------------------------------
   How to apply:
   1. Go to your event's management area →
      Layout → Customization (or "Layout & Style" → "Custom CSS")
   2. Enable "Use custom CSS" and upload/paste this file.
   3. Save. The left-hand menu (Main Page, Important Dates,
      Accommodation, etc.) will switch from white to a rounded,
      soft-edged blue card with smooth hover transitions.

   Tip: Indico builds the whole menu color scheme from the
   CSS custom properties below, so you only need to change the
   hex values here — no need to touch anything else.

   Font: using a generic sans-serif stack (no web font to load),
   applied to the menu, title, and contact box.
   ============================================================ */


@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
 
:root {
  --event-font-body: 'Inter', 'Liberation Sans', sans-serif;
  --event-font-heading: 'Inter', 'Roboto', sans-serif;
}
 
/* Base body text: paragraphs, lists, tables, general content */
body,
.confBodyBox,
#outer,
.leftMenu,
.support_box {
  font-family: var(--event-font-body) !important;
}
 
/* Event title in the header */
.conference-title-link,
.confTitleBox,
.confTitle h1 {
  font-family: var(--event-font-heading) !important;
}
 
/* Sidebar menu items ("Overview", "Scientific Themes", etc.) */
.menuConfTitle,
.menuConfTitle a,
#outer li a,
.sublink {
  font-family: var(--event-font-body) !important;
}
 
/* Section headings inside the page content (h2, h3, etc.) */
.confBodyBox h1,
.confBodyBox h2,
.confBodyBox h3,
.confBodyBox h4 {
  font-family: var(--event-font-heading) !important;
}
 
/* Support/contact box */
.support_box > h3 {
  font-family: var(--event-font-heading) !important;
}
 

:root {
  /* Sidebar menu background */
  --conf-theme-menu-bg: #0d1b2e;
  --conf-theme-menu-border: #0d1b2e;

  /* Menu link (unselected item) text color */
  --conf-theme-menu-link: #e8eef5;

  /* Currently active/selected page (e.g. "Main Page") */
  --conf-theme-menu-selected: #2ecc71;
  --conf-theme-menu-selected-bg: #16314f;
  --conf-theme-menu-selected-border: #16314f;

  /* Hover state when mousing over a menu item */
  --conf-theme-hover-bg: #1c3454;
  --conf-theme-hover-color: #ffffff;

  /* Shared "smoothness" tokens */
  --menu-radius: 12px;
  --menu-item-radius: 8px;
  --menu-transition: all 0.18s ease;

  /* Fonts: generic sans-serif, no Google Font import needed */
  --event-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial,
    sans-serif;
  --event-font-heading: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial,
    sans-serif;
}

/* The menu container itself: rounded card with a soft shadow
   instead of a hard-edged box */
#outer {
  background: var(--conf-theme-menu-bg);
  border: 1px solid var(--conf-theme-menu-border);
  border-radius: var(--menu-radius);
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  font-family: var(--event-font-body) !important;
}

/* The top "Main Page" title box — legacy rule that isn't
   driven by a variable, so it needs an explicit override.
   Rounded on top to match the container's corners. */
.menuConfTitle {
  background: var(--conf-theme-menu-bg);
  color: var(--conf-theme-menu-link);
  border-radius: var(--menu-radius) var(--menu-radius) 0 0;
}

.menuConfTitle a {
  color: var(--conf-theme-menu-link);
  transition: var(--menu-transition);
  font-family: var(--event-font-body) !important;
}

/* Every menu row gets a little breathing room and a smooth,
   rounded "pill" highlight instead of a flat hard-edged block */
#outer li {
  margin: 2px 6px;
}

/* if "Use logo as banner" is OFF */
.confLogo {
  max-height: 350px;
  width: 400px;
}

.conference-title-link {
  font-family: var(--event-font-heading) !important;
  font-size: 28pt;
  font-weight: 600;
  line-height: 1.3;
}


.confSubTitleContent,
.confSubTitle,
.datePlace .date,
.datePlace .place,
.datePlace .timezone {
  color: #ffffff;
}


#outer li a {
  display: block;
  border-radius: var(--menu-item-radius);
  transition: var(--menu-transition);
  font-family: var(--event-font-body) !important;
}

#outer li a:hover {
  background: var(--conf-theme-hover-bg);
  color: var(--conf-theme-hover-color);
  border-radius: var(--menu-item-radius);
}

/* Selected / active item — rounded highlight, smooth transition */
.menuConfSelected,
.menuConfMiddleCellSelected {
  border-radius: var(--menu-item-radius);
  transition: var(--menu-transition);
}

.menuConfSelected a {
  color: var(--conf-theme-menu-link);
}

/* Sub-links / secondary items under a section */
.sublink {
  color: #b7c3d6;
  transition: var(--menu-transition);
  font-family: var(--event-font-body) !important;
}

/* "No link" placeholder items */
#outer li a.no-link {
  color: #b7c3d6;
}

/* ------------------------------------------------------------
   Optional: also recolor the "Contact" support box at the
   bottom of the menu so it blends into the same rounded blue
   theme. Delete this block if you want to keep it as-is.
   ------------------------------------------------------------ */
.support_box {
  background: #16314f;
  border: 1px solid #0d1b2e;
  border-radius: var(--menu-radius);
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  margin-top: 12px;
  font-family: var(--event-font-body) !important;
}

.support_box > h3 {
  background: #0d1b2e;
  color: #ffffff;
  border-radius: var(--menu-radius) var(--menu-radius) 0 0;
  font-family: var(--event-font-heading) !important;
}

.support_box a,
.support_box > ul > li {
  color: #e8eef5;
  transition: var(--menu-transition);
  font-family: var(--event-font-body) !important;
}

.support_box a:hover {
  color: #2ecc71;
}