/* 2026 APEC 港深双城可持续发展论坛 - Stylesheet */
/* Scoped under .apec to avoid theme cascade. !important on key rules to win over Phlox. */

.apec {
  position: static !important;
  width: 100% !important;
  color: #222 !important;
  line-height: 1.75 !important;
  font-size: 16px !important;
  font-family: -apple-system, "PingFang SC", "PingFang HK", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.apec .apec-body {
  position: relative !important;
  padding-top: 24px !important;
}

/* ====== Hero section (full-viewport video background + text overlay) ====== */
/* Full-bleed: break out of any container max-width / column padding so the
   video spans the entire viewport width. */
.apec .hero {
  position: relative !important;
  width: 100vw !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  min-height: 50vh !important;
  overflow: hidden !important;
  background: #000 !important;
}

.apec .hero-video {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 0 !important;
  margin: 0 !important;
  display: block !important;
}

/* Dim overlay over the video so text stays readable on any frame */
.apec .hero::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: linear-gradient(180deg, rgba(0,0,0,0.40) 0%, rgba(0,0,0,0.55) 100%) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

.apec .hero-overlay {
  position: relative !important;
  z-index: 2 !important;
  min-height: 50vh !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 60px 24px 80px !important;
  color: #fff !important;
  text-align: left !important;
}

/* Reset .intro styling when inside .hero-overlay. Constrain to a 1280px
   channel centered in the viewport, with text left-aligned inside it. */
.apec .hero-overlay .intro {
  background: transparent !important;
  border-left: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: inherit !important;
  width: 100% !important;
  max-width: 1280px !important;
  text-align: left !important;
}

.apec .hero-overlay .intro .tagline {
  color: rgba(255,255,255,0.95) !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  margin: 0 0 28px 0 !important;
}

.apec .hero-overlay .intro .em {
  color: #fff !important;
  font-size: 44px !important;
  font-weight: 700 !important;
  display: block !important;
  margin: 0 0 32px 0 !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
}

.apec .hero-overlay .intro p {
  color: rgba(255,255,255,0.92) !important;
  font-size: 17px !important;
  margin: 0 0 10px 0 !important;
  line-height: 1.7 !important;
}

@media (max-width: 768px) {
  .apec .hero-overlay { padding: 50px 24px 70px !important; }
  .apec .hero-overlay .intro .tagline { font-size: 17px !important; }
  .apec .hero-overlay .intro .em { font-size: 28px !important; }
  .apec .hero-overlay .intro p { font-size: 15px !important; }
}

.apec .content,
.apec .content-zh,
.apec .content-en {
  overflow: visible !important;
}

/* JS-driven sticky table header — clone of the active agenda's thead,
   fixed at viewport top while the table is in view. */
.apec-sticky-thead {
  position: fixed !important;
  z-index: 9999 !important;
  display: none;
  font-family: -apple-system, "PingFang SC", "PingFang HK", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  box-sizing: border-box !important;
  pointer-events: none !important;
}

.apec-sticky-thead *,
.apec-sticky-thead *::before,
.apec-sticky-thead *::after {
  box-sizing: border-box !important;
}

.apec-sticky-thead table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  margin: 0 !important;
  table-layout: fixed !important;
}

.apec-sticky-thead th {
  padding: 12px 14px !important;
  background: #1A5F7A !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  border-right: 1px solid #1A5F7A !important;
  border-bottom: 2px solid #1A5F7A !important;
  text-align: left !important;
  vertical-align: top !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

.apec-sticky-thead th:last-child {
  border-right: 0 !important;
}

/* ====== Language toggle (segmented control) ====== */

.apec .lang-toggle {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  z-index: 10 !important;
  display: flex !important;
  align-items: stretch !important;
  border: 1px solid #1A5F7A !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  line-height: 0 !important;
}

.apec .lang-btn {
  background: #fff !important;
  color: #1A5F7A !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  cursor: pointer !important;
  font-family: inherit !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 44px !important;
  height: 30px !important;
  line-height: 1 !important;
  transition: background 0.18s ease, color 0.18s ease !important;
}

.apec .lang-btn + .lang-btn {
  border-left: 1px solid #1A5F7A !important;
}

.apec .lang-btn:hover {
  background: #eaf0f4 !important;
}

.apec.lang-zh .lang-btn[data-lang="zh"],
.apec.lang-en .lang-btn[data-lang="en"] {
  background: #1A5F7A !important;
  color: #fff !important;
  cursor: default !important;
}

.apec.lang-zh .lang-btn[data-lang="zh"]:hover,
.apec.lang-en .lang-btn[data-lang="en"]:hover {
  background: #1A5F7A !important;
}

.apec.lang-zh .content-en { display: none !important; }
.apec.lang-en .content-zh { display: none !important; }

.apec *,
.apec *::before,
.apec *::after {
  box-sizing: border-box !important;
}

.apec .intro {
  font-size: 16px !important;
  margin-bottom: 32px !important;
  padding: 24px 28px !important;
  background: #f4f7fa !important;
  border-left: 4px solid #1A5F7A !important;
  border-radius: 0 6px 6px 0 !important;
}

.apec .intro .tagline {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #1A5F7A !important;
  margin: 0 0 12px 0 !important;
}

.apec .content-zh .intro .tagline {
  letter-spacing: 4px !important;
}

.apec .content-en .intro .tagline {
  letter-spacing: 0.5px !important;
}

.apec .intro .em {
  font-weight: 700 !important;
  font-size: 20px !important;
  color: #111 !important;
}

.apec .intro p {
  margin: 0 0 6px 0 !important;
}

.apec h2 {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #1A5F7A !important;
  margin: 36px 0 16px 0 !important;
  padding-bottom: 8px !important;
  border-bottom: 2px solid #e8e8e8 !important;
}

/* Header row: agenda title (per language) on the left, language toggle on the right */
.apec .programme-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin: 36px 0 16px 0 !important;
  padding-bottom: 8px !important;
  border-bottom: 2px solid #e8e8e8 !important;
}

.apec .programme-header h2 {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.apec .programme-header .lang-toggle {
  position: static !important;
  top: auto !important;
  right: auto !important;
  flex-shrink: 0 !important;
}

.apec p {
  margin: 0 0 12px 0 !important;
}

.apec .card {
  background: #fafbfc !important;
  border: 1px solid #e0e6ec !important;
  border-radius: 6px !important;
  padding: 18px 22px !important;
  margin-bottom: 24px !important;
}

.apec .card p {
  margin: 0 0 8px 0 !important;
}

.apec .card p:last-child {
  margin-bottom: 0 !important;
}

.apec .card-center {
  text-align: center !important;
}

.apec .em {
  font-weight: 600 !important;
}

/* ====== Agenda table ====== */

.apec .agenda {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  margin-bottom: 32px !important;
}

.apec .agenda th,
.apec .agenda td {
  padding: 12px 14px !important;
  border-right: 1px solid #e0e0e0 !important;
  border-bottom: 1px solid #e0e0e0 !important;
  vertical-align: top !important;
  text-align: left !important;
}

.apec .agenda th:first-child,
.apec .agenda td:first-child {
  border-left: 1px solid #e0e0e0 !important;
}

.apec .agenda thead th {
  background: #1A5F7A !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  border-top: 1px solid #1A5F7A !important;
}

.apec .agenda .time-col {
  width: 130px !important;
}

.apec .agenda .time {
  white-space: nowrap !important;
  font-weight: 600 !important;
  color: #333 !important;
  width: 130px !important;
}

.apec .agenda .time .dur,
.apec .agenda .dur {
  display: block !important;
  font-weight: 400 !important;
  font-size: 12px !important;
  color: #888 !important;
  margin-top: 2px !important;
}

.apec .agenda .dur-inline {
  font-weight: 400 !important;
  font-size: 12px !important;
  color: #888 !important;
  margin-bottom: 6px !important;
}

.apec .agenda .shared {
  background: #f5f9fb !important;
  font-weight: 600 !important;
  color: #1A5F7A !important;
  text-align: center !important;
}

.apec .agenda .brk {
  background: #f7f7f7 !important;
  color: #777 !important;
  font-style: italic !important;
  text-align: center !important;
}

.apec .agenda .session-hdr {
  background: #eaf0f4 !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  color: #1A5F7A !important;
  letter-spacing: 0.5px !important;
}

.apec .agenda .note {
  background: #fffceb !important;
  color: #8a6d3b !important;
  font-size: 13px !important;
  font-style: italic !important;
  text-align: center !important;
}

.apec .agenda .note-inline {
  font-size: 12px !important;
  color: #888 !important;
  font-style: italic !important;
  margin-top: 4px !important;
  font-weight: 400 !important;
}

.apec .agenda .role {
  font-weight: 700 !important;
  font-size: 13px !important;
  color: #1A5F7A !important;
  margin-bottom: 6px !important;
  letter-spacing: 0.3px !important;
}

.apec .agenda .name {
  font-weight: 600 !important;
  color: #222 !important;
  margin-bottom: 2px !important;
}

.apec .agenda .affil {
  font-size: 13px !important;
  color: #666 !important;
  line-height: 1.5 !important;
}

.apec .agenda .topic {
  font-style: italic !important;
  color: #444 !important;
  margin-bottom: 8px !important;
}

.apec .agenda .empty {
  background: #fafafa !important;
}

.apec .agenda .sz-roundtable {
  background: #f9fcfd !important;
}

/* ====== Responsive ====== */

@media (max-width: 768px) {
  .apec { font-size: 15px !important; }
  .apec .intro .em { font-size: 18px !important; }
  .apec h2 { font-size: 19px !important; }
  .apec .agenda { font-size: 12.5px !important; }
  .apec .agenda th,
  .apec .agenda td { padding: 8px 10px !important; }
  .apec .agenda .time,
  .apec .agenda .time-col { width: auto !important; }
  .apec .agenda .affil { font-size: 12px !important; }
}