/* ==========================================================================
   Hel.A.S. conference theme for Indico (conference layout)
   Upload: Event → Customization → Layout → Stylesheet
   Targets Indico 3.x conference templates. Check your instance's version.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Noto+Sans:wght@400;600;700&display=swap");

:root {
  /* Palette taken from the 2027 banner */
  --helas-accent:        #0f3d7a;   /* navy: headings, menu text, rules */
  --helas-accent-light:  #1ba1dc;   /* cyan: highlights, bullets, hover */
  --helas-ink:           #1d2230;   /* body text */
  --helas-muted:         #5d6474;
  --helas-link:          #1677b8;
  --helas-rule:          #e3e8ef;
  --helas-sidebar:       #f4f7fb;

  /* Manrope: geometric, close to the banner lettering, has Greek glyphs */
  --helas-font-display: "Manrope", "Noto Sans", "Segoe UI", sans-serif;
  --helas-font-body:    "Noto Sans", "Segoe UI", Tahoma, sans-serif;
}

/* ---------- Base typography -------------------------------------------- */

.conference-page,
.conf {
  font-family: var(--helas-font-body);
  color: var(--helas-ink);
  line-height: 1.6;
}

.conf a { color: var(--helas-link); text-decoration: none; }

/* Display font for headings, menu, contact box and buttons */
.conf h1, .conf h2, .conf h3, .conf h4,
.conf .conf_leftMenu, .conf .conf_leftMenu a,
.conf .support_box h3,
.conf .infogrid > h2,
.conf .i-button, .conf .ui.button {
  font-family: var(--helas-font-display) !important;
  letter-spacing: -.005em;
}
.conf a:hover { text-decoration: underline; }

/* ---------- Header: full-width banner image ----------------------------- */
/* Upload the banner as the event Logo and tick "logo as banner"           */
/* (Customization → Layout). The banner already carries title and dates,   */
/* so Indico's own text title and dates are hidden.                        */
/* !important is needed because Indico writes the Layout colours inline.  */

.conf .confheader,
.conf .confTitleBox,
.conf .confSubTitleBox {
  background: #fff !important;
  border: 0;
  padding: 0;
  min-height: 0;
}

.conf .confheader {
  border-bottom: 4px solid var(--helas-accent-light);
}

/* Soft sky tone on either side of the banner on wide screens */
.conf .confheader,
.conf .confTitleBox {
  background: linear-gradient(180deg, #eaf4fb 0%, #ffffff 100%) !important;
}

/* Force every wrapper around the logo to full width (Indico floats/shrinks them) */
.conf .confTitleBox,
.conf .confTitle,
.conf .confTitle h1,
.conf .confTitle h1 a,
.conf .conference-title-link {
  display: block !important;
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  text-decoration: none;
}

/* Banner: same width as the page content, centred, never taller than 440px */
.conf .confLogoBannerBox,
.conf .confLogoBox {
  display: block !important;
  float: none !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.conf .confLogoBannerBox img,
.conf .confLogoBox img {
  display: block;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  max-height: 440px !important;
  object-fit: cover;
}

/* Keep the title for screen readers and search engines, hide it visually */
.conf .conference-title-link [itemprop="title"] {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Slim bar under the banner: dates hidden (they are in the image), search kept */
.conf .confSubTitleBox {
  border-top: 1px solid var(--helas-rule);
}
.conf .confSubTitleBox,
.conf .confSubTitleContent,
.conf .confSubTitle {
  min-height: 0 !important;
  height: auto !important;
}
.conf .confSubTitleContent {
  align-items: center;
  justify-content: flex-end;
  max-width: 1200px;
  margin: 0 auto;
  padding: 6px 0;
}
.conf .confSubTitle { padding: 0 !important; }
.conf .confSubTitle,
.conf .confSubTitle .datePlace { color: var(--helas-accent) !important; }
.conf .datePlace { display: none; }

/* Announcement bar under the header */
.conf .simpleTextAnnouncement {
  margin: 0;
  padding: 8px 24px;
  background: var(--helas-accent);
  color: #fff;
  font-weight: 600;
  border: 0;
}

/* ---------- Layout: sidebar + content ---------------------------------- */

#confSectionsBox {
  background: #fff;
}

.conf .conf_leftMenu {
  float: left;
  width: 260px;
  padding: 24px 0 24px 18px;
  box-sizing: border-box;
}

.conf .confBodyBox {
  margin-left: 260px;
  padding: 8px 36px 40px;
  border-left: 1px solid var(--helas-rule);
  min-height: 60vh;
}

.conf .event-menu-heading { display: none; }

/* ---------- Menu: arrow-bullet rows with separators -------------------- */

.conf .conf_leftMenu ul#outer {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 3px solid var(--helas-rule);
  background: var(--helas-sidebar);
  border-radius: 0 0 8px 8px;
}

.conf .conf_leftMenu li.menuConfTitle {
  border-bottom: 3px solid var(--helas-rule);
  margin: 0;
  padding: 0;
}

.conf .conf_leftMenu li.menuConfTitle > a {
  position: relative;
  display: block;
  padding: 12px 12px 12px 46px;
  color: var(--helas-ink);
  font-weight: 700;
  font-size: .92rem;
  transition: background .15s, color .15s;
}

/* round arrow icon */
.conf .conf_leftMenu li.menuConfTitle > a::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #7fd3f5, #1ba1dc 70%);
  box-shadow: inset 0 0 0 1px rgba(15,61,122,.35);
}
.conf .conf_leftMenu li.menuConfTitle > a::after {
  content: "";
  position: absolute;
  left: 19px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  transition: transform .15s;
}

.conf .conf_leftMenu li.menuConfTitle > a:hover {
  background: #fff;
  color: var(--helas-accent-light);
  text-decoration: none;
}
.conf .conf_leftMenu li.menuConfTitle > a:hover::after { transform: translateX(2px) rotate(45deg); }

.conf .conf_leftMenu li.selected > a {
  background: #fff;
  color: var(--helas-accent);
  box-shadow: inset 4px 0 0 var(--helas-accent);
}

/* sub-entries */
.conf .conf_leftMenu ul.inner {
  list-style: none;
  margin: 0;
  padding: 0 0 8px 46px;
}
.conf .conf_leftMenu li.menuConfMiddleCell > a {
  display: block;
  padding: 4px 8px;
  color: var(--helas-muted);
  font-size: .87rem;
  font-weight: 600;
}
.conf .conf_leftMenu li.menuConfMiddleCell.selected > a,
.conf .conf_leftMenu li.menuConfMiddleCell > a:hover { color: var(--helas-accent); text-decoration: none; }

.conf .conf_leftMenu li.spacer { height: 14px; border-bottom: 3px solid var(--helas-rule); }

/* contact box under the menu */
.conf .support_box {
  margin-top: 24px;
  padding: 14px 16px;
  background: var(--helas-sidebar);
  border: 0;
  border-left: 4px solid var(--helas-accent);
  border-radius: 6px;
}
.conf .support_box h3 {
  margin: 0 0 6px;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--helas-accent);
  background: none;
  border: 0;
  padding: 0;
}
.conf .support_box ul { list-style: none; margin: 0; padding: 0; font-size: .88rem; }

/* ---------- Content ---------------------------------------------------- */

.conf .confBodyBox header h2,
.conf .confBodyBox .description h1,
.conf .confBodyBox .description h2,
.conf .confBodyBox .editor-output h1,
.conf .confBodyBox .editor-output h2 {
  color: var(--helas-accent);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.25;
  margin: 18px 0 14px;
}

.conf .confBodyBox .description h3,
.conf .confBodyBox .editor-output h3 {
  color: var(--helas-accent);
  font-size: 1.2rem;
  margin: 22px 0 8px;
}

.conf .description p,
.conf .editor-output p {
  text-align: left;
  margin: 0 0 12px;
}

.conf .description hr,
.conf .editor-output hr {
  width: 50%;
  margin: 28px auto;
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--helas-ink), transparent);
}

.conf .description img,
.conf .editor-output img { max-width: 100%; height: auto; }

/* Invited speakers: use a bulleted list in the editor */
.conf .description ul,
.conf .editor-output ul { padding-left: 1.1em; }
.conf .description li,
.conf .editor-output li { margin-bottom: 6px; }
.conf .description li::marker,
.conf .editor-output li::marker { color: var(--helas-accent); }

/* Sponsor logos: put them in a one-row table in the editor */
.conf .description table,
.conf .editor-output table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0 24px;
}
.conf .description td,
.conf .editor-output td {
  text-align: center;
  vertical-align: middle;
  padding: 10px;
  border: 0;
}
.conf .description td img,
.conf .editor-output td img {
  max-height: 90px;
  filter: grayscale(.2);
  transition: filter .2s, transform .2s;
}
.conf .description td img:hover,
.conf .editor-output td img:hover { filter: none; transform: scale(1.04); }

/* "Conference information" box on the overview page */
.conf .infogrid {
  margin-top: 32px;
  padding: 18px 22px;
  background: var(--helas-sidebar);
  border-radius: 8px;
  border-top: 3px solid var(--helas-accent);
}
.conf .infogrid > h2 {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--helas-accent);
  margin: 0 0 10px;
}
.conf .infogrid .infoline h3 { color: var(--helas-muted); }

/* Buttons (registration, abstract submission) */
.conf .confBodyBox .i-button.highlight,
.conf .confBodyBox .ui.primary.button {
  background: var(--helas-accent) !important;
  border-color: var(--helas-accent) !important;
  color: #fff !important;
}

/* ---------- Mobile ----------------------------------------------------- */

@media (max-width: 800px) {
  .conf .conf_leftMenu { float: none; width: auto; padding: 12px 12px 0; }
  .conf .confBodyBox { margin-left: 0; padding: 8px 16px 32px; border-left: 0; }

  .conf .description p,
  .conf .editor-output p { text-align: left; }
  .conf .description td,
  .conf .editor-output td { display: inline-block; width: 45%; box-sizing: border-box; }
}