/* =============================================================================
   talk.css — Presentation layout styles for layout: talk posts
   ============================================================================= */

/* ---------------------------------------------------------------------------
   Navbar-embedded controls
   --------------------------------------------------------------------------- */

.talk-nav-controls {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

/* Slide nav — hidden in reading mode, shown in presentation */
.talk-nav-center {
  align-items: center;
  gap: 0.5rem;
}

.talk-controls-divider {
  width: 1px;
  height: 18px;
  background: var(--border-color);
  margin: 0 0.2rem;
}

.talk-slide-counter {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  color: var(--text-muted);
  min-width: 4rem;
  text-align: center;
}

/* ---------------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------------- */

.talk-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1;
}

.talk-btn:hover:not(:disabled) {
  color: var(--text-color);
  border-color: var(--primary-light-blue);
  background: rgba(14, 165, 233, 0.1);
}

.talk-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.talk-btn-primary {
  border-color: var(--primary-light-blue);
  color: var(--primary-light-blue);
  font-size: 1rem;
  padding: 0.2rem 0.5rem;
}

.talk-btn-primary:hover:not(:disabled) {
  background: rgba(14, 165, 233, 0.15);
  box-shadow: 0 0 14px rgba(14, 165, 233, 0.35);
}

.talk-btn-exit {
  border-color: #ef4444;
  color: #ef4444;
  font-size: 1rem;
  padding: 0.2rem 0.5rem;
}

.talk-btn-exit:hover {
  background: rgba(239, 68, 68, 0.15);
}


/* ---------------------------------------------------------------------------
   Zoom Dots
   --------------------------------------------------------------------------- */

.talk-zoom-dots {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0 4px;
}

.talk-zoom-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
  border: 1px solid transparent;
}

.talk-zoom-dot:hover {
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(255, 255, 255, 0.4);
  transform: scale(1.4);
}

.talk-zoom-dot.active {
  background: var(--primary-light-blue);
  border-color: var(--primary-light-blue);
  transform: scale(1.5);
  box-shadow: 0 0 6px rgba(14, 165, 233, 0.5);
}

/* ---------------------------------------------------------------------------
   Reading Mode — Slide Wrapper
   --------------------------------------------------------------------------- */

.talk-wrapper {
  /* Normal document flow in reading mode */
}

/* Slides in reading mode look like normal post content */
.talk-chapter {
  /* No special styling in reading mode */
}

/* ---------------------------------------------------------------------------
   Presentation Mode — Body State
   --------------------------------------------------------------------------- */

body.talk-presenting {
  overflow: hidden;
}

body.talk-presenting .content-container {
  margin-top: 0 !important;
  padding-top: 0 !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.talk-presenting .geometric-bg {
  display: none;
}

/* Navbar stays — hide non-control elements in presentation mode */
body.talk-presenting .navbar-brand,
body.talk-presenting .navbar-toggler,
body.talk-presenting .navbar-nav,
body.talk-presenting .page-title-nav {
  display: none !important;
}

body.talk-presenting .navbar > .container {
  max-width: 100%;
  justify-content: space-between;
}

body.talk-presenting .navbar-collapse {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
}

/* Show slide nav in presentation mode */
body.talk-presenting .talk-nav-center {
  display: flex;
}

body.talk-presenting footer,
body.talk-presenting .footer,
body.talk-presenting .social-sharing,
body.talk-presenting .author-bio,
body.talk-presenting .content-nav,
body.talk-presenting .related-posts,
body.talk-presenting .article-tags,
body.talk-presenting .article-header {
  display: none !important;
}

/* Talk wrapper fills screen below navbar */
body.talk-presenting .talk-wrapper {
  position: fixed;
  top: 56px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

body.talk-presenting .article-wrapper {
  height: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

body.talk-presenting .article-cover {
  display: none;
}

/* ---------------------------------------------------------------------------
   Presentation Mode — Slides
   --------------------------------------------------------------------------- */

body.talk-presenting .talk-content {
  position: relative;
  height: 100%;
}

body.talk-presenting .talk-chapter {
  display: none;
  position: absolute;
  inset: 0;
  overflow-y: auto;
  padding: clamp(2rem, 5vw, 5rem) clamp(2rem, 8vw, 10rem);
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

body.talk-presenting .talk-chapter.active {
  display: flex;
}

/* Typography in presentation mode */
body.talk-presenting .talk-chapter h1 {
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 1rem;
  white-space: nowrap;
  background: var(--gradient-blue-teal);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

body.talk-presenting .talk-chapter h2 {
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 0.8rem;
  white-space: nowrap;
  color: var(--primary-light-blue);
}

body.talk-presenting .talk-chapter h3 {
  font-size: clamp(1.1rem, 2.5vw, 2rem);
  margin-bottom: 0.6rem;
  color: var(--text-muted);
}

body.talk-presenting .talk-chapter p,
body.talk-presenting .talk-chapter li {
  font-size: clamp(1rem, 2vw, 1.6rem);
  line-height: 1.6;
  max-width: 70ch;
}

body.talk-presenting .talk-chapter ul,
body.talk-presenting .talk-chapter ol {
  padding-left: 1.5em;
}

body.talk-presenting .talk-chapter li {
  margin-bottom: 0.4em;
}

body.talk-presenting .talk-chapter pre,
body.talk-presenting .talk-chapter .highlight {
  width: 100%;
  max-width: 100%;
  font-size: clamp(0.85rem, 1.5vw, 1.2rem);
  box-sizing: border-box;
}

body.talk-presenting .talk-chapter img {
  max-height: 50vh;
  max-width: 100%;
  border-radius: 8px;
  object-fit: contain;
}

body.talk-presenting .talk-chapter blockquote {
  font-size: clamp(1.1rem, 2.2vw, 1.8rem);
  border-left: 4px solid var(--primary-light-blue);
  padding-left: 1.5rem;
  font-style: italic;
  color: var(--text-muted);
}

/* Slide progress bar */
body.talk-presenting .talk-wrapper::after {
  content: '';
  position: fixed;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--gradient-blue-teal);
  width: var(--slide-progress, 0%);
  transition: width 0.3s ease;
  z-index: 2001;
}

/* ---------------------------------------------------------------------------
   Zoom Levels — Content Density
   Controls what's visible at each zoom level.
   Applied via data-zoom="N" on #talk-content.
   Code blocks are NEVER hidden.
   --------------------------------------------------------------------------- */

/* Level 0: Show everything (default — no rules needed) */

/* Level 1: Hide long paragraphs (>30 words, marked with .zoom-long by JS) */
#talk-content[data-zoom="1"] p.zoom-long {
  display: none;
}

/* Level 2: Hide all paragraphs */
#talk-content[data-zoom="2"] p {
  display: none;
}

/* Level 3: Hide paragraphs + lists */
#talk-content[data-zoom="3"] p,
#talk-content[data-zoom="3"] ul,
#talk-content[data-zoom="3"] ol {
  display: none;
}

/* Level 4: Hide paragraphs + lists + code + extra images + mermaid (keep first image per slide) */
#talk-content[data-zoom="4"] p,
#talk-content[data-zoom="4"] ul,
#talk-content[data-zoom="4"] ol,
#talk-content[data-zoom="4"] pre,
#talk-content[data-zoom="4"] .highlight,
#talk-content[data-zoom="4"] .mermaid,
#talk-content[data-zoom="4"] .talk-extra-img {
  display: none;
}

/* Level 5: Headers only — hide everything except headings */
#talk-content[data-zoom="5"] p,
#talk-content[data-zoom="5"] ul,
#talk-content[data-zoom="5"] ol,
#talk-content[data-zoom="5"] pre,
#talk-content[data-zoom="5"] .highlight,
#talk-content[data-zoom="5"] img,
#talk-content[data-zoom="5"] figure,
#talk-content[data-zoom="5"] .mermaid,
#talk-content[data-zoom="5"] blockquote,
#talk-content[data-zoom="5"] table,
#talk-content[data-zoom="5"] .talk-extra-img {
  display: none;
}

/* Code blocks are visible at levels 0–3, hidden at 4–5 (above) */
#talk-content[data-zoom="1"] pre,
#talk-content[data-zoom="2"] pre,
#talk-content[data-zoom="3"] pre,
#talk-content[data-zoom="1"] .highlight,
#talk-content[data-zoom="2"] .highlight,
#talk-content[data-zoom="3"] .highlight {
  display: block !important;
}

/* ---------------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------------- */

@media (max-width: 768px) {
  .talk-btn-label {
    display: none;
  }

  .talk-controls {
    padding: 0.3rem 0.5rem;
    gap: 0.25rem;
  }

  .talk-controls-left,
  .talk-controls-right {
    min-width: auto;
  }

  body.talk-presenting .talk-chapter {
    padding: 1.5rem 1.5rem;
    justify-content: flex-start;
    padding-top: 2rem;
  }

  body.talk-presenting .talk-chapter h1 {
    font-size: clamp(1.5rem, 6vw, 2.5rem);
  }
}