/**
 * Nieuwe Technologie — Reveal.js theme
 * Same styling as Presentation/slide*.html: only Reveal reset + original custom CSS.
 */

/* Reusable slide mount: injected content becomes layout children of the section */
.slide-mount { display: contents; }

/* ============== Reveal reset (match original body: 1280×720, Inter, 16px) ============== */
.reveal {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  background: #f8fafc;
  color: #1e293b;
}

.reveal .slides {
  text-align: left;
}

.reveal .slides section {
  width: 100% !important;
  height: 100% !important;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: transparent;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

/* Section wrapper: overflow visible so header/footer rounded corners are not clipped */
.reveal .slides section .slide-body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow: visible;
  display: flex;
  flex-direction: column;
  background-color: #f8fafc;
  color: #1e293b;
}

/* Header: no horizontal margin to avoid slide overflow */
.reveal .slide-body .slide-header {
  padding: 0.4rem 3rem 0.5rem;
  flex-shrink: 0;
  margin: 0;
  border-radius: 0.5rem;
}
.reveal .slide-body .slide-header h1,
.reveal .slide-body .slide-header p {
  margin: 0;
}

/* Scrum role cards: no default margin/padding on role title and subtitle */
.reveal .slide-body .scrum-role-cards .role-title,
.reveal .slide-body .scrum-role-cards .role-subtitle {
  margin: 0 !important;
  padding: 0 !important;
}

/* Individual factor panel: no default margin/padding on title and description */
.reveal .slide-body .individual-factor-text h3,
.reveal .slide-body .individual-factor-text p {
  margin: 0 !important;
  padding: 0 !important;
}

/* Conditions warning: no default margin/padding on paragraphs */
.reveal .slide-body .conditions-text p {
  margin: 0 !important;
  padding: 0 !important;
}

/* Week-overzicht: no default margin/padding on day item paragraphs */
.reveal .slide-body .week-overzicht-grid p {
  margin: 0 !important;
  padding: 0 !important;
}

/* De Kern steps (Leerdoelen slide): tight spacing, no default block margins */
.reveal .slide-body .kern-title {
  margin-bottom: 0.75rem !important;
  padding-bottom: 0.25rem !important;
}
.reveal .slide-body .kern-steps {
  gap: 0.5rem;
}
.reveal .slide-body .kern-step {
  margin: 0 !important;
  padding: 0 !important;
}
.reveal .slide-body .kern-connector {
  margin: 0.125rem 0 !important;
}
.reveal .slide-body .kern-label,
.reveal .slide-body .kern-sublabel {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.25;
}
.reveal .slide-body .kern-sublabel {
  margin-top: 0.125rem !important;
}

/* Footer: no horizontal margin to avoid slide overflow */
.reveal .slide-body .slide-footer {
  padding: 0.4rem 3rem;
  flex-shrink: 0;
  margin: 0;
  border-radius: 0.5rem;
}

/* Consistent content card body text (slide 2 style across deck) */
.reveal .slide-body .bg-white.rounded-xl .text-slate-600 {
  font-size: 0.875rem;
}

/* Dark slides (slide1, slide23) */
.reveal .slides section.slide-dark {
  background-color: #0f172a !important;
}

.reveal .slides section.slide-dark .slide-body {
  background-color: #0f172a;
  color: #f8fafc;
}

/* Prevent dark text on dark slides (readable contrast) */
.reveal .slides section.slide-dark .slide-body [class*="text-slate-5"],
.reveal .slides section.slide-dark .slide-body [class*="text-slate-6"] {
  color: #94a3b8 !important;
}

.reveal .slides section.slide-dark .slide-body.centered {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============== Original custom CSS (from Presentation slides) ============== */
.reveal .font-mono {
  font-family: 'Roboto Mono', monospace;
}

.reveal .font-heading {
  font-family: 'Montserrat', sans-serif;
}

.reveal .tech-pattern {
  background-image: radial-gradient(#cbd5e1 1px, transparent 1px);
  background-size: 20px 20px;
}

.reveal .cursor-blink::after {
  content: '|';
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Card styles (evaluation, oefenpresentatie, week 10, etc.) */
.reveal .card-team { background-color: #eff6ff; border-left: 6px solid #3b82f6; }
.reveal .card-tech { background-color: #f0fdf4; border-left: 6px solid #22c55e; }
.reveal .card-docs { background-color: #fdf4ff; border-left: 6px solid #d946ef; }
.reveal .card-pres { background-color: #fff7ed; border-left: 6px solid #f97316; }
.reveal .card-content { background-color: #eff6ff; border-left: 6px solid #3b82f6; }
.reveal .card-demo { background-color: #f0fdf4; border-left: 6px solid #22c55e; }
.reveal .card-team-purple { background-color: #fdf4ff; border-left: 6px solid #d946ef; }
.reveal .card-timing { background-color: #fff7ed; border-left: 6px solid #f97316; }
.reveal .card-stability { background-color: #fef2f2; border-left: 6px solid #ef4444; }
.reveal .card-debt { background-color: #eff6ff; border-left: 6px solid #3b82f6; }
.reveal .card-review { background-color: #f0fdf4; border-left: 6px solid #22c55e; }

.reveal .card-hover {
  transition: all 0.3s ease;
}

.reveal .card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.reveal .file-card {
  border-left: 4px solid #cbd5e1;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

.reveal .file-card:hover {
  border-left-color: #3b82f6;
  background-color: #f1f5f9;
}

.reveal .dashed-connector {
  border-left: 2px dashed #cbd5e1;
  position: absolute;
  height: 100%;
  left: 24px;
  top: 0;
  z-index: 0;
}

.reveal .timeline-track {
  position: absolute;
  top: 24px;
  left: 0;
  right: 0;
  height: 4px;
  background-color: #e2e8f0;
  z-index: 0;
}

.reveal .timeline-progress {
  position: absolute;
  top: 24px;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #3b82f6;
  z-index: 0;
  opacity: 0.3;
}

.reveal .col-header-bg {
  position: absolute;
  top: 0;
  width: 100%;
  height: 80px;
  z-index: 0;
}

.reveal .theory-bg { background-color: #eff6ff; }
.reveal .practice-bg { background-color: #f0fdf4; }

.reveal .bg-pattern-subtle {
  background-color: #f1f5f9;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23cbd5e1' fill-opacity='0.4' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='1'/%3E%3C/g%3E%3C/svg%3E");
}

.reveal .glow-text {
  text-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
}

.reveal .step-card {
  background: rgba(30, 41, 59, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(148, 163, 184, 0.3);
  color: #e2e8f0;
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.reveal .step-card:hover {
  transform: translateY(-5px);
  border-color: rgba(96, 165, 250, 0.5);
}

.reveal .connector-line {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: #334155;
  z-index: 0;
  transform: translateY(-50%);
}

.reveal .schedule-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.reveal .custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}

.reveal .custom-scrollbar::-webkit-scrollbar-track {
  background: #f1f5f9;
}

.reveal .custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 3px;
}

.reveal .feature-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.reveal .feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.reveal .tech-card-bg {
  background-color: #ffffff;
  border-top: 6px solid #f97316;
}

.reveal .feat-card-bg {
  background-color: #ffffff;
  border-top: 6px solid #3b82f6;
}

/* Dark sidebar/panel: force dark bg and light text for readability */
.reveal .dark-panel {
  background-color: #1e293b !important;
  color: #e2e8f0;
}
.reveal .dark-panel h3 { color: #fff !important; }
.reveal .dark-panel a { color: #93c5fd !important; }
.reveal .dark-panel a:hover { color: #bfdbfe !important; }

.reveal .badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.reveal .slide-number {
  left: 60px !important;
  right: auto !important;
  bottom: 8px !important;
  border-radius: 5px !important;
  color: #94a3b8 !important;
  font-family: 'Roboto Mono', monospace !important;
}
.reveal .slide-number a,
.reveal .slide-number a:hover,
.reveal .slide-number a:focus,
.reveal .slide-number a:visited {
  color: inherit !important;
}

/* Reveal controls — split-hero-prev/skip style, exact same position as split-hero-nav-wrap */
.reveal .controls {
  display: flex !important;
  position: absolute !important;
  bottom: 30px !important;
  right: 40px !important;
  left: auto !important;
  top: auto !important;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  z-index: 60;
  pointer-events: none;
}
.reveal .controls .controls-arrow {
  display: none;
}
.reveal .controls button {
  position: static !important;
  transform: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  pointer-events: auto;
}
/* Only show prev when enabled (has previous slide) */
.reveal .controls .navigate-left:not(.enabled),
.reveal .controls .navigate-up:not(.enabled) {
  display: none !important;
}
.reveal .controls button[disabled] {
  pointer-events: none;
}
/* Prev (left/up): smaller like split-hero-prev */
.reveal .controls .navigate-left,
.reveal .controls .navigate-up {
  padding: 5px 10px;
  min-width: 0;
}
.reveal .controls .navigate-left::before,
.reveal .controls .navigate-up::before { font-size: 12px; }
/* Next (right/down): larger like split-hero-skip */
.reveal .controls .navigate-right,
.reveal .controls .navigate-down {
  padding: 10px 20px;
}
.reveal .controls button::before {
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", sans-serif;
  font-weight: 900;
}
.reveal .controls .navigate-left::before { content: "\f060"; }   /* fa-arrow-left */
.reveal .controls .navigate-right::before { content: "\f061"; }  /* fa-arrow-right */
.reveal .controls .navigate-up::before { content: "\f062"; }    /* fa-arrow-up */
.reveal .controls .navigate-down::before { content: "\f063"; }  /* fa-arrow-down */
/* Custom labels (data-next-label, data-prev-label) — like split-hero-skip */
.reveal .controls .custom-nav-label { order: -1; }
.reveal .controls .navigate-right .custom-nav-label { margin-right: 4px; }
.reveal .controls .navigate-left .custom-nav-label { margin-left: 4px; order: 1; }
.reveal .controls button.has-custom-label { padding: 10px 20px; }
/* Responsive right: match split-hero-nav-wrap / split-hero-personal-btn breakpoints */
@media (max-width: 640px) {
  .reveal .controls { right: 20px !important; }
  .reveal .controls .navigate-right,
  .reveal .controls .navigate-down { padding: 8px 14px; font-size: 13px; }
}
@media (max-width: 400px) {
  .reveal .controls { right: 16px !important; gap: 8px; }
  .reveal .controls .custom-nav-label { display: none !important; }
  .reveal .controls .navigate-right,
  .reveal .controls .navigate-down { padding: 12px 14px; }
  .reveal .controls .navigate-right::before,
  .reveal .controls .navigate-down::before { font-size: 18px; }
}
.reveal .controls button:hover:not([disabled]),
.reveal .controls button.enabled:hover {
  background-color: rgba(var(--notes-tts-highlight-rgb, 59, 130, 246), 0.3);
}
/* Hide up/down when horizontal-only — show only prev (left) and next (right) */
.reveal:not(.has-vertical-slides) .controls .navigate-up,
.reveal:not(.has-vertical-slides) .controls .navigate-down {
  display: none !important;
}
/* Dark slides: foggy white glass, white text (like Ken slide) */
.reveal.has-dark-background .controls button,
.reveal:has(section.present.slide-dark) .controls button,
.reveal:has(section.present.intro-ken-split-slide) .controls button {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: white;
}
.reveal.has-dark-background .controls button:hover:not([disabled]),
.reveal.has-dark-background .controls button.enabled:hover,
.reveal:has(section.present.slide-dark) .controls button:hover:not([disabled]),
.reveal:has(section.present.slide-dark) .controls button.enabled:hover,
.reveal:has(section.present.intro-ken-split-slide) .controls button:hover:not([disabled]),
.reveal:has(section.present.intro-ken-split-slide) .controls button.enabled:hover {
  background-color: rgba(var(--notes-tts-highlight-rgb, 59, 130, 246), 0.4);
}

/* Icon circles: visible outline on light backgrounds */
.reveal .slide-body .rounded-full.bg-blue-100,
.reveal .slide-body .rounded-full.bg-indigo-100,
.reveal .slide-body .rounded-full.bg-purple-100,
.reveal .slide-body .rounded-full.bg-pink-100,
.reveal .slide-body .rounded-full.bg-emerald-100,
.reveal .slide-body .rounded-full.bg-sky-100,
.reveal .slide-body .rounded-full.bg-orange-100,
.reveal .slide-body .rounded-full.bg-teal-100,
.reveal .slide-body .rounded-full.bg-green-100,
.reveal .slide-body .rounded-full.bg-red-100,
.reveal .slide-body .rounded-full.bg-amber-100 {
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5);
}

/* Small icon boxes with "rounded" → show as circle with visible border */
.reveal .slide-body .w-8.h-8.rounded[class*="bg-"] {
  border-radius: 9999px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4);
}

/* Subtle float animations for slide 1 tech badges (out of phase, different rhythms) */
@keyframes float-subtle-1 {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes float-subtle-2 {
  0%, 100% { transform: translateY(0); }
  33% { transform: translateY(-8px); }
  66% { transform: translateY(-2px); }
}
@keyframes float-subtle-3 {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
.reveal .slide-body .float-badge-1 {
  animation: float-subtle-1 3.5s ease-in-out infinite;
}
.reveal .slide-body .float-badge-2 {
  animation: float-subtle-2 4s ease-in-out infinite;
  animation-delay: 1.2s;
}
.reveal .slide-body .float-badge-3 {
  animation: float-subtle-3 3s ease-in-out infinite;
  animation-delay: 0.6s;
}

/*
 * Tailwind CDN (dist/tailwind.min.css) may ship with a limited color palette,
 * so only blue/purple etc. work. Force all project-used Tailwind color
 * utilities under .slide-body so green, orange, cyan, slate work reliably.
 */
.reveal .slide-body .bg-blue-100 { background-color: #dbeafe !important; }
.reveal .slide-body .bg-blue-200 { background-color: #bfdbfe !important; }
.reveal .slide-body .text-blue-800 { color: #1e40af !important; }
.reveal .slide-body .border-blue-200 { border-color: #bfdbfe !important; }

.reveal .slide-body .bg-purple-100 { background-color: #f3e8ff !important; }
.reveal .slide-body .bg-purple-200 { background-color: #e9d5ff !important; }
.reveal .slide-body .text-purple-800 { color: #6b21a8 !important; }
.reveal .slide-body .border-purple-200 { border-color: #e9d5ff !important; }

.reveal .slide-body .bg-green-100 { background-color: #dcfce7 !important; }
.reveal .slide-body .bg-green-200 { background-color: #bbf7d0 !important; }
.reveal .slide-body .text-green-400 { color: #4ade80 !important; }
.reveal .slide-body .text-green-800 { color: #166534 !important; }
.reveal .slide-body .border-green-200 { border-color: #bbf7d0 !important; }
.reveal .slide-body .border-green-500 { border-color: #22c55e !important; }

.reveal .slide-body .bg-orange-100 { background-color: #ffedd5 !important; }
.reveal .slide-body .bg-orange-200 { background-color: #fed7aa !important; }
.reveal .slide-body .text-orange-800 { color: #9a3412 !important; }
.reveal .slide-body .border-orange-200 { border-color: #fed7aa !important; }

.reveal .slide-body .bg-cyan-100 { background-color: #cffafe !important; }
.reveal .slide-body .bg-cyan-200 { background-color: #a5f3fc !important; }
.reveal .slide-body .text-cyan-800 { color: #155e75 !important; }
.reveal .slide-body .border-cyan-200 { border-color: #a5f3fc !important; }

.reveal .slide-body .bg-slate-100 { background-color: #f1f5f9 !important; }
.reveal .slide-body .bg-slate-200 { background-color: #e2e8f0 !important; }
.reveal .slide-body .text-slate-700 { color: #334155 !important; }
.reveal .slide-body .border-slate-300 { border-color: #cbd5e1 !important; }

/* ============== Full-screen (responsive) slides ==============
 * Add class "full-screen" to a section to make it fill the viewport when active.
 * js/config.js sets the section to 100% and transform none so it resizes with the viewport.
 */
.reveal .slides section.full-screen.present {
  margin: 0 !important;
  width: 100% !important;
  height: 100% !important;
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  inset: 0 !important;
  transform: none !important;
  box-sizing: border-box;
}
.reveal .slides section.full-screen .slide-container,
.reveal .slides section.full-screen > div {
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box;
}