/* Hide unnecessary Drupal page elements */
.course-focus-mode header,
.course-focus-mode footer,
.course-focus-mode .region--sidebar,
.course-focus-mode .region--content-above,
.course-focus-mode .region--content-below,
.course-focus-mode .page-title,
.course-focus-mode .breadcrumb {
  display: none !important;
}

/* Expand the course layout */
.course-focus-mode .sidebar-grid {
  display: block !important;
  grid-template-columns: 1fr !important;
}

.course-focus-mode .site-main,
.course-focus-mode #content,
.course-focus-mode #block-olivero-content {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  grid-column: 1 / -1 !important;
}

/* Always-visible Full Screen button */
#course-focus-toggle {
  position: fixed !important;
  top: 16px !important;
  right: 16px !important;
  z-index: 2147483647 !important;

  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;

  background: #1769aa !important;
  color: #ffffff !important;
  padding: 12px 20px !important;
  border: none !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  box-shadow: 0 3px 12px rgba(0,0,0,0.2);
}

#course-focus-toggle:hover {
  background: #0d4d80 !important;
}



/* Allow H5P containers to use their natural height */
.h5p-content,
.h5p-container {
  max-width: 100%;
  box-sizing: border-box;
}

/* Prevent H5P media from overflowing */
.h5p-content video,
.h5p-content iframe {
  max-width: 100%;
}

/* Avoid clipping H5P activities in focus mode */
.course-focus-mode .h5p-content,
.course-focus-mode .h5p-container {
  overflow: visible;
}