/* ======================================================
   TutorLMS + H5P: Full CSS (cleaned + safer)
   Paste into: WP Admin -> Appearance -> Customize -> Additional CSS
====================================================== */

/* === Debug badge (optional) === */
html:before{
  content:"Tutor CSS ✓";
  position:fixed;
  bottom:6px;
  right:6px;
  font:11px monospace;
  background:#000;
  color:#0f0;
  padding:2px 6px;
  z-index:999999;
  opacity:0.2;
  pointer-events:none;
}

/* ======================================================
   TutorLMS Course Spotlight: full width for H5P embeds
====================================================== */

/* Kill the 66% column */
#tutor-course-spotlight-overview .tutor-col-xl-8,
#tutor-course-spotlight-overview .tutor-col-lg-8,
#tutor-course-spotlight-overview .tutor-col-md-8{
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}

/* Remove container/col gutters that create side shrink */
#tutor-course-spotlight-overview .tutor-container{
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#tutor-course-spotlight-overview [class*="tutor-col-"]{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Iframe: fill the column */
#tutor-course-spotlight-overview iframe[src*="action=h5p_embed"]{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  border: 0 !important;
}

/* Keep wrapper from adding spacing */
#tutor-course-spotlight-overview .tutor-lesson-wrapper p{
  margin: 0 !important;
}

/* If you still want a minimum height, use min-height not fixed height */
#tutor-course-spotlight-overview iframe[src*="action=h5p_embed"]{
  min-height: 800px !important;
  height: auto !important;
}
@media (max-width: 900px){
  #tutor-course-spotlight-overview iframe[src*="action=h5p_embed"]{ min-height: 600px !important; }
}
@media (max-width: 600px){
  #tutor-course-spotlight-overview iframe[src*="action=h5p_embed"]{ min-height: 500px !important; }
}

/* ======================================================
   Tutor Lesson Player: remove left/right offsets next to sidebar
====================================================== */

/* Remove padding on common lesson content wrappers */
.tutor-lesson-content-area,
.tutor-lesson-content,
.tutor-lesson-wrapper,
.tutor-lesson-content-wrapper,
.tutor-course-single-content-wrapper,
.tutor-single-page-content-wrapper{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* If Tutor uses container/row/cols inside the player, kill gutters too */
.tutor-lesson-content-area .tutor-container,
.tutor-lesson-content-area .tutor-row,
.tutor-lesson-content-area [class*="tutor-col-"]{
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100% !important;
}

/* Make embedded H5P iframes fill the content pane */
.tutor-lesson-content-area iframe[src*="action=h5p_embed"],
.tutor-lesson-content iframe[src*="action=h5p_embed"]{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  border: 0 !important;
}

/* Remove common WP editor spacing around embeds (no :has) */
.tutor-lesson-content-area p,
.tutor-lesson-content p{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ======================================================
   H5P iframe containment model (SAFER VERSION)
   Key change: no global max-width clamp on every element
====================================================== */

html.h5p-iframe,
html.h5p-iframe body{
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

/* Apply box-sizing without forcing max-width */
html.h5p-iframe,
html.h5p-iframe *{
  box-sizing: border-box;
}

/* Clamp only known outer wrappers */
html.h5p-iframe .h5p-content,
html.h5p-iframe .h5p-container,
html.h5p-iframe .h5p-column,
html.h5p-iframe .h5p-row,
html.h5p-iframe .h5p-row-wrapper,
html.h5p-iframe .h5p-inner{
  width: 100%;
  max-width: 100%;
}

/* Prevent inner horizontal scrolling caused by overflow */
html.h5p-iframe .h5p-content,
html.h5p-iframe .h5p-container{
  overflow-x: clip;
}

/* Only the iframe document scrolls vertically */
html.h5p-iframe body{
  overflow-y: auto;
}

/* ======================================================
   Optional: YouTube wrapper safety inside H5P
   Helps when an inner div is given a fixed pixel width
====================================================== */

html.h5p-iframe .h5p-video,
html.h5p-iframe .h5p-video > div,
html.h5p-iframe .h5p-video iframe{
  max-width: 100%;
}

/* End */