/* LAYOUT DO CURSO */
.course-container {
    display: flex;
    min-height: 100vh;
    background: #f8f9fa;
}

/* MENU LATERAL */
#sidebar {
    width: 260px;
    background: #e9ecef;
    padding: 20px 0;
    height: calc(100vh - 80px);
    position: fixed;
    top: 80px; /* abaixo do cabeçalho */
    left: 0;
    overflow-y: auto;
    border-right: 1px solid #ccc;
}

#sidebar h4 {
    padding-left: 20px;
    font-size: 18px;
    font-weight: bold;
}

#sidebar a {
    display: block;
    padding: 10px 20px;
    color: #333;
    text-decoration: none;
    border-left: 4px solid transparent;
}

#sidebar a.active {
    background: #009970;
    color: white;
    border-left: 4px solid #007758;
}

#sidebar a:hover {
    background: #d1dde2;
}

   /* ÁREA PRINCIPAL */
#main-content {
  margin-left: 260px;
  padding: 40px;
  flex: 1;
}

/* vídeo responsivo com proporção 16:9 */
.ratio-16x9 iframe,
iframe#lessonVideo {
  width: 100%;
  height: 100%;
  border-radius: 12px;
}

/* FOOTER alinhado com conteúdo principal */
footer {
  margin-left: 260px;
  width: calc(100% - 260px);
  margin-top: 40px;
}

/* COR AZUL DA AULA ATIVA */
#sidebar a.active {
  background: #004aad;
  color: white;
  border-left: 4px solid #003d8d;
}

/* HOVER */
#sidebar a:hover {
  background: #d1dde2;
}


/* Responsivo: remove sidebar fixo em telas pequenas */
@media (max-width: 992px) {
  #sidebar { position: relative; width: 100%; height: auto; top: 0; border-right: none; }
  #main-content, footer { margin-left: 0; width: 100%; }
}