/*
  ABM4ENERGY – Indico Custom Stylesheet (clean, Variant A applied)
  - Brand colors + Nunito Sans
  - Hero header with background image + overlay
  - Subtitle rendered inside hero (no colored stripe)
  - Copyright chip attached to title and positioned relative to viewport width
  - Conservative selectors to avoid breaking menus/toolbars
*/

/* ---------- Load Nunito Sans ---------- */
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;700;800&display=swap');

/* ---------- Theme variables ---------- */
:root {
  --brand-primary: #39b4a2;       /* Accent */
  --brand-secondary: #0d2b66;     /* Dark accents */
  --brand-black: #1f2124;         /* Base text */

  /* Replace with same-origin asset URLs if possible */
  --hero-url: url("https://events.hifis.net/event/2964/images/934-innere-stadt.jpg");
  --footer-logos-url: url("https://events.hifis.net/event/2964/images/936-Logos.jpg");

  --hero-overlay: rgba(57,180,162,0.65); /* #39b4a2 @ 65% */
}

/* ---------- Global typography/layout ---------- */
.conf {
  width: 100%;
  border: none;
  margin: auto;
  font-family: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--brand-black);
  line-height: 1.5;
  position: relative; /* for optional footer ::after */
}

/* Helpers (optional) */
.nunito-regular { font-weight: 400; }
.nunito-bold { font-weight: 700; }

/* ---------- HERO HEADER ---------- */
.event-header { position: relative; } /* anchor for absolute subtitle */

.confTitleBox {
  position: relative;
  min-height: 280px;
  /* Image on the element; overlay via ::before */
  background-image: var(--hero-url) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;

  border: 0 !important;
  color: #fff;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;

  /* Reserve space at bottom for the in-hero subtitle and the copyright chip */
  padding: 40px 16px 96px 16px;
  overflow: visible;
  z-index: 0; /* stacking context for ::before/::after */
}

/* Brand-colored overlay under text */
.confTitleBox::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero-overlay);
  z-index: 0; /* below text */
  pointer-events: none;
}

/* Title block above overlay */
.confTitle {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* Title text */
.conference-title-link {
  font-size: clamp(28px, 6vw, 56px);
  font-weight: 800;
  color: #fff;
  padding: 0;
  text-decoration: none;
  text-shadow: 0 2px 4px rgba(0,0,0,0.35);
}

/* ---------- SUBTITLE: no stripe, show inside hero ---------- */
/* Make the subtitle bar itself transparent and heightless. */
.confSubTitleBox {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  height: 0 !important;             /* no visual stripe */
  overflow: visible !important;     /* allow its content to show out of flow */
  position: static !important;      /* keep it simple; child will anchor to .event-header */
}

/* Render the subtitle content inside the hero, centered near the bottom. */
.confSubTitleBox .confSubTitleContent {
  position: absolute !important;    /* removed from flow; no stripe height */
  left: 0;
  right: 0;
  bottom: 22px;                     /* sits above copyright chip */
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;

  text-align: center;
  font-size: clamp(13px, 2.2vw, 18px);
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.35);
  z-index: 2;                       /* above overlay */
}

/* Hide optional timezone line if it appears as clutter under the subtitle */
.confSubTitleBox .timezone,
.confSubTitleBox .event-timezone { display: none !important; }

/* ---------- COPYRIGHT NOTICE (variant A: attached to title, viewport-relative) ---------- */
/* Disable the earlier hero-attached chip to avoid duplicates */
.confTitleBox::after { content: none !important; }

/* Anchor the chip to the title and place it relative to viewport width.
   (100vw - 1100px)/2 = horizontal gutters of the centered 1100px container. */
.confTitle { position: relative !important; }
.confTitle::after {
  content: "Image Copyright: © Stadt Wien/Christian Fürthner | 2019";
  position: absolute;

  /* Responsive horizontal & vertical offsets without fixed magic numbers */
  right: clamp(8px, calc((100vw - 600px) / 2 + 12000px), 6vw);
  /* Move the chip down into the hero area below the title block */
  bottom: clamp(-120px, -6vw, -120px);

  z-index: 5;                       /* above overlay & subtitle */
  font: 400 clamp(10px, 1.2vw, 12px) "Nunito Sans", Arial, sans-serif;
  color: #fff;
  padding: 2px 6px;
  background: rgba(0,0,0,0.50);     /* dark chip for readability */
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  line-height: 1.2;
}

/* ---------- Announcement ---------- */
.simpleTextAnnouncement {
  background: #f5faff url(/images/conf/sprites_blue.png) repeat-x scroll 0 -400px;
  border-top: 1px solid #c2d6e7;
  font-family: "Nunito Sans", Arial, sans-serif;
  font-weight: 700;
  font-size: 10pt;
  text-align: center;
  color: var(--brand-black);
  padding: 8px 0;
}

/* ---------- Main content width ---------- */
#confSectionsBox {
  width: 950px;
  margin: 30px auto 0 auto;
}

/* ---------- Left menu ---------- */
.conf_leftMenu { float: left; width: 200px; }

#outer {
  border: 1px solid #ccc;
  background: #f6f6f6;
}

#outer li a {
  font-family: "Nunito Sans", Arial, sans-serif;
  font-size: 10pt;
  color: var(--brand-secondary);
  text-decoration: none;
}

#outer li a:hover { background: #e0e0e0; }

.menuConfTitle a {
  color: var(--brand-secondary);
  padding: 7px 12px;
}

.menuConfTitle.selected > a,
.menuConfMiddleCell.selected > a {
  color: var(--brand-primary);
  background: #dadada;
  border-bottom: 1px solid #d0d0d0;
  border-top: 1px solid #d0d0d0;
  font-weight: 700;
}

li ul.inner li a {
  padding: 3px 12px 3px 30px;
  background: transparent url(/images/conf/left_menu_bullet.png) no-repeat 15px center;
}

/* ---------- Support box ---------- */
.support_box { background: #f6f6f6; border: 1px solid #ccc; }
.support_box > h3 { color: #f3f3f3; background: var(--brand-secondary); font-weight: 700; }

/* ---------- Page content ---------- */
.confBodyBox { margin-left: 230px; color: var(--brand-black); }
.confBodyBox a { color: var(--brand-secondary); }
.confBodyBox a:hover { color: var(--brand-primary); text-decoration: underline; }

/* ---------- Optional footer logo strip ---------- */
.conf::after {
  content: "";
  display: block;
  width: 100%;
  height: 142px;                 /* adjust to your logo strip height */
  margin-top: 40px;
  background-image: var(--footer-logos-url);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  .confTitleBox { min-height: 220px; padding: 28px 12px 88px 12px; }
  .confSubTitleBox .confSubTitleContent { bottom: 16px; }
  .conf::after { height: 80px; }

  /* Title-attached chip: slightly closer on small screens */
  .confTitle::after {
    right: clamp(8px, calc((100vw - 1100px) / 2 + 10px), 5vw);
    bottom: clamp(-28px, -6vw, -14px);
    font-size: 10px;
    padding: 2px 4px;
  }
}


/* === ABM4ENERGY: Restore subtitle + copyright (safe, in-flow) === */

/* 1) Keep the subtitle bar in flow; transparent and minimal. */
.confSubTitleBox {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0.25rem 0 !important;   /* small breathing space */
  min-height: auto !important;
  height: auto !important;         /* ensure it's rendered */
  position: static !important;     /* no absolute positioning */
}

/* 2) Visually lift the subtitle into the hero using a negative margin.
      This keeps layout stable and avoids overflow/stacking issues. */
.confSubTitleBox .confSubTitleContent {
  position: relative !important;
  z-index: 1;                      /* above overlay */
  width: 100%;
  max-width: 1100px;
  margin: -55px auto 0 auto;       /* lift into the image */
  padding: 0 16px;
  text-align: center;
  font-size: clamp(35px, 3.2vw, 40px);
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.35);
}

/* 3) Ensure the hero has bottom room so the lifted subtitle doesn't overlap content. */
.confTitleBox {
  padding-bottom: 56px !important; /* adjust if subtitle wraps */
  overflow: visible !important;    /* allow any shadows to show */
}

/* 4) Optional: hide timezone line if it clutters the subtitle */
.confSubTitleBox .timezone,
.confSubTitleBox .event-timezone { display: none !important; }

/* 5) Mobile tweak for lifted subtitle */
@media (max-width: 768px) {
  .confSubTitleBox .confSubTitleContent { margin-top: -22px; }
  /* Chip adjustments already handled above */
}