/*
 * Conference Builder block (cbp/conference) — frontend styles.
 *
 * Navigation rules carried over from assets/css/conference-navigation.css
 * (the styles used by the previous single-conference.php template), with
 * fallbacks for Elementor's global colour/font variables.
 */

/*
	|--------------------------------------------------------------------------
	| Basic colours
	|--------------------------------------------------------------------------
	| Change these four variables to suit your design.
	*/
.conference-page {
  --conference-blue: #122b88;
  --conference-dark: #061536;
  --conference-pink: #b52179;
  --conference-white: #ffffff;
  --conference-line: #172b82;
}

.conference-page,
.conference-page * {
  box-sizing: border-box;
}

.conference-page__inner {
  width: min(1435px, calc(100% - 48px));
  margin: 0 auto;
}

/*
	|--------------------------------------------------------------------------
	| Main navigation
	|--------------------------------------------------------------------------
	*/
.conference-nav {
  position: relative;
  z-index: 50;
  margin: 28px 0 58px;
  border-bottom: 2px solid var(--conference-line);
}

.conference-nav__items {
  display: flex;
  /* grid-template-columns: repeat(5, minmax(0, 1fr)); */
  align-items: end;
  gap: 0;
  justify-content: space-between;
}

.conference-nav__item {
  position: relative;
  min-width: 0;
  margin-bottom: 11px;
}

.conference-nav__top {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 46px;
  padding: 8px 9px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--conference-blue);
  font-family: var(--e-global-typography-accent-font-family, inherit) !important;
  font-weight: 800;
  font-size: clamp(15px, 1.15vw, 18px) !important;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.conference-nav__top:hover {
  color: var(--conference-blue) !important;
}
.conference-nav__top::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 4px;
  background: transparent;
}

.conference-nav__item.is-active > .conference-nav__top::after,
.conference-nav__item:hover > .conference-nav__top::after,
.conference-nav__item:focus-within > .conference-nav__top::after {
  /* background: var(--conference-pink); */
  background: var(--e-global-color-primary, var(--conference-pink)) !important;
}

/*
	 * Screenshot-style special state for Welcome:
	 * active Welcome becomes a solid pink block.
	 */
.conference-nav__item[data-group-id="welcome"].is-active > .conference-nav__top,
.conference-nav__item.is-active > .conference-nav__top {
  align-self: flex-end;
  min-height: 36px;
  padding: 8px 9px;
  /* background: var(--conference-pink) !important; */
  background: var(--e-global-color-primary, var(--conference-pink)) !important;
  color: var(--conference-white) !important;
  border: none;
}

.conference-nav__item[data-group-id="welcome"].is-active
  > .conference-nav__top::after,
.conference-nav__item.is-active
  > .conference-nav__top
  > .conference-nav__top::after {
  display: none;
}

.conference-nav__top--link {
  display: inline-flex;
}

/*
	|--------------------------------------------------------------------------
	| Dropdown
	|--------------------------------------------------------------------------
	*/
.conference-nav__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
  min-width: 190px;
  padding-top: 0px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(7px);
  pointer-events: none;
  transition:
    opacity 160ms ease,
    transform 160ms ease,
    visibility 160ms ease;
}

.conference-nav__item:hover .conference-nav__dropdown,
	/* .conference-nav__item:focus-within .conference-nav__dropdown, */
	.conference-nav__item.is-open .conference-nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.conference-nav__dropdown-inner {
  display: grid;
  min-width: 100%;
  /* background: var(--conference-pink); */
  background: var(--e-global-color-primary, var(--conference-pink));
  padding: 8px 0;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

.conference-nav__section {
  display: block;
  width: 100%;
  padding: 6px 10px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--conference-white) !important;
  font: inherit;
  font-weight: 500;
  font-size: 12px !important;
  line-height: 1.15 !important;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer !important;
  white-space: nowrap;
  font-family: var(--e-global-typography-accent-font-family, inherit) !important;
}

.conference-nav__section:hover,
.conference-nav__section:focus-visible,
.conference-nav__section.is-active {
  background: rgba(255, 255, 255, 0.16);
  outline: none;
  /* color: var(--conference-blue) !important; */
  color: var(--conference-white) !important;
}

/*
	|--------------------------------------------------------------------------
	| AJAX content area
	|--------------------------------------------------------------------------
	*/
.conference-content {
  position: relative;
  min-height: 240px;
}

.conference-content.is-loading {
  min-height: 300px;
}

.conference-loading {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 32px 0;
  color: var(--conference-dark);
  font-weight: 700;
  justify-content: center;
}

.conference-loading::before {
  content: "";
  width: 20px;
  height: 20px;
  border: 2px solid rgba(0, 0, 0, 0.15);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: conference-spin 650ms linear infinite;
}

@keyframes conference-spin {
  to {
    transform: rotate(360deg);
  }
}

.conference-error {
  padding: 18px;
  border: 1px solid #c00;
  color: #900;
  background: #fff5f5;
}

/*
	|--------------------------------------------------------------------------
	| Tablet / mobile
	|--------------------------------------------------------------------------
	*/
@media (max-width: 1050px) {
  .conference-page__inner {
    width: min(100% - 32px, 1435px);
  }

  .conference-nav__items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .conference-nav__item {
    border-bottom: 1px solid rgba(18, 43, 136, 0.15);
  }

  .conference-nav__item--link {
    grid-column: 1 / -1;
  }

  .conference-nav__dropdown {
    min-width: 100%;
  }
}

@media (max-width: 680px) {
  .conference-nav {
    margin-top: 16px;
    margin-bottom: 32px;
    border-bottom: 0;
  }

  .conference-nav__items {
    display: block;
  }

  .conference-nav__item {
    border-bottom: 1px solid rgba(18, 43, 136, 0.22);
  }

  .conference-nav__top {
    display: flex;
    width: 100%;
    min-height: 48px;
    padding: 14px 0;
    justify-content: space-between;
  }

  .conference-nav__top::after {
    display: none;
  }

  .conference-nav__item[data-group-id="welcome"].is-active
    > .conference-nav__top {
    margin: 0;
    padding: 14px 10px;
  }

  .conference-nav__dropdown {
    position: static;
    display: none;
    min-width: 0;
    padding-top: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
  }

  .conference-nav__item:hover .conference-nav__dropdown,
  .conference-nav__item:focus-within .conference-nav__dropdown {
    display: none;
  }

  .conference-nav__item.is-open .conference-nav__dropdown {
    display: block;
  }

  .conference-nav__dropdown-inner {
    box-shadow: none;
  }

  .conference-nav__section {
    padding: 10px 12px;
  }
}

/*
	|--------------------------------------------------------------------------
	| Sections (block version)
	|--------------------------------------------------------------------------
	*/
a.conference-nav__section {
  text-decoration: none;
}

.conference-section[hidden] {
  display: none !important;
}

/* Legacy Elementor sections: same spacing fix the old template applied. */
.conference-content .e-con-boxed {
  padding-left: 0;
  padding-right: 0;
}