/* =============================================================
   LEARNLLM.NL — TUTOR-LESSON.CSS
   Wordt geladen op Tutor LMS les- én quizpagina's.
   Laden via functions.php met is_singular('lesson') || is_singular('tutor_quiz')
   ============================================================= */


/* -----------------------------------------------------------------
   1. ALINEA-SPACING
----------------------------------------------------------------- */
.tutor-lesson-wrapper p {
  margin: 0 0 1.4em !important;
  line-height: 1.7;
  color: rgba(0,0,0,0.82);
}


/* -----------------------------------------------------------------
   2. TABELOPMAAK
   Beheerd in global.css sectie M (sitewide tabel-architectuur).
   Tabellen in .tutor-lesson-wrapper krijgen daar hun styling, plus
   automatische .ll-table-wrap via de PHP-snippet learnllm_wrap_tables
   die op tutor_lesson_content draait.
----------------------------------------------------------------- */


/* -----------------------------------------------------------------
   3. HEADER-BALK (topbalk)
----------------------------------------------------------------- */
.tutor-course-topic-single-header.tutor-single-page-top-bar {
  background-color: #2D3436 !important;
  border: none !important;
  border-bottom: none !important;
  min-height: 60px !important;
  display: flex !important;
  align-items: center !important;
}

.tutor-course-topic-single-header.tutor-single-page-top-bar,
.tutor-course-topic-single-header.tutor-single-page-top-bar *:not(.tutor-btn) {
  color: #ffffff !important;
}


/* -----------------------------------------------------------------
   4. SIDEBAR
----------------------------------------------------------------- */

/* Sidebar wrapper: crème achtergrond, geen borders */
.tutor-course-single-sidebar-wrapper,
.tutor-lesson-sidebar,
.tutor-sidebar {
  background-color: #FFF9F5 !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
  border: none !important;
  outline: none !important;
  overflow: hidden !important;
}

.tutor-course-single-sidebar-wrapper > *:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Content-wrapper: geen gap */
.tutor-course-single-content-wrapper.tutor-spotlight-mode {
  gap: 0 !important;
  border: none !important;
}

/* "Cursus inhoud" header: zelfde hoogte en kleur als topbalk */
.tutor-course-single-sidebar-title {
  background-color: #2D3436 !important;
  display: flex !important;
  align-items: center !important;
  height: 66px !important;
  min-height: unset !important;
  max-height: 66px !important;
  padding: 0 16px !important;
  margin: 0 !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
}

.tutor-course-single-sidebar-title span {
  color: #ffffff !important;
}

/* Quiz-pagina fix: op quizpagina's zit de topbalk genest in
   #tutor-single-entry-content (flex-direction: column) waardoor
   de parent-flex stretch niet werkt zoals op lespagina's.
   Padding weghalen en hoogte matchen aan sidebar-title (66px). */
.tutor-quiz-single-entry-wrap > .tutor-course-topic-single-header.tutor-single-page-top-bar {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  height: 66px !important;
  min-height: 66px !important;
  box-sizing: border-box !important;
}

/* Module-titels */
.tutor-course-single-sidebar-wrapper .tutor-accordion-item-header,
.tutor-lesson-sidebar .tutor-accordion-item-header {
  background-color: #FFF9F5 !important;
  color: #2D3436 !important;
}

.tutor-course-single-sidebar-wrapper .tutor-accordion-item-header:hover {
  color: #FF8066 !important;
}

.tutor-course-single-sidebar-wrapper .tutor-accordion-item-header.is-active,
.tutor-course-single-sidebar-wrapper .tutor-accordion-item-header.is-active * {
  color: #FF8066 !important;
}

/* Les-items */
.tutor-course-single-sidebar-wrapper .tutor-accordion-item-body li,
.tutor-course-single-sidebar-wrapper .tutor-accordion-item-body a {
  color: #2D3436 !important;
  background-color: transparent !important;
}

.tutor-course-single-sidebar-wrapper .tutor-accordion-item-body li.is-active,
.tutor-course-single-sidebar-wrapper .tutor-accordion-item-body li.is-active a,
.tutor-course-single-sidebar-wrapper .tutor-accordion-item-body a.is-active {
  color: #FF8066 !important;
}

/* Checkboxes: coral */
.tutor-form-check-input.tutor-form-check-circle:checked,
.tutor-course-single-sidebar-wrapper input[type="checkbox"]:checked {
  background-color: #FF8066 !important;
  border-color: #FF8066 !important;
  accent-color: #FF8066 !important;
}


/* -----------------------------------------------------------------
   5. NAVIGATIETABS IN DE LES
----------------------------------------------------------------- */
.tutor-course-spotlight-wrapper .tutor-course-spotlight-nav.tutor-nav {
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
}

.tutor-course-spotlight-wrapper .tutor-course-spotlight-nav.tutor-nav li a.tutor-nav-link {
  color: #2D3436 !important;
  border-bottom: 3px solid transparent !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding-bottom: 10px !important;
}

.tutor-course-spotlight-wrapper .tutor-course-spotlight-nav.tutor-nav li a.tutor-nav-link span {
  color: inherit !important;
  text-decoration: none !important;
  border: none !important;
}

.tutor-course-spotlight-wrapper .tutor-course-spotlight-nav.tutor-nav li a.tutor-nav-link.is-active {
  color: #FF8066 !important;
  border-bottom-color: #FF8066 !important;
}

.tutor-course-spotlight-wrapper .tutor-course-spotlight-nav.tutor-nav li a.tutor-nav-link:hover {
  color: #FF8066 !important;
  border-bottom-color: #FF8066 !important;
}

.tutor-course-spotlight-wrapper .tutor-course-spotlight-nav.tutor-nav li a.tutor-nav-link::after,
.tutor-course-spotlight-wrapper .tutor-course-spotlight-nav.tutor-nav li a.tutor-nav-link::before {
  display: none !important;
}

.tutor-course-spotlight-nav {
  --tutor-border-color: rgba(0,0,0,0.08) !important;
  --tutor-color-brand: #FF8066 !important;
  --tutor-color-secondary: #2D3436 !important;
}


/* -----------------------------------------------------------------
   6. NAVIGATIE-KNOPPEN IN DE TOPBALK
   Terug-knop (mobiel) en sidebar-toggle (desktop).
   Hover: coral achtergrond zodat het icoon zichtbaar blijft.
----------------------------------------------------------------- */
a.tutor-iconic-btn.tutor-d-flex.tutor-d-xl-none {
  color: #ffffff !important;
  background: transparent !important;
  border: none !important;
}

a.tutor-iconic-btn.tutor-d-flex.tutor-d-xl-none:hover {
  background: #FF8066 !important;
  color: #ffffff !important;
  border-radius: 8px !important;
}

a.tutor-course-topics-sidebar-toggler.tutor-iconic-btn,
.tutor-course-topic-single-header a.tutor-iconic-btn-secondary {
  color: #ffffff !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

a.tutor-course-topics-sidebar-toggler.tutor-iconic-btn:hover,
.tutor-course-topic-single-header a.tutor-iconic-btn-secondary:hover {
  background-color: #FF8066 !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}


/* -----------------------------------------------------------------
   7. "MARKEER ALS AFGEROND" KNOP
----------------------------------------------------------------- */
.tutor-single-page-top-bar .tutor-btn-primary,
.tutor-single-page-top-bar .tutor-mark-as-complete-button,
.tutor-single-page-top-bar [class*="complete"] {
  background-color: #FF8066 !important;
  border-color: #FF8066 !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  box-shadow: 0 6px 16px rgba(255,128,102,.25) !important;
  transition: transform .15s ease, box-shadow .15s ease !important;
}

.tutor-single-page-top-bar .tutor-btn-primary:hover,
.tutor-single-page-top-bar .tutor-mark-as-complete-button:hover,
.tutor-single-page-top-bar [class*="complete"]:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 22px rgba(255,128,102,.30) !important;
}


/* -----------------------------------------------------------------
   8. VORIGE / VOLGENDE KNOPPEN
----------------------------------------------------------------- */
.tutor-course-topic-single-footer .tutor-btn-secondary,
.tutor-single-course-content-prev .tutor-btn,
.tutor-single-course-content-next .tutor-btn {
  background-color: #FF8066 !important;
  border-color: #FF8066 !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  box-shadow: 0 6px 16px rgba(255,128,102,.18) !important;
  transition: transform .15s ease, box-shadow .15s ease !important;
  text-decoration: none !important;
}

.tutor-course-topic-single-footer .tutor-btn-secondary:hover,
.tutor-single-course-content-prev .tutor-btn:hover,
.tutor-single-course-content-next .tutor-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 22px rgba(255,128,102,.25) !important;
  color: #ffffff !important;
}

.tutor-single-course-content-prev .tutor-btn span,
.tutor-single-course-content-next .tutor-btn span {
  color: #ffffff !important;
}


/* -----------------------------------------------------------------
   9. QUIZ-KNOPPEN
----------------------------------------------------------------- */
#tutor-start-quiz-btn,
.tutor-quiz-btn-group button[type="submit"],
.tutor-quiz-btn-group input[type="submit"] {
  background-color: #FF8066 !important;
  border-color: #FF8066 !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  box-shadow: 0 6px 16px rgba(255,128,102,.20) !important;
  transition: transform .15s ease, box-shadow .15s ease !important;
}

#tutor-start-quiz-btn:hover,
.tutor-quiz-btn-group button[type="submit"]:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 22px rgba(255,128,102,.28) !important;
}

/* "Sla Quiz over" — secundaire coral outlined knop.
   Tutor LMS geeft deze button .tutor-btn-md (kleiner formaat).
   Padding en font-size overschrijven zodat hij even groot is
   als de primaire "Begin quiz" knop. */
button.tutor-btn.tutor-btn-ghost.skip-quiz-btn,
.tutor-quiz-btn-group button.tutor-btn-ghost.skip-quiz-btn {
  background: transparent !important;
  background-color: transparent !important;
  color: #FF8066 !important;
  border: 2px solid #FF8066 !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  padding: 10px 24px !important;
  line-height: 1.5 !important;
  box-shadow: none !important;
  transition: background .15s ease, box-shadow .15s ease, transform .15s ease !important;
}

button.tutor-btn.tutor-btn-ghost.skip-quiz-btn:hover,
.tutor-quiz-btn-group button.tutor-btn-ghost.skip-quiz-btn:hover {
  background: rgba(255,128,102,0.08) !important;
  background-color: rgba(255,128,102,0.08) !important;
  border-color: #FF8066 !important;
  color: #FF8066 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(255,128,102,.15) !important;
}