/* =========================================================================
   css for CUBES 2026 / Indico legacy conference header
   - 2026.01.18. [W.S.Cho (IBS CTPU-PTC)]
   - Center title
   - Fluid header width (remove 950px constraint)
   - Background image + overlay
   - Readability safe set (color + text-shadow + search box visibility)
   ========================================================================= */


/* -----------------------------
   (A) Header background image
   ----------------------------- */

/* Put the image on the whole header container (override inline bg) */
/* https://indico.ibs.re.kr/event/1189/attachments/5552/8462/jirisan_flower_0.jpg */
/* https://yosanyosoo.com/xe/files/attach/images/115/270/055/d9604aac6ef97ed5f3e57acb3da1254d.jpg */
.confheader {
  background: #0e304c url("https://yosanyosoo.com/xe/files/attach/images/115/270/055/d9604aac6ef97ed5f3e57acb3da1254d.jpg") center/cover no-repeat !important;
  border-color: transparent !important;
  position: relative;
}

/* Make inner header boxes transparent so the image shows through */
.confheader .confTitleBox,
.confheader .confSubTitleBox {
  background: transparent !important;
  border-color: transparent !important;
}

/* Dark overlay to guarantee contrast on bright images (tune alpha) */
.confheader::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Option 1: flat overlay */
  /* background: rgba(14, 48, 76, 0.55); */

  /* Option 2: subtle gradient overlay */
  background: linear-gradient(
    rgba(14, 48, 76, 0.70),
    rgba(14, 48, 76, 0.55)
  );
  pointer-events: none;
}

/* Ensure header content sits above overlay */
.confheader > * {
  position: relative;
  z-index: 1;
}


/* -----------------------------
   (B) Make header content fluid
   (default is width:950px in legacy theme)
   ----------------------------- */

.confheader .confTitleBox .confTitle {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 1.25rem;
  box-sizing: border-box;
}

.confheader .confSubTitleBox .confSubTitleContent {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 1.25rem;
  box-sizing: border-box;
}


/* -----------------------------
   (C) Center the main title
   (legacy default has text-align:left on confTitleBox)
   ----------------------------- */

.confheader .confTitleBox,
.confheader .confTitleBox .confTitle,
.confheader .confTitleBox .confTitle h1 {
  text-align: center !important;
  line-height: 8;
  margin: 0;
}

.confheader .confTitleBox .confTitle h1 > a {
  display: block !important; /* full-width clickable line */
}

/* Force title wrapper + text centered (override inline color if needed) */
.confheader .conference-title-link {
  display: block;
  width: 100%;
  text-align: center !important;
  color: #FFFFFF !important;    /* #F4F1E3 warm off-white; change if prefer */
  font-size: 45px !important;   /*clamp(32px, 3.6vw, 60px); */ /* Bigger title (responsive) or just use explicit number e.g. 52px*/
  padding: 0px 0 0px 0 !important;  /* 위/아래 여백 */
  margin: 0 !important;
}

/* Title readability: shadow (do not rely on shadow alone; overlay does the heavy lifting) */
.confheader .conference-title-link,
.confheader .conference-title-link span[itemprop="title"] {
  text-shadow:
    0 2px 10px rgba(0,0,0,0.55),
    0 0 1px rgba(0,0,0,0.85);
}



/* -----------------------------
   (D) Subtitle row: center date/place, keep search box right
   (our DOM: .confSubTitleContent.flexrow with #event-search-box sibling)
   ----------------------------- */

.confheader .confSubTitleBox .confSubTitleContent.flexrow {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 1rem;
}

/* date/place centered */
.confheader .confSubTitleBox .confSubTitleContent.flexrow .confSubTitle {
  grid-column: 2;
  justify-self: center;
  text-align: center !important;
  color: #FFFFFF !important;    /* #F4F1E3, warm off-white; change if prefer; color: rgba(244,241,227,0.92) !important; */
  text-shadow:
    0 2px 8px rgba(0,0,0,0.45),
    0 0 1px rgba(0,0,0,0.75);
}

/* timezone a bit dimmer */
.confheader .confSubTitleBox .confSubTitleContent .datePlace .timezone {
  color: rgba(244,241,227,0.75) !important;
}

/* search box right */
.confheader .confSubTitleBox .confSubTitleContent.flexrow #event-search-box {
  grid-column: 3;
  justify-self: end;
}

/* Make search box readable on image background */
.confheader #event-search-box .ui.input {
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.20);
}

.confheader #event-search-box input {
  color: rgba(255,255,255,0.92) !important;
}

.confheader #event-search-box input::placeholder {
  color: rgba(255,255,255,0.70);
}

/* search icon color */
.confheader #event-search-box i.search.icon {
  color: rgba(255,255,255,0.80) !important;
}

/* Mobile: stack subtitle/search */
@media (max-width: 768px) {
  .confheader .confSubTitleBox .confSubTitleContent.flexrow {
    grid-template-columns: 1fr !important;
    row-gap: 0.6rem;
  }
  .confheader .confSubTitleBox .confSubTitleContent.flexrow .confSubTitle {
    grid-column: 1;
  }
  .confheader .confSubTitleBox .confSubTitleContent.flexrow #event-search-box {
    grid-column: 1;
    justify-self: center;
    width: min(520px, 100%);
  }
}


/* -----------------------------
   (E) Body paragraph justify 
   ----------------------------- */

.confBodyBox p {
  text-align: justify;
  text-align-last: left;
  hyphens: auto;
  overflow-wrap: break-word;
}