/*
=========================================================
 HFES EUROPE – FINAL CLEAN INDICO THEME
 Clean rebuild without temporary workaround overrides.

 Header:
 [ HFES logo ] | [ Conference title ]              [ hexagons ]
=========================================================
*/

:root {
  --hfes-navy: #123764;
  --hfes-navy-dark: #0b2d56;
  --hfes-blue: #176b94;
  --hfes-teal: #009eb8;
  --hfes-cyan: #37b8c9;
  --hfes-lime: #c6db2a;
  --hfes-text: #27384c;
  --hfes-border: #d8e2ea;
}


/* =====================================================
   GENERAL
===================================================== */

.conf {
  width: 100%;
  border: none;
  margin: auto;

  background: #ffffff;
  color: var(--hfes-text);

  font-family: Arial, Helvetica, sans-serif;
}


/* =====================================================
   UPPER CONFERENCE HEADER
===================================================== */

.confTitleBox {
  min-height: 145px;

  border-top: 4px solid var(--hfes-teal);
  border-bottom: 1px solid #e2e9ee;

  background-color: #ffffff;

  /*
    Decorative HFES-inspired hexagons.
  */
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22500%22%20height%3D%22145%22%20viewBox%3D%220%200%20500%20145%22%3E%0A%20%20%3C%21--%20dotted%20accent%20--%3E%0A%20%20%3Cg%20fill%3D%22%23009eb8%22%20opacity%3D%22.25%22%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22248%22%20cy%3D%2238%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%22260%22%20cy%3D%2238%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%22272%22%20cy%3D%2238%22%20r%3D%222%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22248%22%20cy%3D%2250%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%22260%22%20cy%3D%2250%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%22272%22%20cy%3D%2250%22%20r%3D%222%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22248%22%20cy%3D%2262%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%22260%22%20cy%3D%2262%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%22272%22%20cy%3D%2262%22%20r%3D%222%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%0A%20%20%3C%21--%20outline%20hexagons%20--%3E%0A%20%20%3Cg%20fill%3D%22none%22%20stroke%3D%22%23009eb8%22%20stroke-width%3D%221.5%22%3E%0A%20%20%20%20%3Cpolygon%20opacity%3D%22.55%22%20points%3D%22300%2C18%20314%2C10%20328%2C18%20328%2C34%20314%2C42%20300%2C34%22%2F%3E%0A%20%20%20%20%3Cpolygon%20opacity%3D%22.42%22%20points%3D%22346%2C78%20361%2C70%20376%2C78%20376%2C95%20361%2C103%20346%2C95%22%2F%3E%0A%20%20%20%20%3Cpolygon%20opacity%3D%22.40%22%20points%3D%22404%2C22%20418%2C14%20432%2C22%20432%2C38%20418%2C46%20404%2C38%22%2F%3E%0A%20%20%20%20%3Cpolygon%20opacity%3D%22.36%22%20points%3D%22446%2C70%20461%2C62%20476%2C70%20476%2C87%20461%2C95%20446%2C87%22%2F%3E%0A%20%20%20%20%3Cpolygon%20opacity%3D%22.34%22%20points%3D%22322%2C100%20334%2C93%20346%2C100%20346%2C114%20334%2C121%20322%2C114%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%0A%20%20%3C%21--%20translucent%20filled%20hexagons%20--%3E%0A%20%20%3Cpolygon%20fill%3D%22%2337b8c9%22%20opacity%3D%22.14%22%20points%3D%22332%2C34%20351%2C23%20370%2C34%20370%2C56%20351%2C67%20332%2C56%22%2F%3E%0A%20%20%3Cpolygon%20fill%3D%22%23176b94%22%20opacity%3D%22.09%22%20points%3D%22382%2C52%20402%2C41%20422%2C52%20422%2C75%20402%2C86%20382%2C75%22%2F%3E%0A%20%20%3Cpolygon%20fill%3D%22%2337b8c9%22%20opacity%3D%22.11%22%20points%3D%22430%2C16%20447%2C7%20464%2C16%20464%2C36%20447%2C45%20430%2C36%22%2F%3E%0A%0A%20%20%3C%21--%20solid%20accent%20hexagons%20--%3E%0A%20%20%3Cpolygon%20fill%3D%22%23009eb8%22%20opacity%3D%22.92%22%20points%3D%22456%2C14%20480%2C0%20504%2C14%20504%2C42%20480%2C56%20456%2C42%22%2F%3E%0A%20%20%3Cpolygon%20fill%3D%22%23c6db2a%22%20opacity%3D%22.92%22%20points%3D%22424%2C94%20439%2C85%20454%2C94%20454%2C112%20439%2C121%20424%2C112%22%2F%3E%0A%3C%2Fsvg%3E");

  background-repeat: no-repeat;
  background-position: right center;
  background-size: 500px 145px;
}


/*
  Main header content width.
*/
.confTitle {
  width: 1100px;
  max-width: calc(100% - 50px);

  margin: 0 auto;
}


/*
  In Indico, .conference-title-link contains both
  the logo box and the actual title span.
*/
.conference-title-link {
  box-sizing: border-box;

  min-height: 145px;

  display: flex !important;
  align-items: center;
  justify-content: flex-start;

  margin: 0 !important;
  padding: 0 !important;

  color: var(--hfes-navy) !important;

  font-family: Arial, Helvetica, sans-serif;
  text-decoration: none !important;
}


/*
  Logo on the left with a vertical divider.
*/
.conference-title-link > .confLogoBox,
.confLogoBox {
  float: none !important;
  flex: 0 0 auto;

  box-sizing: border-box;

  display: flex;
  align-items: center;
  justify-content: flex-start;

  min-height: 92px;

  margin: 18px 30px 18px 0 !important;
  padding: 0 30px 0 0 !important;

  border-right: 1px solid #cdd9e2;
}


/*
  Logo size: intentionally restrained.
  No fixed width, only maximum dimensions.
*/
.confLogoBox img {
  display: block;

  max-width: 220px;
  max-height: 78px;

  width: auto !important;
  height: auto !important;

  margin: 0 !important;
}


/*
  Conference title directly to the right of the divider.
*/
.conference-title-link > span {
  display: block !important;

  margin: 0 !important;
  padding: 0 !important;

  max-width: 430px;

  color: var(--hfes-navy) !important;

  font-size: 28pt;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.5px;

  text-align: left;
  white-space: normal;
}


/* No subtitle generated through CSS. */
.conference-title-link::after,
.conference-title-link > span::after {
  content: none !important;
  display: none !important;
}


.conference-title-link:hover,
.conference-title-link:hover > span {
  color: var(--hfes-blue) !important;
  text-decoration: none !important;
}


/* =====================================================
   LOWER HEADER / DATE + LOCATION BAR
===================================================== */

.confSubTitleBox {
  background:
    linear-gradient(
      110deg,
      var(--hfes-navy-dark) 0%,
      var(--hfes-navy) 52%,
      #1c7898 100%
    );

  border: none;
  border-bottom: 4px solid var(--hfes-teal);

  padding: 18px 0;

  box-shadow: 0 4px 12px rgba(22, 57, 104, 0.12);
}


.confSubTitleContent {
  width: 1100px;
  max-width: calc(100% - 50px);

  margin: 0 auto;

  font-size: 11pt;
  line-height: 1.45;

  color: rgba(255,255,255,0.95);
}


.confSubTitleContent,
.confSubTitleContent span {
  color: rgba(255,255,255,0.95);
}


.confSubTitle a {
  font-size: 11pt;

  color: #6ad5e3 !important;
  text-decoration: none;
}


.confSubTitle a:hover {
  color: #ffffff !important;
}


.datePlace {
  font-size: 12pt;
  color: #ffffff !important;
}


/* =====================================================
   ANNOUNCEMENT
===================================================== */

.simpleTextAnnouncement {
  background:
    linear-gradient(
      90deg,
      #eef9fb,
      #f8fcfd
    );

  border-top: none;
  border-bottom: 1px solid #d8e8ec;

  font-family: Arial, Helvetica, sans-serif;
  font-weight: 600;
  font-size: 10pt;

  text-align: center;

  color: var(--hfes-navy);

  padding: 9px 0;
}


/* =====================================================
   MAIN CONTENT
===================================================== */

#confSectionsBox {
  width: 1100px;
  max-width: calc(100% - 50px);

  margin: 34px auto 0 auto;
}


/*
  Small HFES accent above the content area.
*/
#confSectionsBox::before {
  content: "";

  display: block;

  width: 55px;
  height: 4px;

  margin-bottom: 28px;

  border-radius: 10px;

  background:
    linear-gradient(
      90deg,
      var(--hfes-teal) 0 70%,
      var(--hfes-lime) 70% 100%
    );
}


/* =====================================================
   LEFT MENU
===================================================== */

.conf_leftMenu {
  float: left;
  width: 220px;
}


#outer {
  border: 1px solid var(--hfes-border);

  background: #ffffff;

  border-radius: 6px;
  overflow: hidden;

  box-shadow: 0 5px 18px rgba(19, 52, 86, 0.08);
}


#outer li a {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10pt;

  color: var(--hfes-text);
}


#outer li a:hover {
  background: #edf7f9;
  color: var(--hfes-navy);
}


.menuConfTitle {
  text-align: left;
}


.menuConfTitle a {
  color: var(--hfes-text);
  padding: 9px 12px;
}


.menuConfTitle.selected > a,
.menuConfMiddleCell.selected > a {
  position: relative;

  color: #ffffff !important;

  background:
    linear-gradient(
      100deg,
      var(--hfes-navy-dark),
      var(--hfes-navy)
    );

  border: none;

  font-weight: 600;
}


.menuConfTitle.selected > a::before,
.menuConfMiddleCell.selected > a::before {
  content: "";

  position: absolute;

  top: 0;
  bottom: 0;
  left: 0;

  width: 4px;

  background: var(--hfes-teal);
}


li ul.inner li a {
  padding: 5px 12px 5px 30px;

  background:
    transparent
    url(/images/conf/left_menu_bullet.png)
    scroll
    no-repeat
    15px center;
}


/* =====================================================
   SUPPORT BOX
===================================================== */

.support_box {
  background: #ffffff;

  border: 1px solid var(--hfes-border);

  border-radius: 6px;
  overflow: hidden;

  box-shadow: 0 4px 14px rgba(20, 55, 85, 0.06);
}


.support_box > h3 {
  color: #ffffff;

  background:
    linear-gradient(
      100deg,
      var(--hfes-navy-dark),
      var(--hfes-navy)
    );
}


/* =====================================================
   PAGE CONTENT
===================================================== */

.confBodyBox {
  margin-left: 260px;
}


.confBodyBox h1,
.confBodyBox h2,
.confBodyBox h3 {
  font-family: Arial, Helvetica, sans-serif;
  color: var(--hfes-navy);
}


.confBodyBox a {
  color: #007f9d;
}


.confBodyBox a:hover {
  color: var(--hfes-navy);
}


/*
  Remove Indico's orange heading accents inside the page content.
  Menu colors are intentionally not affected.
*/
#confSectionsBox .confBodyBox h1,
#confSectionsBox .confBodyBox h2,
#confSectionsBox .confBodyBox h3,
#confSectionsBox .confBodyBox .page-header,
#confSectionsBox .confBodyBox .page-header h1,
#confSectionsBox .confBodyBox .page-header h2,
#confSectionsBox .confBodyBox .page-header h3,
#confSectionsBox .confBodyBox .page-title,
#confSectionsBox .confBodyBox .section-title,
#confSectionsBox .confBodyBox .i-box-header,
#confSectionsBox .confBodyBox .i-box-header h1,
#confSectionsBox .confBodyBox .i-box-header h2,
#confSectionsBox .confBodyBox .i-box-header h3 {
  color: var(--hfes-navy) !important;
}


#confSectionsBox .confBodyBox h1,
#confSectionsBox .confBodyBox h2,
#confSectionsBox .confBodyBox .page-header,
#confSectionsBox .confBodyBox .page-title,
#confSectionsBox .confBodyBox .section-title {
  border-color: var(--hfes-teal) !important;
}


/* =====================================================
   INDICO CONTENT BOXES
===================================================== */

.confBodyBox .i-box,
.confBodyBox .action-box,
.confBodyBox .info-line,
.confBodyBox .event-info {
  border-radius: 6px;

  border-color: #dce6ec;

  box-shadow: 0 4px 14px rgba(20, 55, 85, 0.05);
}


.confBodyBox .action-box {
  background:
    linear-gradient(
      100deg,
      #f4fbfc 0%,
      #eaf5f8 100%
    );

  border: 1px solid #8ed4df;
  border-left: 5px solid var(--hfes-teal);

  box-shadow: 0 5px 16px rgba(0, 126, 153, 0.07);
}


/* =====================================================
   BUTTONS
===================================================== */

.confBodyBox .i-button.highlight,
.confBodyBox .i-button.primary {
  background:
    linear-gradient(
      100deg,
      #008ba7,
      var(--hfes-teal)
    ) !important;

  border-color: #008ba7 !important;

  color: #ffffff !important;

  font-weight: 600;

  box-shadow: 0 3px 8px rgba(0, 157, 181, 0.18);
}


.confBodyBox .i-button.highlight:hover,
.confBodyBox .i-button.primary:hover {
  background:
    linear-gradient(
      100deg,
      var(--hfes-navy),
      #176b94
    ) !important;

  border-color: var(--hfes-navy) !important;
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media screen and (max-width: 900px) {

  .confTitleBox {
    background-size: 360px 105px;
    background-position: 120% 10px;
  }


  .conference-title-link {
    min-height: 0;

    flex-direction: column;
    align-items: flex-start;

    padding: 20px 0 !important;
  }


  .conference-title-link > .confLogoBox,
  .confLogoBox {
    margin: 0 0 14px 0 !important;
    padding: 0 0 14px 0 !important;

    min-height: 0;

    border-right: none;
    border-bottom: 1px solid #cdd9e2;
  }


  .confLogoBox img {
    max-width: 210px;
    max-height: 72px;
  }


  .conference-title-link > span {
    max-width: none;
    font-size: 24pt;
  }


  .conf_leftMenu {
    float: none;
    width: 100%;
    margin-bottom: 28px;
  }


  .confBodyBox {
    margin-left: 0;
  }
}


@media screen and (max-width: 600px) {

  .confTitleBox {
    background-image: none;
  }


  .confTitle,
  .confSubTitleContent,
  #confSectionsBox {
    max-width: calc(100% - 30px);
  }


  .conference-title-link > span {
    font-size: 21pt;
  }
}

/* =====================================================
   FIX: HOVER ON CURRENTLY SELECTED MENU ITEM
   The generic #outer li a:hover rule is more specific than
   the selected-item rule, so it previously washed out the
   active navigation item on mouseover.
===================================================== */

#outer .menuConfTitle.selected > a:hover,
#outer .menuConfMiddleCell.selected > a:hover {
  color: #ffffff !important;

  background:
    linear-gradient(
      100deg,
      var(--hfes-navy),
      var(--hfes-blue)
    ) !important;
}

/* Keep the teal active indicator visible while hovering */
#outer .menuConfTitle.selected > a:hover::before,
#outer .menuConfMiddleCell.selected > a:hover::before {
  background: var(--hfes-teal) !important;
}

/* =====================================================
   ABSTRACT SUBMISSION FORM
   Hide Indico's built-in "Comments" field.
===================================================== */

#form-group-submission_comment {
  display: none !important;
}

#form-group-person_links .form-field::after {
  content: "Please enter the name and email address of the presenting author completely and correctly, as this author will receive all communication regarding the submission. Co-authors may be added with their full details, in which case they will also receive automatic updates from the system. This is not mandatory: if you prefer, you can simply list your co-authors in the comments field instead, in which case they will not receive automatic notifications.";
  display: block;
  margin-top: 4px;

  font-size: inherit;
  font-style: italic;
  line-height: 1.35;
  color: #888;
}

#form-group-submitted_contrib_type .form-field::after {
  content: "We are very pleased by the growing interest in the conference and the increasing number of abstract submissions. However, due to space constraints, the number of poster presentations at the current and future meetings may be limited.";
  display: block;
  margin-top: 4px;

  font-size: inherit;
  font-style: italic;
  line-height: 1.35;
  color: #888;
}

/* Hide unnecessary author contact fields */
.ui.modal .field:has([name="address"]),
.ui.modal .field:has([name="phone"]) {
  display: none !important;
}

/* =====================================================
   ABSTRACT AUTHOR BUTTON
   Rename "Enter manually" -> "Add (Co-)author"
===================================================== */

#form-group-person_links button.ui.button:has(> i.keyboard.icon) {
  position: relative;
  width: 160px;

  /* hide original text only visually */
  color: transparent !important;
}

/* Keep and position keyboard icon */
#form-group-person_links button.ui.button:has(> i.keyboard.icon) > i.keyboard.icon {
  visibility: visible;
  position: absolute;

  left: 14px;
  top: 50%;
  transform: translateY(-50%);

  color: rgba(0, 0, 0, 0.6) !important;
  font-size: inherit;
}

/* Replacement text */
#form-group-person_links button.ui.button:has(> i.keyboard.icon)::after {
  content: "Add (Co-)author";

  position: absolute;
  left: 35px;
  right: 10px;
  top: 50%;
  transform: translateY(calc(-50% + 1px));

  color: rgba(0, 0, 0, 0.6);

  font: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-align: left;
  white-space: nowrap;
}

/* Visually mark additional person fields as required */
.ui.modal label[for="finalfield-firstName"]::after,
.ui.modal label[for*="affiliation"]::after,
.ui.modal label[for*="email"]::after {
  content: " *";
  color: #e74c3c;
}


/* Replace event date visually, preserving Indico's original styling */
.confheader .datePlace > .date {
  visibility: hidden;
  position: relative;
}

.confheader .datePlace > .date::after {
  content: "28 – 30 April 2027";
  visibility: visible;
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
}