/* ============================================================
   Conference Programme Enhancer — Frontend Styles
   Colours are overridden at runtime via CSS custom properties
   set by the JS layer from CPE_CONFIG values.
   ============================================================ */

:root {
  --cpe-primary:  #1a6fab;
  --cpe-accent:   #1a3a5c;
  --cpe-offset:   60px;
}

/* ── Day Navigation Tabs ─────────────────────────────────── */
.cpe-day-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 0;
  margin: 0 0 28px;
  position: sticky;
  top: var(--cpe-offset);
  z-index: 200;
  background: #fff;
  border-bottom: 2px solid #e0e6ef;
}

.cpe-day-tab {
  padding: 9px 22px;
  background: #f0f4f8;
  border: 2px solid #cdd8e6;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
  color: #2c4a6e;
  transition: background 0.18s, border-color 0.18s, color 0.18s, box-shadow 0.18s;
  white-space: nowrap;
}

.cpe-day-tab:hover {
  background: #dce8f8;
  border-color: var(--cpe-primary);
  color: var(--cpe-primary);
}

.cpe-day-tab.is-active {
  background: var(--cpe-primary);
  border-color: var(--cpe-primary);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

/* ── Day Section ─────────────────────────────────────────── */
.cpe-day-section {
  scroll-margin-top: calc(var(--cpe-offset) + 80px);
  margin-bottom: 48px;
}

.cpe-day-section > h1.wp-block-heading,
.cpe-day-section > h2.wp-block-heading,
.cpe-day-section > h3.wp-block-heading,
.cpe-day-section > h4.wp-block-heading {
  background: linear-gradient(135deg, var(--cpe-accent) 0%, var(--cpe-primary) 100%) !important;
  color: #fff !important;
  padding: 16px 24px !important;
  border-radius: 8px;
  margin-bottom: 12px !important;
  font-size: 20px !important;
  letter-spacing: 0.3px;
  border: none !important;
}

/* ── Time Block Row ──────────────────────────────────────── */
.cpe-time-block {
  display: grid !important;
  grid-template-columns: 155px 1fr !important;
  gap: 0 !important;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  margin-bottom: 10px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  width: 100% !important;
}

.cpe-time-col {
  background: #f0f4f9 !important;
  padding: 14px !important;
  font-weight: 700;
  font-size: 12px;
  color: var(--cpe-accent);
  border-right: 3px solid var(--cpe-primary);
  display: flex !important;
  align-items: flex-start;
  line-height: 1.5;
  word-break: break-word;
  min-width: 0;
}

.cpe-content-col {
  padding: 14px 18px !important;
  background: #fff;
  min-width: 0;
}

/* Break / registration rows */
.cpe-time-block.is-break .cpe-time-col {
  border-right-color: #aab;
  background: #f8f8f8 !important;
  color: #888;
}

.cpe-time-block.is-break .cpe-content-col {
  background: #fafafa;
}

.cpe-time-block.is-break .cpe-content-col p {
  color: #888 !important;
  font-style: italic;
}

/* ── Session Type Badges ──────────────────────────────────── */
.cpe-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin: 0 6px 4px 0;
  vertical-align: middle;
  line-height: 1.6;
}

.cpe-badge-spark     { background: #e3f2fd; color: #1565c0; border: 1px solid #90caf9; }
.cpe-badge-symposium { background: #f3e5f5; color: #6a1b9a; border: 1px solid #ce93d8; }
.cpe-badge-plenary   { background: #fff8e1; color: #e65100; border: 1px solid #ffcc80; }
.cpe-badge-forum     { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; }
.cpe-badge-special   { background: #fce4ec; color: #880e4f; border: 1px solid #f48fb1; }
.cpe-badge-papers    { background: #e0f2f1; color: #004d40; border: 1px solid #80cbc4; }
.cpe-badge-ceremony  { background: #fff3e0; color: #bf360c; border: 1px solid #ffcc80; }
.cpe-badge-keynote   { background: #e8eaf6; color: #283593; border: 1px solid #9fa8da; }
.cpe-badge-workshop  { background: #fdf3e3; color: #7b4a00; border: 1px solid #f8c67a; }

/* ── Track Chips ─────────────────────────────────────────── */
.cpe-track {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  margin: 2px 3px 2px 0;
  vertical-align: middle;
  line-height: 1.6;
}

.cpe-track-people     { background: #e8eaf6; color: #283593; }
.cpe-track-equity     { background: #e0f7fa; color: #006064; }
.cpe-track-technology { background: #ede7f6; color: #4527a0; }
.cpe-track-climate    { background: #e8f5e9; color: #1b5e20; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 640px) {
  .cpe-time-block {
    grid-template-columns: 1fr !important;
  }

  .cpe-time-col {
    border-right: none;
    border-bottom: 3px solid var(--cpe-primary);
  }

  .cpe-day-tabs {
    top: 0;
    position: static;
  }

  .cpe-day-tab {
    font-size: 12px;
    padding: 7px 14px;
  }
}