/* =============================================================================
   Certain Custom Agenda Solution — Stylesheet
   File: certain-agenda.css
   Version: 2.0

   Every color comes from a CSS variable published by certain-theme.js, which
   reads them from the event's theme workbook. The values in :root below are
   fallbacks only — they show if the workbook can't be reached, and they are
   deliberately neutral so a failed load looks plain rather than broken.

   DO NOT hardcode customer colors in this file. Edit the workbook instead.
   Session tag and filter tab colors are applied by JavaScript from the
   "trackColors" tab, so they are not listed here.
   ============================================================================= */

:root {
  /* ── Fallbacks. The theme workbook overrides all of these. ─────────────── */
  --ca-ink:              #1F2933;  /* body text                              */
  --ca-muted:            #5B6B78;  /* speaker title, company, role           */
  --ca-nav:              #2F4858;  /* primary anchor: fills and headings     */
  --ca-nav-text:         #FFFFFF;
  --ca-primary:          #3D7A96;  /* accent: borders and rules              */
  --ca-secondary:        #D89B3C;
  --ca-tint:             #EEF2F5;  /* agenda section band, meta pills        */
  --ca-page:             #F7F8FA;
  --ca-surface:          #FFFFFF;  /* session cards                          */
  --ca-surface-alt:      #FCFDFE;  /* keynote card                           */
  --ca-line:             #DCE3E8;  /* card hairline                          */

  --ca-badge-bg:         #D89B3C;  /* keynote badge                          */
  --ca-badge-text:       #1F2933;
  --ca-pill-bg:          #F3EEE2;  /* info block pills                       */
  --ca-pill-text:        #6B5320;

  --ca-daytab-border:    #3D7A96;  /* day toggle, inactive                   */
  --ca-daytab-active:    #2F4858;  /* day toggle, selected                   */
  --ca-alltab-bg:        #2F4858;  /* "All Sessions" and any unmapped tag     */
}

/* ── Full-width breakout ─────────────────────────────────────────────────────
   Breaks the section out of the Certain content column to fill the browser.  */
.ca-wrap {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background-color: var(--ca-tint);
  padding: 36px 24px;
  box-sizing: border-box;
}
.ca-inner {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

/* ── Animations ──────────────────────────────────────────────────────────── */
.ca-session-fade { animation: caFadeIn 0.35s ease-in-out; }
.ca-day-fade     { animation: caFadeIn 0.35s ease-in-out; }
@keyframes caFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ca-session-fade, .ca-day-fade { animation: none; }
  .ca-day-btn, .ca-filter-btn    { transition: none; }
}

/* ── Shared focus state (keyboard accessibility) ─────────────────────────── */
.ca-day-btn:focus-visible,
.ca-filter-btn:focus-visible {
  outline: 3px solid var(--ca-ink);
  outline-offset: 2px;
}

/* ── Day toggle bar ──────────────────────────────────────────────────────── */
#ca-day-bar {
  text-align: center;
  margin-bottom: 22px;
}
.ca-day-btn {
  padding: 10px 22px;
  margin: 4px;
  border: 2px solid var(--ca-daytab-border);
  border-radius: 6px;
  background: var(--ca-surface);
  color: var(--ca-nav);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.ca-day-btn:hover {
  border-color: var(--ca-daytab-active);
  color: var(--ca-ink);
  background: var(--ca-page);
}
.ca-day-btn.active {
  background: var(--ca-daytab-active);
  color: var(--ca-nav-text);
  border-color: var(--ca-daytab-active);
}
.ca-day-btn.showing-all {
  background: var(--ca-daytab-active);
  color: var(--ca-nav-text);
  border-color: var(--ca-daytab-active);
  opacity: 0.82;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.5) inset;
}

/* ── Track filter tabs ───────────────────────────────────────────────────────
   Background and text are set inline by certain-agenda.js from the
   "trackColors" tab. The rules here only cover shape and state.             */
#ca-filter-bar {
  text-align: center;
  margin-bottom: 28px;
}
.ca-filter-btn {
  padding: 9px 18px;
  margin: 4px;
  border: none;
  border-radius: 6px;
  background: var(--ca-alltab-bg);   /* "All Sessions" + any unmapped track */
  color: #ffffff;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: box-shadow 0.2s, transform 0.2s, filter 0.2s;
}
.ca-filter-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.22);
}
.ca-filter-btn.active {
  filter: brightness(0.86);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.22), 0 4px 12px rgba(0,0,0,0.18);
}

/* ── Day section heading ─────────────────────────────────────────────────── */
.ca-day-section h2 {
  color: var(--ca-nav);
  font-size: 22px;
  font-weight: 700;
  margin: 8px 0 20px 0;
  padding-bottom: 8px;
  border-bottom: 3px solid var(--ca-primary);
  letter-spacing: 0.02em;
}

/* ── Session block (shared base) ─────────────────────────────────────────── */
.ca-block {
  display: flex;
  background: var(--ca-surface);
  border: 1px solid var(--ca-line);
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 24px;
  gap: 24px;
  box-sizing: border-box;
  width: 100%;
}

/* ── Keynote block overrides ─────────────────────────────────────────────── */
.ca-block.keynote {
  background: var(--ca-surface-alt);
  border: 1px solid var(--ca-line);
  border-left: 8px solid var(--ca-nav);
  padding: 24px 24px 24px 20px;
  margin: 28px 0;
  box-shadow: 0 8px 22px rgba(0,0,0,0.10);
}

/* ── Info block overrides ────────────────────────────────────────────────── */
.ca-block.info {
  background: var(--ca-surface);
  justify-content: center;
  padding: 16px;
}
.ca-info-inner {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.ca-pill {
  background: var(--ca-pill-bg);
  color: var(--ca-pill-text);
  padding: 8px 18px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}

/* ── Speaker column ──────────────────────────────────────────────────────── */
.ca-speaker-col {
  flex: 0 0 200px;
  max-width: 200px;
  text-align: center;
}
.ca-speaker {
  text-align: center;
  margin-bottom: 24px;
}
.ca-speaker:last-child { margin-bottom: 0; }
.ca-speaker img {
  width: 100%;
  max-width: 180px;
  height: 180px;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.20);
  margin: 0 auto 8px auto;
  display: block;
}
.ca-speaker .ca-spk-name { font-weight: 700; font-size: 14px; color: var(--ca-ink); }
.ca-speaker .ca-spk-sub  { font-size: 13px; color: var(--ca-muted); }
.ca-speaker .ca-spk-role { font-size: 12px; color: var(--ca-muted); font-style: italic; }

/* ── Keynote speaker col ─────────────────────────────────────────────────── */
.ca-block.keynote .ca-speaker-col {
  display: flex;
  justify-content: center;
}
.ca-block.keynote .ca-speaker img {
  max-width: 200px;
  height: 200px;
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.25);
}

/* ── Content column ──────────────────────────────────────────────────────── */
.ca-content-col {
  flex: 1 1 280px;
  min-width: 0;
}

/* ── Meta row (time / room / badge) ─────────────────────────────────────── */
.ca-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-weight: 700;
  font-size: 14px;
}
.ca-time-pill,
.ca-room-pill {
  background: var(--ca-tint);
  color: var(--ca-nav);
  padding: 6px 12px;
  border-radius: 999px;
  white-space: nowrap;
  font-size: 14px;
}
.ca-badge {
  background: var(--ca-badge-bg);
  color: var(--ca-badge-text);
  padding: 8px 14px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  font-size: 13px;
}

/* ── Session / Keynote title ─────────────────────────────────────────────── */
.ca-content-col h3 {
  margin: 0 0 10px 0;
  font-size: 18px;
  line-height: 1.3;
  color: var(--ca-ink);
}
.ca-block.keynote .ca-content-col h2 {
  margin: 0 0 14px 0;
  font-size: 22px;
  line-height: 1.25;
  color: var(--ca-nav);
  border-bottom: none;
  padding-bottom: 0;
}

/* ── Session tags ────────────────────────────────────────────────────────────
   Colored inline from the "trackColors" tab, same as the filter tabs.       */
.ca-tag-row { margin: 8px 0 12px 0; }
.ca-tag {
  display: inline-block;
  background: var(--ca-alltab-bg);   /* fallback for a tag with no track color */
  color: #ffffff;
  padding: 5px 12px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 600;
  margin: 2px 4px 2px 0;
}

/* ── Description + LOs ───────────────────────────────────────────────────── */
.ca-content-col p   { margin: 0 0 10px 0; font-size: 14px; line-height: 1.6; color: var(--ca-ink); }
.ca-content-col ol  { margin: 4px 0 0 0; padding-left: 20px; }
.ca-content-col li  { font-size: 14px; line-height: 1.6; color: var(--ca-ink); margin-bottom: 4px; }
.ca-content-col b   { font-weight: 700; }

/* ── RESPONSIVE: 768px ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .ca-wrap  { padding: 20px 12px; }

  .ca-day-btn    { padding: 8px 14px; font-size: 12px; margin: 3px; }
  .ca-filter-btn { padding: 8px 12px; font-size: 12px; margin: 3px; }

  .ca-block {
    flex-direction: column;
    gap: 16px;
    padding: 16px;
  }
  .ca-block.keynote {
    padding: 16px 16px 16px 14px !important;
    margin: 16px 0 !important;
  }

  .ca-speaker-col {
    flex: none;
    max-width: 100%;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
  }
  .ca-speaker {
    flex: 0 0 calc(50% - 8px);
    max-width: 150px;
    margin-bottom: 0;
  }
  .ca-speaker img {
    max-width: 120px;
    height: 120px;
  }
  .ca-block.keynote .ca-speaker-col {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .ca-block.keynote .ca-speaker img {
    max-width: 130px;
    height: 130px;
  }

  .ca-content-col { width: 100%; }
  .ca-day-section h2 { font-size: 18px; }
}

/* ── RESPONSIVE: 480px ───────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .ca-speaker         { flex: 0 0 100%; max-width: 140px; }
  .ca-day-btn         { padding: 7px 10px; font-size: 11px; }
  .ca-filter-btn      { padding: 7px 10px; font-size: 11px; }
  .ca-content-col h3  { font-size: 16px; }
  .ca-block.keynote .ca-content-col h2 { font-size: 18px; }
}